---
title: "Getting started with void"
description: "Install the void plugin for Claude Code, start from the Next.js starter, and run void lint and void audit until the gates pass."
canonical: https://void-design.vercel.app/docs
lastModified: 2026-09-16
---

# Getting started with void

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](/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 <id>` prints why it matters, the fix and an example, and each id has a page on this site under [/rules](/rules). Fix gates first, then errors, then budgets, then warnings. The [audit skill](/docs/audit) 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](/docs/craft/anti-slop).

## Next

- [website](/docs/website): the end-to-end workflow the agent follows.
- [craft](/docs/craft): the visual system and the 30 tells of generated UI.
- [CLI reference](/cli): every command, flag, exit code and config key.