ai-ds-composer
OfficialCompose UI with design system intelligence.
Design & Creative#frontend#code generation#design system#UI development#metadata#component composition
Authorbacchus-labs
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill helps you intelligently compose UI components by consuming design system metadata, ensuring component reuse, proper variant selection, and adherence to design patterns.
Core Features & Use Cases
- Metadata-Driven Component Selection: Understand project structure and hierarchical metadata to select the most appropriate components.
- Design System Adherence: Apply anti-pattern rules and ensure component reuse based on documented criteria.
- Gap Identification: Flag when existing components don't fit requirements, preventing the creation of redundant code.
- Use Case: When asked to create a "primary call-to-action button," this Skill will consult the design system's
Button.metadata.tsto select the correct variant and size, and explain why it's the best choice based on documented selection criteria.
Quick Start
Use the ai-ds-composer skill to generate a primary call-to-action button for a hero section.
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: ai-ds-composer Download link: https://github.com/bacchus-labs/wrangler/archive/main.zip#ai-ds-composer 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 223,000+ vetted skills library on demand.