Component Layer

概要

Streamline the UI development process by implementing a structured component architecture that spans UI primitives, feature-specific elements, and shared layouts. This skill provides deep integration with the shadcn/ui ecosystem, enforcing best practices like server-first components, small client boundaries, and the class-variance-authority (CVA) pattern. It ensures high code quality through standardized templates, proper TypeScript typing, and a strict directory hierarchy that separates low-level primitives from complex feature logic.

主な機能

• Guides the implementation of React Server Components versus Client Components to optimize performance
• Provides standardized templates for shadcn/ui primitives using CVA for styling variants
• 0 GitHub stars
• Identifies common anti-patterns such as missing display names or redundant client directives
• Enforces a strict directory structure across UI, features, shared, and layout layers
• Ensures consistent usage of the cn() utility for dynamic Tailwind class merging

ユースケース

• Implementing complex design system variants using the class-variance-authority pattern
• Scaffolding new production-grade UI components using Radix primitives and Tailwind CSS
• Refactoring existing components into a more maintainable server-first directory structure