PortfolioFlow Skill は何をしますか？

一言で、デザイナーの完全なポートフォリオWebサイトに変えます。

PortfolioFlowは5大デザイン分野（景観 / グラフィック / インテリア / 工業 / UX）に対応したポートフォリオサイト構築スキルです。ユーザーが日本語または英語で要件を述べると、本スキルは自動的に以下を生成します：

完全なポートフォリオフロントページ（Hero + 作品グリッド + 詳細ページ + アバウト + AIアシスタントダイアログ）
デザイナー管理画面（ログイン + 作品CRUD + AI生成紹介 + 統計ダッシュボード）
テーマカラーカスタマイズ（5つのプリセットテーマ + ユーザー指定HEXカラーによる自由な組み合わせ）
Edge Functions / KV / Middleware / JWT認証によるフルスタック機能

最終的に edgeone-pages-deploy によってEdgeOne Pagesへワンクリックデプロイします。

トリガー後の実行フロー（決定木）

本スキルのトリガー条件を満たすユーザーリクエストを受け取ったら、以下の順序で実行します：

Step 1 — 必須情報の収集

ユーザーの説明に不足しているフィールドがある場合は、ユーザーに一度にまとめて質問します（複数回質問しないでください）：

フィールド	必須	例	デフォルト値
デザイナー名	✅	"田中博" / "Alex Chen"	ユーザー名
デザイン分野	✅	景観 / グラフィック / インテリア / 工業 / UX	質問して選択
サイトタイトル	❌	"Tanaka · 景観デザインポートフォリオ"	"{名前} ポートフォリオ"
一言キャッチフレーズ	❌	"デザインを人と暮らしに還す"	分野別デフォルト
テーマ	❌	"ダークフォレスト" / hexカラー	"ダークフォレスト"
初期作品数	❌	3-6	デフォルト3つのサンプル作品

質問例:

いくつか確認させてください：

あなたのデザイン分野は？（景観 / グラフィック / インテリア / 工業 / UX）

デザイナー名は？

テーマは？（ダークフォレスト / モーニングベージュ / ディープブルー / ウォームオレンジ / ピュアホワイト、または直接HEXカラーを指定）

Step 2 — プロジェクト構成の決定

以下の参考ファイルのいずれかを参照し、ユーザーの分野に応じたコンテンツテンプレートを読み込みます：

景観 / インテリア / 工業 → references/portfolio-knowledge.md の該当セクション
グラフィック / UX → 同上

Step 3 — プロジェクトのスケルトン生成

/tmp/portfolio-{slug}/ 以下に以下のファイルを作成します（特殊文字を含むパスへのcd禁止、すべてのパスは絶対パスまたは ~/Desktop/ 以下のクリーンなパスを使用）：

portfolio-{slug}/
├── index.html              # フロントトップページ（templates/index.html テンプレートを使用）
├── portfolio-detail.html   # 作品詳細ページ
├── admin.html              # 管理画面
├── login.html              # ログインページ
├── assets/                 # 画像素材（ユーザーアップロードまたはプレースホルダー）
├── functions/
│   ├── api/
│   │   ├── auth.js         # ログイン認証 + JWT発行（references/auth-jwt.md 参照）
│   │   ├── portfolios.js   # 作品CRUD（references/portfolio-crud.md 参照）
│   │   ├── generate.js     # AI生成紹介（references/ai-generate.md 参照）
│   │   └── stats.js        # アクセス統計（references/stats-kv.md 参照）
│   └── _middleware.js      # JWT検証 + CORS
└── README.md

Step 4 — テーマカラーの注入

ユーザーが選択したテーマは、同時に以下のファイルに注入します：

index.html の <style> 内のCSS変数
admin.html の同位置
login.html の同位置

5つのプリセットテーマの具体的なCSS変数値は references/design-system.md を参照してください。

ユーザーがHEXカラー（例：#FF6B6B）を指定した場合は、references/design-system.md の「HEXから完全テーマへ」のアルゴリズムに従って、対応するカラースケールを生成します。

Step 5 — デプロイスキルの呼び出し

すべてのファイル生成後、edgeone-pages-deploy スキルを呼び出してデプロイを実行します：

トリガーフレーズ：deploy this portfolio to EdgeOne Pages
プロジェクトディレクトリ：~/Desktop/portfolio-{slug}/

デプロイ成功後、必ず以下を実行します：

EdgeOne Pagesコンソールでユーザーに以下のKV名前空間を手動でバインドするよう案内します（一度だけの手動操作）：
- 変数名 PORTFOLIO_USERS ← ユーザーアカウントデータベース
- 変数名 PORTFOLIO_WORKS ← 作品データベース
- 変数名 PORTFOLIO_STATS ← アクセス統計
- 重要：変数名は厳密に一致させる必要があります。KVバインド後、Edge Function内ではグローバル変数としてアクセスされ、env.PORTFOLIO_WORKS とは異なります（EdgeOne Pagesの特殊な仕様です）。
もう一度デプロイを実行してKVバインドを有効にします。
アクセスURLとデフォルトの管理者アカウント・パスワードを返します（初回デプロイ時に自動的にKVに書き込まれます）。

ルーティングテーブル（references/ はオンデマンドでロード）

以下の表は、AIがどのリファレンスファイルを開くべきかを判断するのに役立ちます：

ユーザーシナリオのキーワード	ロードするリファレンス
"テーマ / カラー / ビジュアルスタイル / hex / カスタムカラー"	`references/design-system.md`
"ログイン / 認証 / JWT / パスワード / token"	`references/auth-jwt.md`
"作品 / CRUD / 追加 / 編集 / 削除 / 増減改査"	`references/portfolio-crud.md`
"AI生成 / 作品紹介 / 説明生成 / スマート入力"	`references/ai-generate.md`
"統計 / ビュー数 / PV / 人気作品 / ダッシュボード"	`references/stats-kv.md`
"デプロイ / 公開 / EdgeOne / ドメイン / KVバインド"	`references/deploy-workflow.md`
"景観 / グラフィック / インテリア / 工業 / UX 業界用語"	`references/portfolio-knowledge.md`

主要な制約（必ず遵守）

外部APIキーに依存しない — デフォルトモードでは、すべての機能（AI生成を含む）がゼロコンフィグで動作する必要があります。 references/ai-generate.md にはオプションのDeepSeek拡張モードが記載されていますが、デフォルトの動作ではありません。
ユーザーパスに特殊文字を含むディレクトリに書き込まない — 優先的に ~/Desktop/ 以下の × ' " / を含まないクリーンなパスを使用します。
画像フィールドは startsWith('http') によるフォールバック判定を行わない — 渡された img フィールドをそのまま信頼し、ローカル /assets/xxx.jpg もリモート https://... もそのまま使用します。
JWT secret はコードにハードコードしない — EdgeOne Pagesの環境変数 JWT_SECRET から読み取り、デプロイ後にコンソールで手動設定するようユーザーに案内します。
初回デプロイ完了後、必ず以下を返す：
- 公開アクセスURL
- コンソールリンク
- デフォルト管理者アカウント（初回ログイン後すぐにパスワードを変更するよう注意）

オプション拡張（ユーザーが明示的に要求した場合のみ有効化）

ユーザーの発言	有効化内容
"本物のAIを使う" / "DeepSeekを使う" / "AI能力を強化"	`references/ai-generate.md` のPlan B：DeepSeekデュアルエンジン
"日本語と英語の切り替え対応" / "バイリンガル"	`index.html` にi18n辞書 + 切り替えボタンを追加
"RSS / 購読機能を追加"	`functions/api/rss.js` を新規作成
"作品にコメント機能"	`functions/api/comments.js` + コメント用KV名前空間を新規作成

反例：本スキルをトリガーすべきでないリクエスト

"ランドスケーププロジェクトサイトを作って"（特定のプロジェクトサイトであり、デザイナーのポートフォリオではない）→ landscapeflow プロンプトを使用
"ランディングページ / SaaS / ECサイトを作って" → ポートフォリオのシナリオではない
"今の履歴書をWebページにして" → 履歴書であってポートフォリオではない
単に "AIで作品紹介を生成して"（サイト構築なし） → サイト構築スキルは不要

出力契約

実行完了後、ユーザーに以下の構造化された結果を出力します：

✅ PortfolioFlow ポートフォリオサイトが準備完了しました

🌐 アクセスURL: https://portfolio-{slug}.edgeone.cool
🔐 管理画面: https://portfolio-{slug}.edgeone.cool/admin
   - デフォルトアカウント: [email protected]
   - デフォルトパスワード: PortfolioFlow_{ランダム6桁}
   - ⚠️ 初回ログイン後すぐにパスワードを変更してください

📊 デプロイ済み機能:
   ✅ ポートフォリオトップページ（{N} 個のサンプル作品）
   ✅ 作品詳細ページ
   ✅ 管理画面（ログイン / CRUD / AI生成）
   ✅ Edge Functions × 4
   ✅ KV Storage × 3
   ✅ JWT認証 + CORS Middleware

🎨 現在のテーマ: {テーマ名}
📁 プロジェクトディレクトリ: {ローカルパス}

次のステップの提案:
1. 管理画面にログインして実際の作品を追加する
2. プロフィール画像とカバー画像を /assets/ にアップロードする
3. フッターの著作権と連絡先を変更する

PortfolioFlow Skill