Skip to content
Switches

Claude Code

npx switches init installs a Claude Code skill that gives Claude three jobs: make versions, apply picks, and finish. You talk to it in plain words; these are examples, not commands to memorise.

1. Make versions

Claude Code
Make 3 versions of the hero.
Give me two options for the pricing section: tiers and a single plan.

Claude wraps each version in a <Variant> and follows a few rules:

  • if the section already exists, the current design stays as one version, marked default;
  • versions are genuinely different in layout or approach, not colour or wording tweaks;
  • versions get names that describe them (phone, split), never A, B, C;
  • each version keeps its own code, so the ones not picked can be deleted cleanly later;
  • if <Switches /> is not in the layout yet, Claude adds it.

It then tells you the section and version names to look for in the panel.

2. Apply picks

Paste the text from “Copy my picks” as it is. It looks like this:

Clipboard
Switches picks: hero: split · pricing: simple
hero: split (/) — note: bigger headline
pricing: simple (/pricing)
Link: https://preview.example.com/pricing?switches=hero%3Asplit%2Cpricing%3Asimple
Apply these picks: keep the chosen version of each section and delete the others.
  • The first line is a summary.
  • Each next line is one pick: section: version (page), then — note: … if the picker wrote one.
  • The link is for people; Claude ignores it.
  • The last line tells Claude what to do.

For each pick, Claude finds the section in your code, keeps the picked version, deletes the others along with code and files only they used, and applies the note as a small tweak. The picker has decided, so it does not ask which version to keep; it asks only if a name, option or note looks wrong or unsafe. If a section or version can’t be found, it says so rather than guessing. Afterwards it runs the build and reports what it kept, deleted and changed.

3. Finish

When the design is settled and you are ready to launch:

Claude Code
Finish Switches.

Claude only does this when you ask. It:

  1. removes <Switches /> and its import (and suppressHydrationWarning if it was added for Switches);
  2. keeps the default version of any section still undecided, and tells you which;
  3. runs npx --no-install switches uninit (never a bare npx call, which could fetch an unrelated package), which removes the skill and the block in CLAUDE.md;
  4. uninstalls the package and removes any NEXT_PUBLIC_SWITCHES setting;
  5. runs the production build and checks that no trace of Switches is left.

Version-first modes

The Switches block in CLAUDE.md has one setting, a line like Switches version-first mode: ask. It decides what Claude does when it builds a new section or page layout without being asked for versions:

  • Off: builds one version, unless you ask for several.
  • Ask (the default): asks “want 3 versions?” once per new section or layout, and builds versions only if you say yes.
  • Always: builds 2 or 3 versions automatically.

In every mode, small edits, fixes and copy changes stay one version. Versions cost more tokens to build, which is why Ask is the default. Change it with npx switches init --mode off (or always, ask), or by editing the line. Details are in the API.