Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
aiskillstore avatar

Ux Prototyping

aiskillstore/marketplace

  • 1 installs
  • 404 repo stars
  • Updated August 5, 2026
  • aiskillstore/marketplace

ux-prototyping is a skill that generates a single-file interactive HTML prototype from a UX specification to validate user flows and interaction patterns.

About

ux-prototyping builds a single-file HTML prototype from a UX specification to validate user flows, interaction patterns, and information architecture. A developer uses it after writing specs/architecture/ux.md when they want a clickable mockup before committing to real UI code. It focuses on flow fidelity, screen states, and navigation rather than pixel-perfect styling.

  • Turns a UX spec into a single-file interactive HTML prototype
  • Implements empty, loading, error and success states for each screen
  • Prioritizes flow validation over visual polish

Ux Prototyping by the numbers

  • 1 all-time installs (skills.sh)
  • Ranked #1,609 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
  • Data as of Aug 5, 2026 (Skillselion catalog sync)
At a glance

ux-prototyping capabilities & compatibility

Capabilities
ui design · web design · frontend
Use cases
ui design · web design · frontend
From the docs

What ux-prototyping says it does

Create interactive single-file HTML prototypes for UX validation.
SKILL.md
Prioritize UX fidelity over visual polish.
SKILL.md
Implement screens as `<section>` elements with `data-screen` attributes:
SKILL.md
npx skills add https://github.com/aiskillstore/marketplace --skill ux-prototyping

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs1
repo stars★ 404
Last updatedAugust 5, 2026
Repositoryaiskillstore/marketplace ↗

What it does

Build an interactive single-file HTML prototype from a UX spec to validate user flows before implementation.

Who is it for?

Validating user journeys and screen states from a UX spec before writing production UI

Skip if: Producing pixel-perfect, brand-styled production UI

When should I use this skill?

You have a UX spec and want a clickable prototype to test flows

What you get

A single HTML file with all screens, states, and navigation ready to click through

  • Single-file HTML prototype with all screens and interactions

By the numbers

  • 6-item validation checklist before delivery
  • 5 screen states covered: empty, loading, error, success, partial

Files

SKILL.mdMarkdownGitHub ↗

UX Prototyping Skill

Create single-file HTML prototypes focused on validating user flows, interaction patterns, and information architecture. Prioritize UX fidelity over visual polish.

Workflow

1. Read the UX spec at specs/architecture/ux.md (or user-specified path) 2. Identify core flows - Extract user journeys, screens, states, and interactions 3. Build prototype - Create single HTML file with all screens and interactions 4. Output - Save to /mnt/user-data/outputs/prototype.html

Prototype Structure

Generate a single HTML file containing:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>[App Name] - UX Prototype</title>
  <style>/* All CSS inline */</style>
</head>
<body>
  <!-- All screens as sections -->
  <!-- Navigation/state management -->
  <script>/* All JS inline */</script>
</body>
</html>

Core Principles

UX First, UI Second

  • Do: Implement all user flows, states, transitions, error states, empty states
  • Do: Make interactions feel responsive and logical
  • Do: Show realistic data and content hierarchy
  • Defer: Pixel-perfect styling, animations, brand colors (use clean defaults)

Screen Management Pattern

Implement screens as <section> elements with data-screen attributes:

function showScreen(screenId) {
  document.querySelectorAll('[data-screen]').forEach(s => s.hidden = true);
  document.querySelector(`[data-screen="${screenId}"]`).hidden = false;
}

State Management Pattern

Use a simple state object:

const state = { currentScreen: 'home', user: null, data: [] };
function setState(updates) { Object.assign(state, updates); render(); }

Essential UX Elements

1. User Flows

  • Primary task completion paths
  • Alternative/secondary flows
  • Error recovery flows

2. Screen States

  • Empty - First-time user, no data
  • Loading - Skeleton or spinner
  • Error - Network/validation errors
  • Success - Confirmations
  • Partial - Some data loaded

3. Interactions

  • Form inputs with validation
  • Button states (hover/active/disabled)
  • Screen navigation
  • Modal/overlay behaviors

Base Styles

* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #f8fafc; --surface: #fff; --text: #1e293b;
  --text-muted: #64748b; --primary: #3b82f6; --border: #e2e8f0;
  --success: #22c55e; --error: #ef4444; --radius: 8px;
}
body { font-family: system-ui, sans-serif; background: var(--bg); color: var(--text); }
[data-screen] { display: none; }
[data-screen].active { display: block; }
.card { background: var(--surface); border-radius: var(--radius); padding: 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.btn { padding: 0.625rem 1.25rem; border-radius: var(--radius); font-weight: 500; cursor: pointer; border: none; }
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: #2563eb; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.input { width: 100%; padding: 0.625rem; border: 1px solid var(--border); border-radius: var(--radius); }
.input:focus { outline: none; border-color: var(--primary); }
.container { max-width: 480px; margin: 0 auto; padding: 1rem; }
.stack > * + * { margin-top: 1rem; }
.empty-state { text-align: center; padding: 3rem; color: var(--text-muted); }
.error-msg { color: var(--error); font-size: 0.875rem; }

Validation Checklist

Before delivering, verify:

  • [ ] All screens from spec implemented
  • [ ] Primary flow completable end-to-end
  • [ ] Empty/error/loading states shown
  • [ ] Navigation works correctly
  • [ ] Interactive elements have feedback
  • [ ] Responsive on mobile viewport

Output

Save to /mnt/user-data/outputs/prototype.html (or descriptive name like prototype-onboarding.html).

Related skills

anthropicsFrontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.716k165kvercel-labsWeb Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.498k29.6klarksuiteLark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst389k16ksleekdotdesignSleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k476leonxlnxDesign Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.301k69.4knextlevelbuilderUi Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.290k112k

FAQ

What does ux-prototyping output?

A single-file HTML prototype containing all screens, states, and inline CSS/JS saved to prototype.html.

Does it produce production-ready UI?

No, it prioritizes UX fidelity over visual polish and defers pixel-perfect styling, animations, and brand colors.

Design & UI/UXuxui
Browse by category
AI & AgentsFrontend & DesignBackend & DataDev ToolsAutomationTesting & ReviewSecurityMonitoring & CloudDocs & Planning
Design & frontend
Design systemsAnimation & motionAccessibility (a11y)CSS & TailwindUI designUXDesign to codeshadcn/uiLanding pagesBest design skills
Most searched skills
find-skillscavemanfrontend-designbrainstormingsystematic-debuggingstop-slopemil-design-engui-ux-pro-maxkarpathy-guidelinesweb-design-guidelinesreact-best-practicesgrill-meimprovemicrosoft-foundryagent-browser
Browse all listings
All agent skillsAll MCP serversAll marketplacesAll plugins

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.