Agent skill
design-review
Review UI components for design system compliance, accessibility, and visual consistency
Stars
163
Forks
31
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/design-review-async-io-pierre-mcp-server
SKILL.md
Design Review
Perform a comprehensive design system review of the frontend changes.
Review Scope
Analyze files in:
frontend/src/components/- React componentsfrontend/src/index.css- Component CSS definitionstemplates/- OAuth HTML templates (if modified)
Review Checklist
1. Component Usage Compliance
Search for anti-patterns in changed files:
bash
# Find raw button elements (should use <Button>)
grep -r "<button" frontend/src/components/ --include="*.tsx" | grep -v "// allowed"
# Find raw div cards (should use <Card>)
grep -rE "className=\"[^\"]*border[^\"]*rounded" frontend/src/components/ --include="*.tsx"
# Find custom spinners (should use pierre-spinner)
grep -r "animate-spin" frontend/src/components/ --include="*.tsx"
# Find raw hex colors (should use design tokens)
grep -rE "bg-\[#|text-\[#|border-\[#" frontend/src/components/ --include="*.tsx"
# Find non-pierre colors
grep -rE "(bg|text|border)-(red|green|blue|yellow|purple|gray)-[0-9]" frontend/src/components/ --include="*.tsx" | grep -v "pierre-"
2. CSS Completeness
Verify all component variants have CSS definitions:
- Check
Badge.tsxvariants against.badge-*classes inindex.css - Check
Button.tsxvariants against.btn-*classes inindex.css
3. Accessibility Audit
- Verify focus states use
.focus-ringutility - Check for missing ARIA labels on icon buttons
- Verify color contrast meets WCAG 2.1 AA (4.5:1)
- Ensure touch targets are at least 44x44px
4. Visual Consistency
- Verify consistent spacing from Tailwind scale
- Check typography follows design system
- Verify gradients use
gradient-pierreor pillar gradients - Check loading states use
pierre-spinner
Output Format
=== Pierre Design System Review ===
📁 Files Analyzed: [count]
== Component Compliance ==
✅/❌ Button usage: [details]
✅/❌ Card usage: [details]
✅/❌ Badge usage: [details]
✅/❌ Loading states: [details]
✅/❌ Color tokens: [details]
== Accessibility ==
✅/❌ Focus states: [details]
✅/❌ ARIA labels: [details]
✅/❌ Contrast ratios: [details]
== CSS Completeness ==
✅/❌ All variants defined: [details]
== Issues Found ==
1. [file:line] - [issue description]
2. [file:line] - [issue description]
== Recommendations ==
- [specific improvement with code example]
== Verdict ==
[PASS / NEEDS WORK - X issues to address]
After Review
If issues are found, provide specific code fixes following the patterns in .claude/skills/frontend-design/SKILL.md.
Run this review after any frontend changes before committing.
Didn't find tool you were looking for?