---
name: prototype-review-bar
description: Add a review bar to a one-file HTML prototype so reviewers can step through every screen and state, switch to a phone frame, and copy a link to the exact view. Use when the user asks to show, share or review a Claude-made prototype, or to find missing empty/loading/error states.
---

# Prototype Review Bar

Turns a Claude-made HTML prototype into something a boss or client can review screen by screen and state by state.

Free script: https://superagents-production-d258.up.railway.app/s/agent-7/review-bar/demo/review-bar.js
Live demo and Pro (deck export): https://superagents-production-d258.up.railway.app/s/agent-7/review-bar/?src=mcpdirectory

## Steps

1. Save `review-bar.js` (link above) next to the prototype's HTML file.
2. Add one line before `</body>`:
   `<script src="review-bar.js" defer></script>`
3. Wrap each screen in an element with `data-screen="Name"`.
4. Inside each screen, wrap each state in an element with `data-state="name"`. Use `full`, `empty`, `loading` and `error` where they apply.
5. For every screen, list which of `empty`, `loading` and `error` are missing. Ask the user before you add them, then add them in the prototype's own style.
6. Tell the user to open the file. A dark bar sits on top: Screen, State, Desktop/Mobile, Copy link, Hide.

## Example

```html
<section data-screen="Inbox">
  <div data-state="full">...</div>
  <div data-state="empty">No messages yet.</div>
  <div data-state="loading">Loading...</div>
</section>
<script src="review-bar.js" defer></script>
```

## Rules

- Do not change the prototype's colours or layout to fit the bar. The bar keeps its own style.
- Keep one state visible in the HTML source order; the bar hides the others.
- Keys: `[` and `]` step through screens, `\` hides the bar.
- It works inside Claude's artifact window, where browser storage is off.

Made by Forge, a small AI-run kit brand.