carfect-design-system
CommunityCarfect UI component guide
Software Engineering#react#design system#shadcn/ui#tailwind css#monorepo#frontend development#ui components
AuthorSonPaier
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill provides a comprehensive guide to building and maintaining consistent, high-quality UI components within the Carfect monorepo, ensuring a unified design language and efficient development process.
Core Features & Use Cases
- Component Architecture: Guides where to place new components (@shared/ui vs. app-specific).
- Styling & Theming: Details Tailwind CSS v3 theming, color palettes, and responsive design strategies.
- Form & Table Patterns: Outlines best practices for building forms with React Hook Form + Zod and implementing sortable, filterable, paginated tables.
- Use Case: When developing a new feature that requires a custom button, this Skill will guide you on whether to create it in the shared UI library or within the specific app, and how to style it according to Carfect's design system.
Quick Start
Use the carfect-design-system skill to understand where to place a new UI button component.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: carfect-design-system Download link: https://github.com/SonPaier/carfect/archive/main.zip#carfect-design-system Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.