Skill: aa-on-ai/design-review (version 1.1.0)

--- name: design-review description: > Core pack — always active for visual work. Quality gate for UI, components, pages, layouts, or frontend work. Triggers on any visual/design task automatically. Use before presenting work, during builds, and for design QA. --- # Design Review Skill ## Core Pack — Always Active This is a core skill. Apply it on ALL visual and frontend work, no exceptions. You do not need permission or a specific trigger to use this. ## When to Use - Before presenting ANY visual or UX work. - Treat this as a quality gate, not optional polish. - Sub-agents doing design/frontend work MUST run this before announcing completion. ## Pre-Work: Read Before Building ### 1. Read the project's guidelines - Read `guidelines.md` or equivalent design system doc first if it exists. - Follow the project's existing components, tokens, and patterns before inventing anything. - If no formal guidelines exist, inspect the existing product and match its logic. ### 2. Research before designing - Check how similar tools solve the same problem before inventing a pattern. - Use proven references when they exist. - Quality bar references: - UX Tools — editorial restraint, typography, calm hierarchy - Inflight by Ridd — motion, depth, data viz polish - Linear — dense information, excellent hierarchy, no noise - Vercel dashboard — spacing, typography, dark mode discipline ### 3. Check design memory - Read `memory/channels/{channel-name}.md` for prior design decisions. - If memory says Aaron rejected a pattern, don't repeat it. - If a project brain file is linked from channel memory, read that too. ## Aaron's Core Principles - Restraint IS the design. - Spacing is the #1 tell. - Typography hierarchy > color for information architecture. - Match references at pixel level before adding your own ideas. - Existing patterns > new patterns. - Interactive elements should feel polished, not dead. - If the foundation is wrong, no polish fixes it. - Good design is centripetal, not centrifugal. ## Reference Files Read only what the task needs. Keep this SKILL lean, load detail on demand: - `references/typography.md` — hierarchy, scale, pairing, measure - `references/color.md` — restrained palettes, tinted neutrals, contrast, OKLCH - `references/spacing.md` — spacing system, rhythm, grouping, layout density - `references/motion.md` — timing, easing, reduced motion, interactive feel - `references/anti-patterns.md` — patterns Aaron will clock instantly and reject ### For sub-agents - Read the relevant reference files based on what you're building. - New layout or dashboard? Read spacing + anti-patterns. - Type-heavy screen? Read typography + spacing. - Color or theming work? Read color + anti-patterns. - Interactive polish? Read motion + anti-patterns. - If in doubt, at minimum read spacing + anti-patterns. ## Pre-Flight Checklist Run this EVERY TIME before presenting work to Aaron. ### Step 1: Visual verification - [ ] Take a screenshot of the rendered result. - [ ] Compare side-by-side with the reference if one exists. - [ ] Check the target viewport, not an arbitrary devtools width. ### Step 2: Design audit - [ ] Spacing check — enough breathing room? Default to more. - [ ] Color check — did you add color that wasn't necessary? - [ ] Typography check — is hierarchy clear without leaning on color? - [ ] Pattern check — are you using the project's existing components? - [ ] Interaction check — hover, focus, active states exist and feel intentional. - [ ] Integrity check — no placeholders, dead states, broken assets, or missing data handling. ### Step 3: Honesty check - [ ] Is it actually done? - [ ] Does it meet the brief, not an adjacent brief? - [ ] Would you be proud to show this to Aaron cold? ### Step 4: Run verification scripts if you have access to the scripts directory, run these before presenting: ```bash # check for common agent anti-patterns python3 skills/design-review/scripts/anti-pattern-check.py <your-file.tsx> # verify loading, empty, and error states exist python3 skills/design-review/scripts/state-check.py <your-file.tsx> # check semantic HTML, aria labels, alt text, heading hierarchy python3 skills/design-review/scripts/accessibility-check.py <your-file.tsx> ``` fix any warnings before presenting. these are the cheapest quality checks — they catch the obvious stuff so the human review can focus on judgment calls. for CI integration, copy `ci/design-eval.py` and `ci/design-eval.yml` into your project to run all three checks on every PR. ### Step 5: Present with evidence - Screenshot of the result - What you referenced - Known gaps or uncertainties - Link to live/deployed version if applicable ## Updating This Skill - After Aaron gives design feedback, capture it. - Add redirects to `references/anti-patterns.md` or the relevant reference file. - Add project-specific decisions to channel memory. - Goal: don't get the same design feedback twice.


Security scan verdicts — ClawScan: suspicious | static analysis: clean | VirusTotal: clean | SkillSpector: suspicious (CRITICAL)