Skip to content

Docs · start here

Getting started

void is a Claude Code plugin plus a Bun CLI. Install the plugin and Claude Code loads the skills when a task needs them. Run the CLI to check the result. Neither needs an account or an API key.

What you get

Part Where What it does
Skills skills/ Instructions Claude Code loads on demand: the website workflow, visual craft, motion, performance, SEO and AI search, accessibility, the audit loop
Tokens packages/tokens/ Tailwind v4 CSS: one semantic base and six aesthetic directions, light and dark, contrast-checked
CLI packages/cli/ void lint for source, void audit for a running site, void extract for a site you admire, void rules to explain any finding
Starter templates/next/ Next.js 16 app with the tokens, metadata, sitemap, robots, llms.txt and budgets already wired

1. Install the plugin

Add the marketplace, then install the plugin from it:

bash
claude plugin marketplace add ParthKapoor-dev/design
claude plugin install void@void

Working on void itself, or trying a branch? Point Claude Code at a checkout instead:

bash
git clone https://github.com/ParthKapoor-dev/design.git void
claude --plugin-dir ./void

The skills trigger on their own when you ask for a website, a landing page, a redesign or an audit. To be explicit, name one: "use the website skill to build a landing page for …".

2. Start from the Next.js starter

The starter is a complete, verified Next.js 16 app. Copy it, set your production URL, and edit src/site.config.ts, the one file that holds your site's facts.

bash
cp -r void/templates/next my-site
cd my-site
bun install
echo 'NEXT_PUBLIC_SITE_URL=https://example.com' > .env.local
bun dev

Agents read AGENTS.md in the starter first. It lists where tokens live, which direction is active, and the two commands that must pass before anything ships.

To change the look, pick a direction. Change the @import in src/app/globals.css, the next/font loaders in src/app/layout.tsx, and direction in src/site.config.ts. The directions pages show each one live.

3. Run the CLI

The CLI runs on Bun 1.2 or newer and drives a local Chromium (it looks at VOID_CHROMIUM, then CHROME_PATH, then the usual install paths). From the void checkout:

bash
bun void/packages/cli/src/index.ts doctor          # check Bun, Chromium, axe, Lighthouse
bun void/packages/cli/src/index.ts lint my-site/src  # static checks, no browser, seconds

Audit a production build, never next dev. --start builds nothing; it starts your server, waits for it, audits every route on a throttled mobile and a desktop profile, and stops it:

bash
cd my-site && bun run build
bun ../void/packages/cli/src/index.ts audit --start "bun run start -p 3100" --port 3100 --routes /,/pricing --format md

Alias it while you work: alias void="bun $PWD/void/packages/cli/src/index.ts".

4. Fix by rule id

Every finding carries an id like perf/lcp-image-lazy. void rules prints why it matters, the fix and an example, and each id has a page on this site under /rules. Fix gates first, then errors, then budgets, then warnings. The audit skill has the full loop and when to stop.

5. Know when you're done

  • bun run build passes and every route is prerendered.
  • void lint reports no errors.
  • void audit exits 0: no error findings and every budget holds on mobile and desktop.
  • Screenshots at 1440 and 390 pass the anti-slop checklist.

Next

  • website: the end-to-end workflow the agent follows.
  • craft: the visual system and the 30 tells of generated UI.
  • CLI reference: every command, flag, exit code and config key.