What problem does it solve?
This Skill provides comprehensive guidelines and constraints for implementing a consistent, accessible, and aesthetically pleasing user interface, ensuring a cohesive design language across the project.
Core Features & Use Cases
- Design Principles: Defines visual styles for light and dark modes, emphasizing Glassmorphism and Elegant themes respectively.
- Accessibility Standards: Enforces WCAG AA contrast ratios, recommended font sizes, and color usage for information conveyance.
- Implementation Rules: Guides the use of Tailwind CSS v4, CSS variables, and component architecture (Shadcn UI, Lucide React).
- Constraints & Anti-Patterns: Highlights common design pitfalls to avoid, such as unclear feedback and poor aesthetic choices.
- Detailed Resources: Links to specific guidelines for design tokens, UI principles, and component implementation.
- Use Case: When designing a new feature, consult this Skill to ensure all UI elements adhere to the established Glassmorphism style, use correct color palettes, and follow accessibility best practices.
Quick Start
Refer to the design-system skill for UI implementation guidelines and visual style constraints.
