resume-to-personal-site は何をしますか？
履歴書をプレミアム個人ウェブサイトに変換します：ポジショニング、ヒーロー、ビジュアルシステム、GPT画像アセット、レスポンシブReact +モーション—単なるHTML化された履歴書ではありません。
概要
このスキルは、構造化された履歴書データ（JSON）を読み取り、それを完全に機能するNext.js + React + Framer Motionの個人ウェブサイトに変換します。結果は単なるHTMLではなく、ブランディング、アニメーション、AI生成画像を備えたプロフェッショナルなランディングページです。
仕組み
- 履歴書入力：ユーザーがJSON形式の履歴書を提供します（またはスキルが構造化を支援します）。
- 解析と設計：スキルがデータを解析し、ポジショニング、カラーパレット、タイポグラフィ、全体的なビジュアルシステムを決定します。
- 画像生成：GPT画像生成（DALL·Eなど）を使用して、プロフィール写真やヒーローセクションの背景など、カスタム画像アセットを作成します。
- コード生成：Next.jsプロジェクトを生成します。
- レスポンシブReactコンポーネント
- Framer Motionアニメーション
- 構造化データ（JSON-LD）
- デプロイ：Vercelまたは他のNext.js対応ホストにデプロイします。
対応プラットフォーム
- Claude Code
- Cursor
- Codex CLI
- 同様のツール
前提条件
- Node.js 18+
- npm/yarn/pnpm
- OpenAI APIキー（画像生成用、オプション）
使用方法
# スキルをクローンまたはアクティベート
# 履歴書JSONファイルを提供
resume-to-site ./resume.json
# または、履歴書データをCLIに直接渡す
resume-to-site --input '{"name": "田中太郎", ...}'
出力場所
デフォルトでは、./my-personal-siteにサイトが生成されます。
設定
環境変数：
| 変数名 | 説明 | 必須 |
|---|---|---|
OPENAI_API_KEY | GPT画像生成用 | いいえ（画像なしでも機能） |
SITE_URL | デプロイされたサイトのベースURL | いいえ |
例
入力履歴書（JSON）：
{
"name": "田中花子",
"title": "シニアソフトウェアエンジニア",
"summary": "10年の経験を持つフルスタック開発者...",
"experience": [
{
"company": "株式会社テック",
"role": "リードエンジニア",
"years": "2020-現在"
}
]
}
出力は以下を含みます：
page.tsx- メインランディングページcomponents/Hero.tsx- アニメーションヒーローセクションcomponents/Experience.tsx- タイムライン形式の職歴public/images/- GPTで生成されたアセット
トラブルシューティング
- コンパイルエラー：
package.jsonの依存関係が最新であることを確認してください。 - 画像が表示されない：画像生成をスキップした場合、プレースホルダーが使用されます。
- レイアウトの問題：ブラウザ開発者ツールでレスポンシブデザインを確認してください。
ライセンス
MIT