Skill

styling-review

Review Tailwind CSS usage, design consistency, and styling patterns across components

Install

npx claudepluginhub silviaare95/xari-plugins --plugin frontend-dev

Tool Access

This skill uses the workspace's default tool permissions.

SKILL.md

Similar Skills

cache-components

Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.

cache-components

138.8k

claude-opus-4-5-migration

2 files

Migrates code, prompts, and API calls from Claude Sonnet 4.0/4.5 or Opus 4.1 to Opus 4.5, updating model strings on Anthropic, AWS, GCP, Azure platforms.

claude-opus-4-5-migration

83.2k

bmad-help

Analyzes BMad project state from catalog CSV, configs, artifacts, and query to recommend next skills or answer questions. Useful for help requests, 'what next', or starting BMad.

bmad-pro-skills

43.8k

Stats

Parent Repo Stars0

Parent Repo Forks0

Last CommitApr 8, 2026

Actions

View Source View Plugin View on GitHub View README

Steps

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

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

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

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

Performance check:

No unused Tailwind classes (check with tailwind-merge usage)
Complex animations use will-change or transform for GPU acceleration
Large class strings could use cn() for readability

Output Format

## Styling Review: <target> ### Summary - **Issues**: X critical, Y warnings - **Consistency score**: <good | needs work | inconsistent> ### Anti-patterns 1. **<file:line>**: <issue + fix> ### Consistency Issues 1. **<pattern>**: <inconsistency + recommendation> ### Quick Wins 1. <easy improvement>

Styling Review

Review styling for: $0

Focus: $1 (default: all)

Steps

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
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
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
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
Performance check:
- No unused Tailwind classes (check with tailwind-merge usage)
- Complex animations use will-change or transform for GPU acceleration
- Large class strings could use cn() for readability

Output Format

## Styling Review: <target>

### Summary
- **Issues**: X critical, Y warnings
- **Consistency score**: <good | needs work | inconsistent>

### Anti-patterns
1. **<file:line>**: <issue + fix>

### Consistency Issues
1. **<pattern>**: <inconsistency + recommendation>

### Quick Wins
1. <easy improvement>

Constraints

Don't suggest switching away from Tailwind
Respect existing design tokens and theme configuration
Flag issues by severity — don't bury critical problems in style nits
If tailwind.config extends the theme, check against those custom values