skills.rest
rodrigolagodev
rodrigolagodevCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

component-creator

Generate minimal Sando Design System Web Component scaffolding with Lit, TypeScript, tests, stories, and docs.

Updated Oct 6, 2025
Search Tags:#code generation#design system#scaffolding#boilerplate#frontend development#web components#LitElement
One-click install
npx skills add https://github.com/rodrigolagodev/SandoDesignSystem --skill component-creator
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-creator
Source: https://github.com/rodrigolagodev/SandoDesignSystem/tree/main/.claude/skills/component-creator
Command: npx skills add https://github.com/rodrigolagodev/SandoDesignSystem --skill component-creator

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) components.

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.

Frequently Asked Questions about component-creator

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

FAQPage Schema
How do I scaffold a new Web Component for a design system?▼

Scaffolding generates minimal boilerplate for Web Components by creating a complete 7-file monolithic structure: Lit component file, TypeScript types, unit tests, accessibility tests, Storybook stories, and VitePress documentation in one step, following your design system's naming conventions and architectural standards.

Can I generate Web Components that follow Sando Design System conventions automatically?▼

Yes. The scaffolding process generates components adhering to Sando's monolithic architecture, kebab-case tag naming, PascalCase class naming, JSDoc headers, and integrated unit, E2E, accessibility tests, stories, and API references without manual configuration.

How do I create boilerplate for LitElement components without repetitive setup?▼

Code generation creates a lean starting point for LitElement components by gathering your specific requirements—props, variants, slots, and events—then generating only the files you need, eliminating unnecessary cleanup and accelerating development cycles.

What files does Web Component scaffolding create?▼

The 7-file monolithic pattern generates a Lit component file, TypeScript type definitions, unit tests, accessibility tests, Storybook stories, VitePress documentation, and related configuration, all tailored to your component's props, slots, and events.

Can I avoid boilerplate bloat when creating new frontend components?▼

Requirement-driven scaffolding prevents bloat by generating only the exact code needed for your component—no dead code, no unnecessary files—ensuring each generated component is immediately relevant and integration-ready.

Do I need to manually configure component naming and test structure?▼

No. Scaffolding automates naming conventions, test structure, and architectural compliance, applying kebab-case tags, PascalCase classes, JSDoc formatting, and test integration patterns automatically according to your design system's guidelines.

Related Skills

Explore More Software Engineering Skills→
EndavaEndava
160

create-component

Scaffold BEEQ web components with StencilJS structure and supporting files.

Official
Advanced
jangtrinhjangtrinh

design-init

Automates design system setup with token extraction, component inventory, and Storybook scaffolding.

Community
Advanced
murphytruemanmurphytrueman
155

component-api-validator

Audit component APIs for consistency, breaking changes, and contract compliance.

Community
Advanced
abdullah1854abdullah1854
1

project-scaffold

Generate project structure templates for Next.js, Express, and FastAPI applications.

Community
Basic