demo（デモ構築）｜AIスキル大辞典

このSkillでできること

✓div内に収まり、設定サイドバーを備えたコンポーネントデモを設計する
✓スキーマに基づく設定入力、条件表示、グループ化、リセットを定義する
✓サイトのCanvasへトンネル経由でシーンを送り、ルートやコンパイル用ハンドルを公開する
✓デモのエクスポート、マニフェスト、ブラウザテスト、設定ラッパーのテスト要件を整理する

使い方

STEP 1

対象コンポーネント、Izzyのシーン仕様、エフェクト一覧を入力として確認する

STEP 2

シーン、設定スキーマ、必要なエクスポート、ハンドル、テストを実装する

STEP 3

デモエントリとマニフェストの整合性、Canvas利用、設定入力の挙動を検証する

STEP 4

スキーマで表現できない入力やラッパーの不足、サイト側の対応事項を報告する

Skillのインストール

AIにこのSkillを追加してもらう

GitHub URLごとCodexやClaude Codeへ渡し、現在の環境に合う方法を判断してもらいます。

このGitHubリポジトリにあるSkillを確認し、現在の環境に適した方法でインストールしてください。
インストール後、正常に利用できることを確認し、基本的な使い方も簡潔に説明してください。

Repository:
https://github.com/theCocoonStudio/cocoon-ai

このSkillを使うプロンプト例

Skill名を明示すると、意図したSkillを使わせやすくなります。自動発動型では必須とは限りません。

対象コンポーネントのデモを設計してください。入力はIzzyのシーン仕様とエフェクト一覧です。div内のマークアップ、設定スキーマ、Canvasトンネル経由のシーン、必要なエクスポート、テスト要件を整理してください。

出力例を見る

コンテナ、設定サイドバー、シーン、スキーマ、デモエントリ、マニフェスト、テスト項目を含む実装計画。

安全性チェック

自動解析による参考情報です。Skillの安全性を保証するものではありません。

外部API通信検出あり

Shellコマンド実行明確な記述なし

ファイル読み取り明確な記述なし

ファイル書き込み明確な記述なし

ネットワークアクセス検出あり

認証情報検出あり

検出根拠を見る

network: ini` on the box. Next is the gateway, [cocoon-gateway](https://github.com/theCocoonStudio/cocoon-gateway): one host in the wall instead of a list, a poli
network: ript exports live in the private [`cocoon-ai-records`](https://github.com/theCocoonStudio/cocoon-ai-records) repo. Inside the sandbox it is cloned to `/h
credential: olicy table that refuses what the rules forbid, and no credential of any kind inside the container. The hooks under `.claude/hooks/` stay here as this rep

demo

このSkillでできること

使い方

Skillのインストール

AIにこのSkillを追加してもらう

このSkillを使うプロンプト例

安全性チェック

関連Skill

verify-wink

od-contribute

agent-device