landing-page-generator

ランディングページジェネレーター

ドキュメントと構成を分析し、あらゆるリポジトリからデプロイ可能な完全なランディングページを生成します。

このスキルを使用する場面

• GitHub リポジトリのランディングページを作成する
• 既存のドキュメントから静的サイトを生成する
• 複数のプロジェクト間でランディングページを標準化する
• README の内容をマーケティング／ショーケースページに変換する

このスキルでできること

1. リポジトリの分析：README.md、CHANGELOG.md、package.json/VERSION、docs/、assets/ を読み込みます
2. コンテンツの抽出：タイトル、タグライン、機能、インストール方法、スクリーンショットを特定します
3. セクションへの割り当て：ヒーロー、機能、インストール、FAQ、フッター（任意：リスクバナー、料金）
4. ランディングページの生成：完全な静的サイト（HTML + CSS + JS）を作成します
5. デプロイ可能な出力：GitHub Pages 用の GitHub Actions ワークフローを含めます

使用方法

基本的な使い方

/landing-page-generator from ~/path/to/repo

オプションを指定する場合

/landing-page-generator from ~/path/to/repo --risk-banner --pricing-table

使用可能なオプション

オプション	説明	デフォルト
--risk-banner	ファーストビューの上に目立つ警告／免責事項のバナーを追加します	false
--pricing-table	料金比較セクションを含めます	false
--screenshots <path>	スクリーンショットフォルダーのパス	./assets/
--theme [dark|light]	カラーテーマの種類	dark
--search	Cmd+K 検索を有効にします	true
--output <path>	出力ディレクトリ	./[repo-name]-landing/

ワークフロー

ステップ 1：リポジトリの分析

ソースリポジトリから次のファイルを読み込み、分析します。

README.md        → Primary content source (title, tagline, features, install)
CHANGELOG.md     → Version info, recent changes
package.json     → Version number, dependencies, metadata
VERSION          → Alternative version source
docs/            → Additional documentation pages
assets/          → Screenshots, images
LICENSE          → License type for badge

ステップ 2：コンテンツ抽出マップ

ソース	対象セクション	抽出方法
README のタイトル／バッジ	ヒーロー	最初の H1 + shield.io バッジの行
README の TL;DR	ヒーローのタグライン	タイトルの後にある最初の段落または引用
README の機能	機能グリッド	箇条書きを含む H2/H3 セクション
README のインストール方法	クイックスタート	シェルコマンドを含むコードブロック
README の使用方法	例	使用例を含むコードブロック
README の FAQ	FAQ	Details/summary または H3+P のパターン
CHANGELOG	新着情報	最新の 1～3 リリース
assets/*.png	スクリーンショット	ギャラリーセクション

ステップ 3：セクションの生成

次のセクションを順番に生成します。

1. ヘッダー（固定）

   • ロゴ／プロジェクト名
   • ナビゲーションリンク：機能、インストール、FAQ
   • アクション：検索（Cmd+K）、GitHub のスター、メイン CTA

2. リスクバナー（--risk-banner の場合）

   • ファーストビューの上にオレンジ色の警告スタイルで表示
   • 明確で目立つ免責事項のテキスト
   • 詳細な開示セクションへのリンク

3. ヒーローセクション

   • README の H1 から取得したタイトル
   • TL;DR／最初の段落から取得したタグライン
   • 統計バッジ（バージョン、ライセンス、プラットフォーム）
   • CTA：「クイックスタート」（メイン）、「GitHub で見る」（サブ）

4. アーキテクチャ／概要（README に図がある場合）

   • ASCII 図をスタイル付きブロックに変換
   • または概要カード

5. 機能グリッド

   • README の機能から作成した 4～6 個の機能カード
   • アイコン + タイトル + 説明の形式

6. 料金表（--pricing-table の場合）

   • プラン比較表
   • 乗数／使用量の表がある場合はそれも含めます

7. スクリーンショットギャラリー（アセットがある場合）

   • タブ形式またはカルーセル形式のギャラリー
   • alt テキストから取得したキャプション

8. クイックスタートセクション

   • 1 行のインストールコマンド（目立つコードブロック）
   • セットアップ手順
   • 最初の使用例

9. リスク開示（--risk-banner の場合）

   • 免責事項の全文
   • ToS に関する考慮事項
   • 推奨事項

10. FAQ セクション

    • README の FAQ またはよくある質問から生成
    • 折りたたみ可能な詳細表示形式

11. 関連プロジェクト（README にリンクがある場合）

    • 依存関係／関連リポジトリへのリンクを掲載したカード

12. フッター

    • クイックリンク
    • ライセンスバッジ
    • バージョン情報
    • 作成者／リポジトリのリンク

ステップ 4：出力構成

[project-name]-landing/
├── index.html              # Main landing page
├── styles.css              # Complete stylesheet
├── search.js               # Cmd+K search functionality
├── search-data.js          # Search index (FAQ, features)
├── favicon.svg             # Generated or copied
├── robots.txt              # SEO
├── CLAUDE.md               # Project instructions
├── README.md               # Landing repo documentation
├── assets/                 # Copied screenshots
│   └── [copied from source]
└── .github/
    └── workflows/
        └── static.yml      # GitHub Pages deployment

ステップ 5：検証チェックポイント

仕上げる前に、次の点を確認してください。

• すべてのセクションがブラウザーで正しく表示される
• リンクが有効な参照先（GitHub リポジトリ、ドキュメント、インストールコマンド）を指している
• モバイル（375px）、タブレット（768px）、デスクトップ（1280px）の各幅でレスポンシブレイアウトが機能する
• アクセシビリティ：スキップリンクがあり、インタラクティブ要素に ARIA ラベルが設定され、色のコントラストが WCAG AA に準拠している

技術スタック

• ビルド工程なし：HTML + CSS + JS のみ
• 検索：MiniSearch を CDN から遅延読み込みし、フォールバックを用意
• デプロイ：Actions 経由の GitHub Pages
• スタイル：CSS カスタムプロパティ、レスポンシブ対応、ダークテーマをデフォルトに設定
• アクセシビリティ：スキップリンク、ARIA ラベル、キーボード操作

CSS パターン（既存のランディングページを参考）

コンポーネントクラス

/* Buttons */
.btn, .btn-primary, .btn-secondary, .btn-github-star, .btn-outline

/* Cards */
.feature-card, .comparison-card, .path-card

/* Layout */
.container, .features-grid, .hero, .section

/* Utilities */
.visually-hidden, .skip-link

CSS 変数

:root {
  --color-bg: #0d1117;
  --color-surface: #161b22;
  --color-border: #30363d;
  --color-text: #c9d1d9;
  --color-text-muted: #8b949e;
  --color-primary: #58a6ff;
  --color-success: #3fb950;
  --color-warning: #d29922;
  --color-danger: #f85149;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --radius: 6px;
}

例

ユーザー：/landing-page-generator from ~/projects/my-project --risk-banner --pricing-table

出力：

~/projects/my-project-landing/ に次の内容を作成します。

• マルチプロバイダールーターを紹介する、完全なランディングページ
• 目立つ ToS リスクバナー（オレンジ色、ファーストビューに配置）
• プロバイダーカード（Anthropic、Copilot、Ollama）
• README の料金表
• スクリーンショットギャラリー
• GitHub Pages へのデプロイに対応

ヒント

• 法律や ToS に関する考慮事項があるプロジェクトでは、必ず --risk-banner を指定してください
• スクリーンショットはランディングページの品質を大きく高めます。assets/ にファイルがあることを確認してください
• このスキルは README の言語（英語／フランス語）を維持します
• 生成された FAQ を確認してください。カスタマイズが必要な場合があります
• 生成後にレスポンシブデザインをテストしてください

参考資料

詳細なパターンドキュメントについては、references/landing-pattern.md を参照してください。 再利用可能なテンプレートとスニペットについては、assets/ を参照してください。