fusengine/design-audit
plugins/design-expert/skills/5-design-audit/SKILL.md
Phase 5: Verify contrast >= 4.5:1 text / 3:1 UI in both light+dark, check no Inter/Roboto/Arial/Open Sans, confirm all colors are OKLCH from design-system.md, validate hover/focus/disabled/loading states, run anti-AI-slop checklist.
$ install --global
skillsauthnpx skillsauth add fusengine/agents design-auditInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 24, 2026, 7:51 AM3.0s1 file scanned
SKILL.md
- name:
- design-audit
- description:
- Phase 5: Verify contrast >= 4.5:1 text / 3:1 UI in both light+dark, check no Inter/Roboto/Arial/Open Sans, confirm all colors are OKLCH from design-system.md, validate hover/focus/disabled/loading states, run anti-AI-slop checklist.
- phase:
- 5
Phase 5: DESIGN AUDIT — Validate quality and accessibility
When
After Phase 4 animations are applied. Final quality validation.
Input (from Phase 4)
- Complete components with animations, interactive states, and visual effects.
design-system.mdas the audit baseline.
Steps
- Load baseline — Read
design-system.mdto establish expected tokens, fonts, colors. - Run audit checklist from
references/audit-checklist.md:- Typography: fonts match design-system, no forbidden fonts, fluid scale works.
- Colors: all OKLCH, no hard-coded hex/RGB, semantic tokens used.
- Spacing: consistent base unit, no magic numbers.
- Motion: timing within limits, reduced-motion supported.
- Check consistency per
references/consistency-checks.md— cross-component visual coherence (border-radius, shadows, spacing rhythm). - Run anti-AI-slop audit from
references/anti-ai-slop-audit.md— detect generic purple gradients, Inter font, flat backgrounds, missing animations. - Validate WCAG per
references/ux-wcag.md— contrast 4.5:1 text / 3:1 UI, focus indicators, touch targets 44x44px minimum. - Apply UX heuristics — Nielsen (
references/ux-nielsen.md), UX laws (references/ux-laws.md), patterns (references/ux-patterns.md). - Generate audit report — categorized findings (Critical / Major / Minor) with fix recommendations.
- Apply fixes — Correct all Critical and Major issues before proceeding.
Output
- Audit report with categorized findings and applied fixes.
- All Critical/Major issues resolved. WCAG AA compliant. Anti-AI-slop passed.
Next → Phase 6: FINAL REVIEW
6-handoff-review/SKILL.md — Screenshot light+dark, compare 3 elements, fix gaps, report.
References
| File | Purpose |
|------|---------|
| references/audit-checklist.md | Full audit procedure |
| references/consistency-checks.md | Cross-component consistency |
| references/anti-ai-slop-audit.md | Generic AI design detection |
| references/ux-wcag.md | WCAG accessibility standards |
| references/ux-nielsen.md | Nielsen usability heuristics |
| references/ux-laws.md | UX laws (Fitts, Hick, Miller) |
| references/ux-patterns.md | Common UX patterns |
Related Skills
fusengine/ux-copy
testing
VerifiedTrustedCommunity
Copy self-audit and ban-lists — filler verbs/hype adjectives, slop placeholder names, fake-precise numbers, Title Case headlines, humor in error copy ('Oops!'), em-dash crutch, one copy register per page.
20SKILL.mdUpdated Jul 15, 2026
fusengine/design-webapp
development
VerifiedTrustedCommunity
Logged-in web apps — dashboards, auth flows, settings, onboarding, data tables, command palettes, modals, toasts. Register `product`: density and glance-speed over marketing polish, no hero/CTA-tricks, every data surface covers empty/loading/error explicitly, tables and dataviz follow preattentive-processing rules.
20SKILL.mdUpdated Jul 15, 2026
fusengine/design-web
development
VerifiedTrustedCommunity
Marketing sites, landing pages, campaign pages — register `brand` (design IS the product). Structure comes from the register's POV + a macrostructure pick, never from copying an inspiration site's section flow. Hero discipline, deviated section order, asymmetric grids, and a silhouette lookalike-test gate before ship.
20SKILL.mdUpdated Jul 15, 2026
fusengine/design-system
development
VerifiedTrustedCommunity
Token-strategy core — OKLCH color rules, neutral tinting, accent-commitment levels, type scale, 8pt spacing grid, touch targets, and the canonical output format of design-system.md (the file the harness gates on). This is routing step 1 of design-method/SKILL.md — read it before design-web/design-webapp/design-ios/design-android, before picking or auditing a single color/type/spacing value.
20SKILL.mdUpdated Jul 13, 2026