design-system-implementation
CommunityImplement UI strictly by your design system.
Authordundas
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill ensures UI consistency by strictly adhering to a predefined design system, preventing ad-hoc styling and design drift. It eliminates the guesswork in implementing new components or pages, saving time and reducing future refactoring efforts.
Core Features & Use Cases
- Design System Adherence: Builds or updates UI components and pages strictly following
design/design-system.jsonanddesign/design.json. - Token-Based Implementation: Utilizes design tokens (colors, spacing, typography) and component recipes defined in the system.
- Guided Extensions: Proposes new patterns or tokens for the design system when genuinely new UI is required, ensuring consistency.
- Use Case: Implementing new features or refactoring existing UI in a project where maintaining a consistent brand and user experience is critical, ensuring every pixel aligns with the established design language.
Quick Start
Implement a new user profile settings page, strictly adhering to the project's design system defined in design/design-system.json.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 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: design-system-implementation Download link: https://github.com/dundas/agentbootup/archive/main.zip#design-system-implementation Please download this .zip file, extract it, and install it in the .claude/skills/ directory.