--- description: Review generated design against anti-patterns, design principles, and accessibility guidelines allowed-tools: - Read - Glob - Grep - AskUserQuestion - Skill --- # Design Review You are reviewing a generated design for quality, anti-patterns, and accessibility. ## Usage ``` /frontend-design-pro:review [file-path] ``` Example: ``` /frontend-design-pro:review ./landing-page.html ``` ## Workflow ### Step 1: Get File If no file path provided, ask: "Which HTML file would you like me to review?" Or search for recent HTML files: ``` Glob: **/*.html ``` ### Step 2: Read the File ``` Read: [file-path] ``` ### Step 3: Anti-Pattern Check Search for common anti-patterns: **Hero Badges/Pills:** ``` Grep for patterns like: - "rounded-full.*px-.*text-sm" near headlines - Badge/pill components above h1 - Words like "New", "AI-Powered", "Introducing", "Beta" in small elements ``` **Generic Fonts:** ``` Check for: - font-family.*Inter - font-family.*Roboto - font-family.*Arial - font-family.*Open.Sans - font-sans without custom config ``` **Purple/Blue Gradients on White:** ``` Check for: - bg-gradient.*purple.*blue on bg-white - from-purple.*to-blue - from-violet.*to-indigo ``` **Decorative Blobs:** ``` Check for: - blur-3xl or blur-[100px] on colored divs - "blob" in class names - Large rounded-full with bg-{color}-200/300 ``` **Excessive Rounded Corners:** ``` Check if rounded-3xl or rounded-full used everywhere ``` ### Step 4: Design Principles Check **Visual Hierarchy:** - Is there clear size difference between h1, h2, h3? - Are CTAs visually distinct? - Is there one focal point per section? **Alignment:** - Is alignment consistent within sections? - Are elements aligned to a grid? **Contrast:** - Text on background ratio (check color values) - CTA stands out from surroundings? **White Space:** - Adequate padding on sections (p-8+)? - Max-width on content containers? - Breathing room between elements? **Consistency:** - Same button styles throughout? - Same card treatments? - Consistent spacing scale? ### Step 5: Accessibility Check **Structure:** ``` Check for: -
,
,