lab

Lab

This skill builds a page for inspecting components. Every variant and every state of the real components sits open on one screen, so the user can tune them without clicking through the app.

Every state open, nothing faked

The lab renders the real components, not copies. States that need a click, such as an open menu or a hover, are forced open. The lab is a development page and never ships.

Exploring new options for one idea belongs to prototype. The values on the page come from defaults, motion, color and the project's tokens.

1. Find the states

Read each component and list its variants, sizes and states: hover, pressed, focus, open, selected, disabled, loading, empty and error. A lab that shows the resting state only is lab-every-state.

2. Build one route

Add one development-only route, such as /lab, that imports the real components. Copy lab.js into the app and load it once on that route. A lab built from copied markup is lab-real-components.

3. Force states open

Render menus, popovers, tooltips and submenus open with their controlled props or data-* attributes. Hold hover and focus with force on the entry, such as force="hover". A menu that needs a click to see is lab-states-open. Use the app's current theme unless the user asked for both. That is lab-one-theme.

4. Link each entry to its source

Wrap each state in a lab-entry naming its component, state and source line, as the header comment in lab.js shows. An unlabelled grid is lab-link-the-source. When the user asked to tune values, add a lab-tune for each custom property with its range.

The grid, labels, filters and controls ship with the skill, so write entries only. A lab page with its own grid, labels or styles is lab-shipped-frame.

5. Open it

Start the dev server and open the lab. A route named in the reply but never opened is lab-open-it.

6. Keep it out of the release

Gate the route and lab.js to development, or delete both before release. A lab reachable in production is lab-not-in-production.

The pair

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

Rule	Broken	Replacement
lab-every-state	The resting button only	Rest, hover, pressed, focus, disabled and loading
lab-real-components	Copied markup for each state	The real Button imported
lab-states-open	A menu behind a trigger	<Menu open> with its submenu open
lab-one-theme	Light and dark side by side, unasked	The app's current theme
lab-link-the-source	An unlabelled grid	Menu / Submenu Open linked to menu/index.tsx
lab-shipped-frame	A lab grid and labels written from scratch	lab.js loaded, only lab-entry elements written
lab-open-it	"Added /lab"	The lab opened for the user
lab-not-in-production	/lab live on the production site	The route gated to development

Reporting

Severity. HIGH is a lab built from copies, or a lab reachable in production. MEDIUM is a missing state, a state that still needs a click or a hand-written lab page. LOW is an unlabelled entry, or a lab 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 state you could not render as Not verified.