Effective HTML 日本語版

日本語を既定として、実用的な自己完結HTML成果物を作るAgent Skillコレクションです。低忠実度ワイヤーフレームから操作可能なプロトタイプ、計画書、図解、レポート、プレゼンテーションまで扱います。

収録スキル

スキル	用途
html-ja	広いHTML依頼の入口と専門スキルへの振り分け
design-artifact-ja	題材固有の配色、書体、構図、表現強度
html-wireframe-ja	情報階層、ナビゲーション、タスクフローの低忠実度検討
html-prototype-ja	磨き込まれたモックアップと操作可能なプロトタイプ
html-plan-ja	元資料を保持した計画、ロードマップ、実装手順
html-diagram-ja	構成、順序、状態、階層、概念、比較、数量の図解

インストール

Codex

全6スキルをCodexのユーザー領域へ導入します。これにより、他のプロジェクトからも利用できます。

npx skills add microtaro/effective-html-ja --skill '*' --agent codex --global

一つだけCodexのユーザー領域へ導入する場合:

npx skills add microtaro/effective-html-ja --skill html-diagram-ja --agent codex --global

Claude Code

npx skills add microtaro/effective-html-ja --skill '*' --agent claude-code --global

Cursor

npx skills add microtaro/effective-html-ja --skill '*' --agent cursor --global

共通の注記

• 現在のプロジェクトだけへ導入する場合は --global を外します。
• ローカルへcloneした場合は、リポジトリのルートで microtaro/effective-html-ja の代わりに . を指定します。
• --agent は複数指定できます（例: --agent codex claude-code cursor）。
• 上記のコマンドはbash / zsh / PowerShellでそのまま動きます。Windowsのコマンドプロンプト（cmd.exe）ではシングルクォートが引用符として扱われないため、--skill '*' の代わりに --skill "*" を使ってください。
• agents/openai.yaml の表示名と暗黙起動設定はCodex固有です。他のエージェントでは、各 SKILL.md の description に基づいてスキルが選択されます。

呼び出し方

Codexでは、広い依頼なら $html-ja、用途が決まっている場合は各専門スキルを明示的に呼び出せます。

$html-ja を使って、この資料を日本語の自己完結HTMLにしてください。
$html-wireframe-ja を使って、この画面構造を比較してください。
$html-prototype-ja を使って、この操作フローを試作してください。
$html-plan-ja を使って、この計画をHTMLで整理してください。
$html-diagram-ja を使って、このシステムを図解してください。

Claude Codeでは /html-ja のようにスラッシュコマンドとして呼び出すか、「html-ja スキルを使って〜」と自然文で指示します。Cursorでも同様に、スキル名を含めて指示します。

別言語を指定しない限り、生成物のタイトル、見出し、ノード、凡例、注釈、操作、状態、エラー、引き渡し報告は日本語になります。

生成されるHTMLの保存先

保存先を指定しなかった場合は、プロジェクト既存の成果物置場を優先し、なければリポジトリルートの artifacts/<内容を表す名前>.html に作成します。Gitリポジトリでない場合は、現在の作業ディレクトリの artifacts/ を使います。インストールされたスキルのフォルダには生成しません。

派生元

このコレクションは、Plannotator Effective HTML の6スキルと付属リファレンスを基にした日本語派生版です。派生元のコミット d95debb（2026年8月時点）を基準にしています。

主な変更点:

• 6スキルの指示とUI表示を日本語化
• 生成物と引き渡し報告を日本語既定に変更
• 兄弟スキル間のルーティングを日本語版へ変更
• 全5本の詳細リファレンスを日本語化
• 元資料にない関係・数値・範囲を創作しない規則を強化
• 日本語ラベル、文字密度、折返しの検証を追加
• 任意の short_description は、文字数合わせを避けるため使用しない
• 派生元の成果物公開フロー（tot CLIによる共有）は、ローカル運用想定のため採用しない

ライセンス

MIT License。派生元の著作権表示と許諾文は LICENSE に保持しています。