feature-explainer｜AIスキル大辞典

このSkillでできること

✓このコードベースで実際に行われた変更を、初心者向けの短い文章で説明する
✓変更内容を、手描き風SVGホワイトボード図付きの自己完結型HTMLにまとめる
✓変更の配線、理由、落とし穴をチームのスタンドアップ向けに可視化する
✓生成したHTMLを検証し、表示崩れや図のはみ出しを確認する

使い方

STEP 1

対象リポジトリの実際の差分、ファイル名、コマンド、出力を確認する

STEP 2

ELI5形式で短い文章と、必要に応じた誤りと正しい例の比較を作る

STEP 3

手描き風SVGを、配線・理由・落とし穴の3ゾーン構成で追加する

STEP 4

検証スクリプトを実行し、生成されたスクリーンショットも確認して修正する

Skillのインストール

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

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

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

Repository:
https://github.com/sanjeetkumar1986/AdvancePlaywrightFramework2x

手動でインストールする

README / SKILL.mdから機械抽出できたコマンドのみ表示しています。推測したコマンドではありません。

SCRATCH="<the scratchpad dir from your system prompt>"
cp .claude/skills/feature-explainer/assets/explainer-template.html "$SCRATCH/<slug>-eli5.html"

npm install
npx playwright install

cp .env.example .env

mv .env .env.bak && npx playwright test    # must fail the way CI would
cp .env.example .env && npx playwright test
mv .env.bak .env

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

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

このリポジトリで今実装した機能をELI5で説明し、チーム向けのExcalidraw風ホワイトボード図付きHTMLにしてください。

出力例を見る

scratchpad内の自己完結型HTMLファイル。変更のELI5解説と、配線・理由・落とし穴を示す手描き風SVGホワイトボードを含みます。

安全性チェック

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

外部API通信明確な記述なし

Shellコマンド実行検出あり

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

ファイル書き込み検出あり

ネットワークアクセス明確な記述なし

認証情報明確な記述なし

検出根拠を見る

shell: eature lands so the docs never drift behind the code. ```bash /gogo # README + commit + push /gogo skip readme # commit and push on
file_write: st --project=api --list [large code block omitted]bash mv .env .env.bak && npx playwright test # must fail the way CI would cp .env.example .env
file_write: && npx playwright test # must fail the way CI would cp .env.example .env && npx playwright test mv .env.bak .env [large code block omitted] .clau

feature-explainer

このSkillでできること

使い方

Skillのインストール

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

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

安全性チェック

関連Skill

brainstorming

claude-antigravity-setup

cds-skill