ui-review

name	ui-review
description	Review UI code for design system compliance, accessibility, and best practices
risk	unknown
source	https://github.com/bitjaru/styleseed/tree/main/engine/.claude/skills/ss-review
source_repo	bitjaru/styleseed
source_type	community
date_added	2026-07-01T00:00:00.000Z
license	MIT
license_source	https://github.com/bitjaru/styleseed/blob/main/LICENSE

UI Design Review

When to Use

Use this skill when you need review UI code for design system compliance, accessibility, and best practices.

When NOT to use

• For accessibility-only issues → use /ss-a11y
• For Nielsen UX heuristics → use /ss-audit
• For a quick automated check → use /ss-lint
• For non-UI code (data fetching, business rules)

Review the file: $ARGUMENTS

Checklist

1. Design Token Compliance

• No hardcoded hex colors (use semantic tokens: text-foreground, bg-brand, etc.)
• No hardcoded px spacing in Tailwind (use p-6 not p-[24px])
• Shadows use CSS variables (shadow-[var(--shadow-card)])
• Border radius follows the scale (rounded-md, rounded-lg, rounded-2xl)

2. Component Conventions

• Uses data-slot attribute
• Uses cn() for className merging
• Props typed with React.ComponentProps<>
• Supports className prop override
• Named export (not default export for components)
• No wrapper components that only add a className

3. Accessibility (a11y)

• Touch targets >= 44x44px for interactive elements
• focus-visible styles on all interactive elements
• Proper aria-* attributes where needed
• Color contrast meets WCAG AA (4.5:1 for text, 3:1 for large text)