# void: full documentation > void is an open-source design system for AI coding agents: Claude Code skills, Tailwind v4 tokens and a CLI that audits speed, accessibility, SEO and design. Generated from https://github.com/ParthKapoor-dev/design. 60 documents. Individual rule pages are not inlined; see https://void-design.vercel.app/rules.md. --- # 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 ` 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. --- # website — the void workflow Follow the phases in order. Each has exit criteria; don't start the next phase until they hold. The skills you'll pull in: | Skill | Owns | |---|---| | `inspire` | building from an inspiration URL ("make it look like linear.app") | | `craft` | direction, color, type, layout, depth, anti-slop checklist | | `motion` | what moves, timing, effect tiers | | `components` | sourcing effects/components from libraries (React Bits, Magic UI, skiper-ui…) as lean void code | | `speed` | Server Components, budgets, images, fonts, LCP/INP/CLS | | `seo` | metadata, JSON-LD, sitemap, robots, llms.txt, content that gets cited | | `a11y` | landmarks, keyboard, focus, contrast, forms | | `audit` | the `void` CLI fix loop | **Tooling:** `void` is the void CLI. If it isn't on PATH: `bun "${CLAUDE_PLUGIN_ROOT}/packages/cli/src/index.ts" ` (run `bun install` in that folder once; `void doctor` checks Chromium). ## The 10 rules 1. **Write the brief before any markup.** No brief, no page. 2. **One direction, one accent, one signature moment.** Decide them in writing in phase 1. 3. **Real content first.** Sections come from what the page must prove, not from a template. No lorem ipsum, no invented logos, quotes, stats or ratings. Ever. 4. **Don't default to hero → 3 icon cards → testimonials → CTA.** Pick archetypes by the job of each section. 5. **Tokens only.** Semantic utilities from `@void/tokens`; zero hex, zero default palette, zero arbitrary spacing. 6. **Server Components by default.** Client islands only for real interactivity. The hero H1 and LCP image are in the HTML and visible at first paint. 7. **Left-aligned, varied rhythm, small type texture.** Measured top sites center ≤ 25% of headings and run on 13–14px UI text. 8. **Motion is budgeted:** 1 signature + ≤ 1 secondary effect, CSS first, reduced motion honored. 9. **Verify with tools and eyes:** `void lint` → `next build` → `void audit` → screenshots at 1440 and 390 against the anti-slop checklist. 10. **Only publish what exists.** Every claim, number, logo and schema entry is real or removed. ## Phase 0 — Brief Write this block into the conversation (or `BRIEF.md`) before anything else. Ask the user only for what you can't infer; don't stall on optional fields. ```md ## Brief - Product / person: - Audience: - The one job of this page: - Primary CTA: