prototype

Solid

Move an idea up the fidelity ladder (content-first → wireframe → low-fi → high-fi → code) with a validation plan at each level, plus user-journey mapping and usability-testing scripts. Use when the user wants to prototype, wireframe, map a user flow, or plan/run usability testing.

Web & Frontend 731 stars 77 forks Updated today

Install

View on GitHub

Quality Score: 83/100

Stars 20%
95
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
65
Issue Health 10%
50
License 10%
0
Description 5%
100

Skill Content

# Skill: Prototype & Research Guide work through the right fidelity level with validation. ## Steps 1. Read `workflows/prototyping.md` (5-level fidelity ladder, journey mapping template, usability-testing script, sample data). 2. Identify the current need and pick the **lowest** fidelity that answers it — never skip levels: - Content-first (info needs) → Wireframe (layout/nav) → Low-fi (task completion) → High-fi (visual/a11y) → Code (feasibility/perf). 3. For flows: produce a user-journey map with decision points, error paths, and edge cases. 4. For validation: define the usability test (tasks, success criteria, 5-user rule) using the script. 5. High-fi/code steps pull tokens (`tokens/*`), components (`components/*`), taste (`taste/*`), and a11y (`accessibility/*`). ## Output The artifact at the chosen fidelity + an explicit "what we validate next" plan. ## Verification (before declaring done) - The fidelity matches the question being answered — no level skipped. - Flows include decision points, **error paths, and edge cases** (empty/loading/overflow), not just the happy path. - A concrete validation step is named (tasks + success criteria), not "test later". - High-fi/code artifacts pass the same token + a11y bar as `design-code` (no hardcoded values, contrast, states).

Details

Author
plugin87
Repository
plugin87/ux-ui-agent-skills
Created
5 months ago
Last Updated
today
Language
JavaScript
License
None

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Listed

prototype

Build production-feel HTML prototypes for sales demos and reviews. Runs a discovery Q&A, scaffolds a zero-dep static site (HTML + Tailwind CDN + theme/layout switchers + URL-state + feedback overlay + control bar) and runs a design-quality loop. Use when the user says "prototype", "mockup", "demo", "pitch page", "sales demo", "click-through", or describes a UI they want to show someone without building the real thing. Also handles /prototype variant "<vibe>" (fork a variant) and /prototype apply-feedback <file> (apply pinned feedback JSON).

5 Updated 3 weeks ago
kurenn
Web & Frontend Listed

prototype

Use when exploring how a feature or screen could work before committing to a direction — "prototype this", "let's prototype", "show me options", "what could this look like", "mock it up". Builds the brief from the conversation so far (or interviews the user when there isn't one), then generates several low-fidelity, interactive HTML wireframes in a throwaway folder, recommends one, and iterates on the user's pick. Fast, cheap, disposable — a thinking tool, not finished work.

0 Updated 3 weeks ago
madebydiego
Code & Development Listed

prototype

Build a throwaway prototype to flesh out a design before committing to it. Routes between two branches — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route. Use when the user wants to prototype, sanity-check a data model or state machine, mock up a UI, explore design options, or says "prototype this", "let me play with it", "try a few designs".

0 Updated 1 months ago
TecCat