oh-my-website は何をしますか？
AIエージェントスキル：洗練されたマルチページ個人ウェブサイトの生成 — アイデンティティに合ったページ構造、5つのカラープリセットを備えたCSS変数テーマ、依存関係ゼロの静的HTML配信。
概要
このスキルを使用すると、AIエージェントは個人のブランディングやアイデンティティに合わせた、複数ページからなるプロフェッショナルな静的ウェブサイトを生成できます。生成されるサイトは、以下の特徴を持ちます：
- アイデンティティマッチング: ユーザーの職業、趣味、スタイルに基づいてページ構造（ホーム、ポートフォリオ、ブログ、お問い合わせなど）を自動提案・生成します。
- CSS変数テーマ: 5つのプリセットカラーテーマ（デフォルト、ダーク、ライト、ミニマル、ビビッド）をCSS変数で定義。テーマの切り替えが容易です。
- 依存関係ゼロ: フレームワークやビルドツールを一切使用しない純粋なHTML+CSS+JavaScript。生成されたファイルはそのままデプロイ可能です。
対応プラットフォーム
- Claude Code
- Cursor
- Codex
- その他のAIエージェント（SKILL.mdに準拠したもの）
使用方法
- エージェントとの対話を開始します。
- 以下の情報を提供してください：
- 名前（必須）
- 職業/肩書き（必須）
- 簡単な自己紹介（任意）
- 希望するカラーテーマ：
default,dark,light,minimal,vivid（デフォルトはdefault） - 含めたいページ：
home,portfolio,blog,contactなど（デフォルトでは全てのページを生成）
- エージェントが以下の構造でファイルを生成します：
website/
├── index.html # ホームページ
├── portfolio.html # ポートフォリオページ
├── blog.html # ブログページ
├── contact.html # お問い合わせページ
├── css/
│ └── style.css # 全ページ共通のスタイル（CSS変数含む）
└── js/
└── main.js # テーマ切り替えなどのインタラクション（オプション）
カスタマイズ
CSS変数
css/style.css 内で定義されているCSS変数を編集することで、テーマをカスタマイズできます。
:root {
--primary-color: #4A90D9;
--secondary-color: #50E3C2;
--text-color: #333333;
--background-color: #FFFFFF;
--font-family: 'Inter', sans-serif;
}
プリセットテーマ
| テーマ名 | プライマリカラー | セカンダリカラー | 背景色 |
|---|---|---|---|
| default | #4A90D9 | #50E3C2 | #FFFFFF |
| dark | #BB86FC | #03DAC6 | #121212 |
| light | #1976D2 | #388E3C | #FAFAFA |
| minimal | #2C3E50 | #95A5A6 | #ECF0F1 |
| vivid | #FF5722 | #FFC107 | #FFFFFF |
生成例
エージェントに「風通しの良いデザインで、ミニマルテーマのポートフォリオサイトを作って」と依頼すると、以下のようなコードが生成されます：
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>あなたの名前 - ポートフォリオ</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- ここにページ内容が生成されます -->
</body>
</html>
注意事項
- 生成されるHTMLは静的なので、動的な機能（フォーム送信、データベース連携など）は含まれません。バックエンド機能が必要な場合は、適宜追加してください。
- 画像やアイコンは、UnsplashやFont Awesomeなどの外部サービスを利用することを推奨します（スキルはこれらのURLを生成します）。
- このスキルは、完全にカスタマイズ可能なテンプレートを提供することを目的としており、特定のフレームワークに依存しません。
ライセンス
MIT