prototype · Skill Details

Mechanism

When It Triggers · How It Works · What It Produces

Breaks down how the skill works and what it produces, so you can quickly judge whether it fits your scenario and value.

Trigger: Invoked when a design question is better answered by trying it in code than discussing on paper. In /ask-matt's main flow, when a question during grilling needs a "runnable answer," a /handoff branches into a prototype session.
Mechanism: First identifies the question type — logic/state model branch (interactive terminal app pushing state machines through edge cases) or UI branch (multiple UI variations switchable via route param). Six universal rules: throwaway from day one, one command to run, no persistence, no tests/error handling/abstractions, show full state after each action, capture both the verdict and prototype as primary sources.
Output: A runnable design validation medium + validated design conclusions. Confirmed decisions flow into the real codebase; the prototype is committed to a throwaway branch linked from the implementation issue. Main branch keeps only the final validated decision.

Use Cases

Two Typical Use Cases

Scenario 01

Validating a complex state machine design

A developer designing an order state machine is unsure about state transition logic. Invoking `/prototype`, the skill classifies it as a "logic/state model" question and creates a minimal interactive terminal app locally that lets the user step through "order → pay → ship → complete" with real-time state printing. Edge cases (e.g., "cancel after shipped") are discovered through trial and error, and validated decisions are folded into the real code.

Scenario 02

Exploring UI design alternatives

A designer unsure which checkout page layout works best invokes `/prototype`. The skill classifies it as a UI question and generates several radically different UI variations (single-column, two-column, step wizard) under one route with URL-search-param and floating-bar switching. The designer compares variants directly in the browser, picks a direction, and the validated decision flows into real code while the prototype is committed to a throwaway branch.

Skill Relationships

Which Skills I Use · Which Skills Use Me

Dependency relationships read as "the upper tier points to the lower tier." The current Skill sits in the middle tier — above are Skills that depend on it, below are Skills it depends on.

Tier 1 · These Skills Use Me

ask-mattWorkflow

Tier 2 · Current Skill

prototypeWorkflow

Tier 3 · I Use These Skills

No explicit dependency on other Skills

Full Relationship Graph

Browse this skill's relationships within its skillset. Click a node to switch the side panel; use the search box to jump to any skill.

Skill File

SKILL.md

Open in GitHub ↗

SKILL.mdLoading from GitHub…

Skill Composition

Open in GitHub ↗

SKILL.md25.0%
other75.0%

▸skills/prototype/
▸prototype
- ·LOGIC.md
- ·SKILL.md
- ·UI.md
- ▸agents
  - ·openai.yaml

Per the Agent Skills spec, SKILL.md is the only required file. The colored bars classify the rest into the three spec-aligned optional directories (scripts / references / assets) and an 'other' bucket. The full directory tree is below.

Related in Skillset

You May Also Need These Skills

ask-matt

A router skill for the entire skillset: when the user can't remember which skill to use or which flow fits their situation, they invoke this to get a recommendation. It describes the main "idea → ship" flow (grill-with-docs → to-spec/to-tickets → implement), plus on-ramps (triage, diagnosing-bugs, wayfinder), codebase health (improve-codebase-architecture), vocabulary layers (domain-modeling, codebase-design), and standalone skills (grill-me, prototype, research, teach). Following its map leads users to the correct workflow entry point.

Workflow

code-review

A two-axis code review skill: reviews a diff (from a fixed point to HEAD) along both Standards (coding standards + Fowler smell baseline) and Spec (faithful implementation of the originating issue/PRD). Both axes run as parallel sub-agents to avoid context pollution. The report aggregates findings without merging conclusions, ensuring "passes standards but implements the wrong thing" and "implements the right thing but breaks conventions" are both surfaced independently.

Workflow

codebase-design

A shared vocabulary skill for deep module design: provides a precise set of design terms (Module, Interface, Depth, Seam, Adapter, Leverage, Locality) guiding agents and developers to design "deep modules" — a lot of behaviour behind a small interface. Includes design principles (the deletion test, the interface is the test surface) and testability guidelines. A reference skill consumed by other skills (e.g., improve-codebase-architecture, tdd) and invoked directly by engineers.

Style Guide

diagnosing-bugs

A disciplined diagnosis loop for hard bugs and performance regressions. The core idea is to first build a tight feedback loop — no hypothesis phase without one. Six phases: build feedback loop → reproduce + minimise → generate 3-5 falsifiable hypotheses → instrument by prediction → fix + regression test → cleanup + post-mortem. If the codebase architecture can't lock down the bug, it recommends handing off to the improve-codebase-architecture skill.

Workflow