ns-proto-creator

Proto Creator

提供内容： Playwright によるリバースプロトタイピング。キャプチャ → AS-IS ドキュメント → prototype/ を 1 つ作成／進化 → 品質確認 → 外観の継続的な仕様化 → 任意でビジュアルガイド。

オーケストレーション。 委任時にワーカーの SKILL.md を読み込みます。設計チェックリスト全体や「要素｜方法」テーブルをインラインで記載しないでください。

レイアウト（固定）

prototype/              # THE prototype — create once, evolve forever
docs/                   # AS-IS briefs, screenshots, appearance guides
docs/specs/             # Living domain specs (when consolidating)

• prototype/ がない場合 → 作成します。
• prototype/ がすでにある場合 → その場で進化させます。
• vN/prototype/ をスキャフォールドしたり、バージョンフォルダー名を尋ねたりしないでください。バージョン管理には git を使用します。任意：意味のある進化の後にコミットするよう促します。

ハーネス

../../ns-harness/references/session-boot.md と ../../ns-harness/references/artifact-layout.md を参照してください。

ニアミス時の振り分け

ユーザーの要望	リダイレクト先
*-visual.md／規範的な記述／外観ガイドのみ	ns-proto-visual-guide
完全な SDD バージョン／要件／タスク	ns-spec-driven
プロトタイプの範囲外の単純なバグ修正	ns-coder
ブラウンフィールドのアーキテクチャマップのみ	/ns-harness prepare を実行するようユーザーに伝えます

起動（必須、セッションごとに 1 回）

自然な短い質問をします。大量の質問を一度に投げかけないでください。

1. ベース URL — ログイン方法／Playwright MCP プロファイルが複数ある場合はどれを使うか。
2. 範囲 — 画面、ロール、追加／変更の内容。
3. プロトタイプモード — prototype/ を検出します。
   • 存在しない → 作成
   • 存在する → その場で進化

バージョン ID や v1 フォルダーについて質問しないでください。

ジャーニー

flowchart TB
  boot[Boot questions]
  capture[Capture Playwright]
  asis[AS-IS docs]
  build[Build or evolve prototype]
  quality[Best practices + guidelines]
  living[Living appearance]
  handoff[Offer visual guide]

  boot --> capture --> asis --> build --> quality --> living --> handoff

フェーズ	リファレンス／ワーカー	動作
キャプチャ	references/capture-playwright.md	Playwright MCP を検出し、移動してスクリーンショットを撮り、構造、フォント、アイコン、密度を記録します
AS-IS	references/as-is-docs.md	エビデンスに基づき、docs/ の概要ドキュメントを作成／更新します
構築／進化	references/build-prototype.md + ns-frontend-design	prototype/ 内のみで作業し、フロー／フィールド／状態を再現します。モダンなスタックを使用し、レガシーのクローンは作成しません
品質	ns-best-practices	プロトタイプの画面を対象に、衛生面の確認と Web Interface Guidelines のレビューを行います
継続的な仕様化	ns-living-spec appearance	docs/specs/ と INDEX がなければ作成します。表示される製品動作にのみ SHALL を使用します
引き継ぎ	ns-proto-visual-guide	実装用の外観 MD の作成を提案／実行します

厳守事項

• プロトタイプのツリーは 1 つのみとし、その場で進化させます。vN/ のコピーを並行して作成しないでください
• ライブの Playwright エビデンスに基づいて忠実に再現し、存在しない画面を作らないでください
• prototype/ 内で、特定のスタックに依存しないモダンな UI を作成します — ns-frontend-design を読み込みます
• このスキルの成果物は英語で作成し、プロジェクトのドキュメント言語はリポジトリに従います
• バージョン管理には git を使用します。任意：意味のある進化の後にコミットするよう促します
• 製品固有のログイン情報をハードコードしないでください — プロジェクトのルール／ユーザー認証情報のパスを使用します

関連スキル

• ns-proto-visual-guide — 規範的な外観 MD
• /ns-harness codebase-reverse-spec.md — コードからのビジネスロジックのリバース（URL キャプチャを補完）
• ns-frontend-design／ns-best-practices — 設計と品質を担当するワーカー