prototype について
ロジックモデルの検証やUI案の探索を、実行可能な成果物で素早く行うプロトタイピングスキルです。問いに応じてロジックデモかUI案の分岐を選び、簡単に実行できる一時的なコードを作成します。
主な機能
- 01問いに応じてロジックかUIを選択
- 02単一ファイルのロジックデモを作成
- 03切り替え可能なUI案を生成
- 04実行しやすく、既定で状態を永続化しない
- 05判断内容とプロトタイプの出典を記録
活用シーン
- 01紙上では追いにくい状態遷移の検討
- 02単一ルートで複数のUI案を比較
- 03実装前に操作性やロジックの判断を検証
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ leandrocfe/ skills --skill prototypeインストール後、Claude Code で/prototypeを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
LOGIC.mdUI.mdagents/openai.yaml詳細
プロトタイプ
プロトタイプとは、疑問に答えるための使い捨てコードです。形は疑問によって決まります。
分岐を選ぶ
ユーザーのプロンプト、周辺のコードをもとに、またはユーザーが応答可能であれば質問して、どの疑問に答えるのかを特定します。
- 「このロジック/状態モデルは適切でしょうか?」 → LOGIC.md。共有可能な単一の HTML ファイルを作成します。自由に試せるボタンとタブ付きのガイド付きウォークスルーを用意し、紙上では考えにくいケースでステートマシンを動かして、開発者でない人でも操作できるようにします。
- 「どのような見た目にすべきでしょうか?」 → UI.md。単一のルートに、まったく異なる UI バリエーションを複数生成します。URL の検索パラメーターと画面下部のフローティングバーで切り替えられるようにします。
2 つの分岐で成果物は大きく異なります。選択を誤ると、プロトタイプ全体が無駄になります。疑問が本当に曖昧でユーザーに連絡できない場合は、周辺のコードにより合う分岐を選びます(バックエンドモジュールならロジック、ページやコンポーネントなら UI)。その前提をプロトタイプの冒頭に明記します。
両方に適用されるルール
- 初日から使い捨てとして扱い、それが明確に分かるようにします。 プロトタイプのコードは、実際に使われる場所の近く(プロトタイプ対象のモジュールやページの隣)に置き、文脈が分かりやすいようにします。ただし、何気なく見た人にも本番用ではなくプロトタイプだと分かる名前を付けます。使い捨ての UI ルートでは、新しいトップレベル構造を作らず、プロジェクトで既に使われているルーティング規則に従います。
- 実行は簡単にします。 UI プロトタイプは、プロジェクトのタスクランナーから
pnpm <name>、python <path>、bun <path>などのコマンドを 1 つ実行すれば起動できるようにします。ロジックのデモは、ユーザーがダブルクリックするだけで開く単一の HTML ファイルにします。いずれの場合も、起動方法を考える必要がないようにします。 - デフォルトでは永続化しません。 状態はメモリ内に保持します。永続化はプロトタイプが検証する対象であり、依存するものではありません。疑問にデータベースが明示的に含まれる場合は、使い捨てのデータベースか、名前に「PROTOTYPE — wipe me」と明記したローカルファイルを使用します。
- 仕上げに時間をかけません。 テストや、プロトタイプを 実行可能にする ために必要な範囲を超えるエラー処理、抽象化は不要です。目的は素早く学びを得ることです。
- 状態を見えるようにします。 ロジックの場合はアクションのたびに、UI の場合はバリエーションを切り替えるたびに、関連する状態全体を出力または表示し、何が変わったのかユーザーが確認できるようにします。
- 完了したら記録します。 検証済みの決定を実際のコードに反映してから、プロトタイプ自体を一次資料として記録します。使い捨てのブランチにコミットしてメインブランチから切り離し、実装の課題にそのブランチへの参照を残します。結論と、それによって解決した疑問も、課題またはコミットに記録します。メインブランチには検証済みの決定だけを残します。
コメント
Markdown 対応