메뉴
데모 스펙을 받아 데모 코드 + E2E 테스트 + TSDoc 링크를 한 번에 생성한다. 어떤 API/옵션을 어떻게 보여줄지 설명하면 전체 세트가 만들어진다.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
Sandpack 데모 코드 패턴. packages/docs/src/demo/ 또는 packages/docs/docs/demos/ 내 파일 작성·수정 시 자동 로드. 프레임워크별 코드 구조, 파일 구성, import 패턴 안내.
릴리즈 전 체크리스트 순회. 테스트, 린트, 빌드, 문서 생성, 버전 일관성을 검증한다.
GitHub 이슈를 scratch 패턴으로 재현. 이슈 번호 또는 URL을 인자로 받아 적절한 프레임워크의 scratch App 파일을 생성하고 dev 서버 안내.
egjs-flicking 테스트 작성 컨벤션. 테스트 파일(*.spec.ts, *.spec.tsx) 생성·수정 시 자동 로드. unit/plugins/cfc 스위트 선택 기준, setup 파일 순서, 헬퍼 함수 패턴 안내.
egjs-flicking TSDoc 주석 포맷 컨벤션. packages/flicking/src/ 또는 packages/flicking-plugins/src/ 내 TypeScript 소스의 TSDoc 주석(/** ... */) 수정 시 자동 로드.
SOC 직업 분류 기준
| name | add-demo |
| description | 데모 스펙을 받아 데모 코드 + E2E 테스트 + TSDoc 링크를 한 번에 생성한다. 어떤 API/옵션을 어떻게 보여줄지 설명하면 전체 세트가 만들어진다. |
| disable-model-invocation | true |
| argument-hint | [데모 스펙 설명] |
"$ARGUMENTS" 스펙을 기반으로 데모 세트를 생성한다.
사용자 프롬프트에서 4가지를 순차적으로 생성한다:
프롬프트를 분석하여 다음을 결정한다:
결정한 내용을 사용자에게 확인받은 뒤 진행한다.
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/ 내 유사 데모를 참고한다.
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 1에서 식별한 api 목록의 각 옵션/메서드에 대해:
packages/flicking/src/ 또는 packages/flicking-plugins/src/에서 해당 API의 TSDoc을 찾는다@see 태그로 데모 링크를 추가한다:
@see {@link https://naver.github.io/egjs-flicking/demos/{category}/{name} | 데모 제목}
TSDoc 포맷은 @dev-guide/TSDOC_FORMAT_GUIDE.md 참조.
pnpm docs:serve → 해당 데모 페이지 URLpnpm test:headed