Menu
チュートリアルGIFを追加し、Tutorial機能に新しいチュートリアル項目を登録するSKILL
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
area-manager,area-displayなどの、エリアに関する機能のcodingをするためのスキル.このskillにknowledgeがある.これを読んでからareaに関するcodingをすること.trigger:area-manager,area-display,エリア
多言語翻訳キーの追加・削除・更新・検索をCLIスクリプトで効率的に管理するスキル。 Trigger= "i18n", "翻訳", "多言語", "translation", "locale" 使用場面=翻訳キーの追加、削除、更新、検索、不足キーの確認
| name | add-tutorial |
| description | チュートリアルGIFを追加し、Tutorial機能に新しいチュートリアル項目を登録するSKILL |
/add-tutorial <gif-filename> <title-ja> <title-en>
gif-filename: GIFファイル名（例: how_to_draw_text.gif）title-ja: 日本語タイトル（例: "テキストをマップ上に表示する方法"）title-en: 英語タイトル（例: "How to Display Text on Map"）コマンド実行後、対話形式でステップを追加します：
manifest.json と manifest.template.json の web_accessible_resources に GIF ファイルを追加：
{
"web_accessible_resources": [
{
"resources": [
"assets/images/tutorial/how_to_draw.gif",
"assets/images/tutorial/<new-gif-filename>" // 追加
]
}
]
}
src/features/tutorial/index.ts の tutorials 配列に新しい項目を追加：
{
id: "tutorial_id",
titleKey: "tutorial_<id>_title",
gifUrl: runtime.getURL("assets/images/tutorial/<gif-filename>"),
steps: [
"tutorial_<id>_step1",
"tutorial_<id>_step2",
"tutorial_<id>_step3",
],
}
src/i18n/locales/en.ts)tutorial_<id>_title: "English Title",
tutorial_<id>_step1: "Step 1 description",
tutorial_<id>_step2: "Step 2 description",
tutorial_<id>_step3: "Step 3 description",
src/i18n/locales/ja.ts)tutorial_<id>_title: "日本語タイトル",
tutorial_<id>_step1: "ステップ1の説明",
tutorial_<id>_step2: "ステップ2の説明",
tutorial_<id>_step3: "ステップ3の説明",
how_to_<action> または how_to_<action>_<target>how_to_draw - 画像描画how_to_archive - アーカイブ保存how_to_draw_archive - アーカイブ描画how_to_draw_text - テキスト描画tutorial_<id>_titletutorial_<id>_step1, tutorial_<id>_step2, ...{
id: "how_to_draw",
titleKey: "tutorial_how_to_draw_title",
gifUrl: runtime.getURL("assets/images/tutorial/how_to_draw.gif"),
steps: [
"tutorial_how_to_draw_step1", // ギャラリーに画像を保存する
"tutorial_how_to_draw_step2", // マップをクリックして、「画像」ボタンを選択
"tutorial_how_to_draw_step3", // 配置したい画像をクリック
],
}
{
id: "how_to_archive",
titleKey: "tutorial_how_to_archive_title",
gifUrl: runtime.getURL("assets/images/tutorial/how_to_archive.gif"),
steps: [
"tutorial_how_to_archive_step1", // マップをクリックして「アーカイブ」を選択
"tutorial_how_to_archive_step2", // 「Save Current Tile」ボタンをクリック
],
}
{
id: "how_to_draw_text",
titleKey: "tutorial_how_to_draw_text_title",
gifUrl: runtime.getURL("assets/images/tutorial/how_to_draw_text.gif"),
steps: [
"tutorial_how_to_draw_text_step1", // マップをクリックして「テキスト」を選択
"tutorial_how_to_draw_text_step2", // テキストを入力し、フォントを選んで「Draw」ボタンをクリック
"tutorial_how_to_draw_text_step3", // オプション：矢印ボタンで位置を調節
],
}
実装時に確認すべき項目：
public/assets/images/tutorial/ に配置されているmanifest.json に GIF が追加されているmanifest.template.json に GIF が追加されているsrc/features/tutorial/index.ts に項目が追加されているsrc/i18n/locales/en.ts に英語キーが追加されているsrc/i18n/locales/ja.ts に日本語キーが追加されているwplace-studio/
├── public/
│ └── assets/
│ └── images/
│ └── tutorial/
│ ├── how_to_draw.gif
│ ├── how_to_archive.gif
│ ├── how_to_draw_archive.gif
│ ├── how_to_draw_text.gif
│ └── <new-tutorial>.gif
├── manifest.json
├── manifest.template.json
└── src/
├── features/
│ └── tutorial/
│ └── index.ts
└── i18n/
└── locales/
├── en.ts
└── ja.ts
how_to_* パターンを使用empty_*_message キーも追加feat(tutorial): add <action> tutorial
- Add <gif-filename> to web accessible resources
- Add <action> tutorial to Tutorial class
- Add i18n keys for <action> tutorial (en/ja)
src/features/tutorial/index.ts の構文エラーを確認