The Workflow

1. App name — MusicLeague
2. Device type — Browser (web app frames with title bar, dots, and URL bar)
3. Features and screens — Create New League (7 screens: Details, Songs & Votes, Timing, Rounds Empty, Rounds Added, Players, League Home) and League Detail (4 screens: Active League, League Ended Empty, League Ended Completed, Open League Visitor)

Filling In the Screens

What You Get

• Standalone HTML — No dependencies beyond Tailwind CDN. No build step. Works offline after first load.
• Device frames — Browser chrome (title bar, colored dots, URL bar) or phone bezels (notch, home bar) depending on your choice.
• Feature rows — Each feature gets a horizontally scrollable row with a sticky label on the left. Scroll right to see more screens.
• Lightbox — Click any screen card to view it enlarged. Arrow keys navigate between screens. Escape closes.
• Dark mode — Toggle button in the header. Preference persists in localStorage.
• Scroll indicators — Fade gradients appear on rows that have more screens to the right.
• Surgical editing — Every screen is wrapped in START/END comment markers so Claude can find and replace individual screens without affecting the rest of the file.

Install It Yourself

# /prototype — HTML Feature Prototype Gallery

Context: When planning features for phone or web apps, it's valuable to see
all features and their screens on a single HTML page. This command scaffolds
a polished, standalone HTML prototype gallery where:
- Rows = features (Community Feed, User Profile, Settings, etc.)
- Columns = screens for that feature (feed list, add post, post detail, comments)

After scaffolding, the user keeps chatting with Claude Code to fill in each
cell with actual UI mockups.

## Invocation

/prototype <app-name> [feature1, feature2, feature3, ...]

Examples:
- /prototype MusicLeague — prompts for features interactively
- /prototype MusicLeague community-feed, leagues, voting — scaffolds immediately
- /prototype MusicLeague path/to/features.md — reads features from a file

## Workflow

### Step 1: Parse Input
- Extract app name from first argument
- Detect remaining arguments:
  - Comma-separated list → use as feature names
  - File path (ends in .md, .txt) → read features from file
  - Nothing → ask user to list features

### Step 2: Clarify Details (always ask both)
1. Device type: phone app or web app (determines frame style — phone bezel
   vs browser window)
2. Screen names per feature: For each feature, ask the user to name the
   specific screens. Each feature can have a different number of screens.

### Step 3: Generate HTML File
- Write a standalone HTML file to ./prototypes/<app-name-kebab>.html
- The HTML includes:
  - Tailwind CSS via CDN (no build step)
  - A header with app name and navigation
  - Feature rows with screen placeholders
  - Phone-frame or browser-frame CSS for each cell
  - Sticky left column with feature names
  - Horizontal scroll per row for many screens
  - Light/dark mode toggle
  - Lightbox for zooming into individual screens
- Each cell contains a placeholder with the screen name and an HTML comment
  marking where to insert mockup content

### Step 4: Present Summary
Show the user what was created and how to iterate:
- File path
- How to open in browser
- How to fill in screens (e.g., "Fill in the Community Feed → Feed List
  screen with a Tailwind mobile UI")

## HTML Template Design

Layout: CSS Grid with Horizontal Scroll

Each feature = one row. Each screen = one cell scrolling right.
Feature names stick to the left during horizontal scroll.

### Key CSS Decisions
- Outer layout: Vertical scroll (features stack)
- Per-feature row: display: flex; overflow-x: auto;
- Feature name: position: sticky; left: 0;
- Device frames: Pure CSS phone bezels or browser chrome
- Phone frame: ~375x812px scaled to ~180x390px thumbnails
- Placeholder cells: Dashed border, muted text, pulsing shimmer
- Lightbox: Click to expand, keyboard nav (arrows + ESC)

### Placeholder Cell HTML

<!-- PROTOTYPE: feature-name / screen-name -->
<div class="prototype-cell" data-feature="feature-slug" data-screen="screen-slug">
  <div class="phone-frame">
    <div class="phone-notch"></div>
    <div class="phone-screen">
      <!-- START: feature-slug/screen-slug -->
      <div class="placeholder">
        <p>Screen Name</p>
        <p class="text-sm text-gray-400">Ask Claude to fill this screen</p>
      </div>
      <!-- END: feature-slug/screen-slug -->
    </div>
    <div class="phone-home-bar"></div>
  </div>
</div>

The START/END comments make it easy for Claude Code to find and replace
specific screens using the Edit tool.

### Interactivity (Vanilla JS)
- Dark/light toggle: Adds/removes dark class on <html>
- Lightbox: Click a frame → overlay at near-full-size
- Keyboard nav: Left/Right arrows cycle screens, ESC closes
- Scroll indicators: Fade gradients on overflowing rows

The Iteration Loop

• "Fill in the Step 1 - Details screen" — Claude replaces the placeholder with a full Tailwind mockup
• "Here's a screenshot of the real app. Match this." — Claude recreates the screenshot as Tailwind HTML
• "Make it look better" — Claude refines spacing, colors, and typography
• "Add a new screen called Results to the League Detail row" — Claude adds a new cell with proper markers
• "Switch all screens to use a dark purple color scheme" — Claude updates the Tailwind classes across the file

Why This Matters