| name | add-common-header |
| description | [DEPRECATED — Phase A–F 移行期間中は使用しない] This skill targets legacy/shared/common-header.{js,css}, which was superseded by web-next/components/site/SiteHeader.tsx in Phase A (commit db67dd0). The legacy/ directory is now frozen (.gitignore) and editing it violates the CLAUDE.md migration rules. For Next.js guide page navigation work, use /nextjs-page-migration instead. This skill will be re-evaluated (or removed) after Phase F cutover.
|
| deprecated | true |
| invocation | explicit |
| allowed-tools | ["Read","Edit","Bash"] |
⚠️ DEPRECATED (Phase A 以降): 本スキルが対象とする legacy/shared/common-header.{js,css} は
Phase A（commit db67dd0）で web-next/components/site/SiteHeader.tsx + DisclaimerBanner.tsx +
nav-links.ts に置換された。legacy/ は .gitignore 済で編集禁止。
- Next.js 側のナビ更新:
web-next/components/site/nav-links.ts を編集（Zod NavLinkSchema[] 準拠）
- ガイドページ移行:
/nextjs-page-migration を使用
- 本スキルは Phase F カットオーバー後に削除または再定義する
以下の手順は Phase F 完了までは実行しない（参照用に保持）。
共通ヘッダー・ディスクレイマー追加ガイド
背景
このプロジェクトでは、すべてのHTMLファイルに統一されたナビゲーションヘッダーと注意文（ディスクレイマー）を表示するため、shared/common-header.js と shared/common-header.css を使用しています。
仕組み
-
自動生成: shared/common-header.js がページ読み込み時に以下を自動生成
- ヘッダーナビゲーション（"LLM Studies" ブランド + ドロップダウンメニュー）
- ディスクレイマー（黄色い注意文バナー）
- レスポンシブ対応（デスクトップ: hover、モバイル: ハンバーガーメニュー）
-
HTMLファイル側の設定: 2行のコードを追加するだけで自動的に機能
<link rel="stylesheet" href="../shared/common-header.css" />
<script src="../shared/common-header.js" defer></script>
-
ドロップダウンメニュー管理: defaultLinks 配列で各カテゴリのリンクを定義
手順
Step 1: HTMLファイルへの共通ヘッダー追加
対象HTMLファイルの </head> タグの位置を特定し、その直前に以下のコードを挿入します。
1-1. </head> タグの位置を検索
grep -n "</head>" <ファイルパス>
返された行番号の前後数行を Read ツールで確認します。
1-2. 共通ヘッダーコードを挿入
サブディレクトリ内のHTMLファイル（claude/, gemini/, copilot/, codex/）の場合:
</style>
<link rel="stylesheet" href="../shared/common-header.css" />
<script src="../shared/common-header.js" defer></script>
</head>
ルートディレクトリのHTMLファイルの場合:
</style>
<link rel="stylesheet" href="shared/common-header.css" />
<script src="shared/common-header.js" defer></script>
</head>
重要な注意点:
</style> タグと </head> タグの間に挿入- パスをファイルの位置に応じて調整（
../shared/ または shared/）
defer 属性を必ず含める（JavaScriptの読み込みタイミング制御）
Step 2: ドロップダウンメニューへのリンク追加（必要な場合）
新規HTMLファイルをドロップダウンメニューに追加する場合は、shared/common-header.js の defaultLinks 配列を編集します。
2-1. 該当カテゴリを特定
shared/common-header.js の defaultLinks 配列から、追加先カテゴリを検索します:
| カテゴリ | 検索キー | 例 |
|---|
| Claude | name: 'Claude' | claude-cowork-guide.html |
| Gemini | name: 'Gemini' | antigravity-guide.html |
| Codex | name: 'Codex' | codex の各ドキュメント |
| Copilot | name: 'Copilot' | github-copilot.html |
検索方法:
grep -n "name: 'Claude'" shared/common-header.js
返された行番号付近を Read ツールで確認し、children 配列を特定します。
2-2. リンクを追加
該当カテゴリの children 配列の末尾に新しいリンクオブジェクトを追加します。
テンプレート:
{
name: 'カテゴリ名',
children: [
{ name: 'Skill', href: '/category/skill.html' },
{ name: 'Agent', href: '/category/agent.html' },
{ name: '新規リンク名', href: '/category/new-file.html' },
],
},
リンク名の命名規則:
- 英語で統一
- 短くわかりやすい（1-3語）
- 既存パターンに合わせる: "Skill", "Agent", "Skill Guide", "Cowork Guide", "Antigravity" など
href の形式:
- 絶対パス（
/ から始まる）
- 例:
/claude/claude-cowork-guide.html
2-3. 編集例
Claude カテゴリに "Cowork Guide" を追加する場合:
{
name: 'Claude',
children: [
{ name: 'Skill', href: '/claude/skill.html' },
{ name: 'Agent', href: '/claude/agent.html' },
{ name: 'Skill Guide', href: '/claude/skill-guide-for-claude.html' },
{ name: 'Skill Guide (中級)', href: '/claude/skill-guide-of-claude-for-intermediate.html' },
{ name: 'Cowork Guide', href: '/claude/claude-cowork-guide.html' },
],
},
チェックリスト
検証方法
ブラウザで対象HTMLファイルを開いて、以下を確認します:
1. ヘッダー部分
- ✓ 黒いナビゲーションバーが上部に固定表示される
- ✓ "LLM Studies" ブランドロゴが左端に表示される
- ✓ ドロップダウンメニュー（Claude▾, Gemini▾, Codex▾, Copilot▾）が表示される
- ✓ "Git Worktree"、"GitHub↗" リンクが表示される
2. ディスクレイマー部分
- ✓ 黄色い注意文バナーがヘッダー直下に表示される
- ✓ テキスト内容: "⚠ 本サイトは個人開発の参考用に作成したものです。必ず各社公式ページで最新の料金/仕様をご確認ください。情報の正確性は保証しません。本サイトの利用による損害等について一切の責任を負いません。"
3. ドロップダウンメニュー（追加した場合）
デスクトップ環境:
- ✓ 該当カテゴリにマウスホバーで新規リンクが表示される
- ✓ リンクをクリックして正しいページに遷移する
モバイル環境（幅768px以下）:
- ✓ ハンバーガーメニューアイコン（三本線）が表示される
- ✓ クリックでメニューが展開される
- ✓ ドロップダウンが縦並びアコーディオン形式で表示される
4. アクティブページのハイライト
- ✓ 現在のページに対応するナビゲーションリンクが青色（
#58a6ff）でハイライトされる
トラブルシューティング
ヘッダーが表示されない
原因:
- パスが間違っている（
../shared/ vs shared/）
defer 属性が欠けている</head> の後に挿入してしまった
解決策:
- ファイルの位置を確認してパスを修正
defer 属性を追加</head> の前に挿入されているか確認
ドロップダウンにリンクが表示されない
原因:
defaultLinks の配列構文が間違っている（カンマ忘れ、括弧の不一致）href が相対パスになっているchildren 配列の外に追加してしまった
解決策:
- JavaScript の構文を確認（カンマ、括弧）
href を絶対パス（/ から始まる）に修正children 配列内に正しく追加されているか確認
スタイルが崩れる
原因:
- CSS の読み込み順序が間違っている
- パスが間違っている
解決策:
common-header.css が </head> の直前に読み込まれているか確認- パスが正しいか確認（開発者ツールのネットワークタブで404エラーを確認）
関連ファイル
shared/common-header.js - ヘッダー・ディスクレイマー生成スクリプト（328行）shared/common-header.css - 共通ヘッダー用スタイル（314行）- プロジェクト内の既存HTMLファイル - 参考実装例
