prototype

Build throwaway HTML demos or UI variants to answer design questions.

Updated Sep 11, 2026
One-click install
npx skills add https://github.com/CYRUS-pinto/pi-bot --skill prototype-cyrus-pinto
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: prototype
Source: https://github.com/CYRUS-pinto/pi-bot/tree/main/.agents/skills/prototype
Command: npx skills add https://github.com/CYRUS-pinto/pi-bot --skill prototype-cyrus-pinto

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Design questions about state models, business logic, or UI layouts are hard to settle on paper. This Skill produces throwaway prototypes that let you press buttons, flip between variants, and feel whether a design actually works before committing to real code. ## Core Features & Use Cases - Logic Prototypes: Generate a single self-contained HTML file with free-play action buttons and tabbed guided walkthroughs that drive a state machine or reducer through edge cases, shareable with non-developers by double-click. - UI Prototypes: Generate 3-5 radically different UI variants on an existing route, switchable via a ?variant= URL param and a floating bottom bar with arrow-key navigation. - Capture Workflow: Fold validated decisions into real code while preserving the prototype on a throwaway branch as a primary source. - Use Case: A PM is unsure whether an order state machine handles cancellation-after-shipping. Use this Skill to build a clickable HTML demo with scenarios for the happy path, the edge case, and an illegal transition, then hand it to the team for feedback. ## Quick Start Ask the AI to build a prototype that tests whether your state model handles a specific edge case, or to generate three UI variants of an existing page.

Frequently Asked Questions about prototype

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I prototype a state machine without writing production code?

Build a single self-contained HTML file with a pure reducer or state machine module, free-play action buttons, and guided scenario walkthroughs. The file opens by double-click with no framework, bundler, or server required.

How to show multiple UI design options on one page?

Render several structurally different variant components on the same route, gated by a ?variant= URL search param. Add a floating bottom bar with arrow buttons and keyboard navigation so reviewers can cycle through variants and share specific ones by URL.

Should a prototype use the real database or API?

No, prototypes should keep state in memory by default. Persistence is usually the thing being checked, not a dependency. Only hit a scratch database or clearly marked throwaway file if the question explicitly involves persistence.

When should I not build a throwaway prototype?

Skip prototyping when the question is already answered or when the code would go straight to production. Prototypes have no tests, minimal error handling, and no abstractions, so they must be rewritten properly when folded into real code.

What happens to prototype code after the question is answered?

The validated decision gets folded into the real codebase on the main branch. The prototype itself is committed to a separate throwaway branch as a primary source, with a pointer left on the implementation issue.