skills.rest
kangmomin
kangmominCOMMUNITY
Explore all skills by this author →
GitHub

component

Generate React component boilerplate, tests, and Storybook setup.

1|1|Updated Apr 9, 2026
Search Tags:#testing#frontend#react#boilerplate#component#storybook#generate
One-click install
npx skills add https://github.com/kangmomin/harness-plugins --skill component-kangmomin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component
Source: https://github.com/kangmomin/harness-plugins/tree/main/fe-harness/skills/component
Command: npx skills add https://github.com/kangmomin/harness-plugins --skill component-kangmomin

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill automates the creation of frontend component boilerplates, saving time and ensuring consistency across projects.

Core Features & Use Cases

  • Automatic scaffold for React components, tests, and Storybook entries based on the configured pattern (feature-based, atomic, or flat).
  • Supports multiple UI library choices and TypeScript usage, aligning with project conventions.
  • Use Case: A team wants a new Button component quickly with standardized props, tests, and stories without manual boilerplate.

Quick Start

Provide the component name and optional settings to generate the boilerplate.

Frequently Asked Questions about component

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

FAQPage Schema
How do I generate React component boilerplate with tests and Storybook entries?▼

You can generate React component boilerplate by providing a component name, which automatically scaffolds the component file, tests, and Storybook stories based on your configured project structure.

What is the best way to scaffold frontend components for feature-based or atomic patterns?▼

Scaffolding frontend components for feature-based, atomic, or flat patterns is handled by configuring the project structure locally, which then guides file placement and configurations automatically during generation.

Does this React component generator support TypeScript and different UI libraries?▼

Yes, the React component generator supports TypeScript usage and multiple UI library choices, aligning the generated boilerplate code with your existing project conventions and dependencies.

Do I need a local configuration file to automate frontend component scaffolding?▼

Yes, you need a project-local configuration file named .claude/fe-harness.local.md to define your structural pattern, which ensures generated files are placed under the correct directory structure.

Can I use this to create a standardized React Button component with props and stories?▼

Yes, you can use this to quickly create a standardized React Button component, generating boilerplate code with default props, test cases, and Storybook entries without manual file creation.

Related Skills

Explore More Software Engineering Skills→
kangmominkangmomin
1

init

Create or update be-harness project profiles for Go and Node builds.

Community
Advanced
WesleySmitsWesleySmits
6

scaffolding-react-components

Generate React/Next.js component scaffolds with TypeScript, CSS modules, tests, and Storybook.

Community
Advanced
vecearvecear

storybook-setup

Automate Storybook setup, configuration, and CSF3 story authoring for frontend projects.

Community
Intermediate
Dragoon0xDragoon0x
4

storybook

Generate Storybook configuration and story files for React components.

Community
Intermediate