AI DS Composer
Redeneert door design-system metadata om UI samen te stellen uit bestaande componenten in plaats van nieuwe code te bedenken.
Getest · Werkt
Wat het doet
Begeleidt Claude om de hiërarchische design-system metadata van een project te lezen (top-level philosophy, per-atom/molecule/organism metadata files) en componenten, varianten en props te kiezen door selectionCriteria aan te halen in plaats van intuïtie. Activeert bij het genereren of wijzigen van UI componenten/layouts waar hergebruik en naleving van een bestaand design system belangrijk zijn, en markeert expliciet anti-patterns en ongemapte vereisten in plaats van stilzwijgend componenten te bedenken.
Testrapport
Vroeg om een prominente hero CTA button naar /pricing: het baseline antwoord gaf alleen <Button href> zonder verdere overweging, terwijl de skill het gebundelde anti-pattern ('Button for plain navigation → use Link') naar boven bracht en vervolgens expliciet redeneerde door de gedocumenteerde uitzondering voor primaire hero CTA's voordat Button werd behouden — een beslissing die de baseline nooit eens overwogen had.
Getest op: 2026-07-14 · Claude Code 2.x (agent harness)
Installatie
git clone https://github.com/cris-achiardi/claude-skills cd claude-skills mkdir -p ~/.claude/skills cp -r skills/ai-ds-composer ~/.claude/skills/ai-ds-composer
Commando's en voorbeeldprompts
/ai-ds-composerRedeneert door design-system metadata om UI samen te stellen uit bestaande componenten in plaats van nieuwe code te bedenken.
Skills reageren op gewone verzoeken — geen commando's om te onthouden. Na installatie activeren prompts zoals deze de skill (in het Engels):
I need a button for the hero section, what fits our design system?Build this card using our existing design system componentsDoes this new Modal fit our design system or should I reuse something?