States

Add a control panel to any React interface so designers and developers can quickly explore every variation the UI can produce — without clicking through flows to reach each one.

Core Principle

The controls must feel like a natural extension of the UI — not dev tooling bolted on.

Do NOT add a floating overlay, a drawer that slides in from nowhere, or anything that looks like a browser extension. Instead, look at the existing UI chrome and place the trigger where settings or admin tools would naturally live. The controls appear in a popover anchored to that trigger — compact, accessible, and non-blocking so the main UI stays visible.

Step 1: Discover — Explore the Codebase, Propose a Plan

Enter plan mode before writing any code. Explore the codebase to understand the app's structure, data, and state — then produce a structured discovery document for user approval.

1a. Map the UI structure

Explore the source files to understand the app's layout and chrome. What navigation exists? Sidebars, headers, tab bars, menus? Where do users already go to change things? Decide where the trigger will go.

1b. Find the dimensions of variation