design-audit

Solid

Design audit checklist - motion gaps, accessibility, color consistency, responsive, performance.

Web & Frontend 115 stars 14 forks Updated 3 days ago MIT

Install

View on GitHub

Quality Score: 86/100

Stars 20%
69
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
License 10%
100
Description 5%
100

Skill Content

# Design Audit > The final checkpoint. Loaded by `/genjutsu:paint` at the end of the pipeline. > Scans the codebase for motion gaps, a11y violations, perf issues, and inconsistencies. --- ## Motion Gap Analysis Run these greps against the project to detect missing animations. ### Conditional renders without AnimatePresence ```bash grep -rn '{.*&&\s*<\|{.*?\s*:\s*<\|{.*ternary.*<' --include='*.tsx' --include='*.jsx' src/ | grep -v 'AnimatePresence' ``` Look for: `{show && <Component />}` or ternary renders without a wrapping `<AnimatePresence>`. Every conditional mount/unmount needs exit animation support. ### Hover states without transition ```bash grep -rn ':hover' --include='*.css' --include='*.scss' --include='*.module.css' src/ | grep -vE 'transition|animation' ``` Every `:hover` rule must have a corresponding `transition` on the base selector. Instant state flips feel broken. ### Dynamic lists without stagger ```bash grep -rn '\.map(' --include='*.tsx' --include='*.jsx' src/ | grep -vE 'stagger|delay.*index|variants|transition.*delay' ``` Lists rendered via `.map()` should stagger their entrance. Simultaneous pop-in looks cheap. ### Style changes without transition ```bash grep -rn 'style={{' --include='*.tsx' --include='*.jsx' src/ | grep -vE 'transition|transform|opacity' ``` Inline style changes (e.g., dynamic background, color) need a CSS transition or motion wrapper. ### Entries without corresponding exits ```bash grep -rn 'initial=' --include='*.t...

Details

Author
AThevon
Repository
AThevon/genjutsu
Created
4 months ago
Last Updated
3 days ago
Language
Python
License
MIT

Similar Skills

Semantically similar based on skill content — not just same category