| name | add-demo |
| description | 데모 스펙을 받아 데모 코드 + E2E 테스트 + TSDoc 링크를 한 번에 생성한다. 어떤 API/옵션을 어떻게 보여줄지 설명하면 전체 세트가 만들어진다. |
| disable-model-invocation | true |
| argument-hint | [데모 스펙 설명] |
"$ARGUMENTS" 스펙을 기반으로 데모 세트를 생성한다.
전체 흐름
사용자 프롬프트에서 4가지를 순차적으로 생성한다:
Step 1. 스펙 구조화
프롬프트를 분석하여 다음을 결정한다:
- 카테고리: basic / advanced / plugins / reactive
- 데모 ID: 영문 PascalCase (디렉토리명)
- intent: 이 데모가 왜 존재하는지 (한 문장)
- focus: 무엇을 검증해야 하는지 (구체적 동작)
- api: 관련 API 목록 (옵션, 메서드, 이벤트)
- frameworks: [vanilla, react, vue]
결정한 내용을 사용자에게 확인받은 뒤 진행한다.
Step 2. 데모 코드 생성
packages/docs/src/demo/{category}/{Name}/ 아래 6개 파일:
react.jsx, vue.vue, vanilla.js — 프레임워크별 코드index.html — Vanilla용 HTML 구조styles.css — 공통 스타일index.tsx — Sandpack 데모 컴포넌트 (?raw import)
packages/docs/docs/demos/{category}/{name}.mdx — MDX 문서
코드 패턴, Sandpack 설정, MDX 구조는 @dev-guide/DEMO_GUIDE.md 참조.
기존 데모 패턴은 packages/docs/src/demo/ 내 유사 데모를 참고한다.
Step 3. E2E 테스트 생성
packages/test-flicking/e2e/tests/{category}/{id}/ 아래 2개 파일:
{id}.yaml — Step 1에서 구조화한 스펙 (intent, focus, api, frameworks){id}.spec.ts — Step 2에서 만든 데모의 실제 동작을 검증하는 Playwright 테스트
스펙 포맷, 헬퍼 함수, 테스트 패턴은 @dev-guide/E2E_TEST_GUIDE.md 참조.
생성 후 cd packages/test-flicking/e2e && pnpm generate로 HTML 엔트리 재생성.
Step 4. TSDoc @see 링크 추가
Step 1에서 식별한 api 목록의 각 옵션/메서드에 대해:
TSDoc 포맷은 @dev-guide/TSDOC_FORMAT_GUIDE.md 참조.
완료 후 안내
- dev 서버 확인:
pnpm docs:serve → 해당 데모 페이지 URL
- E2E 테스트 확인:
pnpm test:headed
- sidebars.js 업데이트 필요 여부
