Design Auditor

Gescoord UI/UX audit tegen 19 regels met echte WCAG contrastberekening en code diffs

Door Ashutos1997 · Ashutos1997/claude-design-auditor-skill

Getest · Werkt ★ 8.8/10

Design Auditor — Gescoord UI/UX audit tegen 19 regels met echte WCAG contrastberekening en code diffs

Wat het doet

Controleert ontwerpen en front-end code (HTML/CSS/React/Vue/Tailwind) of Figma bestanden aan de hand van 19 categorieën, en produceert een score van 0-100, WCAG contrastverhoudingen, op ernst gerangschikte problemen, en voor/na fix diffs. Activeert bij verzoeken om een UI te beoordelen, toegankelijkheid te controleren, kleurcontrast te verifiëren, of een design/heuristische audit uit te voeren. Engels en Koreaans.

Testrapport

Een aanmeldingskaart met drie falende kleurparen gevoed en het berekende de exacte WCAG verhoudingen (#999/#fff = 2.85, #aaa/#fff = 2.32, white/#7c9fe0 = 2.66), die allemaal overeenkwamen met een onafhankelijke Python luminantiecontrole tot op twee decimalen. Waar een simpele no-skill review alleen zei dat de tekst 'looks light,' retourneerde de skill een gescoord 0-100 rapport dat ook de 13px off-grid padding, sub-12px body text, ontbrekende image alt, ongelabelde inputs, en outline:none focus removal opving, elk met een copy-paste fix diff.

Getest op: 2026-07-17 · Claude Code 2.x (agent harness)

Installatie

git clone https://github.com/Ashutos1997/claude-design-auditor-skill
mkdir -p ~/.claude/skills
cd claude-design-auditor-skill && cp -r . ~/.claude/skills/design-auditor

Commando's en voorbeeldprompts

/design-auditorGescoord UI/UX audit tegen 19 regels met echte WCAG contrastberekening en code diffs

Skills reageren op gewone verzoeken — geen commando's om te onthouden. Na installatie activeren prompts zoals deze de skill (in het Engels):

Can you audit this signup form for WCAG contrast and accessibility issues
Score our landing page against design heuristics and flag what's broken
Check our Figma file for accessibility problems before we ship it

Volledig rapport (Engels) →