tomevault-io Create Component
컴포넌트 개발의 전체 흐름을 단계별로 안내합니다.
Quick Start
- 각 단계에서 수정 대상 폴더의
AGENTS.md를 먼저 읽고 해당 패키지의 컨벤션을 확인합니다. - Rootage 스펙을 정의/수정하고
bun generate:all을 실행합니다. - Recipe, React UI, Storybook, 문서를 순서대로 반영합니다.
bun packages:build,bun typecheck, Visual Test 체크리스트를 완료합니다.- 상세 구현은
details/implementation-steps.md와details/verification-checklist.md를 사용합니다.
핵심 흐름
Headless (선택) → Rootage YAML → bun generate:all → Recipe → React → Storybook → Docs → Visual Test
수정 진입점
| 수정 대상 | 시작 위치 | 명령어 |
|---|---|---|
| 토큰/스타일 변수 | packages/rootage/ |
bun generate:all |
| CSS Recipe | packages/qvism-preset/src/recipes/ |
bun qvism:generate |
| 컴포넌트 로직 | packages/react-headless/ |
직접 수정 |
| 컴포넌트 UI | packages/react/ |
bun packages:build |
| 문서 | docs/content/ |
직접 수정 |
생성 파일 (수정 금지)
packages/css/**← rootage에서 생성packages/qvism-preset/src/vars/**← rootage에서 생성docs/registry/*.json← registry-*.ts에서 생성
전체 파이프라인
┌─────────────────────────────────────────────────────────────┐
│ 1. HEADLESS (Optional) - packages/react-headless/ │
└─────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ 2. DEFINITION - packages/rootage/components/[name].yaml │
└─────────────────────────────────────────────────────────────┘
│ bun generate:all
▼
┌─────────────────────────────────────────────────────────────┐
│ 3. RECIPE - packages/qvism-preset/src/recipes/ │
└─────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ 4. UI - packages/react/src/components/[ComponentName]/ │
└─────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ 5. STORYBOOK - docs/stories/[ComponentName].stories.tsx │
└─────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ 6. DOCUMENTATION - docs/content/ │
└─────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ 7. VISUAL TESTING - Agent Browser │
└─────────────────────────────────────────────────────────────┘
Quick Reference
새 컴포넌트 추가 시
packages/rootage/components/[name].yaml작성bun generate:all실행packages/qvism-preset/src/recipes/[name].ts작성packages/qvism-preset/src/recipes/index.ts에 export 추가packages/react/src/components/[Name]/구현docs/stories/[Name].stories.tsx작성docs/content/react/components/[name].mdx작성- Visual Test 실행
스타일 수정 시
packages/rootage/또는packages/qvism-preset/src/recipes/수정bun generate:all실행- Visual Test로 확인
상세 가이드
각 단계의 상세 내용은 details/ 폴더 참조:
details/implementation-steps.md- 각 단계별 구현 상세details/visual-testing.md- Visual Test 방법details/verification-checklist.md- 완료 전 체크리스트
필수 체크리스트
작업 완료 전:
-
bun generate:all실행 -
bun packages:build성공 -
bun typecheck에러 없음 - Storybook 테마별 확인 (Light, Dark, Font Scaling)
Converted and distributed by TomeVault — claim your Tome and manage your conversions.