prototype について
開発者やエージェント向けのプロトタイピングスキルです。検証したい問いに応じて、ロジックのデモか UI のバリエーションを作ります。使い捨てで実行しやすく、判断の検証に役立つプロトタイプの作り方を定めています。
主な機能
- 01ロジックか UI の経路を選択
- 02単一 HTML ファイルのロジックデモ
- 03一つのルートで複数の UI 案を表示
- 04状態はデフォルトでメモリ内に保持
- 05操作や切り替え後に状態を表示
- 06プロトタイプと判断内容を記録
活用シーン
- 01ガイド付きデモで状態モデルを検討
- 02複数のページデザインを比較
- 03実装前に設計判断を検証
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ utarn/ engineer-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 対応