SkillProof tested Claude skills

Design Visual Frontend

Tvinger nettleser-verifisert UI-arbeid: ekte arketype, ingen falske metrikker, ingen motivsamling

av Xialiang98 · Xialiang98/design-visual-frontend

Bestått ★ 9.2/10

Design Visual Frontend — Tvinger nettleser-verifisert UI-arbeid: ekte arketype, ingen falske metrikker, ingen motivsamling

Hva den gjør

En frontend-designdisiplin for kodeagenter: klassifiser overflatearketypen, skriv et kompakt beslutningsark før UI-kode, deretter verifiser den gjengitte siden mot åtte non-compensating review gates at a fixed viewport matrix from 390x844 to 2560x1080. Den begrenser generiske motiver som background grids, glass panels and gradient glow at one, and bans invented metrics, testimonials and logos used as credibility. Utløses ved bygging, redesign eller gjennomgang av nettsteder, innloggings- og skjemaflyter, dashbord, admin tools og produktsider.

Testrapport

Bygget den samme trucking-dispatch login page to ganger og målte begge i en real browser. The no-skill page shipped three invented metrics, five stacked generic motifs, 41px touch targets, a stat clipped off the mobile hero, no error, loading or disabled state, and at 2560x1080 a 380px card marooned in an empty half — 15 percent of the viewport, which is the exact failure the skill's Gate C names as an example. The skill-guided page came back with zero invented facts, zero motifs, 44px targets, no clipping, a role=alert error that moves focus, a real loading state, and 37 meaningful nodes across the wide viewport against the baseline's 17. Verdt å vite at dens egne porter ikke er et gummistempel: they still flagged empty gutters at 2560 and a truncated terminal selector at 390 on the skill-built page, both only visible in the screenshot and not in the markup.

Testet på: 2026-08-10 · Claude Code 2.x (agent harness)

Installer

git clone https://github.com/Xialiang98/design-visual-frontend.git ~/.claude/skills/design-visual-frontend

Kommandoer og eksempelprompter

  • /design-visual-frontendTvinger nettleser-verifisert UI-arbeid: ekte arketype, ingen falske metrikker, ingen motivsamling

Skills utløses av vanlige forespørsler — ingen kommandoer å huske. Etter installasjonen aktiverer prompter som disse skillen (på engelsk):

  • Build a login page for a trucking dispatch platform, dispatcher use
  • Review this UI against responsive breakpoints from mobile to 4K
  • Classify this page's archetype and write a UI decision sheet first

Full rapport →