本文へ移動
cccskills
無料GitHub で公開日本語紹介

prototype

処理の流れや状態変化を試すHTML、または複数の画面案を切り替える試作品を作り、操作しながら設計上の疑問を確かめ、判断を記録するスキル。

原文原文の説明を見る

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

インストール方法を見る

こんなときに便利

  • 複雑な状態変化を操作して確かめたいとき
  • 異なる画面デザインを比較したいとき
  • 非エンジニアに処理の試作品を共有したいとき
  • 実装前の設計判断を記録したいとき

日本語での紹介

できること

設計上の疑問を確かめるための、使い捨ての試作品を作ります。処理や状態の持ち方を検証する場合は、自由に操作するボタンと手順付きの説明を備えた、共有可能な単一のHTMLファイルを作ります。見た目を探る場合は、一つの画面で大きく異なる複数のUI案を切り替えられるようにします。

こんなときに便利

紙の上では判断しにくい状態変化を試したいときや、画面の方向性を比較したいときに向いています。操作後の状態を表示するため、エンジニア以外も変化を確認できます。検証できた判断は実際のコードに反映し、試作品と結論を後から参照できる形で残します。

使い方の例

  • 「この状態変化が自然か、操作できるHTMLで試したい」
  • 「この画面の見た目を、方向性の異なる複数案で比較したい」

試作品は対象の処理や画面の近くに置き、試作用だと分かる名前を付けます。

注意点

本番用の品質を整える目的ではなく、テストや仕上げは省きます。状態は原則としてメモリ内に保持します。UI版の起動方法は既存プロジェクトに合わせます。試作品はメインブランチ外の試作用ブランチに保存し、実装課題に参照先と結論を記録する方針です。

この紹介文は、公開されている SKILL.md をもとに AI(Claude Haiku)が作成しました。正確な仕様は下の原文を確認してください。

含まれるファイル(4)

  • SKILL.md2.9 KB
  • agents/openai.yaml100 B
  • LOGIC.md5.9 KB
  • UI.md6.8 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Prototype

A prototype is throwaway code that answers a question. The question decides the shape.

Pick a branch

Identify which question is being answered, using the user's prompt, the surrounding code, or by asking if the user is around:

  • "Does this logic / state model feel right?" → LOGIC.md. Build a single shareable HTML file (free-play buttons plus tabbed guided walkthroughs) that pushes the state machine through cases that are hard to reason about on paper, and that a non-developer can drive.
  • "What should this look like?" → UI.md. Generate several radically different UI variations on a single route, switchable via a URL search param and a floating bottom bar.

The two branches produce very different artifacts, so getting this wrong wastes the whole prototype. If the question is genuinely ambiguous and the user isn't reachable, default to whichever branch better matches the surrounding code (a backend module → logic; a page or component → UI) and state the assumption at the top of the prototype.

Rules that apply to both

  1. Throwaway from day one, and clearly marked as such. Locate the prototype code close to where it will actually be used (next to the module or page it's prototyping for) so context is obvious, but name it so a casual reader can see it's a prototype, not production. For throwaway UI routes, obey whatever routing convention the project already uses; don't invent a new top-level structure.
  2. Trivial to run. A UI prototype starts from one command in the project's task runner: pnpm <name>, python <path>, bun <path>, etc. A logic demo is a single HTML file the user double-clicks. Either way, no thinking required to start it.
  3. No persistence by default. State lives in memory. Persistence is the thing the prototype is checking, not something it should depend on. If the question explicitly involves a database, hit a scratch DB or a local file with a clear "PROTOTYPE, wipe me" name.
  4. Skip the polish. No tests, no error handling beyond what makes the prototype runnable, no abstractions. The point is to learn something fast.
  5. Surface the state. After every action (logic) or on every variant switch (UI), print or render the full relevant state so the user can see what changed.
  6. Capture it when done. Fold any validated decision into the real code, then capture the prototype itself as a primary source: commit it to a throwaway branch, out of main, and leave a context pointer to that branch on the implementation issue. Capture the answer too (the verdict and the question it settled) in the issue or a commit. The main branch keeps only the validated decision.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

ask-matt

無料日本語概要

アイデアの整理、実装、不具合調査など、状況に合う関連スキルと使う順序を案内します。作業の規模や段階に応じて、次に進む手順を選ぶための相談役です。

  • アイデアから実装までの手順選び
  • 不具合調査の始め方を知りたいとき
  • 複数回に分ける開発の進め方を相談
mattpocock/skills28.8万2026年10月12日 更新

chief-of-staff

無料日本語概要

長期的な目標に向けて複数のサブエージェントの作業を調整し、利用者との対話を続けながら、次の仕事にも役立つ作業環境や規約の改善を進めるスキル。

  • 長期目標に向けて担当を調整したいとき
  • 裏で作業を進めながら対話を続けたいとき
  • 共通の規約や作業環境を改善したいとき
mattpocock/skills28.8万2026年10月12日 更新

claude-handoff

無料日本語概要

進行中の会話を引き継ぎ用に要約し、新しいバックグラウンドエージェントへ渡します。次の作業方針や参照資料を整理して、現在の作業場所で続きを始めます。

  • 新しいエージェントに続きを任せたいとき
  • 次の作業範囲を絞って引き継ぎたいとき
  • 次のセッション用に参照資料を整理
mattpocock/skills28.8万2026年10月12日 更新

code-review

無料日本語概要

指定したコミットやブランチなどを基準にコードの変更を確認し、開発規約への適合と仕様の実現を別々にレビューします。二つの観点の指摘を分けて報告するスキルです。

  • ブランチやPRの変更レビュー
  • 指定コミットやタグ以降の確認
  • 文書化された開発規約との照合
mattpocock/skills28.8万2026年10月12日 更新

codebase-design

無料日本語概要

呼び出し側が覚える使い方を小さく保ち、複雑な処理を内部にまとめる設計を支援します。共通の用語と判断基準で、モジュールの使いやすさやテストのしやすさを検討するスキルです。

  • モジュールの使い方を簡単にしたいとき
  • 散らばった複雑な処理をまとめたいとき
  • 実装を差し替える場所の検討
mattpocock/skills28.8万2026年10月12日 更新

diagnosing-bugs

無料日本語概要

再現しにくい不具合や処理速度の悪化を、症状を判定するテストやスクリプトで調べます。原因候補の検証から修正、再発防止の確認まで進めるスキル。

  • 再現しにくいエラーを調べたいとき
  • 処理が遅くなった原因の調査
  • 断続的な不具合を繰り返し検証
mattpocock/skills28.8万2026年10月12日 更新

mattpocock のスキルをすべて見る

このスキルの問題を報告する