component

Name: component
Availability: InStock
Author: kangmomin

Generate React component boilerplate, tests, and Storybook setup.

1|1|Updated Apr 9, 2026

Search Tags:#testing #frontend #react #boilerplate #component #storybook #generate

Ready to run

npx skills add https://github.com/kangmomin/harness-plugins --skill component-kangmomin

💬 Prompt for ChatGPT / Claude Chat▼

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.