ai-ds-composer

Compose UI components from design system metadata with variant selection.

4|1|Updated Oct 29, 2025

Search Tags:#frontend #code generation #design system #UI development #metadata #component composition

Ready to run

npx skills add https://github.com/bacchus-labs/wrangler --skill ai-ds-composer

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ai-ds-composer
Source: https://github.com/bacchus-labs/wrangler/tree/main/.wrangler/memory/knowledge-base/reference-prompts/skills/ui-related-skills/ai-ds-composer
Command: npx skills add https://github.com/bacchus-labs/wrangler --skill ai-ds-composer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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.ts to 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.

Frequently Asked Questions about ai-ds-composer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I ensure UI component reuse when generating frontend code?▼

To ensure UI component reuse during frontend code generation, you need a system that applies anti-pattern rules and consults hierarchical design system metadata to select existing elements rather than creating redundant code.

What is metadata-driven UI component composition?▼

Metadata-driven UI component composition is the process of analyzing hierarchical design system metadata to select appropriate components, apply correct variants, and enforce pattern adherence for consistent interface development.

How do I select the correct component variant from a design system?▼

Selecting the correct component variant requires analyzing documented selection criteria within metadata files, such as Button.metadata.ts, to match specific use cases like primary call-to-action buttons with their corresponding size and variant rules.

Can I use design system metadata to identify gaps in my component library?▼

Yes, analyzing design system metadata can identify gaps in your component library by flagging instances where existing components do not fit new requirements, thereby preventing the creation of redundant or non-compliant code.

What do I need to know to start using design system intelligence for UI development?▼

To use design system intelligence for UI development, you need an understanding of your project structure, metadata formats like component metadata files, and component APIs to properly apply anti-pattern rules and variant selection.

When should I not use automated component composition for frontend development?▼

You should avoid automated component composition when your project lacks structured hierarchical metadata files or documented selection criteria, as the system requires these to properly apply variants and identify component library gaps.