mockup-prototype

モックアッププロトタイプ

Copilot CLI を使用して、インタラクティブな HTML モックアップを作成、反復、共有するためのエンドツーエンドのワークフローです。

このスキルを使う場面

• ユーザーが「モックアップを作成して」や「UI をプロトタイプして」と依頼した場合
• ユーザーがデザイン案を並べて比較したい場合
• ユーザーが同僚とモックアップを「デプロイ」または「共有」したいと依頼した場合
• ユーザーが機能のアイデアを手早く視覚的に検討したい場合

フェーズ 1：生成

モックアップの保存先を確認する

ファイルを作成する前に、どのリポジトリで作業するかユーザーに尋ねます。モックアップファイルは最初からリポジトリのローカルクローンに配置するため、後でコピーする必要はありません。

1. 次のように尋ねます：「このモックアップはどのリポジトリに配置しますか？」（例：acme/feature-explorer、contoso/design-lab）
2. ローカルクローンを探します（~/GitHub/<org>/<repo> または ~/GitHub/<repo> を確認します）
3. 既存のフォルダー構成を確認します：docs/mockups/、considerations/、designs/、proposals/。該当するものがなければ、docs/mockups/ を使用します。
4. モックアップを <repo>/docs/mockups/<feature-name>/mockup.html に作成します

モックアップを作成する

CSS をすべてインラインで記述した、単一の自己完結型 HTML ファイルを作成します。外部依存関係やビルド手順は使用しません。

スタイルガイド

モックアップ対象の製品のビジュアルスタイルに合わせます。ユーザーが製品やブランドを指定した場合は、その見た目（色、余白、タイポグラフィ）を再現します。特定の製品が指定されていない場合は、妥当なデフォルトとして、すっきりしたダークテーマを使用します。

トークン	値
背景（ページ）	#0d1117
背景（サーフェス）	#161b22
背景（オーバーレイ）	#21262d
テキスト（プライマリ）	#e6edf3
テキスト（セカンダリ）	#9198a1
テキスト（ミュート）	#7d8590
ボーダー	#30363d
ブルー	#4493f8
グリーン	#3fb950
レッド	#f85149
イエロー	#d29922
パープル	#a371f7
フォントスタック	-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif

アイコンにはインライン SVG を使用します。外部のアイコンライブラリや CDN は参照しないでください。

複数の案を比較する

案を比較する場合は、タブ形式のレイアウトを使用します。

<div class="option-nav">
  <button class="option-btn active" onclick="show('a')">A. Option name</button>
  <button class="option-btn" onclick="show('b')">B. Option name</button>
</div>


<div class="mockup-section active" id="section-a">
  
  
</div>
<div class="mockup-section" id="section-b">
  
  
</div>

<script>
function show(id) {
  document.querySelectorAll('.mockup-section').forEach(s => s.classList.remove('active'));
  document.querySelectorAll('.option-btn').forEach(b => b.classList.remove('active'));
  document.getElementById('section-' + id).classList.add('active');
  event.target.classList.add('active');
}
</script>

重要なルール：

• ナラティブブロック（長所／短所）は、各 .mockup-section の内側に配置し、外側には配置しません
• CSS（display:none / display:block）で、一度に表示するセクションは 1 つだけにします
• プレースホルダーテキストではなく、現実的なデータを使用します

ローカルでプレビューする

ファイルを作成したら、必ず自動的にブラウザーで開きます。

open <repo-path>/docs/mockups/<feature-name>/mockup.html   # macOS
xdg-open <repo-path>/docs/mockups/<feature-name>/mockup.html  # Linux

フェーズ 2：反復

すべての変更はローカルに保持します。ユーザーがデプロイまたはプッシュを明示的に依頼するまで、リモートにはプッシュしないでください。

1. ユーザーのフィードバックに基づいて HTML ファイルを編集します
2. 更新をすぐに確認できるよう、変更のたびに必ずブラウザーで再度開きます
3. よくある反復パターン：
   • 案の追加／削除／並べ替え
   • 各案の下に長所／短所の説明を追加
   • レイアウト、余白、色の調整
   • スクリーンショットを通じて報告された視覚的な不具合の修正

重要： このフェーズでは、git commit、git push、PR の作成を行わないでください。準備ができたらユーザーが指示します。

フェーズ 3：共有用にデプロイ

ユーザーがデプロイ、プッシュ、共有を明示的に依頼した場合にのみ、このフェーズを開始します。

公開範囲を確認する

デプロイする前に、次の内容をユーザーに伝えます。

このモックアップは公開 URLにデプロイされます。外部と共有しても問題のない内容であることを確認してください（上記の「セキュリティ」セクションを参照）。

ユーザーから確認が得られていない場合は、続行する前に確認を求めます。

デプロイ先を選ぶ

どこにデプロイするかユーザーに尋ねます。

• GitHub Pages（デフォルト）：リポジトリの Pages サイト経由でデプロイします。main へのマージが必要です。
• Vercel：vercel deploy --prod 経由で即時にデプロイします。PR やマージは不要です。

ユーザーがすでに希望を伝えている場合（例：「Vercel にデプロイして」）は、質問を省略します。

オプション A：GitHub Pages

1. 対象リポジトリでGitHub Pages が有効になっていることを確認します：

   gh api repos/<owner>/<repo>/pages --jq '.html_url'
   # If not enabled:
   gh api repos/<owner>/<repo>/pages -X POST -f source='{"branch":"main","path":"/"}'
   

2. モックアップのディレクトリに、状態やオプションの概要を記載したREADME.md を追加します。

3. ブランチの作成、コミット、プッシュ、PR の作成、マージを一連の流れで行います：

   git checkout -b <user>/mockup-<feature-name>
   git add docs/mockups/<feature-name>/
   git commit -m "Add <feature-name> mockup"
   git push origin <user>/mockup-<feature-name>
   gh pr create --title "<Feature> mockup" --body "..."
   # Wait for checks, then merge
   gh pr merge <number> --squash --delete-branch
   

   Pages でデプロイするには、main へのマージが必要です。PR を未完了のままにしないでください。

4. マージ後、ブラウザーで公開 URL を開きます：

   PAGES_URL=$(gh api repos/<owner>/<repo>/pages --jq '.html_url')
   open "${PAGES_URL}docs/mockups/<feature-name>/mockup.html"
   

オプション B：Vercel

1. Vercel CLI がインストールされ、認証済みであることを確認します：

   vercel --version || npm install -g vercel
   vercel whoami  # confirm logged in
   

2. デプロイ用ディレクトリを準備します。Vercel は既定で index.html を配信します。ルート URL で動作するよう、モックアップのファイルをコピーします：

   cp <repo-path>/docs/mockups/<feature-name>/mockup.html \
      <repo-path>/docs/mockups/<feature-name>/index.html
   

3. モックアップのディレクトリからデプロイします：

   cd <repo-path>/docs/mockups/<feature-name>
   vercel deploy --prod --yes
   

4. 一時的な index.html を削除します（正本として mockup.html を残します）：

   rm <repo-path>/docs/mockups/<feature-name>/index.html
   

5. ブラウザーで公開 URL を開きます。デプロイ時に Vercel が本番 URL とエイリアスを表示します。エイリアス URL（例：https://<project>.vercel.app）を開きます。

6. プロジェクトの履歴に残すため、必要に応じてモックアップをリポジトリにコミットしてプッシュします。これは Vercel のデプロイとは別の作業で、GitHub Pages と同じブランチ／PR／マージの手順に従います。ユーザーから依頼された場合にのみ行ってください。

セキュリティ

公開範囲

GitHub Pages と Vercel は、既定でコンテンツを誰でもアクセスできる URLにデプロイします。デプロイ前に、モックアップに次の情報が含まれていないことを確認してください。

• 実際のユーザーデータ、PII、本番データベースの内容
• API キー、トークン、シークレット、認証情報
• 内部専用の URL、ホスト名、インフラの詳細
• 機密情報として扱うべき独自のビジネスロジックや未公開機能の詳細

コンテンツのガイドライン

• すべてのモックアップで合成した架空のデータ（偽のユーザー名、プレースホルダーのリポジトリ、架空の組織名）を使用します。
• 公開の許可を得ていない限り、内部ツールの実際のスクリーンショットを埋め込まないでください。
• 外部 CDN、スクリプト、スタイルシートを参照しないでください。アセットはすべてインラインにする必要があります。これにより、サプライチェーンのリスクを防ぎ、ファイルをオフラインでも確実に動作させられます。

認証情報の管理

• このスキルでは gh CLI と vercel CLI を使用します。これらはローカルに保存された認証トークンを利用します。これらのトークンがモックアップのファイルに書き込まれることはありません。
• モックアップ内の HTML、CSS、JS にトークン、パスワード、認証ヘッダーをハードコードしないでください。

ガイドライン

• 自己完結型の単一 HTML ファイルにします。ビルドツール、npm、フレームワークは使用しません。
• 最初から、対象リポジトリのローカルクローンにモックアップを保存します。
• モックアップを 2 か所（例：デスクトップとリポジトリ）で管理しないでください。ファイルも保存場所も 1 つにします。
• 作業中に変更をプッシュしないでください。ユーザーがデプロイを指示するまではローカルだけで作業します。
• 作業中は常に、ローカルファイルをブラウザーで自動的に開きます。
• デプロイ後は常に、公開された Pages の URL を自動的に開きます。
• ファイル名とフォルダー名は内容が分かるものにします（例：mockup-1 ではなく user-profile-card）。