joshuashepherd/my-skills/design-audit

Audit the specified file(s) against design quality standards.

Target: $ARGUMENTS

Audit Checklist

Read the target file(s) and evaluate across all 5 dimensions:

1. PATTERN & LAYOUT

• [ ] Clear visual hierarchy (heading -> subheading -> body -> CTA)
• [ ] Consistent spacing using Tailwind spacing scale (not arbitrary values)
• [ ] Responsive: works at mobile (375px), tablet (768px), desktop (1280px)
• [ ] No horizontal scroll on any breakpoint
• [ ] Content sections have logical grouping

2. STYLE & AESTHETIC

• [ ] Uses shadcn/ui components, not raw HTML with custom styles
• [ ] Consistent border radius (uses rounded-* from design tokens)
• [ ] Shadow usage is subtle and consistent
• [ ] No competing visual styles within the same view

3. COLOR & THEME

• [ ] NO hardcoded colors (no bg-blue-600, no hex values, no rgb())
• [ ] All colors use semantic tokens (bg-primary, text-muted-foreground, etc.)
• [ ] Works in both light and dark mode
• [ ] WCAG AA contrast compliance (4.5:1 for normal text, 3:1 for large text)
• [ ] Follows 60-30-10 color distribution

4. TYPOGRAPHY

• [ ] No more than 2 font families used
• [ ] No more than 5 font size variations in a single view
• [ ] Text is readable (minimum 16px body text on mobile)
• [ ] Line length capped at ~75 characters for readability
• [ ] No orphaned headings (heading always followed by content)

5. ANIMATIONS & INTERACTIONS

• [ ] All interactive elements have visible hover/focus states
• [ ] Focus indicators are at least 3px and high contrast
• [ ] prefers-reduced-motion is respected
• [ ] No animations block user interaction
• [ ] No transitions longer than 300ms for micro-interactions
• [ ] Scroll animations use transform/opacity only (GPU accelerated)

ACCESSIBILITY

• [ ] All images have meaningful alt text
• [ ] No color-only information conveyance
• [ ] Keyboard navigation works (no traps)
• [ ] Tap targets are minimum 44x44px
• [ ] ARIA labels on icon-only buttons
• [ ] No auto-focus on page load (except search pages)

TENANT ISOLATION

• [ ] No hardcoded tenant-specific strings (use tenantConfig)
• [ ] Feature flags checked before optional sections
• [ ] No direct fetch() calls (uses hooks)

Output Format

Report as:

## Design Audit: [filename]
 
### Score: X/5 dimensions passing
 
### Issues Found
1. [DIMENSION] — [severity: HIGH/MEDIUM/LOW] — description — file:line
   Fix: specific suggestion
 
### Passing
- [DIMENSION] — what's working well