create-component

Name: create-component
Availability: InStock
Author: leboncoin

Generate a Spark UI component scaffold with TypeScript, CVA styling, tests, stories, and documentation.

92|26|Updated Jan 26, 2023

Search Tags:#TypeScript #Storybook #Tailwind #generate #CVA #component scaffold #Spark UI

Ready to run

npx skills add https://github.com/leboncoin/spark-web --skill create-component-leboncoin

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: create-component
Source: https://github.com/leboncoin/spark-web/tree/main/.cursor/skills/create-component
Command: npx skills add https://github.com/leboncoin/spark-web --skill create-component-leboncoin

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create a complete scaffolding for a Spark UI component, including TypeScript source, styles, tests, stories, and documentation, enabling rapid contribution to the design system.

Core Features & Use Cases

Generate a full component skeleton in packages/components/src/<component-name>/ with ComponentName.tsx, ComponentName.styles.tsx, ComponentName.test.tsx, ComponentName.stories.tsx, ComponentName.doc.mdx, index.ts, and an optional variants folder.
Enforce TypeScript strict typing, CVA-based styling, Tailwind classes, proper ARIA attributes, and a data-spark-component attribute for accessibility.
Use case: kick off a new component from design specs and export-ready for inclusion in Storybook and documentation.

Quick Start

Initialize a new component scaffold using this skill to populate the required file structure under packages/components/src and generate documentation assets.

Frequently Asked Questions about create-component

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

FAQPage Schema

How do I scaffold a React component with TypeScript, CVA, and Storybook stories?▼

You can scaffold a complete Spark UI component structure that automatically generates TypeScript source, CVA-based styles, tests, and Storybook stories in one pass. This ensures your component is export-ready for immediate integration into your design system.

What files do I need to create when adding a component to a design system?▼

When adding a component to a design system, you need to create the TypeScript source file, a styles file using Tailwind classes, a test file, Storybook stories, MDX documentation, and an index file for exports. An optional variants folder can also be generated for complex configurations.

How does CVA-based styling work with Tailwind classes in component scaffolding?▼

CVA-based styling with Tailwind classes works by generating a dedicated styles file that maps component variants to Tailwind utility classes. This mechanism ensures strict typing for variant configurations while maintaining consistent styling across the generated component structure.

Can I use this component scaffold generator for accessibility attributes?▼

Yes, you can use this component scaffold generator for accessibility attributes because it automatically enforces proper ARIA attributes and includes a data-spark-component attribute in the generated TypeScript source. This ensures baseline accessibility compliance for your new design system component.

What is the best way to document a Storybook component with MDX?▼

The best way to document a Storybook component with MDX is to generate a dedicated .doc.mdx file alongside your stories and component source. This ensures your documentation is directly coupled with the component implementation and automatically wired for Storybook rendering.

Does the generated component skeleton include TypeScript strict typing?▼

Yes, the generated component skeleton includes TypeScript strict typing across the source and styles files. This enforcement guarantees type safety for component props, CVA variant configurations, and export structures within the packages/components/src directory.