shadcn-component-review
This skill systematically reviews custom components and layouts to ensure they align with shadcn design patterns, visual style conventions, and modern composition practices. It catches common drift issues like hardcoded colors, inconsistent spacing, missing data-slot attributes, and anti-patterns that generation-time linting misses. Use it after writing or modifying components, or when you need to verify a layout follows shadcn idioms.
shadcn-component-review audits custom components against shadcn design patterns and spacing rules.
AI-generated summary based on this skill's SKILL.md
Install
mattbx/shadcn-skills/shadcn-component-review
git clone https://github.com/mattbx/shadcn-skills
cp -r shadcn-skills/skills/shadcn-component-review ~/.claude/skills/shadcn-component-reviewnpx skillfed install mattbx/shadcn-skills/shadcn-component-reviewFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What does shadcn-component-review check in my components?
shadcn-component-review systematically audits custom components and layouts against shadcn design patterns, visual conventions, and composition practices. It validates spacing consistency, semantic token usage, catches hardcoded colors, checks data-slot attributes, and ensures components follow shadcn idioms that generation-time linting often misses.
How do I review my shadcn component for design patterns?
Use shadcn-component-review after writing or modifying components to catch drift issues. The skill reviews custom components for shadcn design pattern compliance, audits spacing and layout against shadcn conventions, validates semantic token usage, checks component composability, and ensures responsive design and accessibility compliance.
Does shadcn-component-review check for hardcoded colors?
Yes. shadcn-component-review validates semantic token usage and specifically catches hardcoded colors that break theme consistency. It ensures your components use design tokens rather than inline color values, maintaining alignment with shadcn's theming system.
Can this skill audit my layout for spacing drift?
Yes. shadcn-component-review audits spacing and layout against shadcn conventions with a focus on detecting spacing drift. It verifies that your custom UI components maintain consistent spacing patterns and follow shadcn's layout idioms.
Does shadcn-component-review validate data-slot attributes?
Yes. shadcn-component-review checks component composability and data-slot attributes to ensure components follow shadcn composition patterns. It verifies that your components use proper data-slot attributes for composition and styling consistency.
What license does shadcn-component-review use?
shadcn-component-review is released under the MIT license, allowing free use, modification, and distribution in both open-source and commercial projects.
SKILL.md
rendered from the published skill — quoted content, verbatim
shadcn Component Review
Systematic audit process for ensuring custom components align with shadcn design patterns, the project's chosen visual style, and modern composition conventions.
How This Complements the Official shadcn Skill
The official shadcn skill (shipped with CLI v4) enforces rules at generation time — telling agents "use gap-* not space-y-*, use semantic colors, use size-* for equal width/height," and so on. That's correct
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 4 files
skills/shadcn-component-review/SKILL.md
skills/shadcn-component-review/references/animation-patterns.md
skills/shadcn-component-review/references/review-checklist.md
skills/shadcn-component-review/references/theme-styles.md