From hyeondongs-harness
컴포넌트 보일러플레이트를 자동 생성한다. .hyeondong-config.json 설정에 따라 스타일, 테스트, Storybook 파일을 함께 생성.
How this skill is triggered — by the user, by Claude, or both
Slash command
/hyeondongs-harness:component-hdThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
`.hyeondong-config.json` 설정에 따라 컴포넌트 보일러플레이트를 생성한다.
.hyeondong-config.json 설정에 따라 컴포넌트 보일러플레이트를 생성한다.
유저와의 모든 대화는 한국어로 진행한다.
.hyeondong-config.json 필요. 없으면 /hyeondongs-harness:hyeondong-init-hd 실행을 안내한다..hyeondong-config.json에서 다음을 읽는다:
framework — 프레임워크 (nextjs, vite 등)uiLibrary — UI 라이브러리 (tailwind, styled-components 등)testRunner — 테스트 러너 (vitest, jest)componentPattern — 컴포넌트 구조 패턴 (feature-based, atomic, flat)typescript — TypeScript 사용 여부storybook — Storybook 사용 여부$ARGUMENTS에서 컴포넌트 이름을 추출한다. 없으면 질문한다:
"어떤 컴포넌트를 생성할까요? (이름과 간단한 설명)" 예:
SearchBar 상품 검색 입력 필드
추가 질문:
"컴포넌트 배치 경로를 선택해주세요:"
componentPattern에 따라:
src/features/{도메인}/components/{ComponentName}/src/components/{atoms|molecules|organisms}/{ComponentName}/src/components/{ComponentName}/기존 프로젝트의 디렉토리 구조를 Glob으로 탐색하여 적합한 경로를 제안한다.
설정에 따라 다음 파일들을 생성한다:
{ComponentName}.tsx)interface {ComponentName}Props {
// TODO: props 정의
}
export function {ComponentName}({ }: {ComponentName}Props) {
return (
<div>
{/* TODO: 구현 */}
</div>
);
}
인터랙티브 요소가 포함되는 경우, 보일러플레이트에 aria-label을 기본 포함한다:
// 버튼이 포함되는 컴포넌트
export function {ComponentName}({ }: {ComponentName}Props) {
return (
<div>
<button aria-label="{ComponentName} 동작 설명">
{/* 아이콘 버튼이면 aria-label 필수 */}
</button>
</div>
);
}
// 입력 필드가 포함되는 컴포넌트
export function {ComponentName}({ }: {ComponentName}Props) {
return (
<div>
<label htmlFor="{componentName}-input">레이블</label>
<input id="{componentName}-input" aria-describedby="{componentName}-help" />
<p id="{componentName}-help">도움말 텍스트</p>
</div>
);
}
| uiLibrary | 파일 | 형식 |
|---|---|---|
tailwind | 생성 안 함 | className으로 직접 작성 |
css-modules | {ComponentName}.module.css | CSS Modules |
styled-components | {ComponentName}.styled.ts | Styled Components |
shadcn | 생성 안 함 | shadcn 컴포넌트 조합 |
mui / antd | 생성 안 함 | 라이브러리 컴포넌트 조합 |
{ComponentName}.test.tsx)import { render, screen } from '@testing-library/react';
import { {ComponentName} } from './{ComponentName}';
describe('{ComponentName}', () => {
it('renders without crashing', () => {
render(<{ComponentName} />);
});
});
{ComponentName}.stories.tsx) — storybook: true일 때만import type { Meta, StoryObj } from '@storybook/react';
import { {ComponentName} } from './{ComponentName}';
const meta: Meta<typeof {ComponentName}> = {
title: '{경로}/{ComponentName}',
component: {ComponentName},
};
export default meta;
type Story = StoryObj<typeof {ComponentName}>;
export const Default: Story = {
args: {},
};
index.ts)export { {ComponentName} } from './{ComponentName}';
## 컴포넌트 생성 완료
| 파일 | 경로 |
|------|------|
| 컴포넌트 | `src/features/auth/components/LoginForm/LoginForm.tsx` |
| 테스트 | `src/features/auth/components/LoginForm/LoginForm.test.tsx` |
| 스토리 | `src/features/auth/components/LoginForm/LoginForm.stories.tsx` |
| 배럴 | `src/features/auth/components/LoginForm/index.ts` |
다음 단계: 컴포넌트 Props를 정의하고 UI를 구현하세요.
| 규칙 | 올바른 예 | 잘못된 예 |
|---|---|---|
| PascalCase | SearchBar | searchBar, search-bar |
| 의미 있는 이름 | ProductCard | Card1 |
| 접미사 패턴 | LoginForm, UserList, NavBar | Login, Users |
npx claudepluginhub kangmomin/harness-plugins --plugin hyeondongs-harnessGuides creation, editing, and verification of skills for AI coding agents using test-driven development with subagent scenarios. Use when authoring or debugging skills.