Scans UI code against a design system contract and reports deviations as structured findings.
npx skills add https://github.com/pnewsam/skills --skill design-audit-pnewsam
Please help me install this Agent Skill. Skill: design-audit Source: https://github.com/pnewsam/skills/tree/main/archive/design-audit Command: npx skills add https://github.com/pnewsam/skills --skill design-audit-pnewsam
High-intent search queries and answers about installing and using this skill.
Read the design system contract first, then scan each component in scope for spacing, color, typography, component pattern, and layout deviations. Record each finding with its file location, current value, expected value, and severity so fixes can be applied directly.
It checks off-scale spacing values, raw hex colors instead of tokens, font sizes and weights outside the typography scale, non-standard border radius or shadows, and layout structures that diverge from documented conventions.
No. The audit requires an existing docs/DESIGN_SYSTEM.md contract defining the expected values. Without it, there is no standard to measure against, so you should create the design system document first.
Findings are classified into three severities: violations (raw values where tokens exist), drift (clear mismatches with the system), and inconsistencies (possibly intentional variations). Fix violations first, then drift, then inconsistencies.
It only flags deviations from the documented contract, not aesthetic improvements, and it cannot judge whether a deviation was intentional. Sections where the contract is silent produce ambiguous findings that require contract updates.
sandrasocialAudit UI components and realign them with design system standards.
sethdavis512Normalize frontend UI components to match design system tokens.
mikeparcewskiCodify slide deck design quality criteria for color, typography, layout, and contrast.
tunacosgunAudit UI code against the emcn design system for conformance.
