From frontend-design-pro
Reviews HTML file for design anti-patterns, principles violations, and accessibility issues. Generates markdown report with status tables and recommendations.
npx claudepluginhub davepoon/buildwithclaude --plugin frontend-design-pro# Design Review You are reviewing a generated design for quality, anti-patterns, and accessibility. ## Usage Example: ## 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: ### Step 2: Read the File ### Step 3: Anti-Pattern Check Search for common anti-patterns: **Hero Badges/Pills:** **Generic Fonts:** **Purple/Blue Gradients on White:** **Decorative Blobs:** **Excessive Rounded Corners:** ### Step 4: Design Principles Check **Visual Hierarchy:** - Is there clear size diffe...
/reviewReviews staged changes or recent commits across five axes—correctness, readability, architecture, security, performance—producing categorized findings with file:line references and fixes.
/reviewRuns Codex code review on local git state (working tree or vs base branch). Supports --wait/--background, --base <ref>, --scope auto|working-tree|branch.
/reviewOrchestrates multi-LLM code review across Codex, Gemini, Claude, Perplexity, and others; checks provider availability and posts inline PR comments.
/reviewReviews specified code scope via four specialists (quality, security, performance, architecture), producing summary, detailed findings, refactoring suggestions, prioritized action plan.
/reviewDispatches the reviewer agent to review current branch code changes against code quality principles.
/reviewConducts thorough code review for bugs, security vulnerabilities, performance issues, and best practices. Outputs Markdown report with prioritized issues, suggestions, positives, and approval verdict.
You are reviewing a generated design for quality, anti-patterns, and accessibility.
/frontend-design-pro:review [file-path]
Example:
/frontend-design-pro:review ./landing-page.html
If no file path provided, ask:
"Which HTML file would you like me to review?"
Or search for recent HTML files:
Glob: **/*.html
Read: [file-path]
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
Visual Hierarchy:
Alignment:
Contrast:
White Space:
Consistency:
Structure:
Check for:
- <header>, <main>, <nav>, <footer>
- Skip link (a href="#main-content" or similar)
- lang="en" on <html>
Headings:
Verify:
- Exactly one <h1>
- Sequential heading levels (h1 → h2 → h3)
- No skipped levels
Focus States:
Check for:
- focus:ring or focus:outline classes
- No focus:outline-none without replacement
Images:
Check for:
- alt="" on decorative images
- Descriptive alt text on meaningful images
Reduced Motion:
Check for:
- @media (prefers-reduced-motion)
- motion-reduce: classes
Color Contrast:
Analyze:
- Text color vs background color
- Estimate contrast ratio
- Flag any obvious low-contrast text
Create a comprehensive review:
## Design Review Report
### File: [path]
---
## Anti-Pattern Check
| Pattern | Status | Details |
|---------|--------|---------|
| Hero badges | ✅ Pass / ❌ Found | [Details] |
| Generic fonts | ✅ Pass / ❌ Found | [Details] |
| Purple-blue gradient | ✅ Pass / ❌ Found | [Details] |
| Decorative blobs | ✅ Pass / ❌ Found | [Details] |
| Excessive rounding | ✅ Pass / ❌ Found | [Details] |
| Template layout | ✅ Pass / ❌ Found | [Details] |
---
## Design Principles Check
| Principle | Status | Notes |
|-----------|--------|-------|
| Visual hierarchy | ✅ / ⚠️ / ❌ | [Notes] |
| Alignment | ✅ / ⚠️ / ❌ | [Notes] |
| Contrast | ✅ / ⚠️ / ❌ | [Notes] |
| White space | ✅ / ⚠️ / ❌ | [Notes] |
| Consistency | ✅ / ⚠️ / ❌ | [Notes] |
---
## Accessibility Check
| Requirement | Status | Notes |
|-------------|--------|-------|
| Semantic HTML | ✅ / ❌ | [Notes] |
| Skip link | ✅ / ❌ | [Notes] |
| Heading order | ✅ / ❌ | [Notes] |
| Focus states | ✅ / ❌ | [Notes] |
| Image alt text | ✅ / ❌ | [Notes] |
| Reduced motion | ✅ / ❌ | [Notes] |
| Color contrast | ✅ / ⚠️ / ❌ | [Notes] |
---
## Summary
**Score: [X]/[Total] checks passed**
### Critical Issues
[List any blockers that must be fixed]
### Recommended Improvements
[List nice-to-have improvements]
### Positive Notes
[What the design does well]
If issues found, offer to fix them:
"I found [N] issues in your design. Would you like me to:
For a fast check, focus on:
The review provides: