Claude Code-skill
page-critic
Gennemgår siderne i en webapp i tre lag: virker den, holder den, og er den lækker. Den måler i en rigtig browser, lader en blind kunde prøve opgaven og giver en rapport med karakterer og konkrete rettelser.
macOS og Linux
git clone https://github.com/manniche-labs/ui.git ~/manniche-labs-ui
ln -s ~/manniche-labs-ui/skills/page-critic ~/.claude/skills/page-criticWindows (PowerShell)
git clone https://github.com/manniche-labs/ui.git "$env:USERPROFILE\manniche-labs-ui"
New-Item -ItemType Junction -Path "$env:USERPROFILE\.claude\skills\page-critic" -Target "$env:USERPROFILE\manniche-labs-ui\skills\page-critic"Bed Claude Code om at “gennemgå siderne”, eller skriv /page-critic.
Prøv et eksempel
Et opdigtet eksempel, forkortet: sådan ser en runde ud i Claude Code. Butikken og tallene findes ikke.
Gennemgå to sider
Gennemgå forsiden og kurven i min webshop.
Skill{ "skill": "page-critic" }Kører …FærdigBegge sider er målt i en rigtig browser. De vigtigste fund:
Virker den
6 af 10
Holder den
5 af 10
Er den lækker
4 af 10
- Knappen Til kassen er 32 px høj på mobil. Den skal være mindst 44 px.
- Prisen brydes over to linjer ved 320 px bredde.
- Søgefeltet viser ingen fokusmarkering med tastatur.
Ret og mål igen
Ret de tre fund og mål igen.
Agent{ "fund": 3 }Kører …FærdigRettet og målt igen. Alle tre lag er steget:
Virker den
9 af 10
+3 fra 6
Holder den
8 af 10
+3 fra 5
Er den lækker
7 af 10
+3 fra 4
De tre lag
Virker den
Fejl i konsollen, døde links, formularer, tastatur og fokus, kontrast og størrelsen på det, man trykker på.
Holder den
Lang tekst, smalle skærme, langsomt net, zoom og mørkt tema. Den finder det, der knækker.
Er den lækker
Rytme, typografi, bevægelse og finish, og om siden ligner noget, en AI har lavet.
Før og efter
Den viser tre varianter af en synlig rettelse, skriver en prompt til den, der retter, og måler igen bagefter.
Det får du
- En rapport med karakterer pr. side og lag.
- Fejl med præcis element og grund.
- Forslag til UI, animationer og finish.
- Tal før og efter, så forbedringen kan ses.