Toggletation

Toggle your designs in real time. Live demo at toggletation.com

1. Instal package
2. Ask your agent (Cursor, Codex, Claude Code) to set you up
3. Ask your agent for design options for some part of you app
4. See a toggle, dropdown, or slider appear in you toggletation panel
5. Select the option you like, copy the prompt, give it to your agent, and they'll make the change

Install

npm install toggletation

Peer deps: React ≥ 18.

Setup

Wrap your app in TogglesProvider and drop in TogglesPanel:

import { TogglesProvider, TogglesPanel, type FieldDef } from "toggletation"

const fields: FieldDef[] = [
  {
    fieldId: "view",
    type: "segmented",
    name: "View",
    category: "Layout",
    options: [
      {
        value: "grid",
        explanation: "Good for visual browsing.\n\nHarder to compare details.",
        current: true,
      },
      {
        value: "list",
        explanation:
          "Good for comparing line by line.\n\nGets unwieldy when long.",
        current: false,
      },
    ],
  },
]

export default function App({ children }) {
  return (
    <TogglesProvider fields={fields}>
      {children}
      {process.env.NODE_ENV === "development" && <TogglesPanel />}
    </TogglesProvider>
  )
}

Defining fields

Three control types:

// Segmented toggle — 2–4 short options
{ fieldId: 'view', type: 'segmented', name: 'View', category: 'Layout', options: [...] }

// Select dropdown — many options or long labels
{ fieldId: 'font', type: 'select', name: 'Font pairing', category: 'Typography', options: [...] }

// Slider — continuous numeric range
{ fieldId: 'lineHeight', type: 'slider', name: 'Line height', category: 'Typography',
  min: 1.1, max: 2.0, step: 0.05, options: [...] }

category groups fields into labeled sections. Multiple fields can share a category.

Options

type Option = {
  value: string | number
  label?: string // display label (falls back to value)
  good: string // one sentence — why this option works
  bad: string // one sentence — where it falls short
  current: boolean // true = initial state (exactly one per generation)
  preview: ComponentType // thumbnail shown in the panel grid
}

{
  value: "ghost",
  label: "Ghost",
  good: "Bordered transparent pills feel like UI components and scale across color schemes.",
  bad: "The outline adds decoration that can feel heavy at small sizes.",
  current: false,
  preview: () => <GhostPreview />,
}

Consuming state

Conditional logic

import { useToggles } from "toggletation"

const { getValue } = useToggles()
const view = getValue("view")
return view === "grid" ? <Grid items={items} /> : <List items={items} />

Whole component swap

import { useVariant } from "toggletation"

const Card = useVariant("cardStyle", {
  default: DefaultCard,
  elevated: ElevatedCard,
  minimal: MinimalCard,
})
return <Card {...props} />

Falls back to the first map entry if the current value isn't found.

CSS custom property

const { getValue } = useToggles()
useEffect(() => {
  document.documentElement.style.setProperty(
    "--line-height",
    getValue("lineHeight")
  )
}, [getValue("lineHeight")])

Agent setup

The package ships with a SKILL.md — a plain-markdown file that tells AI coding assistants how to use Toggletation correctly. Copy it to the right place for your tool:

# Cursor
mkdir -p .cursor/skills/toggletation
cp node_modules/toggletation/SKILL.md .cursor/skills/toggletation/SKILL.md

# Claude
cat node_modules/toggletation/SKILL.md >> CLAUDE.md

# GitHub Copilot
cat node_modules/toggletation/SKILL.md >> .github/copilot-instructions.md

# Windsurf
cat node_modules/toggletation/SKILL.md >> .windsurfrules

Once wired up, your agent will proactively suggest tweaks panels whenever you ask for design variants, layout options, or style alternatives.