SKILL.md
MANDATORY PREPARATION
Users start this workflow with /audit. Once this skill is active, load $frontend-design — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow that protocol before proceeding — if no design context exists yet, you MUST load $setup first.
Run systematic technical quality checks and generate a comprehensive report. Don't fix issues — document them for other commands to address.
This is a code-level audit, not a design critique. Check what's measurable and verifiable in the implementation.
Consult the hierarchy checklist when reviewing grayscale hierarchy, action priority, section-title restraint, and label/value treatment. Consult the ai slop detection when checking for generic trend-driven anti-patterns. Consult the action hierarchy when reviewing primary, secondary, tertiary, and destructive actions. Consult the semantic color when checking whether color is communicating state or just decoration. Consult the surface separation when checking whether borders, shadows, cards, overlap, and background shifts are being used intentionally. Consult the image treatment when screenshots, icons, or media handling affect usability or polish. Consult the accessibility testing when integrating automated checks (axe, WAVE, Pa11y) into the audit workflow or CI pipeline.
Still, when the implementation clearly violates the shared design system or obvious Refactoring UI principles — weak hierarchy, arbitrary spacing, gray text on color, every button styled as primary — call it out as an implementation issue, not a matter of taste.