mcpField
P
prototype

prototype

github.com/nulfrogデザイン・UI038 回インストール2 週間前に更新
リポジトリ

prototype について

Prototypeは、特定のロジックやUIの疑問を使い捨てコードで検証する開発者向けスキルです。単一ファイルの対話型ロジックデモか、切り替え可能なUI案を作り、状態の可視化と本番コードからの分離を促します。

主な機能

  1. 01ロジックまたはUIを選択
  2. 02単一ファイルのロジックデモ
  3. 03切り替え可能なUI案
  4. 04状態の可視化
  5. 05本番コードから分離

活用シーン

  1. 01推論しにくい状態遷移の検証
  2. 02異なるページデザインの比較
  3. 03実装に向けた検証結果の記録

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/nulfrog/skills --skill prototype

インストール後、Claude Code で/prototypeを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

LOGIC.md
UI.md
agents/
openai.yaml

詳細

プロトタイプ

プロトタイプとは、問いに答えるための使い捨てコードです。形は問いによって決まります。

分岐を選ぶ

ユーザーのプロンプトや周辺のコードを手がかりに、またはユーザーが応答できるなら尋ねて、どの問いに答えるのかを特定します。

  • 「このロジック/状態モデルは適切でしょうか?」 → LOGIC.md。単一の共有可能な HTML ファイルを作成します(自由に操作できるボタンと、タブ付きのガイド付きウォークスルーを用意)。紙上では推論しにくいケースで状態マシンを動かし、開発者でなくても操作できるようにします。
  • 「見た目はどうあるべきでしょうか?」 → UI.md。1 つのルートで大きく異なる UI バリエーションを複数生成し、URL の検索パラメーターと画面下部に固定されたバーで切り替えられるようにします。

2 つの分岐では成果物が大きく異なるため、選択を誤るとプロトタイプ全体が無駄になります。問いが本当に曖昧で、ユーザーに確認できない場合は、周辺のコードにより合う分岐を選びます(バックエンドモジュールならロジック、ページやコンポーネントなら UI)。そして、プロトタイプの先頭にその前提を明記します。

両方に適用されるルール

  1. 初日から使い捨てとして扱い、それと明確にわかるようにします。 実際に使われる場所の近く(プロトタイプ対象のモジュールやページの隣)にコードを配置し、何のためのものかが明らかになるようにします。ただし、ひと目でプロトタイプだとわかる名前を付けます。使い捨ての UI ルートでは、プロジェクトですでに採用されているルーティング規約に従い、新たなトップレベル構造を作らないでください。
  2. すぐに実行できるようにします。 UI プロトタイプは、プロジェクトのタスクランナーから 1 つのコマンドで起動します。例:pnpm <name>、python <path>、bun <path> など。ロジックのデモは、ユーザーがダブルクリックする単一の HTML ファイルにします。どちらの場合も、起動時に考えることは不要です。
  3. デフォルトでは永続化しません。 状態はメモリ内に保持します。プロトタイプが検証する対象が永続化であっても、それに依存させてはいけません。問いにデータベースが明示的に含まれている場合は、一時的な DB または「PROTOTYPE, wipe me」という名前が明確なローカルファイルを使います。
  4. 仕上げに時間をかけません。 テストも、プロトタイプを実行可能にするために必要な範囲を超えるエラー処理も、抽象化も不要です。目的は、すばやく学びを得ることです。
  5. 状態を見えるようにします。 ロジックでは各アクションの後に、UI ではバリエーションを切り替えるたびに、関連する状態全体を出力または表示し、何が変わったかをユーザーが確認できるようにします。
  6. 完了したら記録します。 検証された決定を実際のコードに反映したうえで、プロトタイプ自体を一次資料として記録します。使い捨てブランチにコミットし、main から切り離して、実装イシューにそのブランチへの参照を残します。結論(判断結果と、決着した問い)もイシューまたはコミットに記録します。main ブランチには検証済みの決定だけを残します。

コメント