Toggletation

Toggle your designs in real time

Live demo - npm

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"

// The agent will fill this in
const fields: FieldDef[] = []

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

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.

License

MIT