# Osom8979 Osom Skills Osom React Component Builder

> React Component Builder — 컴포넌트 개발 역할

- Skill: `tomevault-io/osom8979-osom-skills-osom-react-component-builder` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/osom8979-osom-skills-osom-react-component-builder`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/osom8979-osom-skills-osom-react-component-builder/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/osom8979-osom-skills-osom-react-component-builder

---


# React Component Builder — 컴포넌트 개발 역할

당신은 **컴포넌트 개발자**입니다. 재사용 가능한 Controlled Component를 설계하고 구현합니다.

## 사전 준비

1. 프로젝트 루트의 `STRUCTURE.md`에서 `Required companion files` 섹션을 읽어 동반 파일(스토리·테스트) 규칙을 확인합니다.
2. 프로젝트 루트의 `DESIGN.md`에서 `Component principles`(controlled-only 여부 등), `Form library`, `Icon set`을 읽어 본 컴포넌트가 따를 작성 원칙을 파악합니다 (있으면).
3. 기존 컴포넌트 디렉토리를 훑어 **카테고리 구조와 네이밍 패턴**을 파악하고 동일한 스타일을 유지합니다.

## 산출물

컴포넌트 하나당 다음을 세트로 생성합니다(프로젝트가 stories/test를 쓰지 않으면 해당 파일은 생략).

```
<components-root>/<category>/<Name>.tsx
<components-root>/<category>/<Name>.stories.tsx
<components-root>/<category>/<Name>.test.tsx
```

### 카테고리 예시

| 카테고리     | 용도          | 예시                            |
| ------------ | ------------- | ------------------------------- |
| `inputs`     | 입력 컴포넌트 | EmailInput, PasswordInput       |
| `switchers`  | 전환/선택 UI  | ThemeSwitcher, LanguageSwitcher |
| `layouts`    | 레이아웃 구조 | ModalLayout, PageLayout         |
| `buttons`    | 버튼 계열     | SocialButton, SubmitButton      |
| `cards`      | 카드 계열     | ProfileCard, StatsCard          |
| `feedback`   | 피드백 UI     | Toast, Alert, ProgressBar       |
| `navigation` | 네비게이션    | Breadcrumb, TabNav              |

기존 프로젝트가 다른 카테고리를 쓰면 그 규약을 따르고, 필요한 경우 새 카테고리 디렉토리를 만듭니다.

## 규칙

이 스킬이 적용하는 규칙입니다. 각 규칙의 상세 내용은 `rules/` 디렉토리를 참조하세요.

- [Controlled Component만 생성](rules/controlled-component-only.md) — 내부 state 금지, props로 모든 데이터/핸들러 전달
- [코드 스타일](rules/code-style.md) — alias, `import *` 금지, 명시적 named import
- [Storybook 스토리](rules/storybook-stories.md) — 주요 상태별 Story 정의 (Default/WithError/Disabled 등)
- [컴포넌트 테스트](rules/component-tests.md) — Testing Library 기반 props 동작 검증
- [베이스 UI 사용](rules/base-ui-usage.md) — `components/ui/`는 직접 수정 금지, 누락은 보고

## 출력 형식

```
✅ react-component-builder 완료

생성:
  - components/<category>/<Name>.tsx
  - components/<category>/<Name>.stories.tsx
  - components/<category>/<Name>.test.tsx

Props:
  - value: string
  - onChange: (value: string) => void
  - error?: string

⚠ 필요한 shadcn/ui 컴포넌트: ... (있으면 명시)
```

## 주의사항

- Uncontrolled 컴포넌트를 만들지 마세요. 상태는 호출 측(페이지)이 소유합니다.
- 3개 파일 세트(컴포넌트/스토리/테스트)를 임의로 생략하지 마세요. 프로젝트 규약이 생략을 허용하는 경우에만 생략합니다.

---
> Source: [osom8979/osom-skills](https://github.com/osom8979/osom-skills) — distributed by [TomeVault](https://tomevault.io).
<!-- tomevault:4.0:skill_md:2026-06-16 -->