# void > 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. void has three parts an agent uses together: skills (instructions loaded by Claude Code), @void/tokens (Tailwind v4 CSS with six directions) and the `void` CLI (`void lint`, `void audit`, `void extract`, `void rules `). Every page below has a Markdown version at the same path with a .md suffix. The complete documentation in one file: https://void-design.vercel.app/llms-full.txt. Source: https://github.com/ParthKapoor-dev/design. Last updated 2026-09-17. ## Docs - [Getting started with void](https://void-design.vercel.app/docs.md): Install the void plugin for Claude Code, start from the Next.js starter, and run void lint and void audit until the gates pass. - [website skill: the void workflow](https://void-design.vercel.app/docs/website.md): Entry workflow for building or redesigning any website with void so it looks distinctive and premium (not AI-generated), feels smooth and loads fast on the… - [craft skill: look designed, not generated](https://void-design.vercel.app/docs/craft.md): The void visual system. Color, typography, layout, spacing, radius, shadows, hairlines, focus rings, texture, imagery and icons for websites and web apps… - [motion skill: alive, fast, cheap](https://void-design.vercel.app/docs/motion.md): Motion and interaction animation for websites and web apps that feels expensive but costs almost nothing. - [components skill: take the idea, not the code](https://void-design.vercel.app/docs/components.md): Source animated and "fancy" UI from component libraries safely, then ship it as lean void code. - [inspire skill: borrow the feel, not the site](https://void-design.vercel.app/docs/inspire.md): Build a website inspired by an existing site without copying it. Measures the source's design DNA with `void extract ` (type tuple, neutral ramp, accent… - [speed skill: fast to load, smooth to use](https://void-design.vercel.app/docs/speed.md): Performance and smoothness rules for websites and web apps. Covers Core Web Vitals (LCP, INP, CLS), JS/CSS/font/image budgets, Server Components vs 'use… - [seo skill: findable by search engines, AI engines and agents](https://void-design.vercel.app/docs/seo.md): SEO and GEO (AI search / answer-engine visibility) for websites. Covers server-rendered content, titles, descriptions and canonicals, Open Graph images… - [a11y skill: usable by keyboard, screen reader, zoom and reduced motion](https://void-design.vercel.app/docs/a11y.md): Accessibility as craft for websites and web apps, targeting WCAG 2.2 AA with APCA as the quality bar. - [audit skill: measure, fix, re-measure, stop](https://void-design.vercel.app/docs/audit.md): The verification loop for websites built with void. Explains when to run `void lint` (static, seconds, after each significant edit) and `void audit` / `void… - [void CLI reference](https://void-design.vercel.app/cli.md): Every void command, flag, exit code and void.config.ts key: audit a running site, lint source, extract a site's design DNA and explain any rule. ## Rules Rule pages live at https://void-design.vercel.app/rules// (append .md for Markdown). Categories: - [Rules: every check void can report](https://void-design.vercel.app/rules.md): All 273 void rule ids for performance, smoothness, accessibility, SEO, AI search, design and lint, with severity, why it matters and how to fix it. - [Performance rules (perf/*)](https://void-design.vercel.app/rules/perf.md): All 25 performance rules void reports, each with severity, why it matters and how to fix it. - [Smoothness rules (smooth/*)](https://void-design.vercel.app/rules/smooth.md): All 13 smoothness rules void reports, each with severity, why it matters and how to fix it. - [Accessibility rules (a11y/*)](https://void-design.vercel.app/rules/a11y.md): All 48 accessibility rules void reports, each with severity, why it matters and how to fix it. - [SEO rules (seo/*)](https://void-design.vercel.app/rules/seo.md): All 60 seo rules void reports, each with severity, why it matters and how to fix it. - [AI search rules (geo/*)](https://void-design.vercel.app/rules/geo.md): All 41 ai search rules void reports, each with severity, why it matters and how to fix it. - [Design rules (design/*)](https://void-design.vercel.app/rules/design.md): All 19 design rules void reports, each with severity, why it matters and how to fix it. - [Lint rules (lint/*)](https://void-design.vercel.app/rules/lint.md): All 67 lint rules void reports, each with severity, why it matters and how to fix it. ## Directions - [Six directions, one set of semantic tokens](https://void-design.vercel.app/directions.md): The six void token directions — precision, terminal, instrument, editorial, swiss and warm — each with its own fonts, radius, motion and palette. - [Precision direction](https://void-design.vercel.app/directions/precision.md): Precision: Calm, exact, fast. Engineered near-black UI, hairlines, one electric indigo signal. - [Terminal direction](https://void-design.vercel.app/directions/terminal.md): Terminal: Raw, fast, honest. Graphite black, monospace everything, one phosphor-amber signal, hard edges. - [Instrument direction](https://void-design.vercel.app/directions/instrument.md): Instrument: Trustworthy, dense, data-first. Cool slate neutrals, a chart-grade blue, tabular everything. - [Editorial direction](https://void-design.vercel.app/directions/editorial.md): Editorial: Literary, considered, slow. Warm paper, near-black ink, an oxblood red pencil, hairline rules. - [Swiss direction](https://void-design.vercel.app/directions/swiss.md): Swiss: Rational, confident, poster-like. Achromatic neutrals, black type, a visible grid, one signal red. - [Warm direction](https://void-design.vercel.app/directions/warm.md): Warm: Approachable and calm, like a well-made notebook app. Warm off-white, soft clay, rounded not bubbly. ## Pages - [void — heavy sites, zero jank](https://void-design.vercel.app/index.md): A design system for AI coding agents. Bring shaders, 3D and every component library you love — void makes the agent ship it smooth, fast and accessible. - [Evals: do coding agents build better sites with void?](https://void-design.vercel.app/evals.md): How void is evaluated: the same model and brief with and without void, scored by void audit, lint and a blind design judge. Results and method. ## Optional - [Copy and content (website)](https://void-design.vercel.app/docs/website/copy-and-content.md): Generic copy makes a well-styled page look generated. Specific copy makes a plain page look designed. - [Page types (website)](https://void-design.vercel.app/docs/website/page-types.md): Section plans are starting points; drop any section you have no real content for. Archetype numbers refer to section-archetypes.md. - [Section archetypes (website)](https://void-design.vercel.app/docs/website/section-archetypes.md): Skeletons use the template primitives and void tokens. Copy, then replace content with real content from src/content/*. - [Anti-slop: 30 tells with before/after (craft)](https://void-design.vercel.app/docs/craft/anti-slop.md): Each tell reads as "generated" because the measured top sites don't do it. Numbers are from the 24-site teardown (2026-09-15). - [Color (craft)](https://void-design.vercel.app/docs/craft/color.md): Opacity modifiers work on all roles (bg-bg/80, border-brand/40) because v4 uses color-mix. - [Depth and detail (craft)](https://void-design.vercel.app/docs/craft/depth-and-detail.md): Measured most frequent non-pill radius: Stripe 4, Vercel 6, Linear 8, Attio 8, Raycast 11. Pill CTAs on Linear, Vercel, Mercury, Granola. - [The six directions (craft)](https://void-design.vercel.app/docs/craft/directions.md): Pick exactly one. Each direction file sets the same semantic roles (light + dark), so components never change when the direction does. - [Layout and spacing (craft)](https://void-design.vercel.app/docs/craft/layout.md): Template: (page), , . Never nest containers. - [Tailwind v4 (4.3.x): silent failures and the correct form (craft)](https://void-design.vercel.app/docs/craft/tailwind-v4.md): Tailwind v4 never errors on a class it doesn't know. The page just looks slightly wrong. - [Typography (craft)](https://void-design.vercel.app/docs/craft/typography.md): Mobile check: display sizes land at 0.5–0.75× desktop (measured mobile H1 28–48px). - [3D scenes: scroll-linked WebGL that stays fast (motion)](https://void-design.vercel.app/docs/motion/3d-scenes.md): Tier T4 in the motion effect tiers. Use at most one scene per page, as the page's single signature effect. - [Credits and licences (motion)](https://void-design.vercel.app/docs/motion/CREDITS.md): The motion principles in this skill (frequency-of-use gate, ease-out for UI, no scale(0), origin-aware popovers, transitions vs keyframes, press feedback… - [Section backgrounds: alive surfaces that stay fast (motion)](https://void-design.vercel.app/docs/motion/backgrounds.md): The owner's ask, verbatim: sections should sit on "real, alive backgrounds", not flat --bg, pointing at React Bits' Backgrounds category (Liquid Ether… - [Fallbacks: what a browser without scroll-driven animations renders (motion)](https://void-design.vercel.app/docs/motion/fallbacks.md): void's home page shipped effectively blank in Firefox: header, one chip and a decorative shape rendered; the headline, sub-copy and live terminal did not… - [Motion recipes (paste-ready) (motion)](https://void-design.vercel.app/docs/motion/recipes.md): All recipes use void tokens and Tailwind 4.3 syntax. Put plain CSS in src/app/globals.css after the direction import, inside @layer components { … } so… - [Timing: durations, easing, stagger, springs (motion)](https://void-design.vercel.app/docs/motion/timing.md): Don't invent cubic-beziers. The measured top-site curves are already the tokens: (.23,1,.32,1) out-quint (Linear, Vercel, Raycast), (.19,1,.22,1) /… - [Canvas and WebGL (motion)](https://void-design.vercel.app/docs/motion/webgl-canvas.md): A canvas is the most expensive way to make a page feel alive. Use one only when it is the page's single signature and a CSS version… - [Audit checklist: 16 points for registry/component-library source (components)](https://void-design.vercel.app/docs/components/audit-checklist.md): Run this after fetching a registry item's JSON (SKILL.md → fetch commands) and before rewriting it. - [Component library catalogue (verified 2026-09-16) (components)](https://void-design.vercel.app/docs/components/catalogue.md): How this was verified: licences were read from the actual LICENSE/LICENSING.md files, and registry URLs were probed with curl. - [Signature effect recipes (library effect → lean void component) (components)](https://void-design.vercel.app/docs/components/recipes.md): Ten clean-room translations of the effects agents most often copy from React Bits, Magic UI, Aceternity, skiper-ui and motion-primitives. - [Upstream bugs in component libraries, grouped by pattern (components)](https://void-design.vercel.app/docs/components/upstream-bugs.md): These 48 bugs were found by reading registry source (fetched 2026-09-16) and in shipped apps. - [Effect downgrades: heavy library effect → cheap equivalent (inspire)](https://void-design.vercel.app/docs/inspire/effect-downgrades.md): Keep the personality of an effect (timing, direction, restraint), rebuild it at the lowest tier that carries it. Tiers and budgets: motion §3. - [Extraction guide (inspire)](https://void-design.vercel.app/docs/inspire/extraction-guide.md): Headless Chromium (SwiftShader on, so WebGL/video pages don't screenshot black) at 1440×900 and 390×844. - [Proprietary fonts → free alternatives (inspire)](https://void-design.vercel.app/docs/inspire/font-alternatives.md): Never download, self-host or subset a font file from the source site. Match the tuple instead: classification, x-height/width feel, weight used, then re-tune… - [Images and fonts: paste-ready recipes (speed)](https://void-design.vercel.app/docs/speed/images-fonts.md): Verified against Next 16.3.5 next/image and next/font docs (2026-09-16). Portable HTML/CSS is given for other stacks. - [Next.js 16 App Router performance: specifics (speed)](https://void-design.vercel.app/docs/speed/next-performance.md): Verified against Next 16.3.5, React 19.2, Tailwind 4.3.3 (production builds measured 2026-09-16). The canonical config is templates/next/next.config.ts. - [React pitfalls that cost speed or correctness (speed)](https://void-design.vercel.app/docs/speed/react-pitfalls.md): Every rule below comes from a real bug in shipped apps or vendored registry components (commit hashes in the void research notes). React 19.2, Next 16. - [Rendering smoothness: animation, scroll, view transitions, canvas (speed)](https://void-design.vercel.app/docs/speed/rendering-smoothness.md): Support data from webstatus.dev (web-features/BCD), checked 2026-09-16. Choreography, durations and easing tokens are in the motion skill. - [AI crawlers, fetchers and robots.txt (seo)](https://void-design.vercel.app/docs/seo/ai-crawlers.md): As of 2026-09-16, from each operator's documentation. Re-check tokens yearly, since operators add and rename bots (e.g. - [Content that gets cited (GEO writing patterns) (seo)](https://void-design.vercel.app/docs/seo/content-for-citation.md): These are writing and layout patterns for pages that AI engines (Google AI Overviews/AI Mode, ChatGPT search, Perplexity, Copilot, Claude) quote and link to. - [llms.txt and Markdown mirrors (seo)](https://void-design.vercel.app/docs/seo/llms-txt-markdown.md): Status (2026-09): llmstxt.org spec v2 (August 2026) adds and per-page rel="alternate" type="text/markdown" discovery. - [Next.js 16 metadata recipes (verified) (seo)](https://void-design.vercel.app/docs/seo/next-metadata.md): Every recipe was compiled with next build on Next 16.3.5 (React 19.2) and checked with next start + curl. params is a Promise. - [Structured data (JSON-LD): what to emit, required properties, builder (seo)](https://void-design.vercel.app/docs/seo/structured-data.md): Google Search gallery as of 2026-09 (gallery updated 2026-06-15; Software app page updated 2026-09-08). - [Accessible patterns (paste-ready) (a11y)](https://void-design.vercel.app/docs/a11y/patterns.md): React 19 + Tailwind v4 with void tokens (bg-surface-raised, text-fg, border-line, outline-line-focus…). - [Running void in CI (audit)](https://void-design.vercel.app/docs/audit/ci.md): Two gates: 1. void lint on every push. It's fast, needs no browser or build, and catches Tailwind v4, Next 16, React and a11y markup bugs. 2. - [`void` command reference (audit)](https://void-design.vercel.app/docs/audit/commands.md): Written from packages/cli/src/cli/*.ts (void 0.1.0, 2026-09-16). If void --help disagrees with this file, trust void --help and report the drift. - [Sitemap](https://void-design.vercel.app/sitemap.xml): every indexable URL, including 273 rule pages, with its last content change