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
Decision gist · record as of 2026-04-27
shadcn-component-review audits custom components against shadcn design patterns and spacing rules. 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.
Use it when
- Use shadcn-component-review after writing or modifying components to catch drift issues.
- Yes.
Verify before relying
Read SKILL.md below before installing (4 files). Open directory: indexed for reading, not audited.
Install
mattbx/shadcn-skills/shadcn-component-review
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
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
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Review custom components for shadcn design pattern compliance”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Master shadcn-ui's approach to building reusable components with CVA for variant management, Radix for accessible primitives, and Tailwind for styling. Covers CLI setup, the cn() utility, polymorphic rendering via asChild, compound component structure, and modern CSS selectors like has() for conditional layouts.
UI Components provides 22 rules across 7 categories for constructing accessible component libraries with shadcn/ui and Radix Primitives. It covers CVA variants, OKLCH theming, form integration with React Hook Form and Zod, Radix composition patterns, and design system foundations including spacing scales and typography.
Master modern frontend architecture for production SaaS applications using Tailwind CSS v4, shadcn/ui components, and either Next.js 15+ or Vite SPAs. This skill covers server-first design patterns, WCAG 2.1 AA accessibility, responsive layouts, and performance optimization for dashboards, data tables, and complex enterprise interfaces.
Shadcn is a collection of accessible, copy-paste React components built on Tailwind CSS and Radix UI primitives. It includes form handling, dark mode support, pre-designed blocks, and an MCP server for safe component discovery and installation in Next.js projects.
This skill audits shadcn/ui and Radix-based React components against best practices for variant-driven styling, accessible state handling, and composable component architecture. It checks CVA pattern separation, asChild slot integration, focus and ARIA attributes, and data-slot targeting across multi-part components.
shadcn/ui helps you integrate beautifully designed, accessible components into React applications by copying them directly into your codebase rather than installing a library. You get full control over styling and behavior while maintaining zero runtime overhead. The skill guides component discovery, installation, customization, and provides patterns for forms, dialogs, and data display.
More skills design-context-extract (MIT) · Ui Design System (unlicensed) · component-library (MIT)