ui-review
Review UI code for design system compliance, accessibility, and best practices
Profile →npx skills add sickn33/agentic-awesome-skills --skill ui-review --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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-*` att
- When to Use
- When NOT to use
- Checklist
- 1. Design Token Compliance
- 2. Component Conventions
- 3. Accessibility (a11y)
- 4. Mobile Best Practices
- 5. Performance
- 6. Typography
- 7. Spacing Consistency
- 8. Coherence (VISUAL-CRAFT.md §C0 — the "one choice per axis" laws)
- Output Format
- Limitations
What does the ui-review skill do?
Review UI code for design system compliance, accessibility, and best practices
How do I install it?
Run `npx skills add sickn33/agentic-awesome-skills --skill ui-review --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From sickn33/agentic-awesome-skills, a repository with 44,414 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.