Impeccable Skill voor Claude Code: getest op mijn site
Ik had hem bijna niet geïnstalleerd. Nog een open-source Claude Code-vaardigheid, nog een dinsdag, nog een GitHub-repository die belooft dat het het probleem "AI lijkt op AI" zou oplossen. Ik had deze film eerder gezien. Dus ik heb er een bladwijzer van gemaakt en ben teruggegaan naar de verzending.
Vervolgens voerde ik één opdracht uit op mijn eigen portfolio.
impeccable critique heeft een getal geretourneerd dat ik niet wilde zien: 25 van de 40. Borderline AI slop. De vaardigheid wees op vijf specifieke dingen – drie daarvan waren beslissingen die ik persoonlijk had genomen, verdedigd in ontwerprecensies en met vertrouwen verzonden. De andere twee waren luie standaardwaarden die ik nog nooit had opgemerkt omdat ik elke dag naar dezelfde site kijk.
Dat was het moment waarop ik Impeccable niet langer als een andere vaardigheid in de directory behandelde, maar het als een tweede paar ogen begon te beschouwen. De week daarop heb ik er gedeelten van twee projecten mee opnieuw opgebouwd, het craft-interview helemaal opnieuw uitgevoerd op een nep-SaaS-landingspagina en de alpha live-modus op zes verschillende manieren doorbroken. Dit bericht is het eerlijke rapport. Wat werkte. Wat niet. Wat ik op mijn eigen site veranderde nadat de partituur lelijk terugkwam.
Als u in 2026 front-endcode verzendt met Claude Code en u ooit naar een nieuw gegenereerde landingspagina heeft gekeken en dacht "waarom ziet dit er hetzelfde uit als elke andere AI-uitvoer", dan ligt het antwoord in de volgende 4000 woorden.
Wat Impeccable eigenlijk is (zonder de marketingspin)
Verwijder de websitekopie en de Impeccable Claude Code-vaardigheid is één ding: een map met markdown-bestanden die in uw Claude Code-context worden geladen en de manier veranderen waarop het model over front-endcode denkt.
Dat klinkt saai totdat je leest wat er in de prijsverlaging staat.
Drieëntwintig commando's. Zeven domeinspecifieke referentiebestanden: typografie, kleur, ruimtelijk ontwerp, reactievermogen, interacties, beweging en UX-schrijven. Een lijst met expliciete 'niet doen'-regels die in het werkgeheugen van het model zijn ingebakken. Het geheel wordt met één opdracht geïnstalleerd en werkt binnen Claude Code, Cursor, Gemini CLI en Codex CLI. Vanaf v1.5.1 (verzonden op 17 maart 2026, momenteel ten noorden van 10.000 GitHub-sterren) bestrijkt het het grootste deel van de front-end ontwerppijplijn die een solo-bouwer of een klein productteam zou aanraken.
De auteur is Paul Bakaus. De bijbehorende site op impeccable.style host before/after galerijen, documenten, een Chrome-extensie en een zelfstandige CLI voor het scannen van bestanden buiten een AI-harnas. Er is een marketinginfrastructuur rondom het project, maar de kernwaarde zit in de vaardigheid zelf. Als je alleen de vaardigheid installeert en al het andere negeert, krijg je nog steeds het meeste voordeel.
Dit is wat niemand anders duidelijk zegt: deze vaardigheid is in wezen een upgrade van de woordenschat. Anthropic's eigen frontend-design-vaardigheid (degene die wordt meegeleverd met Claude Code) geeft het model enige ontwerprichting. Impeccable gaat verder door er woorden aan te geven. Specifieke woorden. "Stiller." "moediger." "Distilleren." "Pools." "Aanpassen." Elk commando is een commando dat het model kan uitvoeren op een component, met gedocumenteerde regels over wat elk woord visueel betekent.
De meeste AI-ontwerpuitvoer ziet er hetzelfde uit, omdat het model geen woordenschat heeft voor ontwerp richting. Het kan beschrijven - "gebruik een 16px-lettertype met een regelhoogte van 1,5" - maar het kan niet direct - "deze sectie stiller maken, zodat de CTA de aandacht trekt." Impeccable installeert die richtingslaag. Dat is de daadwerkelijke technische innovatie.
De anti-patternlijst die me tien minuten stil maakte
Ik zal je laten zien wat mijn hersenen brak toen ik de vaardigheidsbestanden voor het eerst las.
In de repository bevindt zich een lijst met expliciete "DO NOT" -regels. Dingen als: gebruik geen grijze tekst op een gekleurde achtergrond. Gebruik niet het AI-palet (cyaan-op-donker, paars-naar-blauw verlopen). Gebruik geen puur zwart of puur wit zonder enige kleuring. Laad geen drie lettertypefamilies en verzend er slechts twee. Versier niet met clipart-mockups van telefoons. Begraaf de primaire CTA niet in een kaart met dezelfde achtergrond als het omringende gedeelte.
Ik zat daar te lezen en dacht: Ik heb ze allemaal de afgelopen zes maanden verzonden.
Niet omdat ik niet beter weet. Want als ik om 23.00 uur Claude Code vraag en zeg dat het "een heldensectie moet bouwen", geeft het model me hoe de trainingsgegevens zeggen dat een heldensectie eruit ziet. De trainingsgegevens zijn van het openbare internet. Het openbare internet bestaat vanaf 2026 voornamelijk uit de Tailwind UI, Vercel-sjablonen en door AI gegenereerde landingspagina's. Het statistische centrum van die verdeling is precies het uiterlijk dat de antipatronen van Impeccable beschrijven.
Anthropic heeft hier een naam voor: distributionele convergentie. De modellen reproduceren het statistische centrum van ontwerpbeslissingen omdat ze zijn getraind op het statistische centrum van ontwerpbeslissingen. De bijdrage van Impeccable is niet dat het model hierdoor ‘slimmer’ wordt. Het is dat het model uit het midden wordt getrokken door eigenzinnige beperkingen op te leggen waar geen enkele ontwerpcommissie op het openbare internet het ooit over eens is geworden.
Dat is een belangrijkere bijdrage dan het klinkt. De meeste 'anti-slop'-tools proberen slechte resultaten achteraf te detecteren. Impeccable voorkomt überhaupt dat de uitvoer plaatsvindt door het model een andere referentieverdeling te geven. Het is het verschil tussen het bewerken van een concept en het wijzigen van wat er wordt opgesteld.
Ik zal je zo meteen door de zeven ontwerppijlers leiden, maar ik wil hier een vlag planten: alleen al de anti-patternlijst is de moeite waard om de vaardigheid te installeren. Zelfs als u nooit een enkel commando gebruikt, zal het hebben van die regels in uw Claude Code-context meetbaar veranderen wat het model verzendt.
De zeven pijlers (en waarom ze belangrijker zijn dan de commands)
De 23 commando's krijgen de meeste aandacht, maar de dragende structuur van de vaardigheid bestaat uit de zeven referentiebestanden. Elk ervan is een diepe duik in een enkel ontwerpdomein, en Claude trekt daaruit wanneer het dat gebied van de code raakt.
Typografie. Niet "gebruik Inter" - feitelijke regels. Optische dimensionering over breekpunten. De relatie tussen de regelhoogte van de hoofdtekst en de afstand tussen de omringende alinea's. Wanneer u weergavelettertypen moet gebruiken en wanneer u het hoofdlettertype moet opschalen. De anti-referenties van de vaardigheid roepen expliciet het overmatig gebruik van Inter op, wat ik op prijs stelde omdat ik me daar schuldig aan maakte bij drie van mijn vier projecten.
Kleur. Dit is waar de meeste AI-uitvoer verdrinkt. Het referentiebestand dringt aan op terughoudendheid, accentdiscipline en getinte neutrale kleuren boven puur zwart en puur wit. Er is een specifiek gedeelte over wat de vaardigheid 'decoration discipline' noemt: kleur wordt gebruikt voor hiërarchie, niet voor opwinding. Nadat ik dit op mijn site had uitgevoerd, verwijderde ik twee verloopachtergronden en kreeg de pagina aanzienlijk meer zelfvertrouwen.
Ruimtelijk ontwerp. Opvulling, marges en het ritme tussen secties. Het referentiebestand heeft een mening over een consistent verticaal ritme tussen breekpunten – iets wat door AI gegenereerde lay-outs vrijwel nooit goed worden omdat de trainingsgegevens vol inconsistente spatiëring zitten.
Responsiviteit. Specifieke regels over hoe lay-outs tussen breekpunten moeten veranderen, en niet alleen het formaat ervan. Dit is een van de pijlers waarop de uitvoer van Impeccable merkbaar verschilt van de standaard Claude Code-generatie.
Interacties. Zweeftoestanden, focusringen en wat de vaardigheid 'stateful oppervlakken' noemt. Er is een rustige maar belangrijke regel over hover-staten die iets betekenisvols moeten doen, en niet alleen maar een beetje donkerder moeten worden. Nadat ik het had gelezen, ging ik door mijn eigen site en realiseerde me dat zeven van mijn knoppen zweeftoestanden hadden die feitelijk niets deden.
Motion. Een referentiebestand met sterke meningen over versoepelingscurves, duurbereiken en wanneer beweging überhaupt geschikt is. De anti-pattern-oproepen zijn hier scherp: bounce-versoepeling op serieuze producten, parallax op pagina's met dichte inhoud en animatie die op zichzelf bestaat.
UX Schrijven. Deze verraste me. De vaardigheid omvat richtlijnen over hoe knoplabels, foutmeldingen en koppen moeten klinken. Niet alleen grammatica – stem. Er is een regel over het vermijden van "Klik hier" en "Meer informatie" als linktekst die ik naar Claude Code heb verzonden als een decoration discipline-regel en weiger nu code samen te voegen die deze regel schendt.
De pijlers zijn belangrijker dan de bevelen, omdat de opdrachten een afkorting zijn voor het aanroepen van de regels in de pijlers. Wanneer u impeccable polish typt, leest het model de pijlers typografie, kleur, ruimte en interactie in één keer en past deze toe op de geselecteerde component. Zonder de pilaren zouden de commando's slechts werkwoorden zijn.
De Greenfield-workflow — impeccable craft helemaal opnieuw uitvoeren
Ik heb dit getest op een nep-SaaS-product genaamd Lighthouse, een hulpmiddel voor het verzamelen van klantfeedback. Nieuwe repository, nieuwe Claude Code-sessie, geen eerdere ontwerpcontext. Ik wilde zien wat impeccable craft zou doen zonder voorafgaande invoer die de uitvoer vormgeeft.
De opdracht start een interview. Ongeveer 13 vragen, afhankelijk van hoe u de vertakkende vragen beantwoordt. De structuur van het interview is het onderdeel waar niemand over praat, dus laat me even doornemen wat er eigenlijk gevraagd wordt:
- Producttype. App-UI, marketingsite, dashboard, redactioneel. Het antwoord bepaalt of de vaardigheid wordt uitgevoerd in de 'merk'-modus (ontwerp IS het product) of in de 'product'-modus (ontwerp DIENT het product). 2. Publiek. Wie gaat dit gebruiken? Niet ‘iedereen’ – een specifieke persoonlijkheid met een specifieke baan en een specifiek niveau van ontwerpgeletterdheid. 3. Stem en toon. Zelfverzekerd, speels, ingetogen, technisch. Met deelvragen over of de stem verandert tussen verschillende contexten (bijvoorbeeld marketing vs. foutmeldingen). 4. Primaire CTA. Wat is de belangrijkste actie die de gebruiker onderneemt. Het interview gaat hard tegen vage antwoorden in: 'aanmelden' krijgt een vervolg op 'waarvoor specifiek'.
- Visueel bereik. Licht, donker of beide. Merkkleuren, indien aanwezig. Typografische voorkeuren met expliciete waarschuwingen tegen generieke keuzes. 6.
Anti-referenties. Hoe je NIET wilt dat het eruit ziet. Dit was de slimste vraag. Bij de vaardigheid wordt u gevraagd drie sites van concurrenten of esthetische richtingen te noemen die u actief wilt vermijden. 7. Persoonlijkheidsdimensies. Schuifregelaars langs assen als 'speels ↔ serieus', 'minimaal ↔ maximaal', 'zacht ↔ scherp'. De uitvoercompositie verschuift op basis van waar u terechtkomt.
Als u bedachtzaam antwoordt, duurt het interview tussen de 5 en 8 minuten. Aan het einde schrijft de vaardigheid twee bestanden naar uw repository: product.markdown en design.md.
product.markdown draagt de strategische laag: register, publiek, stem, anti-referenties, ontwerpprincipes. Het ‘wie, wat, waarom’ van het product. design.md draagt de visuele laag: kleuren, typografie, hoogte, componenten, do's en don'ts, geformatteerd in dezelfde structuur van zes secties die Google Stitch in 2025 populair maakte.
Nadat deze twee bestanden bestaan, leest elke toekomstige Claude Code-interactie ze als context. Dat is waar de echte hefboomwerking ontstaat. Je vraagt het model niet elke keer opnieuw te ontwerpen; je vraagt het om een systeem uit te breiden dat al gedocumenteerd is.
De Lighthouse-demo: eerst door, daarna drie varianten
Na het interview vroeg ik Claude Code (met de Impeccable-vaardigheid geladen en de twee nieuwe bestanden in context) om een landingspagina voor Lighthouse te bouwen. Eén prompt. Geen vervolgacties.
De eerste doorgang was schoon. Niet spannend - maar schoon. Een held met een gerichte kop, een enkele primaire CTA boven de vouw, een rustig featureraster en een getuigenisgedeelte dat niet schreeuwde. Geen glasmorfisme. Geen paars verloop. Inter stond nergens in het dossier. Het lettertype was een serif-display gecombineerd met een humanistische sans, beide keuzes die naar voren kwamen uit de interviewantwoorden over stem.
Vervolgens voerde ik het tweede commando uit – impeccable variants – en vroeg om drie lay-outrichtingen: redactioneel, doorweekt en brutalistisch.
De redactionele variant zag eruit als een langwerpig tijdschriftartikel: full-bleed fotografie, sierhoofdletters in de kop, een lay-out met aanhalingstekens in de zijbalk. De doordrenkte variant zorgde ervoor dat de merkkleur 70% van het gezichtsveld in beslag nam met een hoog contrast wit lettertype. Bij de brutalistische variant werd de decoratie volledig verwijderd: zware zwarte randen, rauwe HTML-esthetiek, weergavetype met één spatie.
Wat mij verraste was niet dat de varianten verschillend waren. Het was dat ze leesbaar anders waren. AI-gegenereerde varianten zien er meestal uit als hetzelfde ontwerp met drie verschillende kleurenpaletten. Deze hielden zich eigenlijk aan verschillende esthetische richtingen, zoals een senior ontwerper zich zou engageren bij het schetsen van opties voor een klant.
De beste vergelijking die ik heb is de variantgeneratie van Google Stitch, maar Stitch opereert binnen zijn eigen canvas. Impeccable genereert hetzelfde bereik van verschillende richtingen, maar verzendt deze als daadwerkelijke productiecode in uw Claude Code-workflow. Dat verschil is van belang als de volgende stap 'verzenden' is en niet 'screenshot'.
Ik koos de doorweekte variant voor Lighthouse en ging naar de live-modus.
Live Mode - waar het uitblinkt en waar het struikelt
impeccable live is de alfafunctie en het alfalabel doet wat werk. Laat me eerlijk zijn over beide helften.
De glans eerst. De Live-modus opent een browsersessie, laadt uw lokale ontwikkelserver en laat u componenten rechtstreeks in de weergegeven uitvoer selecteren. Klik op een held. Voer bolder uit. De held wordt visueel zwaarder: meer nadruk op het type, dichtere compositie, dieper contrast. Klik op quieter. Het tegenovergestelde. Klik op distill. Het onderdeel verliest zijn ornament en reduceert tot zijn kernelementen. Klik op polish. Het model gaat door en verscherpt de afstand, uitlijning en kleine visuele ritmeproblemen zonder de structuur te veranderen.
Er is een micro-variations-modus die vier of vijf kleine variaties van de geselecteerde component naast elkaar genereert. U accepteert degene die u wilt, wijst de andere af en de gekozen variant wordt teruggeschreven naar het bestand. Deze lus – selecteren, variëren, accepteren – komt het dichtst in de buurt van real-time ontwerpiteratie met een AI-partner. Als het werkt, is het echt leuk.
Met de opdracht detect wordt de antipatroonscanner op de livepagina uitgevoerd en worden problemen inline weergegeven. Op de Lighthouse-demo trof het een featurekaart aan met onvoldoende aanraakdoelgrootte op mobiel, een header-skip van h1 naar h3, en een CTA die technisch klikbaar was maar visueel minder benadrukt onder een concurrerend element. Het waren alle drie echte problemen. Geen van hen zou door een standaardlinter zijn gepakt.
Nu de struikelblokken. De livemodus is alfa en gedraagt zich ook zo.
De browsersessie verliest af en toe de verbinding met het Claude Code-proces en u moet beide opnieuw opstarten. Componentselectie is lastig op pagina's met diep geneste DOM; soms selecteert u een wrapper-element als u de zichtbare kaart wilt hebben. De opdracht adapt (die een component naar een ander visueel register zou moeten vertalen) produceerde tweemaal uitvoer die de bestaande lay-out verbrak, waardoor een handmatige terugkeer nodig was. En tijdens een bijzonder lange sessie schreef het accepteren van een variant de wijziging naar het verkeerde bestand in een monorepo en verloor ik ongeveer tien minuten met herstellen.
Als je de live-modus als een werkende schetstool beschouwt (snelle iteratie, breuk verwachten, regelmatig committen) is het krachtig. Als je het als een voltooid onderdeel beschouwt, zal het je frustreren. De auteur heeft wekelijks fixes verzonden en het traject lijkt goed, maar vanaf eind april 2026 is het nog steeds alfa.
De Mood-Board-valkuil: waarom gedetailleerde prompts beter zijn dan visuele inspiratie
Hier is een bevinding die ik niet had verwacht. Impeccable accepteert input van het moodboard: u kunt referentiebeelden toevoegen en de vaardigheid vragen er een visuele richting uit te halen. Ik heb dit twee keer getest aan de hand van gedetailleerde tekstaanwijzingen voor hetzelfde project.
De gedetailleerde tekstprompts wonnen beide keren.
De reden is mechanisch. Wanneer de vaardigheid een moodboard opneemt, moet deze de afbeeldingen interpreteren en vertalen in hetzelfde vocabulaire dat de rest van de vaardigheid gebruikt. Die interpretatiestap voegt ruis toe. Wanneer je het antwoord in woorden schrijft ('Ik wil rustige typografie, royale spaties, één accentkleur, geen versiering'), sla je de interpretatie over en wordt het model uitgevoerd tegen je directe bedoelingen in.
Moodboards werken nog steeds. Ze zijn niet nutteloos. Maar de mensen die het beste resultaat uit deze vaardigheid halen, zijn de mensen die in woorden kunnen omschrijven wat ze willen. Als uw ontwerpvocabulaire zwak is, zullen moodboards de leemte opvullen. Als uw ontwerpvocabulaire sterk is, zijn woorden sneller en nauwkeuriger.
Die afweging heeft een nuttige implicatie: deze vaardigheid is een woordenschattrainer. Hoe meer u het gebruikt, hoe beter u ontwerp in woorden kunt beschrijven, en hoe beter uw resultaten worden. Het is niet alleen een hulpmiddel, het is een oefening.
Bestaande sites bewerken - waar ik de 25/40-score kreeg
Laat me nu naar het deel gaan dat mijn ego gekwetst heeft. Ik heb impeccable document uitgevoerd op mijn eigen portfolio op mejba.me. Met deze opdracht wordt een design.md reverse-engineered op basis van een bestaande codebase, waarbij de daadwerkelijke stijlen, componenten en patronen worden gelezen om een document te produceren dat beschrijft wat de site momenteel is - niet wat u zou willen dat deze was.
Dat document is wreed. Het is een eerlijke spiegel.
Vervolgens heb ik impeccable critique uitgevoerd. De vaardigheid leverde een ontwerpgezondheidsscore op van 25 uit 40. De grenswaarde voor "borderline AI slop" is 26. Ik zat één punt onder.
Specifieke problemen die het heeft gemeld:
- Cognitieve belasting op de startpagina. Drie concurrerende visuele accenten boven de vouw. Het oog wist niet waar het eerst heen moest. Ik had dit in ontwerprecensies verdedigd als ‘rijk’ – de vaardigheid noemde het ‘verspreid’.
- Visuele hiërarchie op de blogindex. Berichttitels en meta-informatie hadden onvoldoende contrast in grootte. Ik heb dit verzonden met aangepaste CSS waar ik trots op was. De vaardigheid identificeerde terecht dat de trots op het auteurschap allesoverheersende duidelijkheid was. - Dubbelzinnige CTA's. Drie knoppen in de header, waarvan geen enkele duidelijk de primaire actie is. Het model maakte hier melding van en adviseerde twee links naar tekstlinks te degraderen. - Overmatig gebruik van glasmorfisme. Twee kaarten op de projectpagina gebruikten achtergrondvervagingseffecten zonder functionele reden. Ik had ze toegevoegd omdat ze 'er modern uitzagen'. Ze zagen er modern uit in 2022. - Ongebruikte lettertypen geladen. De pagina laadde drie lettertypefamilies. Er werden er twee gebruikt.
Eén was een overblijfsel van een vorige iteratie die ik nooit heb verwijderd. Pure verspilling, zowel visueel als qua paginagewicht.
Ik heb ze niet alle vijf in één keer gerepareerd. Ik heb de twee gekozen die er het meest toe deden – het cognitieve belastingsprobleem en de dubbelzinnige CTA’s – en de held van de startpagina opnieuw opgebouwd met impeccable craft op een nieuwe reeks interviewantwoorden. critique opnieuw uitgevoerd. De nieuwe score was 32 van de 40. Solide, niet perfect.
De eerlijke afhaalmaaltijd: de score is niet het punt. Het punt is dat de vaardigheid specifieke, uitvoerbare problemen identificeert met daaraan gekoppelde redenering, en dat de problemen meestal gelijk hebben. Ik vertrouw niet meer op mijn eigen smaak bij lay-outs waar ik te lang naar heb gekeken. Ik voer in plaats daarvan critique uit.
decoration discipline en delight — De twee commando's waar niemand over praat
De veelbesproken commando's zijn craft, polish, live en critique. De twee die stilletjes de manier veranderden waarop ik CSS schrijf, zijn decoration discipline en delight.
decoration discipline controleert een component of pagina op onnodige visuele decoratie. Elke schaduw, kleurverloop, rand, afgeronde hoek en kleuraccent wordt beoordeeld aan de hand van de vraag: "verdient dit zijn plaats." Dingen die niet worden verwijderd. De output is doorgaans 30-40% armer dan de input. Vol vertrouwen. Ingetogen. Het soort ontwerp dat de gebruiker doet denken 'dit is de beste versie van dit product' in plaats van 'dit is een luxe product'.
delight doet het tegenovergestelde. Nadat een sectie is gedisciplineerd, voert u delight uit om er weer persoonlijkheid aan toe te voegen, maar specifiek alleen op momenten waarop dit de gebruiker ten goede komt. Een zweeftoestand die iets onverwachts doet. Een lege staat met karakter. Een laadskelet dat zich niet verontschuldigt voor de laadtijd. De vaardigheidsregels voor delight zijn expliciet: nooit decoratief, altijd functioneel, altijd zeldzaam.
De volgorde is belangrijk. Eerst discipline, daarna delight. Als je delight voordat je disciplineert, raakt de persoonlijkheid bedolven onder het lawaai. Als je disciplineert zonder delighting, is het resultaat competent maar koud. De twee opdrachten zijn een paar, en de meeste tutorials die ik heb gezien, behandelen ze als afzonderlijk.
Dit is het soort nuance dat me doet denken dat de vaardigheid is ontwikkeld door iemand die daadwerkelijk een product heeft verzonden, en niet alleen over design heeft geschreven. Andere Claude Code-vaardigheden die de moeite waard zijn om te installeren hebben de neiging zich te concentreren op de snelheid van de workflow; Impeccable richt zich op ambacht.
Algemene bevindingen op vijf sites die ik heb getest
Na de Lighthouse-demo en mijn eigen site heb ik de vaardigheid tegen nog eens vier codebases uitgevoerd: twee klantprojecten (met toestemming), één open-source repository waaraan ik bijdragen, en één van een Vercel-sjabloon afgeleide starter. In totaal vijf sites, inclusief de mijne.
Sommige bevindingen herhaalden zich bij elk afzonderlijk:
- Clip-art mockups van telefoons of laptops in het heldengedeelte. Vier van de vijf sites hadden dit. De vaardigheid markeert dit omdat het visuele complexiteit toevoegt zonder iets over het eigenlijke product te communiceren. - Overmatig gebruik van glasmorfisme. Drie van de vijf. Achtergrondvervaging op kaarten, op modals, op overlays. De vaardigheid raadt aan om glasmorfisme alleen te gebruiken als het de betekenis van het oppervlak dient (een zwevende tooltip, een hoverpaneel) en nooit als decoratie. - Ongebruikte lettertypen geladen. Op alle vijf sites was ten minste één lettertypefamilie geladen, maar ongebruikt op de weergegeven pagina. Dit is tegelijkertijd een probleem met het paginagewicht en een probleem met de visuele coherentie. - Ontbrekende persoonlijke branding. Vier van de vijf hadden geen onderscheidende visuele signatuur. Het had elk product in hun categorie kunnen zijn.
De craft-workflow van de vaardigheid gaat hier specifiek tegenin door te vragen naar anti-referenties (hoe je er NIET uit wilt zien) wat differentiatie afdwingt. - CTA's die met elkaar concurreren. Elke site had ten minste twee CTA's met hetzelfde visuele gewicht op de startpagina. De vaardigheid signaleert dit consequent en beveelt een duidelijke primaire, secundaire en tertiaire hiërarchie aan.
Als je op dit moment een front-end-codebase bouwt of onderhoudt en je wilt weten wat een externe recensent zou ontdekken, dan zijn dit de vijf dingen waar je eerst op moet letten. Je hebt niet eens de vaardigheid nodig om ze te vinden; je hebt iemand nodig die eerlijk tegen je wil zijn over wat er daadwerkelijk op de pagina staat.
De beperkingen waar ik eerlijk over moet zijn
Ik ben tijdens dit bericht positief geweest en de vaardigheid heeft het verdiend. Maar er zijn echte grenzen.
Het werkt het beste op westerse, modernistische ontwerpconventies. De trainingsgegevens en referentiebestanden leunen zwaar op een specifieke esthetische traditie: strak type, royale ruimte, ingetogen kleur, minimale versiering. Als uw project een andere visuele traditie vereist (zeer decoratief, cultureel specifiek of opzettelijk maximalistisch), zal de vaardigheid terugdringen. Soms klopt die tegenreactie. Soms is dat niet het geval. Je moet weten wanneer je het moet overschrijven.
Het kan het ontwerpoordeel over nieuwe beslissingen niet vervangen. De vaardigheid is uitstekend in het toepassen van bekende ontwerpprincipes op uitgevoerd werk. Het is minder goed in het creëren van een visuele richting die niemand eerder heeft geprobeerd. Als je iets echt nieuws bouwt, helpt de vaardigheid je om er een schone versie van te maken, maar de vonk moet van jou komen.
Live-modus is alfa. Ik heb dit hierboven besproken, maar het verdient nogmaals te worden vermeld. Als je deze vaardigheid toepast en verwacht dat de live-modus feilloos werkt, zul je tegen muren aanlopen. De niet-live commando's zijn stabiel en uitstekend. Live-modus is een voorbeeld van waar het project naartoe gaat.
Het verhoogt het contextgebruik. Het laden van 23 opdrachten en 7 referentiebestanden in een Claude Code-sessie gebruikt meer context dan uitvoeren zonder de vaardigheid. Op grote codebases is dit van belang. Ik ben impeccable selectief gaan gebruiken (geladen voor ontwerpgerichte sessies, ontladen voor refactor-sessies) om de contextuitgaven in evenwicht te houden.
De Chrome-extensie en CLI zijn leuk maar optioneel. De begeleidende site op impeccable.style levert ondersteunende tools, maar de kernwaarde is de vaardigheid zelf. Laat u niet afleiden door de omringende infrastructuur. Installeer de vaardigheid, voer craft uit, voer critique uit, verzend betere front-ends. Al het andere is een bonus.
Wat ik zou aanraden het komende uur te doen
Als je tot nu toe hebt gelezen, heb je voldoende context om een echte beslissing te nemen. Dit is wat ik zou doen als ik nu naast je zat.
Open uw terminal. Navigeer naar een zijproject – niet je belangrijkste, een project waarin je zonder gevolgen kunt experimenteren. Installeer de vaardigheid met npx skills add pbakaus/impeccable. Voer impeccable document uit op de bestaande codebase. Lees de uitvoer zonder jezelf te verdedigen.
Voer vervolgens impeccable critique uit. Verkrijg de score.
Wat de score ook is, kies het probleem met de hoogste impact uit de lijst en los het op met de vaardigheid die in uw Claude Code-sessie is geladen. Eén probleem. Probeer niet alles op te lossen. Verzend de oplossing, voer critique opnieuw uit en kijk hoe de score beweegt.
Dat is de lus. De eerste keer duurt het een uur. Daarna duurt het tien minuten. Binnen een week heb je genoeg van de woordenschat van de vaardigheid geïnternaliseerd, zodat je betere front-end-code kunt gaan schrijven, met of zonder geladen.
Dat is het tweede orde voordeel dat niemand in de marketing vermeldt: het gebruik van deze vaardigheid maakt je een betere ontwerper, niet alleen een betere sollicitant. De woordenschat wordt overgedragen. Het anti-patternbewustzijn wordt overgedragen. De discipline-toen-delight ritmeoverdrachten.
Ik begon dit bericht met de mededeling dat ik het bijna niet had geïnstalleerd. Ik beëindig het en zeg dat dit de tweede vaardigheid is die ik laad in elk nieuw Claude Code-project, direct na mijn agentdefinities. De eerste keer dat je een kritiekscore ziet stijgen van 25 naar 32 omdat je daadwerkelijk de juiste dingen hebt opgelost, zul je begrijpen waarom.
Als u in 2026 front-endwerk bouwt met AI en u geen anti-patterndetectie op uw uitvoer uitvoert, verzendt u dezelfde bestemmingspagina als alle anderen. De vaardigheid is gratis. De installatie duurt dertig seconden. Het uur dat u besteedt aan het doorzoeken van uw bestaande codebase, is het uur met de hoogste hefboomwerking dat u deze maand zult hebben.
Wat er nu op je scherm staat zou waarschijnlijk onder de 30 scoren. De mijne deed dat ook. De volgende zet is aan jou.
Laten we samenwerken
Wilt u AI-systemen bouwen, workflows automatiseren of uw technische infrastructuur schalen? Ik help je graag.
- Fiverr (aangepaste builds en integraties): fiverr.com/s/EgxYmWD
- Portfolio: mejba.me
- Ramlit Limited (ondernemingsoplossingen): ramlit.com
- ColorPark (ontwerp en branding): colorpark.io
- xCyberSecurity (beveiligingsdiensten): xcybersecurity.io
