prototype

Build throwaway HTML or UI prototypes to answer design questions about logic or layout.

Updated Jan 19, 2023
One-click install
npx skills add https://github.com/inkfin/dotfiles --skill prototype-inkfin
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: prototype
Source: https://github.com/inkfin/dotfiles/tree/main/dot_agents/skills/exact_prototype
Command: npx skills add https://github.com/inkfin/dotfiles --skill prototype-inkfin

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Design questions about state models, business logic, or UI layout are hard to settle on paper. This Skill produces a throwaway prototype that lets you press buttons, flip between variants, and feel whether the idea 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 pure reducer, state machine, or function set through edge cases, shareable with non-developers by double-click. - UI Prototypes: Generate 3-5 radically different UI variants on one route, switchable via a ?variant= URL param and a floating bottom bar with arrow-key cycling, mounted inside an existing page when possible. - Capture Workflow: Fold validated decisions into real code and preserve the prototype on a throwaway branch as a primary source, keeping main clean. - Use Case: A product manager is unsure whether an order state machine handles cancellation-after-payment. The Skill builds a one-file HTML demo with scenario walkthroughs so the PM can click through the edge case and confirm the model. ## Quick Start Ask the AI to build a throwaway prototype that answers whether your state model or page layout feels right, and specify whether the question is about logic or UI.

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 before writing real code?

Build a single self-contained HTML file with a pure reducer or state machine module, free-play action buttons, and guided scenario walkthroughs. Anyone can open it by double-clicking and push the model through edge cases without installing anything.

How to compare multiple UI design variants in one app?

Render 3-5 structurally different variants on the same route, gated by a ?variant= URL search param, with a floating bottom bar to cycle between them. Keep existing data fetching intact so variants are judged against real content.

When should I use a logic prototype versus a UI prototype?

Use a logic prototype when the question is whether a state model or data shape behaves correctly under edge cases. Use a UI prototype when the question is what a page or component should look like. The two produce very different artifacts.

Should prototype code have tests or error handling?

No. A prototype is throwaway code that answers one question fast, so tests, abstractions, and polish are explicitly skipped. Once the question is answered, rewrite the validated decision properly in the real codebase.

What happens to prototype code after the design decision is made?

Fold the validated decision into the real code on main, then commit the full prototype to a throwaway branch as a primary source with a pointer on the implementation issue. Prototype code left in main rots and confuses later readers.