Executive සමුදාය මම හතර සති හතරක් අර්ධ කාලීන (විශේෂයෙන් පැය 80 ක් විය හැකිය) 40+ කොටස් සහිත සම්පූර්ණ ප්රතික්රියාකාරී UI framework ගොඩනැගීම, රවුටරය සහ අන්තර්ක්රීය වෙබ් අඩවිය පමණක් භාවිතා කිරීම සඳහා ප්රයෝජනවත්, එය LLM විසින් නිර්මාණය කරන ලද කේතය භාවිතා කිරීම, එය පැහැදිලිය. . LLMs can produce quality code—but like human developers, they need the right guidance ප් රධාන සොයාගැනීම් On Code Quality: නිශ්චිත කාර්යයන් පිරිසිදු පළමු ගමන් කේතය ලබා දෙයි දුර්වල හෝ සුවිශේෂී අවශ්යතා නුසුදුසු ක්රියාත්මක කිරීම් නිර්මාණය කරයි කාලය තුළදී කේතය සාර්ථකව මනාප කිරීමක් නොමැතිව විනාශ වෙනවා. විශ්වාසදායකත්වය වැඩි දියුණු කිරීම සඳහා ඉල්ලූ විට LLMs ආරක්ෂාකාරීව over-engineer On The Development Process: කාර්යය විශාල වන විට "වැරදිව සඳහන් කිරීම" අමාරුයි දිගුකාලීන ප්රවේශය ("සංස්කරණය") වඩා හොඳ ප්රතිඵල නිෂ්පාදනය කරයි, කෙසේ වෙතත් සමහර විට පොළොවීය හෝ අතිශයින් පුළුල් ස්ථාවරයක් ඇති කරයි. Multiple LLM ප්රවේශයන් (විචීචන ආකෘති) වටිනා ආකෘති සමාලෝචන සහ debug උදව් ලබා දෙයි උදාහරණයක් ලෙස Bau.js හෝ Lightview වැනි ව්යුහය භාවිතා කිරීම, සීමා නොමැති සංවර්ධනයකට වඩා හොඳින් මඟහැරීම ප්රතික්ෂේප කරයි. Formal metrics objectively identify and guide code complexity ඉවත් කිරීම ප්රතිඵලයක් වශයෙන්: බොහෝ ආකාරයකින් LLMs ඔවුන් පුහුණු කරන සාමාන්ය මිනිසුන් මෙන් හැසිරෙනු ඇත - ඔවුන් සමාන වැරදි සිදු, නමුත් වඩාත් වේගයෙන් හා විශාල ප්රමාණයෙන්. අභියෝගය සති හතරකට පෙර, මම සංවර්ධන සමාජය තුළ උණුසුම්ව සාකච්ඡා කර ඇති ප්රශ්නයකට උත්තර දෙන්න පටන් ගත්තා: LLMs සැබෑ, නිෂ්පාදන ගුණාත්මක කේතයක් නිර්මාණය කළ හැකිද? ක්රීඩා යෙදුම නොවේ සරල CRUD යෙදුම නොවේ සම්පූර්ණ, නවීන ප්රතික්රියාකාරී UI framework සමග බොහෝ පෙර ඉදිකිරීම් කොටස්, router සහ සහාය වෙබ් අඩවිය සමග: JavaScript, CSS සහ HTML දහස් ගණනක් මතකය, කාර්ය සාධනය සහ ආරක්ෂක සැලකිල්ල වෘත්තීය UX සහ සංවර්ධක අත්දැකීම් මම තෝරා ගත්තේ ගොඩනැගීම (අපේ )—Bau.js, HTMX සහ Juris.js හොඳම ක්රියාකාරකම් එකතු කරන ප්රතික්රියාකාරී UI framework.The constraint: 100% Anthropic's Claude (Opus 4.5, Sonnet 4.5) සහ Google's Gemini 3 Pro (Flash මම ආරම්භ කරන විට නිකුත් නොකළේ). Lightview ආලෝකය.dev ප්රශ්න වලින් ඇරඹීම, කේතය නොවේ මම Claude Opus සමඟ පටන් ගත්තේ: "මම HTMX, Bau, සහ Juris එකතු කරන ප්රතික්රියාකාරී UI පුස්තකාලයක් නිර්මාණය කිරීමට කැමතියි. හයිප්රෙමිඩියා සඳහා, මම විශේෂිත ප්රතිපත්තිය නාමයන්ට කැමැත්තක් නැත - හුදෙක් වැඩි දියුණු කරන හැසිරීම්. මම HTML හි string literal processing, SPA router, ස්වයංක්රීය custom element creation සමග UI කොටස් පුස්තකාලය, SEO ක්රියාකාරී යෙදුම් කිසිදු අමතර වැඩකින් තොරව, සහ පරිශීලකයන් ප්රවර්ධනය කිරීමට හා අධ්යාපනය කිරීමට වෙබ් අඩවිය අවශ්යයි. "මම HTMX, Bau, සහ Juris එකතු කරන ප්රතික්රියාකාරී UI පුස්තකාලයක් නිර්මාණය කිරීමට කැමතියි. හයිප්රෙමිඩියා සඳහා, මම විශේෂිත ප්රතිපත්තිය නාමයන්ට කැමැත්තක් නැත - හුදෙක් වැඩි දියුණු කරන හැසිරීම්. මම HTML හි string literal processing, SPA router, ස්වයංක්රීය custom element creation සමග UI කොටස් පුස්තකාලය, SEO ක්රියාකාරී යෙදුම් කිසිදු අමතර වැඩකින් තොරව, සහ පරිශීලකයන් ප්රවර්ධනය කිරීමට හා අධ්යාපනය කිරීමට වෙබ් අඩවිය අවශ්යයි. මුලින්ම ක්ලෝඩ්ට කේතය ඇතුලත් කරන්න බැරි වුණා.එයා ඇහුවා : dozens of clarifying questions TypeScript or vanilla JavaScript? ස්ටයිල් කිරීම සඳහා මොන UI කොටස් පුස්තකාලයද? (එයට ප් රයෝජන / අසාධාරණයන් සහිත විකල්ප තිබේ) HTMX යනු කුමක්ද? ගෘහස්ථ ප් රශංසා ද? පාරිභෝගික ව් යාපෘතිය ? කෙසේ වෙතත්, සමහර වෙලාවට මම එය සූදානම් විය යුතු බව මම හිතුවාට පෙර කේතය ලිවීමට පටන් ගත්තේය. සොයා ගැනීම: LLMs පෙරදිග කේතය නිෂ්පාදනය සඳහා ශක්තිමත් ප්රවේශයක් ඇත. තවදුරටත් කේතය ලබා නොගන්නා විට පවා, ඔවුන් කිහිපයක් අන්තර්ක්රියා කිරීමෙන් පසුව අමතක කර ඇත. මෙය සියලුම ආකෘති-Claude, Gemini, GPT. ඔවුන් විශේෂයෙන් ප්රවේශයක් ඇති බව පෙනේ, උදාහරණ කේතය ලබා දෙන විට, උදාහරණ ප්රවේශයක් ලෙස නොව ප්රවේශයක් ලෙස ප්රශ්න සමග ඉදිරිපත් කරන විට පවා. තවදුරටත් කේතය සකස් නොකළ යුතු බව මතක් කරන විට පවා, ඔවුන් කිහිපයක් සන්නිවේදන පසු අමතක කරයි.මේක සියලුම ආකෘති -Claude, Gemini, GPT. උදාහරණ කේතය දීමනා කරන විට, උදාහරණ ප්රශ්න වලට වඩා ප්රවේශ ඉල්ලීම් ලෙස ඉදිරිපත් කරන විට පවා, ඔවුන් විශේෂයෙන් නිර්මාණය කිරීමේ ක්රියාවලිය ආරම්භ කිරීමට ප්රවේශ කර ඇති බව පෙනේ. Finding: LLMs have a strong bias toward premature code generation. උදාහරණයක්: ඔබ සූදානම් වීමට පෙර LLM කේතය නිර්මාණය කිරීමට පටන් ගන්නේ නම්, වහාම සම්පූර්ණ කිරීම අවලංගු කරන්න සහ නැවත යොමු කරන්න: "එහෙත් කේතය නිර්මාණය නොකරන්න. ඔබට තවත් ප්රශ්න තිබේද?" ඔබ මෙම ක්රම කිහිප වතාවක් නැවත නැවත කිරීමට අවශ්ය විය හැක LLM "අපිට අමතක" සහ කේතය නිර්මාණය කිරීමට ආපසු ගමන් කරයි. Antigravity හෝ වෙනත් IDE හි සමාන ක්රමයේ වේගවත් ක්රමයේ ප්රවේශය ප්රවේශය මෙම සඳහා උපකාරී විය යුතුය, නමුත් එය නැවත නැවත භාවිතා කිරීම අහිතකර වේ. වඩා හොඳ විසඳුමක් නම්: පරිශීලකයා ප්රශ්නයක් ඇසේ නම්, LLM ඔවුන් කේතය නොව සාකච්ඡා කිරීමට අවශ්ය බව අනුමත කළ යුතුය. ඔබ සූදානම් වීමට පෙර LLM කේතය නිර්මාණය කිරීමට පටන් ගන්නේ නම්, වහාම සම්පූර්ණ කිරීම අවලංගු කරන්න සහ නැවත යොමු කරන්න: "කොඩ් එකක් තවමත් නිර්මාණය නොකරන්න. ඔබට තවත් ප්රශ්න තිබේද?" : පරිශීලකයා ප්රශ්නයක් ඇසුවහොත්, LLM ඔවුන් කේතය නොව සාකච්ඡා කිරීමට අවශ්ය බව අනුමත කළ යුතුය. Guidance: A better solution would be පැයකට පසු ක්ලෝඩ් අන්තිමේදී කිව්වා: "අපිට තවත් ප් රශ්න නැහැ.ඔබට අවශ් යද මම ක්රියාත්මක කිරීමේ සැලැස්මක් නිර්මාණය කරන්න, බොහෝ පියවර ඇති නිසා?" ප් රතිඵලදායී සැලැස්ම සම්පූර්ණ විය - පරීක්ෂා පෙට්ටිය, සැලසුම් තීරණ, සහ සැලකිය යුතු කරුණු සහිත විස්තරාත්මක Markdown ගොනුවක්: ප්රතික්රියාකාරී පුස්තකාලය 40+ UI කොටස් routing පද්ධතිය වෙබ් අඩවිය ... කෙසේ වෙතත් වෙබ් අඩවිය අවධානය අඩු කර ඇත - මම පසුව විසඳා ගනු ලැබේ මම මෙම සැලැස්ම කිසිදු ප්රමාණවත් වෙනස්කම් සිදු කළේ නැහැ, වෙබ් අඩවිය ප්රතිපත්ති පැහැදිලි කිරීම සහ එක් ප්රධාන විශේෂාංගයක් එකතු කිරීම හැර, සංවර්ධනය අවසන් වන විට ප්රකාශන සිදුවීම්. ඉදිකිරීම් ඇරඹේ සැලැස්ම සකස් කිරීමෙන්, මම Opus මත මගේ ටෝකන් සීමාව ඉටු කළා. කිසිදු ගැටලුවක් නැත - මම Gemini 3 (High) වෙත මාරු කළා, සංවාදය සහ සැලැස්ම ගොනුවෙන් සම්පූර්ණ සබැඳි තිබුණා. විනාඩි කීපයක් ඇතුළත Gemini Generated - core reactivity යන්ත්රය - දෙකක් උදාහරණ ගොනු සමග: "Hello, World!" ආදර්ශ දෙකම Bau වැනි සංචිතය සහ vDOM වැනි සංචිතය පෙන්වන. lightview.js ඊට පස්සේ මම වැරැද්දක් කළා. "Spa ලෙස වෙබ් අඩවිය ගොඩනගා ගන්න," මම කිව්වා, Lightview භාවිතා කිරීමට නිශ්චිත නොකර. මම ආපසු පැමිණි විට, මගේ බ්රවුසරය තුළ ක්රියාත්මක ලස්සන වෙබ් අඩවිය තිබේ.මම කේතය දිහා බැලුවා මගේ හදවත වැටිලා: . React with Tailwind CSS React + Tailwind යනු SPAs සඳහා අතිශයින්ම පොදු ආකෘතියකි.Lightview භාවිතා කිරීමට පැහැදිලි මාර්ගෝපදේශයක් නොමැතිව - මම just built - මෙම LLM පුහුණු දත්තවල බොහෝ විට දැක ඇති දේට උදාහරණයක්. React + Tailwind යනු SPAs සඳහා අතිශයින්ම පොදු ආකෘතියකි.Lightview භාවිතා කිරීමට පැහැදිලි මාර්ගෝපදේශයක් නොමැතිව - මම just built - මෙම LLM පුහුණු දත්තවල බොහෝ විට දැක ඇති දේට උදාහරණයක්. වඩාත් නරකයි, මම Lightview සමඟ එය නැවත ගොඩනඟා ගැනීමට ඉල්ලා සිටියදී, "පළමුවෙන් පවතින වෙබ් අඩවිය ඉවත් කරන්න." මාර්ගෝපදේශය: LLM නැවත වැඩ කිරීමට ඉල්ලා සිටින විට, ප්රවේශය පිළිබඳ පැහැදිලි වන්න: දැනට පවතින වෙබ් අඩවිය ඉවත් කිරීම සහ Lightview භාවිතා කිරීමෙන් මුල සිට නැවත ගොඩනැගීම vs Modify the existing site to use Lightview මාර්ගෝපදේශය: LLM නැවත වැඩ කිරීමට ඉල්ලා සිටින විට, ප්රවේශය පිළිබඳ පැහැදිලි වන්න: දැනට පවතින වෙබ් අඩවිය ඉවත් කිරීම සහ Lightview භාවිතා කිරීමෙන් මුල සිට නැවත ගොඩනැගීම vs Modify the existing site to use Lightview පළවෙනි එක බොහෝ විට විශාල වෙනස්කම් සඳහා වඩා ටෝකන්-නිදායක වේ. දෙවෙනි එක ඉලක්ක කරන ලද නිවැරදි කිරීම් සඳහා වඩා හොඳය.LLM ස්වයංක්රීයව ඵලදායී මාර්ගය තෝරා නොගනී-ඔබ එය යොමු කළ යුතුය. The Tailwind Surprise එක් ප්රශ්නයක් මට අතුරුදහන් වුණා.Claude Lightview අමුද්රව්ය භාවිතා කරමින් වෙබ් අඩවිය නිර්මාණය කිරීමෙන් පසු, මම එය තවමත් Tailwind CSS පන්ති සම්පූර්ණ විය. "ඔව්," ක්ලෝඩ් ක්රියාත්මකව පැහැදිලි කළේය, "ඔබ UI අමුද්රව්ය සඳහා DaisyUI තෝරාගෙන, සහ DaisyUI Tailwind අවශ්ය වේ. සාධාරණ මාතෘකාවක් - නමුත් මම එය සමඟ අසාධාරණ විය.මම සිමානීය CSS පන්ති කැමතියි සහ වෙබ් අඩවිය ප්රධාන CSS ප්රවේශයන් භාවිතා කිරීමට අවශ්ය. සොයා ගැනීම: LLMs සාධාරණ නමුත් සමහර විට අකමැති නිගමන කරයි. ඔබ ආකර්ෂණය ඇති තාක්ෂණය සඳහන් කරන විට, LLMs ව්යාපෘතියේ සම්බන්ධ කොටස් සඳහා එම විකල්පය පුළුල් කරනු ඇත. When you specify one technology that has dependencies, LLMs will extend that choice to related parts of the project. They're being logical, but they can't read your mind about preferences. Finding: LLMs make reasonable but sometimes unwanted inferences. උදාහරණයක් ලෙස, "මම DaisyUI අමුද්රව්ය අවශ්ය, නමුත් වෙනත් තැනක පමණක් Tailwind භාවිතා කරන්න." Be explicit about what you don't want, not just what you do want. e.g. "I want DaisyUI components, but only use Tailwind for them not elsewhere." If you have strong preferences about architectural approaches, state them upfront. Guidance: මම ප්ලාස්ටික් CSS සහ සංකේත පන්ති භාවිතා කරමින් වෙබ් අඩවිය නැවත ලිවීමට ක්ලෝඩ් ඉල්ලා සිටියා.මම නිර්මාණයට කැමැත්තෙමි හා ගොනු ඉවත් කිරීමට අවශ්ය නැහැ, එබැවින් නැවත වරක් මම බොහෝ ගොනු අතුරුදහන් වන නිසා බොහෝ ටොක්න් භාවිතා කරන refactor හරහා පීඩාවට පත් විය.මම නැවත වරක් ටොක්න් අතුරුදහන් වී ඇති අතර GPT-OSS bit සංකේත වැරදිවලට පහර දුන් අතර වැඩ කිරීමට තවත් IDE වෙත මාරු විය. When one LLM struggles with your codebase, switch back to one that was previously successful. Different models have different "understanding" of your project context. And, if you are using Antigravity when you run out of tokens, you can switch to MS Visual Code in the same directory and use a light GitHub Copilot account with Claude. Antigravity is based on Visual Code, so it works in a very similar manner. Guidance: එක් LLM ඔබේ කේත පදනම සමඟ සටන් කරන විට, පෙර සාර්ථක වූ එකක් වෙත නැවත මාරු කරන්න. විවිධ ආකෘති ඔබේ ව්යාපෘති කොන්දේසි ගැන වෙනස් "සැලකිල්ල" ඇත. සහ, ඔබ ටොක්ටොන් අහිමි වූ විට ඔබ Antigravity භාවිතා කරන්නේ නම්, ඔබ එකම ලිපිනය තුළ MS Visual Code වෙත මාරු කළ හැකි අතර Claude සමඟ පහසු GitHub Copilot ගිණුමක් භාවිතා කළ හැකිය. Antigravity Visual Code මත පදනම් වේ, එබැවින් එය ඉතා සමාන ආකාරයෙන් ක්රියා කරයි. Guidance: Iterative නැටුම ඊළඟ සති කිහිපය තුළ, මම වෙබ් අඩවියක් ගොඩනැගීම සහ අමුද්රව්ය පරීක්ෂා / ඉටේට් කිරීම සඳහා වැඩ කළා, මම ටෝකන් සීමා ආපසු සකස් කිරීම ලෙස විවිධ LLMs හරහා වැඩ කළා. Claude ආකෘති ප්රශ්න මත විශිෂ්ට විය හා Lightview අමුද්රව්ය සමඟ පිරිසිදු වෙබ් අඩවිය කේතය නිර්මාණය Gemini Pro නිතරම තම තමන්ගේ කාර්යය සහාය කිරීම සඳහා දේශීය මෙවලම් සහ මුද්රණ උපකාරක ස්ක්රිප්ට් භාවිතා කිරීමට උත්සාහ කර ඇත - වේගය සහ ටෝකන් ඵලදායීත්වය සඳහා වටිනා.එහෙත්, එය සමහර අවස්ථාවලදී විනාශකාරී ප්රතිඵල සමඟ අසාර්ථක විය, බොහෝ ගොනුවන්ට අක්රීය හෝ ආපසු පිවිසීමට විකල්පයක් නොමැතිව විනාශ විය. ප්රවේශය වෙනස් කිරීම බලවත් විය: "ඔබ වෙනස් LLM වේ. ඔබේ සිතුවිලි මොනවාද?"ඔබ බොහෝ විට එක් LLM ක්රියාකාරී වී ඇති පර්යේෂණ දර්ශන හෝ වේගවත් විසඳුම් ලබා දී ඇත. මම සැබෑ ජයග්රාහකයා Gemini Flash බව සොයා. එය සංකේත වැරදි ඇතුළත් කිරීමකින් තොරව කේතය refactoring පුදුමාකාර රැකියාවක් සිදු කර ඇති අතර, කොතැනට කොහෙන් කොහෙන් දාන්නද යන්න පිළිබඳ අවම උපදෙස් අවශ්ය විය. සමහර වෙලාවට මම වෙනස් වීම ගැන සැකකාරී විය හා එසේ කියනු ඇත. සමහර වෙලාවට, Flash එකඟ වනු ඇත හා අනුකූල කර ඇති අතර, වෙනත් අවස්ථාවල එය එහි තෝරා ගැනීම සඳහා සාධාරණ සාධාරණතාවක් කරනු ඇත. The Router Evolution මුලින්ම ප් රචණ්ඩත්වය සිදුවී තිබුණා.අපේ ප් රචණ්ඩත්වය සිදුවී තිබුණා.අපේ ප් රචණ්ඩත්වය සිදුවී තිබුණා.අපේ ප් රචණ්ඩත්වය සිදුවී ඇත.අපේ ප් රචණ්ඩත්වය සිදුවී ඇත. , මෙම SPA සඳහා සම්පූර්ණයෙන්ම ගැලපෙන - එය සරල, විශ්වාසදායක වන අතර, සේවාදායක සැකසුම් අවශ්ය නොවේ. #/about #/docs නමුත් මම පැහැදිලිව සඳහන් නොකළ අතිරේක අවශ්යතා තිබුණා: මම සම්ප්රදායික මාර්ගය අවශ්ය විය ( , Search engines can handle hash routes now, but path-based routing is still cleaner for indexing and sharing /about /docs Hash-based routing is easier to implement and works without server-side configuration. Since I did not say I wanted path-based routing, the LLM will choose the simpler approach. Finding: LLMs will sometimes default to the simplest valid solution. Hash-based routing ක්රියාත්මක කිරීම වඩාත් පහසු වන අතර සර්වර් පැත්තේ සැකසුම් නොමැතිව ක්රියාත්මක වේ.මම path-based routing අවශ්ය බව මම නොකියා නිසා, LLM සරල ප්රවේශය තෝරා ගනු ඇත. Finding: LLMs will sometimes default to the simplest valid solution. මම ක්ලෝඩ් පවසන විට මම SEO සහ ගැඹුරු සබැඳි සඳහා සම්ප්රදායික මාර්ග අවශ්ය බව, එය ඉතා ඉක්මනින් රවුටරය නැවත ලිවීම සහ මම බුද්ධිමත් විසඳුමක් ලෙස සලකා බැලූ දේ සොයා ගත්තේ - ස්පීඑස් පිටුව දෙකම ගැඹුරු සබැඳි සහ SEO-අංක්රැස් කළ හැකි බවට පත් කිරීම. කෙසේ වෙතත්, එය ආරම්භක කේතය සමහරක් ස්ථාපිත කර ඇති අතර, සිදුවන දේ අවුල් කරන ආකාරය සහ සම්පූර්ණයෙන්ම අවශ්ය නොවන බව ඇත. මම මෙම කේතය ඉවත් කිරීමට කියන්න තිබුණේ හෙක්ස් පදනම් මාර්ගයේ ඉතිරි කිරීම් සහාය. මෙම කේතය ඉතිරි කිරීම පහතට ගෙන යා හැකි ආකාරයයි. මම හිතන්නේ බොහෝ අය LLM වරදක් වනු ඇත, නමුත් මම ආරම්භ කිරීමට පැහැදිලි වියහොත්, "අනිත් සම් For architectural patterns, be explicit about your requirements early. Don't assume the LLM knows you want the more complex but SEO-friendly approach. Specify: "I need path-based routing with History API for SEO" rather than just "I need routing." Guidance: For architectural patterns, be explicit about your requirements early. Don't assume the LLM knows you want the more complex but SEO-friendly approach. Specify: "I need path-based routing with History API for SEO" rather than just "I need routing." Guidance: මාර්ගෝපදේශය: මම ද සොයා බැලුවා LLMs ආරක්ෂිතව පෙර සංස්කරණ සමග අනුකූලතාවය සහතික කිරීමට උත්සාහ, මෙය අතිශයින් සංකීර්ණ කේතයට හේතු විය හැක. Guidance: I also found that LLMs defensively try to ensure compatibility with previous versions, this can lead to overly complex code. If you are writing from scratch you need to remind them that backward compatibility is not required. සංඛ් යාවන්ට මුහුණ දෙන්න අවසාන කතාව Project Size: 60 JavaScript ගොනු, 78 HTML ගොනු, 5 CSS ගොනු 41,405 total lines of code (including comments and blanks) Over 40 custom UI components 70+ වෙබ් අඩවි මේ මොහොතේ, ගොනු සාධාරණ පෙනුමක් - එතරම් සංකීර්ණ නොවේ.ඒත්, මෘදුකාංග සංවර්ධනය වසර 40 කට වඩා වැඩි කාලයක් පසු කේතය පිළිබඳ මගේ අර්ථකථනය සහ මානසික හැඟීම් ප්රමාණවත් නොවේ. Core Libraries: File Lines Minified Size lightview.js 603 7.75K lightview-x.js 1,251 20.2K lightview-router.js 182 3K lightview.js 603 7.75K lightview-x.js පිලිබදව 1 251 20.2K ආලෝකය-router.js 182 3K වෙබ් අඩවිය හොඳට ඉගැන්නුවා for performance without having had super focused optimization. ගැලරිය Component Lighthouse But then came the complexity metrics. The Slop Revealed මම Gemini ෆ්ලැෂිට තුනක් භාවිතා කරමින් කේතය අගය කිරීමට ඉල්ලා සිටියේය: 0 අවිධිමත් නොවන අතර 100 සම්පූර්ණයෙන්ම ලේඛනගත / පිරිසිදු කේතයක් වන සංයුක්ත මාතෘකාවක්. 1. Maintainability Index (MI): Halstead ප්රමාණය (code size and complexity measurement) Cyclomatic සංකීර්ණත්වය කේත රේඛාව Comment density 65 ට වඩා වැඩි ප්රතිඵල ප්රභේද කේතය සඳහා සෞඛ්ය සම්පන්න ලෙස සලකනු ලැබේ.This metric gives you a single number to track code health over time. පැරණි නමුත් තවමත් වටිනා මෙට්රික්, කේතය හරහා සීමිතව ස්වාධීන මාර්ග සංඛ්යාව ප්රමාණවත් කරයි. 2. Cyclomatic Complexity: තවත් Bugs සම්පූර්ණයෙන්ම පරීක්ෂා කිරීම වඩාත් දුෂ්කරය (මෙම මාතෘකාව ඔබට කොපමණ ඔබ ලිවීමට අවශ්ය විය හැකිද යන්න සැබවින්ම ඔබට පවසයි) තේරුම් ගැනීමට වඩාත් cognitive load මනුෂ් යයාට කේතය තේරුම් ගැනීමට අවශ් ය මානසික උත්සාහය ප්රමාණවත් කරන මෘදුකාංගයක්.කයික්ලෝමීය සංකීර්ණතාවය (මෙය සෑම පාලන ක්රියාවලියකට සමාන ලෙස ප්රතිකාර කරයි) වෙනුවට, සංකීර්ණතාවය දඬුවම් කරයි: 3. Cognitive Complexity: නිපදවන කොන්දේසි සහ ලූප්ස් (විශාල නිපදවීම = උසස් දඬුවම) Boolean සේවාදායකයා Recursion Linear Flow හි අතුරුදහන් වීම The thresholds: 0-15: පිරිසිදු කේතය - තේරුම් ගැනීම හා සකස් කිරීම පහසුය High Friction - refactoring suggested to reduce technical debt 16-25: Critical - immediate attention needed, maintenance nightmare 26+: සොයා ගැනීම: LLMs විශ්ලේෂණ මෙවලම් නිර්මාණය කිරීමට විශිෂ්ට වේ. Gemini ෆ්ලැස් මුලින්ම පවතින ප්රමාණ විද්යාගාරය සඳහා සොයමින්, එය සොයා ගැනීමට නොහැකි විය, ඉන්පසු ඔහුගේම සම්පූර්ණ විශ්ලේෂකයා (metrics-analysis.js) භාවිතා කර ඇත Acorn JavaScript පර්ස්ටර් - අවසර ඉල්ලීමකින් තොරව. Gemini Flash initially searched for an existing metrics library, couldn't find one, then ( Acorn JavaScript Parser භාවිතයෙන් – අවසරයක් ඉල්ලීමකින් තොරව. මෙය පුදුම හා සමහර විට ගැටළුකාරී වේ. Finding: LLMs excel at creating analysis tools. wrote its own complete analyzer metrics-analysis.js විනිශ්චය Overall health looked good: File Functions Avg Maintainability Avg Cognitive Status lightview.js 58 65.5 3.3 ⚖️ Good lightview-x.js 93 66.5 3.6 ⚖️ Good lightview-router.js 27 68.6 2.1 ⚖️ Good lightview.js 58 65.5 3.3 ️ හොඳයි lightview-x.js පිලිබදව 93 66.5 3.6 ⚖️ Good lightview-router.js 27 68.6 2.1 ⚖️ Good නමුත් පෞද්ගලික ක්රියාකාරිත්වයන් තුළ පැතිරීම වෙනත් කතාවක් කිව්වා. Two functions hit "Critical" status: (Lightview-x.js පිලිබදව) handleSrcAttribute Cognitive Complexity: 🛑 35 Cyclomatic Complexity: 🛑 22 Maintainability Index: 33.9 (lightview-x.js): Anonymous Template Processing Cognitive Complexity: 🛑 31 Cyclomatic Complexity: 13 This was slop. Technical debt waiting to become maintenance nightmares. Can AI Fix Its Own Slop? Here's where it gets interesting. The code was generated by Claude Opus, Claude Sonnet, and Gemini 3 Pro several weeks earlier. Could the newly released clean it up? Gemini 3 Flash මම Refactor වලට Flash ඉල්ලුවා to address its complexity. This seemed to take a little longer than necessary. So I aborted and spent some time reviewing its thinking process. There were obvious places it got side-tracked or even went in circles, but I told it to continue. After it completed, I manually inspected the code and thoroughly tested all website areas that use this feature. No bugs found. handleSrcAttribute Critical Discovery #2: Gemini ෆ්ලැස් "අවශ්යව" කල්පනා කරයි. එහි සියලු සිතුවිලි ක්රියාවන් සමාලෝචනය කරන විට, වැදගත් දර්ශන IDE තුළ පැතිරෙනු ඇත. LLM පැතිරෙන බව පෙනෙන විට, ඉතිහාසයේ සිතුවිලි විවේචනය සහ අවශ්ය පරිදි දිගටම හෝ ප්රතිස්ථාපනය කිරීමට පවසයි. Gemini Flash "thinks" extensively. While reviewing all its thought processes would be tedious, important insights flash by in the IDE. When an LLM seems stuck in a loop, aborts and review historical thoughts for possible sidetracks and tell to continue or redirect as needed. Critical Discovery #2: After the fixes to , I asked for revised statistics to see the improvement. handleSrcAttribute Flash's Disappearing Act Unfortunately, Gemini Flash had deleted its file! It had to recreate the entire analyzer. metrics-analysis.js සොයා ගැනීම: Gemini Flash තාවකාලික ගොනු ආක්රමයෙන් ඉවත් කරයි.Flash විසින් නිර්මාණය කරන ලද ස්කයිප්ට් හෝ විශ්ලේෂණ මෙවලමක් භාවිතා කිරීමෙන් පසු, එය බොහෝ විට තාවකාලික බව අනුමාන කරමින් ගොනුව ඉවත් කරයි.මෙම සිදුවන්නේ නිර්මාණය කිරීම සඳහා විශාල උත්සාහයක් ගත වන ගොනුවන්ට පවා සහ ඔබ එය තබා ගැනීමට හෝ නැවත භාවිතා කිරීමට අවශ්ය විය හැකිය. සොයා ගැනීම: Gemini Flash තාවකාලික ගොනු ආක්රමයෙන් ඉවත් කරයි.Flash විසින් නිර්මාණය කරන ලද ස්කයිප්ට් හෝ විශ්ලේෂණ මෙවලමක් භාවිතා කිරීමෙන් පසු, එය බොහෝ විට තාවකාලික බව අනුමාන කරමින් ගොනුව ඉවත් කරයි.මෙම සිදුවන්නේ නිර්මාණය කිරීම සඳහා විශාල උත්සාහයක් ගත වන ගොනුවන්ට පවා සහ ඔබ එය තබා ගැනීමට හෝ නැවත භාවිතා කිරීමට අවශ්ය විය හැකිය. Tell Gemini to put utility scripts in a specific directory (like or ) and explicitly ask it to keep them. You can say: "Create this in /home/claude/tools/ and keep it for future use." Otherwise, you'll find yourself regenerating the same utilities multiple times. Guidance: /home/claude/tools/ /home/claude/scripts/ Tell Gemini to put utility scripts in a specific directory (like හෝ ) and explicitly ask it to keep them. You can say: "Create this in /home/claude/tools/ and keep it for future use." Otherwise, you'll find yourself regenerating the same utilities multiple times. Guidance: /home/claude/tools/ /home/claude/scripts/ The Dev Dependencies Problem මම Gemini තාවකාලිකව මෙට්රික් ස්ප් රයිට් තබා ගැනීමට කිව්වම, තවත් ප්රශ්නයක් එළියට ආවේ: එය නිල වශයෙන් dev ආකෘති ස්ථාපනය කිරීමට නොහැකි විය. (the JavaScript parser). acorn Flash simply assumed that because it found packages in , it could safely use them. The only reason එය ලබා ගත හැකි විය නිසා මම දැනටමත් එය මත පදනම් වූ Markdown පැර්සර් ස්ථාපනය කර තිබුණා. node_modules acorn They'll use whatever's available in without verifying it's officially declared in . This creates fragile builds that break on fresh installs. Finding: LLMs don't always manage dependencies properly. node_modules package.json ඔවුන් ලබා ගත හැකි ඕනෑම දෙයක් භාවිතා කරනු ඇත තහවුරු නොකර එය නිල වශයෙන් ප් රකාශ කර ඇත මේ නිසා අළුත් ස්ථානවලට කඩා වැටෙන දුර්වල ගොඩනැගිලි නිර්මාණය වෙනවා. Finding: LLMs don't always manage dependencies properly. node_modules package.json After an LLM creates utility scripts that use external packages, explicitly ask: "Did you add all required dependencies to package.json? Please verify and install any that are missing." Better yet, review the script's imports and cross-check against your declared dependencies yourself. Guidance: After an LLM creates utility scripts that use external packages, explicitly ask: "Did you add all required dependencies to package.json? Please verify and install any that are missing." Better yet, review the script's imports and cross-check against your declared dependencies yourself. Guidance: The Refactoring Results With the analyzer recreated, Flash showed how it had decomposed the monolithic function into focused helpers: (cognitive: 5) fetchContent (cognitive: 5) parseElements updateTargetContent (කෞතික: 7) (cognitive: 2) elementsFromSelector orchestrator (cognitive: 10) handleSrcAttribute The Results Metric Before After Improvement Cognitive Complexity 35 🛑 10 ✅ -71% Cyclomatic Complexity 22 7 -68% Status Critical Slop Clean Code — Cognitive Complexity 35 10 -71% Cyclomatic Complexity 22 7 -68% Status ප්රශ්නීය Slop Clean කේතය — පරිගණක පරීක්ෂණය සහ සම්පූර්ණ වෙබ් අඩවිය පරීක්ෂා zero bugs.The cost? A 0.5K increase in file size - negligible. Emboldened, I tackled the template processing logic. Since it spanned multiple functions, this required more extensive refactoring: Extracted Functions: collectNodesFromMutations - iteration logic - පරිවර්තනය - scanning logic processAddedNode - template interpolation for text transformTextNode - attribute interpolation and recursion transformElementNode Results: Function Group Previous Max New Max Status MutationObserver Logic 31 🛑 6 ✅ Clean domToElements Logic 12 ⚠️ 6 ✅ Clean ආකර්ෂණීය සංකල්පය 31 6 Clean domToElements Logic 12 ⚠️ 6 ✅ Clean Final Library Metrics Refactoring කිරීමෙන් පසු, lightview-x.js වැදගත් ලෙස වැඩි දියුණු විය: 93 → 103 (better decomposition) Functions: Avg ප් රවේශය: 66.5 → 66.8 3.6 → Avg Cognitive: 3.2 සියලුම ප්රශ්නීය මට්ටම අවලංගු කර ඇත. වැඩිපුර ක්රියාකාරී ගණන සෞඛ්යමත් modularity - සංකීර්ණ ලෝහය, විශේෂඥ, අඩු සංකීර්ණතාවය උදව්කරුවන්ට නියෝජනය කරයි. File Functions Maintainability (min/avg/max) Cognitive (min/avg/max) Status lightview.js 58 7.2 / 65.5 / 92.9 0 / 3.4 / 25 ⚖️ Good lightview-x.js 103 0.0 / 66.8 / 93.5 0 / 3.2 / 23 ⚖️ Good lightview-router.js 27 24.8 / 68.6 / 93.5 0 / 2.1 / 19 ⚖️ Good react.development.js 109 0.0 / 65.2 / 91.5 0 / 2.2 / 33 ⚖️ Good bau.js 79 11.2 / 71.3 / 92.9 0 / 1.5 / 20 ⚖️ Good htmx.js 335 0.0 / 65.3 / 92.9 0 / 3.4 / 116 ⚖️ Good juris.js 360 21.2 / 70.1 / 96.5 0 / 2.6 / 51 ⚖️ Good lightview.js 58 7.2 / 65.5 / 92.9 0 / 3.4 / 25 ⚖️ Good lightview-x.js 103 0.0 / 66.8 / 93.5 0 / 3.2 / 23 ️ හොඳයි lightview-router.js 27 24.8 / 68.6 / 93.5 0 / 2.1 / 19 ️ හොඳයි react.development.js 109 0.0 / 65.2 / 91.5 0 / 2.2 / 33 ⚖️ Good bau.js 79 11.2 / 71.3 / 92.9 0 / 1.5 / 20 ⚖️ Good htmx.js 335 0.0 / 65.3 / 92.9 0 / 3.4 / 116 ⚖️ Good juris.js 360 21.2 / 70.1 / 96.5 0 / 2.6 / 51 ⚖️ Good 1. LLMs Mirror Human Behavior—For Better and Worse LLMs සාමාන්ය සංවර්ධකයින් මෙන් සමාන tendencies ප්රදර්ශනය: සම්පූර්ණ අවබෝධයක් නැතිව කේතයට හදිස්සිය Don't admit defeat or ask for help soon enough Generate defensive, over-engineered solutions when asked to improve reliability Produce cleaner code with structure and frameworks The difference? They do it ඔවුන් මිනිස් සති ගත වනු ඇති පැය තුළ කඳු කන්දක් නිර්මාණය කළ හැකිය. faster and at greater volume 2. Thinking Helps Extended reasoning (visible in "thinking" modes) shows alternatives, self-corrections, and occasional "oh but" moments. The thinking is usually fruitful, sometimes chaotic. Don’t just leave or do something else when tasks you belive are comple or critical are being conducted. The LLMs rarely say "I give up" or "Please give me guidance" - I wish they would more often. Watch the thinking flow and abort the response request if necessary. Read the thinking and redirect or just say continue, you will learn a lot. 3. Multiple Perspectives Are Powerful When I told a second LLM, "You are a different LLM reviewing this code. What are your thoughts?", magic happened. When faced with an implementation that's critiqued as too abstract, insufficiently abstract, or inefficient, leading LLMs (Claude, Gemini, GPT) won't argue. They'll do a rapid, thorough analysis and return with honest pros/cons of current versus alternative approaches. Finding: LLMs are remarkably non-defensive. When faced with an implementation that's critiqued as too abstract, insufficiently abstract, or inefficient, leading LLMs (Claude, Gemini, GPT) won't argue. They'll do a rapid, thorough analysis and return with honest pros/cons of current versus alternative approaches. Finding: LLMs are remarkably non-defensive. This behavior is actually : beyond what most humans provide How many human developers give rapid, detailed feedback without any defensive behavior? ඕනෑම වේලාවක ඕනෑම සංවර්ධකයා විසින් ප්රශ්න සඳහා ලබා ගත හැකි අත්දැකීම් ඇති සමාගම් කීයක්ද? How many code review conversations happen without ego getting involved? අධ්යයනය: වෙනස්කම් සිදු කිරීමට පෙර හෝ පසුව, LLMs දෘශ්යයෙන් වෙනස් කරන්න: Make progress with one LLM (e.g., Claude builds a feature) Switch to another (e.g., Gemini) and say: "You are a different LLM reviewing this implementation. What are your thoughts on the architecture, potential issues, and alternative approaches?" Then switch back to the first and ask what it thinks now! This is especially valuable before committing to major architectural decisions or after implementing complex algorithms. The second opinion costs just a few tokens but can save hours of refactoring later. Before OR after making changes, switch LLMs deliberately: Guidance: Make progress with one LLM (e.g., Claude builds a feature) Switch to another (e.g., Gemini) and say: "You are a different LLM reviewing this implementation. What are your thoughts on the architecture, potential issues, and alternative approaches?" Then switch back to the first and ask what it thinks now! This is especially valuable before committing to major architectural decisions or after implementing complex algorithms. The second opinion costs just a few tokens but can save hours of refactoring later. 4. Structure Prevents Slop සොයන්න: "vanilla JavaScript" භාවිතා කිරීමට LLM පවසන විට සීමා නොමැතිව සීමා සකස් කිරීම. Vanilla JavaScript යනු අපූරු නමුත් ස්වභාවිකව හිස් භාෂාවක් වන අතර සමහර විට සීමාකාරී හෝ අසාමාන්ය බ්රවුසරය API සක්රීය වේ. සීමා නොමැතිව, එය පිරිසිදු, වඩාත් සකස් කළ හැකි කේතය සකස් කිරීම පහසු වේ - මිනිසුන් හා LLMs දෙකම සඳහා. framework (Bau.js, React, Vue, Svelte, ආදිය) සකස් කිරීම පිරිසිදු, වඩාත් සකස් කළ හැකි කේතය සඳහා හේතු වේ. සොයන්න: "vanilla JavaScript" භාවිතා කිරීමට LLM පවසන විට සීමා නොමැතිව සීමා සකස් කිරීම. Vanilla JavaScript යනු අපූරු නමුත් ස්වභාවිකව හිස් භාෂාවක් වන අතර සමහර විට සීමාකාරී හෝ අසාමාන්ය බ්රවුසරය API සක්රීය වේ. සීමා නොමැතිව, එය පිරිසිදු, වඩාත් සකස් කළ හැකි කේතය සකස් කිරීම පහසු වේ - මිනිසුන් හා LLMs දෙකම සඳහා. framework (Bau.js, React, Vue, Svelte, ආදිය) සකස් කිරීම පිරිසිදු, වඩාත් සකස් කළ හැකි කේතය සඳහා හේතු වේ. මාර්ගෝපදේශය: ව්යාපෘතිය ආරම්භ කරන විට, ඔබ ඉටු කිරීමට අවශ්ය දේ මත පදනම්ව: The framework/library to use (React, Vue, Svelte, etc.) ආකෘති ආකෘති ආකෘතිය (MVC, MVVM, component-based, ආදිය) Code organization preferences (feature-based vs. layer-based folders) Naming conventions Whether to use TypeScript or JSDoc for type safety වෙනත් පුස්තකාල පාවිච්චි කිරීමට ... නැවත සොයාගැනීමට කිසිදු බාධාවක් නොමැත. කියවන්න එපා: "JavaScript හි මට වෙබ් යෙදුම නිර්මාණය කරන්න" කියවන්න එපා: "සංස්කරණ කොටස්, හැක්ස්, TypeScript සහ feature-based folder organization භාවිතා කරන React යෙදුම මට නිර්මාණය කරන්න. ඔබ ඉදිරියට ලබා දෙන්නේ කොපමණ සංයුක්තයක්ද, ඔබට ලැබෙන පහසුකම අඩු වනු ඇත.This applies to all languages, not only JavaScript. මාර්ගෝපදේශය: ව්යාපෘතිය ආරම්භ කරන විට, ඔබ ඉටු කිරීමට අවශ්ය දේ මත පදනම්ව: The framework/library to use (React, Vue, Svelte, etc.) ආකෘති ආකෘති ආකෘතිය (MVC, MVVM, component-based, ආදිය) Code Organization Preferences (Function Based vs. Layer Based Folders) Naming conventions Whether to use TypeScript or JSDoc for type safety වෙනත් පුස්තකාල පාවිච්චි කිරීමට ... නැවත සොයාගැනීමට කිසිදු බාධාවක් නොමැත. Don't say: "Build me a web app in JavaScript" Do say: "Build me a React application using functional components, hooks, TypeScript, and feature-based folder organization. Follow Airbnb style guide for naming." ඔබ ඉදිරියට ලබා දෙන්නේ කොපමණ සංයුක්තයක්ද, ඔබට ලැබෙන පහසුකම අඩු වනු ඇත.This applies to all languages, not only JavaScript. 5.අවශ් ය සත් යය සපයයි I love that formal software metrics can guide LLM development. They're often considered too dull, mechanical, difficult or costly to obtain for human development, but in an LLM-enhanced IDE with an LLM that can write code to do formal source analysis (no need for an IDE plugin subscription), they should get far more attention than they do. They're perfect for: Finding: Formal software metrics can guide development objectively. Identifying technical debt automatically Tracking code health over time Guiding refactoring priorities Validating that "improvements" actually improve things They're perfect for: Finding: Formal software metrics can guide development objectively. තාක්ෂණික ණය ස්වයංක්රීයව හඳුනා ගැනීම Tracking code health over time Guiding refactoring priorities Validating that "improvements" actually improve things Metrics don't lie. They identified the slop my intuition missed. Integrate metrics into your LLM workflow: Guidance: Run complexity metrics on all files. Identify functions with cognitive complexity > 15 or cyclomatic complexity > 10. After initial implementation: Address Critical (cognitive > 26) functions first, then "High Friction" (16-25) functions. Prioritize refactoring: Don't just say ‘improve this’. Say ‘Refactor handleSrcAttribute to reduce cognitive complexity to target range’. Request targeted refactoring: After refactoring, re-run metrics. Ensure complexity actually decreased and maintainability increased. Sometimes ‘improvements’ just shuffle complexity around. Verify improvements: Before marking code as done, try to have all functions with a cognitive complexity < 15 and maintainability index > 65. Set quality gates: Integrate metrics into your LLM workflow: Guidance: Run complexity metrics on all files. Identify functions with cognitive complexity > 15 or cyclomatic complexity > 10. After initial implementation: ප්රමුඛතාවය ලබා ගන්න: ප්රමුඛ ප්රවේශය (සිදුගත > 26) ක්රියාකාරකම් මුලින්ම, ඉන්පසු "High Friction" (16-25) ක්රියාකාරකම්. ඉලක්ක කළ refactoring ඉල්ලන්න: "මෙය වැඩි දියුණු කරන්න" පමණක් නොකියන්න. "Refactor handleSrcAttribute ඉලක්ක කළ ප්රමාණයට සංකීර්ණතාව අඩු කිරීම සඳහා" කියවන්න. After refactoring, re-run metrics. Ensure complexity actually decreased and maintainability increased. Sometimes ‘improvements’ just shuffle complexity around. Verify improvements: Quality Gates Set: Code marking as done, try to have all functions with a cognitive complexity < 15 and maintenanceability index > 65. The Verdict After 40,000 lines of LLM-generated code, I'm cautiously optimistic. But like human developers, they need: Yes, LLMs can generate quality code. Clear, detailed specifications Structural constraints (frameworks, patterns) Regular refactoring guidance Objective quality measurements Architectural Decisions පිළිබඳ විවිධ දර්ශන The criticism that LLMs generate slop isn't wrong—but it's incomplete. They generate slop for the same reasons humans do: . unclear requirements, insufficient structure, and lack of quality enforcement The difference is iteration speed. What might take a human team months to build and refactor, LLMs can accomplish in hours. The cleanup work remains, but the initial generation accelerates dramatically. Looking Forward I'm skeptical that most humans will tolerate the time required to be clear and specific with LLMs - just as they don't today when product managers or developers push for detailed requirements from business staff. The desire to "vibe code" and iterate will persist. But here's what's changed: Feedback loop සති කිහිපයකින් පැය කිහිපයකට අඩුවී ඇත. We can now iterate and clean up faster when requirements evolve or prove insufficient. As coding environments evolve to wrap LLMs in better structure - automated metrics, enforced patterns, multi-model reviews -the quality will improve. We're not there yet, but the foundation is promising. සැබෑ ප්රශ්නය වන්නේ LLMs ගුණාත්මක කේතය නිර්මාණය කළ හැකිද යන්න නොවේ.එය අපි ඔවුන්ට ලබා ගත හැකිද - සහ අපිම - එය නිශ්චිතව කිරීමට විෂය සමග. හා, මට අවසාන ප්රශ්නයක් තියෙනවා ... LLMs ඉතිහාසය මත පදනම් වන අතර ඔවුන් දන්නා දේ අනුගමනය කිරීමට ප්රතිඵලයක් තිබේ නම්, එවිට අපි UI පුස්තකාල වැනි දේවල් සංකේතය සහ භාවිතය වර්ධනය කරන්නේ කෙසේද? අපි වෙනස් දෙයක් ඉල්ලන්නේ නැතිව React සමඟ සදාකාලිකව වැළකී සිටීද? හෝ, පුස්තකාල අනාගතයක් ද? Given its late entry into the game and the anchoring LLMs already have, I don’t hold high hopes for the adoption of Lightview, but it was an interesting experiment. You can visit the project at: https://lightview.dev
