skills.rest
dineshrevunuru
dineshrevunuruCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

build-coded-prototypes

Builds working coded prototypes at the fidelity each design question requires.

1|Updated Jul 13, 2026
Search Tags:#html#prototyping#state machine#fidelity#design engineering#wizard-of-oz#voice ux
One-click install
npx skills add https://github.com/dineshrevunuru/SuperSkills --skill build-coded-prototypes-dineshrevunuru
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: build-coded-prototypes
Source: https://github.com/dineshrevunuru/SuperSkills/tree/main/build-coded-prototypes
Command: npx skills add https://github.com/dineshrevunuru/SuperSkills --skill build-coded-prototypes-dineshrevunuru

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Teams waste time over-polishing prototypes or shipping demos that claim to be more real than they are. This Skill builds the cheapest working artifact that truthfully answers the current design question, from a single zero-dependency HTML file to a live-model-wired voice demo. ## Core Features & Use Cases - Per-dimension fidelity planning: Sets visual, content, interaction, data, and intelligence fidelity independently based on the question being answered, following NN/g's Goldilocks principle. - Degradation ladders and Wizard-of-Oz: Wires live model APIs behind zero-dependency Node proxies with deterministic fallbacks, and fakes AI/voice sources behind single swap points while keeping behavior code real. - Logic prototype mode: Drives reducers and state machines in a terminal TUI to answer state-transition questions before any pixels exist. - Use Case: Prototype a voice shopping assistant for elderly first-time users — fork an existing voice engine, wire a live model that returns product IDs only, render prices server-side, and label the demo honestly. ## Quick Start Ask the agent to prototype your concept by stating the one question the prototype must answer, then let it produce a fidelity plan and vehicle choice before writing code.

Frequently Asked Questions about build-coded-prototypes

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

FAQPage Schema
How do I decide the right fidelity for a prototype?▼

Set fidelity per dimension — visual, content, interaction, data, intelligence — rather than as one dial. Raise a dimension only when the question being answered requires it; for example, voice concepts need high interaction fidelity first while visuals can stay low.

How do I prototype an AI or voice feature before the model exists?▼

Use the Wizard-of-Oz method: fake the source, never the behavior. Build scripted or browser-based stand-ins behind the exact interface the real layer will use, so upgrading means replacing one function, while state machines and interrupt logic run as real code.

Should I use a framework or a single HTML file for a prototype?▼

Use one self-contained HTML file with inline CSS and JS when the question is answerable in one screen or flow. Add a zero-dependency Node server only when API keys are needed, and reach for a framework only when the prototype is the seed of the actual product.

Can a prototype safely call live LLM APIs with real data?▼

Yes, if keys stay server-side behind a proxy and the model returns IDs only while the server renders all displayed values from a verified store. Every dependency needs a deterministic fallback tier so the demo works without keys or network.

When should I build a terminal logic prototype instead of a UI?▼

Use a terminal-driven logic prototype when the question concerns state transitions, reducers, or data shape rather than appearance. Keep the logic as a pure module behind a thin TUI shell so the validated module can lift directly into production code.

What should happen to prototype code after the question is answered?▼

Fold the validated decision into production code properly, write a one-line verdict recording the question and answer, and commit the throwaway artifact to a discard branch. Prototype code lacks tests and error handling, so it should not linger in main.

Related Skills

Explore More Design & Creative Skills→
Lia-CreativeLia-Creative
1

design-exploration

Generate distinct design directions from jobs and stories, then record the chosen direction with rationale.

Official
Intermediate
EmeaAppGbbEmeaAppGbb

frontend-design

Create production-grade frontend interfaces with design tokens and reusable components.

Official
Basic
RefoundAIRefoundAI
1.2k

running-design-reviews

Structure design critiques with hierarchy-based feedback and sponsor roles.

Official
Intermediate
human-avatarhuman-avatar
212

systems-emergence-detection

Identify system-level properties arising from component interactions rather than individual components.

Official
Intermediate