design-check

<!-- sage-metadata cost-tier: sonnet activation: auto tags: [verification, design, quality, frontend] inputs: [diff] outputs: [pass-warnings] requires: [] --> # Design Check (Light Mode) Quick scan within quality-gates. Catches common design quality issues in changed frontend files. Code-only — does not require a browser. ## Availability Check **FIRST:** Check if the diff contains frontend files: .html, .css, .scss, .less, .jsx, .tsx, .vue, .svelte, .astro If NO frontend files in diff: - Return immediately - No output, no warning, INVISIBLE ## Design System Detection Scan in order (stop at first match): 1. Design system skill in `sage/skills/` or `.claude/skills/` 2. `DESIGN.md` or `design-system.md` in project root or `.sage/docs/` 3. CSS custom properties pattern (`--color-*`, `--spacing-*`, `--font-*`) If found → enable token compliance checks. If not found → skip token checks, still run general quality checks. Detection is automatic and INVISIBLE — do not announce whether a design system was found. Just use it (or don't) silently. ## What It Checks (15 seconds max) ### 1. Hardcoded colors (when design system detected) Scan changed files for raw hex colors (#fff, #333, rgb(), hsl()) that should be design system token references. Finding: note — "N hardcoded colors in [file] (consider using tokens)" ### 2. Missing interactive states Search changed component files for: - `:hover` styles on interactive elements (buttons, links, cards) - `:focus` or `:focus-visible` on focusable elements - `disabled` attribute handling with visual distinction - Loading/empty/error state handling in components Finding: note — "[file] has no :focus style on [element]" ### 3. AI slop indicators In new or heavily modified components, check for: - Purple-to-blue gradient hero sections - 3-column icon grids with uniform card styling - Uniform large border-radius on every element - Centered text on every section - Decorative background shapes with no function - Excessive shadow/elevation on flat content Each indicator: warning (awareness, not judgment) ## Report **If findings exist:** ``` ✓ Design check: PASS ({N} notes) - Note: {finding 1} - Note: {finding 2} - Warning: {AI slop indicator} ``` **If clean:** ``` ✓ Design check: PASS ``` **If no frontend files:** No output. Invisible. ## Enforcement - Advisory ONLY — never blocks the build - Findings are notes and warnings, never issues - Do NOT fabricate findings — if you didn't read the file, don't claim - Do NOT invent a design system — if none detected, skip token checks - Do NOT auto-fix design decisions — report only - AI slop indicators are WARNINGS, not issues. Count, don't grade.