component-gen

Generate typed props, tests, and stories for React, Vue, or Svelte components.

11|Updated Apr 16, 2026

Search Tags:#typescript #frontend #react #vue #component #svelte #generate

Ready to run

npx skills add https://github.com/berkcangumusisik/claude-code-practices --skill component-gen-berkcangumusisik

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: component-gen
Source: https://github.com/berkcangumusisik/claude-code-practices/tree/main/skills/component-gen
Command: npx skills add https://github.com/berkcangumusisik/claude-code-practices --skill component-gen-berkcangumusisik

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Automates component scaffolding to generate typed props, tests, and stories for React, Vue, or Svelte components, reducing boilerplate and ensuring consistency across projects.

Core Features & Use Cases

Generate a fully-typed props interface and a component skeleton compatible with React, Vue, or Svelte.
Create unit tests and, if present, Storybook stories adhering to project conventions.
Adapt to various project structures and export styles, enabling rapid onboarding of new components.

Quick Start

Create a new component named <ComponentName> with the provided description, including props, types, tests, and stories as appropriate.

Frequently Asked Questions about component-gen

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

FAQPage Schema

How do I generate React, Vue, or Svelte components with TypeScript types and tests?▼

Generating typed UI components for React, Vue, or Svelte involves automating component scaffolding to produce typed props interfaces, component skeletons, and test files, ensuring consistent structure and reducing manual boilerplate across projects.

Does this component scaffolding tool support Storybook story generation?▼

Yes, component scaffolding supports optional Storybook integration, automatically generating stories that adhere to your project conventions alongside the component skeleton and unit tests if Storybook is present in your codebase.

How do I ensure consistent UI component structure and export styles across multiple frontend frameworks?▼

You can ensure consistent UI component structure and export styles across multiple frameworks by automating component scaffolding, which standardizes naming, file placement, and export patterns for React, Vue, and Svelte components.

Can I automatically add accessibility attributes and default props when generating frontend components?▼

Yes, when generating frontend components, the scaffolding process can automatically apply accessibility attributes and define default props to satisfy standard TypeScript requirements and ensure components are usable out of the box.

What is the best way to reduce boilerplate when creating typed props interfaces for UI components?▼

The best way to reduce boilerplate when creating typed props interfaces for UI components is to automate component scaffolding, which generates the TypeScript types, tests, and stories simultaneously according to your project conventions.