# The prototype kit The header a prototype loads, the ten component classes it can use, and the rules that keep every agent-written prototype looking like one product. Source: https://codeherder.com/docs/prototype-kit/ The header a prototype loads, the ten component classes it can use, and the rules that keep every agent-written prototype looking like one product. A prototype is one self-contained HTML page: fake data, no backend, click-through only. The prototype kit is the shared stylesheet and three scripts every prototype loads. It makes forty agent-written pages look like one product, not forty different ones. ## The header Add these four lines to the prototype’s ``: ``` ``` `tokens.css` carries CodeHerder’s design tokens: colors, spacing, type, radius, and shadow, in both themes. `tailwind.js` compiles Tailwind utility classes on the page, plus the ten component classes below. `alpine.js` gives you `x-data` for state. `bridge.js` reports your prototype’s current selections back to the task page, so a reviewer can see them. Use these exact, absolute URLs. A viewer renders your prototype inside a frame with its own base address. A relative path resolves to the wrong place there. ## The ten component classes Each class works two ways: on its own, or combined with a Tailwind utility class. The utility class overrides one property, such as a color or a size. Add it after the component class in the `class` attribute. **`proto-btn`** — a button. ``` ``` **`proto-input`** — a text input. ``` ``` **`proto-select`** — a dropdown. ``` ``` **`proto-badge`** — a status pill. Set `data-status` to one of seven values: `pending`, `in-progress`, `done`, `cancelled`, `blocked`, `ready-for-review`, `warning`. ``` Done Blocked ``` **`proto-card`** — a bordered, padded panel. ```

Usage this month

``` **`proto-table`** — a dense data table. ```
TitleStatus
Ship itDone
``` **`proto-dialog`** — a modal panel. Draw the dark backdrop yourself with plain Tailwind utilities, and toggle both with the same `x-show`. ```
``` **`proto-tabs`** — a tab strip. ``` ``` **`proto-empty`** — an empty-state block. ```

No tasks match this filter.

``` **`proto-toast`** — a floating notification. ```
``` ## The rules Follow these rules so your prototype opens correctly and renders like every other one. - **Write one file.** Put your markup, your styles, and your script in a single `.html` file. - **Put your data inline.** Write your fake records as a JavaScript object in the file. Do not fetch data from a server. - **Make no network calls.** The frame blocks every request except the four kit files. A `fetch` call, an image from a CDN, or an embedded video will not load. - **Never use `
`.** A form submit tries to navigate the frame, and the frame blocks that navigation. Handle a submit with `@submit.prevent` and Alpine state instead. - **Support both themes.** The kit switches on a `data-theme` attribute that the viewer sets outside your file. Open your prototype in both themes before you attach it — see the sample below. - **Label every control.** Give every input, select, and checkbox a `