component-creator

What problem does it solve?

This Skill eliminates the repetitive and error-prone task of manually setting up boilerplate for new Web Components within the Sando Design System. It ensures consistency and adherence to architectural standards while only generating the exact code a developer needs, avoiding unnecessary cleanup and accelerating development.

Core Features & Use Cases

• Minimal Boilerplate Generation: Creates a lean, functional starting point for Web Components, including Lit component files, TypeScript types, unit tests, accessibility tests, Storybook stories, and VitePress documentation.
• Requirement-Driven Scaffolding: Interactively gathers specific needs (props, variants, slots, events) and generates code tailored precisely to those requirements, preventing bloat and ensuring relevance.
• Sando Design System Compliance: Ensures all generated components adhere to Sando's monolithic architecture and naming conventions, streamlining integration into the existing ecosystem.
• Use Case: A developer needs a new Modal component. Instead of manually creating 8 files and configuring them, they use this Skill, specify open, onClose props, modal-open, modal-close events, and header, content, footer slots. The Skill generates everything in minutes, ready for implementation.

Quick Start

Ask the component-creator skill to create a new "Card" component with a "solid" variant and "title" and "content" slots.