skills.rest
porcupine-md
porcupine-mdOFFICIAL
Explore all skills by this author →
GitHub

component

Generate React TypeScript UI component scaffolds with tests and optional Storybook stories.

11|2|Updated Apr 7, 2026
Search Tags:#typescript#testing#ui#react#component#storybook#generate
One-click install
npx skills add https://github.com/porcupine-md/jonggrang --skill component-porcupine-md
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component
Source: https://github.com/porcupine-md/jonggrang/tree/main/skills/core/component
Command: npx skills add https://github.com/porcupine-md/jonggrang --skill component-porcupine-md

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Automates the repetitive task of scaffolding UI components across projects, ensuring consistency and speeding up delivery.

Core Features & Use Cases

  • Create a component file at conventional paths (e.g., src/components/{{input.name}}/{{input.name}}.tsx) with a TS interface
  • Automatically generate unit tests and, if requested, a Storybook story
  • Maintain consistency with existing component patterns and project conventions

Quick Start

Run the scaffold command with a component name and type to generate the component, tests, and optional story in the correct project structure

Frequently Asked Questions about component

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

FAQPage Schema
How do I generate a React component with tests and Storybook stories?▼

To generate a React component with tests, you can use a scaffolding tool to automate the creation of the component file, unit tests, and an optional Storybook story. This ensures a consistent TypeScript component structure across your web app project.

What is the best way to scaffold a TypeScript UI component in a React project?▼

The best way to scaffold a TypeScript UI component is to automate the creation of conventional file paths, such as src/components/Name/Name.tsx. This method automatically adds a TS props interface and maintains consistency with your existing component patterns.

Can I automatically create unit tests when generating a new React component?▼

Yes, you can automatically create unit tests when generating a new React component. The scaffolding process creates the source file and simultaneously generates the corresponding test files to ensure your UI components are tested immediately.

Does the component scaffolding process support Storybook story generation?▼

Yes, the component scaffolding process supports Storybook story generation. When you generate the component file and tests, you can optionally request a Storybook story to be created automatically in the correct project structure.

How do I maintain consistent component structure across a React and TypeScript project?▼

To maintain consistent component structure across a React and TypeScript project, automate your scaffolding to generate files at conventional paths with predefined TS interfaces. This enforces uniform component patterns and speeds up delivery.

Related Skills

Explore More Software Engineering Skills→
nguyennd93nguyennd93

test-setup

Automate test directory, configuration, and CI/CD setup for Node.js/TypeScript projects.

Community
Intermediate
Shirataki2Shirataki2
2

component-development

Implement components with Storybook stories, unit tests, and design.pen entries.

Community
Advanced
hakushunhakushun

frontend-component

Create React components with TypeScript, Storybook stories, and tests.

Community
Basic
okgoogle13okgoogle13
1

react-component-scaffolder

Generate a React component directory with TypeScript files and MUI Box.

Community
Basic