{"enrichment":{"faq":[{"a":"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.","q":"What does shadcn-component-review check in my components?"},{"a":"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.","q":"How do I review my shadcn component for design patterns?"},{"a":"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.","q":"Does shadcn-component-review check for hardcoded colors?"},{"a":"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.","q":"Can this skill audit my layout for spacing drift?"},{"a":"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.","q":"Does shadcn-component-review validate data-slot attributes?"},{"a":"shadcn-component-review is released under the MIT license, allowing free use, modification, and distribution in both open-source and commercial projects.","q":"What license does shadcn-component-review use?"}],"shadow_tags":["design-audit","component-validation","spacing-checker","token-compliance","composition-review","theme-consistency","pattern-enforcement","ui-quality-gate","drift-detection"],"summary_rewrite":"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."},"files":[{"bytes":11908,"path":"skills/shadcn-component-review/SKILL.md","sha256":"d5cbbc78957f65ed87c0b7454085ad94bf628d7d7a197e585d5672131c6910a8","url":"https://skillfed.io/files/mattbx/shadcn-skills/shadcn-component-review/0167cbf9/SKILL.md"}],"id":"mattbx/shadcn-skills/shadcn-component-review","links":{"html":"https://skillfed.io/mattbx/shadcn-skills/shadcn-component-review","md":"https://skillfed.io/mattbx/shadcn-skills/shadcn-component-review.md","repo":"https://github.com/mattbx/shadcn-skills"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":1,"language":null,"last_updated":"2026-04-27","license":"MIT","name":"shadcn-component-review","publisher":"mattbx","stars":14},"relations":{"similar":[{"id":"yonatangross/orchestkit/ui-components"},{"id":"elophanto/EloPhanto/shadcn"},{"id":"google-labs-code/stitch-skills/shadcn-ui"},{"id":"existential-birds/beagle/shadcn-ui"},{"id":"existential-birds/beagle/shadcn-code-review"},{"id":"laguagu/claude-code-nextjs-skills/ai-app"},{"id":"yonatangross/orchestkit/design-context-extract"},{"id":"samhvw8/dot-claude/ui-design-system"},{"id":"Bbeierle12/Skill-MCP-Claude/component-library"},{"id":"ScientiaCapital/skills/frontend-ui-skill"}]},"slug":{"owner":"mattbx","repo":"shadcn-skills","skill":"shadcn-component-review"},"version":"0167cbf9"}
