Prototype a Design Question

What it does

The skill selects between two different artifacts. Logic exploration produces a self-contained HTML demo with readable state, free-play actions and guided scenarios. UI exploration produces structurally different variants on one route, using a URL parameter and a development-only switcher. It favors placing variants inside an existing application context so real data density and navigation inform the decision. Once the question is settled, the validated decision moves into real code while prototype evidence is retained outside main.

When to use it

• A refund state machine may allow an invalid action after cancellation.
• A dashboard needs three genuinely different information hierarchies.
• A product owner wants to explore an awkward edge case without a backend deployment.

Step-by-step workflow

1. State the single design question and choose the logic or UI branch.
2. Build the smallest runnable artifact near its relevant module or page, clearly marked as a prototype.
3. Expose meaningful state transitions or structurally distinct variants without production persistence.
4. Let the stakeholder drive realistic scenarios and record the decision with its reasoning.
5. Promote only the validated behavior or winning design, preserving the prototype on a separate throwaway branch.

Example request

Use prototype to test whether our booking state model handles cancellation after a refund begins. Build one self-contained HTML file with synthetic state, clearly marked as throwaway. Show the current booking and payment state after each action. Include happy-path, repeated cancellation and refund-in-progress walkthroughs with reset controls. Keep the logic independent of the DOM. Do not call a real payment service or database; record the question and the verdict.

Worked example

A booking demo can let a stakeholder press Reserve, Pay, Cancel and Start refund in unexpected orders. The state panel should explain whether the booking is cancelled and whether funds are still being returned. That may reveal that one status cannot represent both facts. A pure transition module can later inform production code, but the demo shell should not be shipped. For a visual question, three differently colored copies of the same layout would fail the skill’s structural-variation goal.

What you get

A runnable decision experiment, an explicit verdict and a reference to the prototype evidence once retained.

How to evaluate the result

• Confirm the artifact answers the stated question and exposes the awkward case.
• Check that variants differ in structure when exploring UI.
• Ensure demo persistence, losing variants and development switchers do not reach production.

What you need

One clear question, representative synthetic scenarios and an available stakeholder. UI variants need the project’s existing route, styling and development build conventions.

Setup and activation

The publisher documents plugin setup for Claude Code, Codex and Copilot, and manual Agent Skills setup for Gemini CLI and other clients. Choose one distribution method per client to avoid duplicate skills. The engineering collection expects project-specific tracker, triage-label and document-location settings from setup-matt-pocock-skills. Keep referenced companion skills and files available. This catalogue review does not install or run them; scan the exact source before any later installation. Client tools, permissions and subagent support still need separate validation.

Limits and considerations

The source intentionally omits production hardening and prototype tests to accelerate learning. That ceiling applies only to the disposable experiment, not the eventual feature. Never infer production accessibility, reliability or security from a convincing demo. Real credentials and live payment actions are unnecessary for a state-model experiment.

Related workflows

• Use grill-with-docs to clarify the decision the experiment must answer.
• Use to-spec to preserve the validated decision before implementing the real feature.

License and reuse

MIT at repository level (Copyright 2026 Matt Pocock). Preserve the copyright and permission notice when redistributing substantial source material; inspect any separately licensed dependencies or assets.

Further reading

• Publisher README: client setup and companion skills
• Reviewed SKILL.md (immutable commit)
• Reviewed MIT license