prototype

Prototype

This skill explores one idea as several working variants. The user compares them in the running app, picks one and the others are deleted.

Real code, then gone

Each variant is real code with real data in the real app, not a mockup. Build the number asked for. With no number, build five that differ in approach, not only in colour. The page is temporary and goes once a variant is picked.

Every state of an existing component on one page belongs to lab. Copying an outside reference belongs to match.

1. Restate the idea

Write the idea in one line and the axis the variants explore, such as layout, motion or density. Ask one question when the idea has two readings.

2. Build real variants

Use the project's components and real or realistic data. A static image or lorem ipsum is prototype-real-code or prototype-real-data.

3. Put them on one page

Show every variant on one route. Separate pages per variant is prototype-one-page. Copy switcher.js into the app beside that route and load it once, as its header comment shows. Wrap the variants in <prototype-switcher>, one child each with data-variant and an optional data-note.

The switcher ships with the skill, so write the variants only. A switcher, tab row or grid written from scratch is prototype-shipped-switcher.

Give each a short label that says how it differs. "Variant 3" is prototype-label-variants. Use the app's current theme unless the user asked for both. Light and dark side by side by default is prototype-one-theme.

4. Open it

Start the dev server, open the page and look at every variant once. A path in the reply with nothing opened is prototype-open-it.

5. Prune after the pick

The bar's Pick button copies a line such as "Pick Inline Filters from /prototypes/filters" for the user to paste back. When the user picks, move that variant into the product. Delete the losing variants with the route, switcher.js and its type declaration. Leftover variants after a pick is prototype-prune-after-pick.

The pair

Every check is a pair. The broken line sits beside the line that replaces it.

Rule	Broken	Replacement
prototype-real-code	A static mockup image	The variant built from project components
prototype-real-data	Lorem ipsum rows	Real or realistic rows
prototype-label-variants	Variant 3	Inline Filters
prototype-one-page	Five routes, one per variant	One route with a switcher
prototype-shipped-switcher	A switcher written from scratch	switcher.js loaded, only the variants written
prototype-one-theme	Light and dark side by side, unasked	The app's current theme
prototype-open-it	"Built at /prototypes/filters"	The page opened, every variant checked
prototype-prune-after-pick	Four losing variants left in src/	The pick shipped, the rest deleted

Reporting

Severity. HIGH is a variant that does not run, or losing variants left after a pick. MEDIUM is placeholder data, unlabelled variants, variants that differ only in colour or a hand-built switcher. LOW is a page that was not opened for the user.

Format. One finding per root cause:

file:line - [rule-id] what is wrong

Then a Rule | Count | Severity summary. Block when any HIGH remains, Approve otherwise. Mark every variant you could not open as Not verified.