33 lines
1.8 KiB
Markdown
33 lines
1.8 KiB
Markdown
## Brief overview
|
|
These rules establish the mandatory use of ShadCN MCP server for all component design and TSX file development. This ensures consistent UI patterns and proper component usage throughout the project.
|
|
|
|
## Component design workflow
|
|
- All component creation or modification must reference ShadCN MCP server first
|
|
- Check ShadCN registry for existing components before creating custom ones
|
|
- Use ShadCN MCP to get proper component examples and usage patterns
|
|
- Validate component composition and variant usage through ShadCN documentation
|
|
|
|
## TSX file development
|
|
- Before touching any .tsx file, consult ShadCN MCP for current component patterns
|
|
- Use ShadCN MCP to verify proper prop interfaces and component APIs
|
|
- Reference ShadCN examples for form handling, data display, and interactive elements
|
|
- Follow ShadCN naming conventions and component structure patterns
|
|
|
|
## Page design requirements
|
|
- All new page designs must start with ShadCN MCP consultation
|
|
- Use ShadCN layout patterns and responsive design examples
|
|
- Verify accessibility patterns and best practices through ShadCN documentation
|
|
- Ensure consistent spacing, typography, and color usage per ShadCN guidelines
|
|
|
|
## Component composition standards
|
|
- Use ShadCN MCP to validate component combinations and nesting patterns
|
|
- Reference ShadCN for proper variant usage and customization approaches
|
|
- Follow ShadCN patterns for conditional rendering and state management
|
|
- Ensure proper TypeScript integration following ShadCN examples
|
|
|
|
## UI consistency enforcement
|
|
- All UI elements must align with ShadCN design system principles
|
|
- Use ShadCN MCP to verify proper use of design tokens and CSS variables
|
|
- Reference ShadCN for animation and transition patterns
|
|
- Maintain consistent component behavior across the application
|