Menu
Sandpack 데모 코드 패턴. packages/docs/src/demo/ 또는 packages/docs/docs/demos/ 내 파일 작성·수정 시 자동 로드. 프레임워크별 코드 구조, 파일 구성, import 패턴 안내.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | demo-patterns |
| description | Sandpack 데모 코드 패턴. packages/docs/src/demo/ 또는 packages/docs/docs/demos/ 내 파일 작성·수정 시 자동 로드. 프레임워크별 코드 구조, 파일 구성, import 패턴 안내. |
| user-invocable | false |
데모 디렉토리(packages/docs/src/demo/{category}/{Name}/)에 다음 파일:
react.jsx, vue.vue, vanilla.js — 프레임워크별 코드 (TSX 내 템플릿 리터럴 금지)index.html — Vanilla용 HTML 구조styles.css — 공통 스타일index.tsx — Sandpack 데모 컴포넌트 (?raw import)@egjs/react-flicking, props 기반, <ViewportSlot> 으로 플러그인 UI@egjs/vue3-flicking, :options 객체 prop, <template #viewport> 슬롯@egjs/flicking, .flicking-viewport > .flicking-camera DOM 구조MDX 문서 작성법, Sandpack 설정, 플러그인 데모 dependencies, 전체 체크리스트는 @dev-guide/DEMO_GUIDE.md 참조.
데모 스펙을 받아 데모 코드 + E2E 테스트 + TSDoc 링크를 한 번에 생성한다. 어떤 API/옵션을 어떻게 보여줄지 설명하면 전체 세트가 만들어진다.
릴리즈 전 체크리스트 순회. 테스트, 린트, 빌드, 문서 생성, 버전 일관성을 검증한다.
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 주석(/** ... */) 수정 시 자동 로드.