skills.rest
stacksjs
stacksjsOFFICIAL
Explore all skills by this author →
Website𝕏@stacksjsGitHub

stacks-prototype

Builds throwaway HTML demos or stx view variants to answer design questions.

625|19|Updated Apr 26, 2022
Search Tags:#prototype#design validation#UI variants#Stacks#html demo#State Machine#stx views
One-click install
npx skills add https://github.com/stacksjs/stacks --skill stacks-prototype
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: stacks-prototype
Source: https://github.com/stacksjs/stacks/tree/main/storage/framework/defaults/ai/skills/stacks-prototype
Command: npx skills add https://github.com/stacksjs/stacks --skill stacks-prototype

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design questions about state models, logic flows, or UI direction often stall in abstract debate. This Skill produces runnable, throwaway prototypes that answer one specific question, so decisions are based on working behavior rather than speculation.

Core Features & Use Cases

  • Logic Prototypes: Generates a single self-contained HTML file with a pure reducer, state machine, or function module, plus free-play buttons and guided walkthrough scenarios that non-developers can drive.
  • UI Prototypes: Creates 3-5 structurally different stx view variants rendered inside the real app layout with a floating switcher bar for comparison.
  • Capture Workflow: Folds validated decisions into production code and archives the prototype on a dedicated prototype/<name> branch.
  • Use Case: When unsure whether a multi-step checkout state machine handles edge cases, generate a clickable HTML demo with scenarios for the happy path, tricky edges, and illegal transitions, then hand it to a PM for feedback.

Quick Start

Ask the assistant to prototype whether your state model holds up or to generate several UI variants of a view using the stacks-prototype skill.

Frequently Asked Questions about stacks-prototype

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

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

Create a single self-contained HTML file with a pure reducer or state machine module, free-play action buttons, and guided walkthrough scenarios. Anyone can double-click the file to push the model through edge cases without installing anything.

How to generate multiple UI variants of one view in stx?▼

Draft 3 to 5 structurally different stx components under resources/components/prototype, wire them into the existing view or separate file-routed views, and add a floating switcher partial to flip between variants in the browser.

Should a prototype connect to the real database?▼

No, prototypes keep state in memory by default since persistence is what the prototype is checking, not a dependency. Only point at a testing SQLite file when the question genuinely involves the database.

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

Use a logic prototype when the question is whether a state model or business rule holds up, producing one shareable HTML file. Use a UI prototype when the question is what a page should look like, producing several stx view variants.

What happens to prototype code after the question is answered?▼

The validated decision is rewritten properly into production code, while the prototype itself is committed to a prototype/<name> branch as a primary source. The main branch keeps only the validated decision.

Related Skills

Explore More Software Engineering Skills→
input-output-hkinput-output-hk
1.2k

grill-with-docs

Stress-tests feature plans through structured questioning against codebase and domain documentation.

Official
Intermediate
malinskibeniaminmalinskibeniamin
3

prototype

Creates throwaway code prototypes to explore UI layouts and interaction flows without persistence.

Community
Basic
zakad00e2zakad00e2

design-taste-premium-bento

Generate premium modular UI/UX layouts with React or Next.js and Tailwind CSS.

Community
Advanced
parcadeiparcadei
3.9k

loogle-search

Search Mathlib for lemmas by type signature patterns.

Community
Intermediate