メニュー
Sandpack 데모 코드 패턴. packages/docs/src/demo/ 또는 packages/docs/docs/demos/ 내 파일 작성·수정 시 자동 로드. 프레임워크별 코드 구조, 파일 구성, import 패턴 안내.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/naver/egjs-flicking --skill demo-patternsコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SOC 職業分類に基づく
SKILL.md を表示中
| 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 참조.