styling-reviewlisted
Install: claude install-skill SilviaAre95/wayworks
# Styling Review
Review styling for: **$ARGUMENTS** (focus defaults to all)
## Steps
1. **Scan for anti-patterns**:
- Inline styles (`style={{}}`) — should be Tailwind classes
- CSS modules or styled-components mixed with Tailwind
- Hardcoded colors instead of theme tokens (`text-[#333]` → `text-gray-700`)
- Arbitrary values (`w-[347px]`) where standard values work (`w-80`)
- Duplicate class combinations that should be extracted
2. **Check consistency**:
- Spacing scale: are components using consistent spacing? (`p-4` everywhere, not `p-4` and `p-[15px]`)
- Typography: consistent font sizes and weights across similar elements
- Color usage: semantic colors (`text-primary`, `bg-destructive`) vs raw palette
- Border radius: consistent rounding (`rounded-lg` everywhere, not mixed)
- Shadow usage: consistent elevation system
3. **Check responsive design**:
- Mobile-first approach (base styles = mobile, `sm:` `md:` `lg:` for larger)
- No missing breakpoint coverage for layout-critical elements
- Text sizes scale appropriately
- Touch targets are at least 44x44px on mobile
4. **Check dark mode** (if applicable):
- All colors have `dark:` variants
- No hardcoded white/black that breaks in dark mode
- Images and icons have dark mode alternatives
5. **Performance check**:
- No unused Tailwind classes (check with `tailwind-merge` usage)
- Complex animations use `will-change` or `transform` for GPU acceleration
- Large c