Mockup Skill

Read .hackathon/STATE.md and .hackathon/IDEA.md first.

Soft gate: If ideate phase is not complete, warn that the idea may change significantly.

What This Produces

A standalone HTML file (or React component if the stack is already decided) that can be opened in a browser. This is NOT a wireframe. This is NOT a design comp. This is a feel-able prototype — something you can click through and experience the user flow.

The mockup should:

• Cover the primary user flow (the one from the demo script)
• Be interactive (clicks navigate between states, forms accept input, results appear)
• Look intentional (not polished, but not ugly — use a simple utility CSS framework like Tailwind CDN or Pico CSS)
• Include realistic sample data (not lorem ipsum)
• Be self-contained in a single HTML file that can be opened directly

Process

Step 1: Identify the Key Screens

From IDEA.md, identify the 3-5 screens/states the user flow passes through. Example for a document processing app:

1. Upload screen (drag-and-drop or file picker)
2. Processing screen (loading/progress indicator)
3. Results screen (parsed document with highlighted keywords)
4. Form pre-fill screen (extracted data in editable fields)

Step 2: Build the Mockup

Create a single HTML file at .hackathon/mockups/v[N].html where N increments.

Requirements:

• Self-contained (inline styles, inline JS, CDN imports only)
• Navigation between screens via buttons/interactions
• Realistic sample data relevant to the project idea
• Responsive enough to demo on a projector
• Include a small "nav" or "state indicator" showing which screen you're on

Use Tailwind CDN for styling: <script src="https://cdn.tailwindcss.com"></script>

Step 3: Review Loop

After creating the mockup, tell the user:

• "I've created a mockup at .hackathon/mockups/v[N].html — open it in your browser"
• "Walk through the flow and tell me: what's missing, what's confusing, what should change?"

For each round of feedback, create a new version (v2, v3...) so there's a history.

Step 4: Update Living Documents

After the team is satisfied with the mockup:

• Update DEMO-SCRIPT.md if the flow changed
• Note any new features or removed features in IDEA.md
• Log decisions in log/decisions.md ("Removed X because Y")

Output

• Mockup file(s) in .hackathon/mockups/
• Updated DEMO-SCRIPT.md (if flow changed)
• Updated IDEA.md (if scope changed)
• Update STATE.md: set mockup.status to "complete", update active-phases
• Log to log/changelog.md