Skip to content
cccskills
FreePublished on GitHubEnglish overview

prototype

Build a disposable prototype to answer a design question. Explore logic and changing states through a shareable HTML demo, or compare distinct interface variations, then record the findings and carry validated decisions into real code.

OriginalShow the original description

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.

mattpocock/skills
AI rating100/ 100See how to install

Good for

  • Trying complex state changes through an interactive demo
  • Comparing different interface designs
  • Sharing a logic demo with non-developers
  • Recording design decisions before implementation

Overview

What it does

Create a disposable prototype to answer a design question. To explore logic or state handling, it builds a single shareable HTML file with buttons for free exploration and guided explanations. To explore appearance, it creates several substantially different interface options that can be switched within one screen.

When it helps

Use it to try state changes that are difficult to judge on paper, or compare directions for a screen design. The prototype displays the state after interactions so people who are not engineers can see what changed. Validated decisions are incorporated into the real code, while the prototype and conclusions remain available for later reference.

Example requests

  • “Let me try these state changes in an interactive HTML prototype to see whether they feel natural.”
  • “Show several different visual directions for this screen so I can compare them.”

Prototype files are placed near the relevant logic or screen and named to make their purpose clear.

Notes

Tests and finishing work are skipped because the goal is exploration rather than production quality. State is generally kept in memory. UI startup follows the existing project. The prototype is saved on a separate experimental branch outside the main branch, with its reference and conclusions recorded in the implementation issue.

This overview was written by AI (OpenAI Codex) from the public SKILL.md. Check the original below for the exact behavior.

Objective evaluation

AI rated this skill on four points using only the contents of its SKILL.md. Stars and popularity are not taken into account.

Clear instructionsIs it clear when to use it and what it does?
AGoodIt distinguishes logic and state exploration from visual comparison and specifies the artifact for each.
Concrete stepsAre steps, inputs, outputs, and examples spelled out?
AGoodIt specifies HTML and UI branches, startup methods, state display, and locations for saving the prototype and conclusions.
SafetyAre sending data, deleting files, and running commands disclosed?
AGoodState defaults to memory; database work uses scratch storage, and prototypes are saved outside the main branch.
Easy setupDoes it need few tools or API keys, and are they documented?
AGoodIt explains that logic demos open as HTML files and UI prototypes use the project's existing runner.

The total counts each point as A = 25, B = 15, C = 5. Rated by AI (OpenAI Codex) as of Oct 19, 2026. Treat it as a guide and read the original before installing.

Disagree? Request a re-evaluation

Tell us which point is wrong and why. No login needed. We will check it against the SKILL.md, redo the evaluation, and show the result here.

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

Files included (4)

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

SKILL.md (original)

Review the instructions the agent will receive before you install.

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.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

ask-matt

FreeSummaryAI rating 90

Choose which related skill to use and in what order for planning, building, debugging, or maintaining software. It explains routes through the available workflows and helps select the next step based on your situation and project size.

  • Choosing a workflow from idea to implementation
  • Finding the right starting point for bug investigation
  • Planning a build that spans multiple sessions
mattpocock/skills296.5KUpdated Oct 13, 2026

chief-of-staff

FreeSummaryAI rating 60

Coordinate subagents, separate agents assigned tasks, to pursue a long-running goal in one session. Maintain dialogue with the user while improving working conditions, shared rules, and access to information needed for future tasks.

  • Coordinating agents around a long-term goal
  • Continuing user dialogue during background work
  • Improving shared rules and working conditions
mattpocock/skills296.5KUpdated Oct 13, 2026

claude-handoff

FreeSummaryAI rating 90

Summarize an ongoing conversation and launch a fresh background agent to continue the work. The handoff includes the next focus, references to existing documents, and suggested skills, with sensitive information removed.

  • Continue ongoing work with a fresh agent
  • Hand off work with a specific next focus
  • Organize document references for the next session
mattpocock/skills296.5KUpdated Oct 13, 2026

code-review

FreeSummaryAI rating 90

Review code changes from a chosen Git reference against two separate criteria: documented coding standards and the original requirements. Independent reviewers check each criterion, then present findings separately so convention problems and requirement gaps remain visible.

  • Reviewing changes on a branch or pull request
  • Checking changes since a chosen commit or tag
  • Checking compliance with documented coding standards
mattpocock/skills296.5KUpdated Oct 13, 2026

codebase-design

FreeSummaryAI rating 90

Design modules that offer substantial behavior through a small interface, the rules callers must understand. Use shared design terms to simplify usage, contain complexity, choose where implementations can vary, and make behavior easier to test.

  • Simplifying a module's interface
  • Bringing scattered complexity into one module
  • Choosing where implementations can be swapped
mattpocock/skills296.5KUpdated Oct 13, 2026

diagnosing-bugs

FreeSummaryAI rating 80

Investigate difficult bugs and performance slowdowns by building a repeatable test or script that detects the exact symptom. Reduce the failing case, compare possible causes, and verify the fix with checks that catch the bug if it returns.

  • Investigating an error that is hard to reproduce
  • Finding the cause of a performance slowdown
  • Testing an intermittent failure repeatedly
mattpocock/skills296.5KUpdated Oct 13, 2026

See all skills by mattpocock

Report a problem with this skill