create-component

Generate React TSX components with Storybook stories from natural language descriptions.

Updated Mar 15, 2026
One-click install
npx skills add https://github.com/TETRA2000/figma-web-studio --skill create-component-tetra2000
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: create-component
Source: https://github.com/TETRA2000/figma-web-studio/tree/main/.claude/skills/create-component
Command: npx skills add https://github.com/TETRA2000/figma-web-studio --skill create-component-tetra2000

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Generate React components from natural language descriptions to accelerate UI development and reduce boilerplate, while ensuring consistent Tailwind styling and Storybook docs.

Core Features & Use Cases

  • Generate React components with Tailwind CSS classes and accompanying Storybook stories from a natural-language description.
  • Support repository scope by placing components under src/components/{Name}/ with TypeScript interfaces, JSDoc comments, and variant support.
  • Support local scope by placing components under src/components/_local/{Name}/ when the component should remain git-ignored or isolated.

Quick Start

Describe the component you want, and the skill will generate the TSX and Storybook files in the chosen scope.

Frequently Asked Questions about create-component

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

FAQPage Schema
How do I generate React components from natural language descriptions?

You can generate React components from natural language by providing a text description of the desired UI, which produces TSX files with TypeScript typings, Tailwind classes, and Storybook stories in your chosen directory scope.

Can I create React components with Tailwind CSS and Storybook stories automatically?

Yes, you can automatically generate React components with Tailwind CSS and Storybook stories. The output includes TSX files with named exports, JSDoc typings, and corresponding stories to ensure consistent styling and documentation.

Does this tool support repository-scoped and local-scoped component generation?

Yes, it supports repository-scoped component generation under src/components/{Name} for shared use, and local-scoped generation under src/components/_local/{Name} for components that should remain git-ignored or isolated from the main repository.

What is the best way to add TypeScript typings and JSDoc to React components?

The best way to add TypeScript typings and JSDoc to React components is by generating them from a natural language description, which automatically outputs TSX files with TypeScript interfaces, JSDoc comments, and optional variant support.

How do I scaffold a React component with variant support and TypeScript interfaces?

To scaffold a React component with variant support and TypeScript interfaces, provide a natural language description of the variations you need, and the generator will validate inputs and produce TSX files with named exports and optional variant support.