# Prototypes Skill

> Prototypes Skill

- Skill: `jas0nnguyen/prototypes-skill` (Agent Skill, multi-file: 46 files)
- Install (CLI): `npx skillmds@latest add jas0nnguyen/prototypes-skill`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jas0nnguyen/prototypes-skill/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: jas0nnguyen (https://skillmd.com/u/jas0nnguyen)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/jas0nnguyen/prototypes-skill

---

# Prototypes Skill

## Overview
This skill enables Claude to create interactive HTML/CSS prototypes that match your platform's visual design. Prototypes are generated using reference screenshots of existing UI patterns.

## When to Use This Skill
Use this skill when:
- Creating UI prototypes for features defined in Product Briefs
- Visualizing user scenarios from briefs as clickable mockups
- Demonstrating proposed UX flows to stakeholders
- Iterating on design concepts before hi-fi design work
- Validating assumptions about feature placement and interaction patterns

## Prerequisites
Before creating a prototype:
1. **Approved Product Brief**: A brief must exist in the `briefs/` folder
2. **Reference Screenshots**: Screenshots organized by product area in `reference-screenshots/`
3. **User Scenarios**: Clear understanding of the user flows to prototype

## Reference Screenshots

Screenshots are organized by product area in `reference-screenshots/`:

```
reference-screenshots/
├── [Product Area 1]/           # e.g., Dashboard, Settings, etc.
│   ├── Landing Page.png
│   ├── Detail View.png
│   └── Edit Form.png
│
├── [Product Area 2]/           # Another product area
│   ├── List View.png
│   └── Create Form.png
│
└── [New Product Area]/         # Add new folders as needed
```

### Using Reference Screenshots

1. **Identify the product area** from the brief
2. **Load relevant screenshots** using the Read tool to analyze UI patterns
3. **Match patterns to components** - identify reusable patterns
4. **Note customizations** - colors, spacing, specific patterns

## Workflow

### Step 1: Gather Context
1. Read the linked Product Brief from `briefs/`
2. Identify the product area
3. Load reference screenshots from the matching folder
4. Identify which user scenarios to prototype
5. Ask clarifying questions about scope

### Step 2: Analyze Screenshots
1. Read screenshots from `reference-screenshots/[product-area]/`
2. Identify layout patterns (navigation, content areas, headers)
3. Note component patterns (buttons, forms, tables, cards)
4. Document color scheme and typography

### Step 3: Build Prototype
1. Create HTML structure matching the layout
2. Style with CSS matching the design patterns
3. Add interactivity as needed for the user flow
4. Ensure responsive behavior if required

### Step 4: Save and Present
1. Save prototype to `prototypes/[brief-name]/`
2. Provide instructions for viewing
3. Gather feedback and iterate

## Output Structure

Prototypes are saved in `prototypes/` organized by brief name:

```
prototypes/
└── [brief-name]/
    ├── index.html          # Main prototype file
    ├── styles.css          # Styling
    ├── script.js           # Interactivity (if needed)
    └── README.md           # What's covered, how to view
```

### Viewing Prototypes
Prototypes are self-contained HTML files that can be opened directly in a browser:
```bash
open prototypes/[brief-name]/index.html
```

## Prototype Standards

### Structure
- Self-contained HTML with embedded or linked CSS
- No external dependencies (CDN links, frameworks)
- Works when opened directly in browser

### Styling
- Match colors and typography from reference screenshots
- Consistent spacing and layout patterns
- Responsive if the product requires it

### Interactivity
- Basic click handlers for navigation flows
- Form field interactions
- State changes (hover, focus, active)

## Clarifying Questions Pattern

Before creating a prototype, ask:
1. "Which user scenarios from the brief should this prototype cover?"
2. "I see reference screenshots for [Product Area] - should I match that style?"
3. "What's the entry point for the user - where do they start?"
4. "Should this be a single page or a multi-page flow?"
5. "Are there any new UI patterns not shown in the reference screenshots?"

## Example Interaction

### Good: Using Reference Screenshots
**User**: "Create a prototype for the new settings configuration feature"

**Claude**: "I'll create a prototype for the settings configuration feature. Let me gather context first.

Looking at the brief and the Settings reference screenshots, I can see:
- Settings pages use a sidebar navigation pattern
- Configuration forms have a specific input styling
- Action buttons follow a consistent placement

Let me analyze the screenshots to match the exact patterns..."

*[Reads brief and reference screenshots]*

"Based on the reference screenshots, I'll create a prototype with:
- Sidebar navigation matching the Settings pattern
- Form layout matching existing configuration pages
- Button styling consistent with the design system

Which scenarios should I prioritize?"

### Poor: Ignoring Reference Material
**User**: "Create a prototype for the new settings configuration feature"

**Claude**: "Here's a generic settings page prototype..."

*This skips reference screenshots and brief context*

## Quality Checklist

Before delivering a prototype:
- [ ] Read the product brief for context
- [ ] Referenced appropriate screenshots from `reference-screenshots/`
- [ ] Covers specified user scenarios from the brief
- [ ] Works when opened directly in browser
- [ ] Includes README explaining what's covered
- [ ] Styling matches reference screenshots

## Adding New Product Areas

When prototyping a new product area:
1. Create folder in `reference-screenshots/[product-area]/`
2. Add representative screenshots of existing UI
3. Document the key patterns and components
4. Update this skill file with the new area if needed