ux-prototypinglisted
Install: claude install-skill aiskillstore/marketplace
# 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:
```html
<!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:
```javascript
function showScreen(screenId) {
document.querySelectorAll('[data-screen]').forEach(s => s.hidden = true);