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

component-hd

Generate React component boilerplates from .hyeondong-config.json with tests and Storybook.

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-hd
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-hd
Source: https://github.com/kangmomin/harness-plugins/tree/main/plugins/hyeondongs-harness/skills/component-hd
Command: npx skills add https://github.com/kangmomin/harness-plugins --skill component-hd

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Generate frontend component boilerplates automatically according to the .hyeondong-config.json, ensuring consistent structure and reducing setup time.

Core Features & Use Cases

  • Config-driven scaffolding creates component files, styles, tests, and Storybook setup based on the configuration.
  • Supports multiple project patterns (feature-based, atomic, flat) and frameworks (Next.js, Vite) with various UI libraries.
  • Use Case: Quickly bootstrap a new React component with tests and Storybook stories in an existing or new project.

Quick Start

Run the component generator to output a boilerplate for your new component using the .hyeondong-config.json settings.

Frequently Asked Questions about component-hd

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

FAQPage Schema
How do I auto-generate React component boilerplates with tests and Storybook setup?▼

Config-driven scaffolding uses a .hyeondong-config.json file to define your project's component patterns. It reads these settings to automatically generate consistent component files, styles, tests, and Storybook stories, reducing manual setup time.

Can I use this component generator with Next.js, Vite, and various UI libraries?▼

Yes, the generator supports React projects built with Next.js and Vite, along with various UI libraries. It applies your configuration settings to scaffold components matching your specific framework and styling stack.

What component patterns are supported for scaffolding frontend components?▼

The scaffolding supports multiple project patterns including feature-based, atomic, and flat structures. You specify your desired architecture in the configuration file to ensure generated components match your organizational approach.

Do I need a configuration file to scaffold React components automatically?▼

Yes, a .hyeondong-config.json file is required to automatically scaffold React components. This configuration file defines the component patterns, styling options, testing, and Storybook setup used to generate the boilerplate.

What's the best way to bootstrap a new React component with Storybook and tests?▼

Using config-driven scaffolding that reads your .hyeondong-config.json settings is the best way to generate the component, styles, tests, and Storybook stories simultaneously, ensuring a consistent structure across your project.

Related Skills

Explore More Software Engineering Skills→
GemachDAOGemachDAO
4

gdex-ui-install-setup

Scaffold a React or Next.js project with a GDEX SDK provider.

Official
Intermediate
alexgorbatchevalexgorbatchev
1

storybook

Automates Storybook story creation and Playwright play tests for UI components.

Community
Intermediate
kentojekentoje
2

ui-skills

Enforce UI constraints for accessible agent interfaces using Tailwind defaults.

Community
Basic
WesleySmitsWesleySmits
6

scaffolding-react-components

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

Community
Advanced