Help us improve
Share bugs, ideas, or general feedback.
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-proHow this command is triggered — by the user, by Claude, or both
Slash command
/frontend-design-pro:reviewThis command is limited to the following tools:
The summary Claude sees in its command listing — used to decide when to auto-load this command
# 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...
/design-reviewAudits a design for quality — accessibility, usability, visual consistency, content, and motion — using HTML files, Figma URLs, preview servers, or screenshots for visual AI critique.
/design-reviewReviews code, screenshots, or visual artifacts against visual design principles, identifies violations with scores, and suggests research-backed fixes.
/auditAudits frontend designs from code or descriptions, computes AI Slop Score, detects generic patterns, suggests improvements, and generates a detailed report without changes.
/design-reviewReviews visual design quality—layout, typography, spacing, colour, consistency—for provided URL or detected dev/deployed app, producing severity-ranked issues report with fixes.
/auditAudits UI codebase for design style consistency, hardcoded design tokens (colors, spacing), accessibility (color contrast), and best practices across file, directory, or project scopes.
/design-critiqueEvaluates a design against WCAG 2.2 accessibility, brand consistency, and layout principles, producing a prioritized critique with blockers, should-fix, and nice-to-have items.
Share bugs, ideas, or general feedback.
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: