Workbench

Archived for reference, 2026-09-05. The current application, reusable template, dependencies, and Git history are preserved for a future redesign. Start future work with a new brief; the instructions below describe the historical version. Existing project-owned copies remain independent.

A code-first component workbench for reviewing Next.js interfaces across states, breakpoints, and color schemes.

Workbench is a real application, not a static design file. It renders production components in an isolated review canvas and blocks builds when core design-system rules break.

What it does

• Registers sections in one typed source of truth.
• Renders each section at 375, 768, 1024, and 1440 pixels by default.
• Reviews supported states in light and dark color schemes.
• Contains failures to one review cell so the rest of the canvas stays usable.
• Enforces seven design-system invariants before every production build.
• Ships a neutral template that can be adopted by another Next.js project.

Quick start

You need Bun 1.3 or newer.

git clone https://github.com/tommylower/workbench.git
cd workbench
bun install
bun run dev

Open http://localhost:3000/workbench.

Add a section

Define the component and its review brief in src/design/sections.tsx. Each registry entry names the states and acceptance checks that the canvas must render.

The seeded section shows the complete path. Replace it with the first real section when adopting Workbench in a project.

Architecture

References move downward only:

app/globals.css @theme   tokens       raw values and semantic vocabulary
components/ui/*          primitives   headless behavior and variant axes
components/*             product      domain compositions using tokens
app/*                    screens      arrangement and data

The repository contains two synchronized surfaces:

app/ components/ lib/    runnable neutral showroom
src/design/              section registry used by the canvas
scripts/preflight.ts     build-blocking invariant checks
template/                neutral seed for another Next.js project
workbench.config.ts      engine, CSS strategy, skin, and breakpoints

Configuration

Edit workbench.config.ts:

Field	Purpose
name	Display name in the canvas
engine	base-ui or radix behavior profile
css	single-skin or cva-utilities CSS strategy
skinPrefix	Namespace for project skin classes
breakpoints	Review widths rendered by the canvas

Validation

bun run preflight
bun run build

Preflight checks token usage, color-scheme completeness, skin isolation, CVA imports, engine resolution, engine imports, and unique registry IDs. The build runs preflight automatically.

Adopt the template

template/ is a boundary-only seed, not a component library. Its manifest.json lists the dependencies and scripts the seed expects.

For a new compatible Next.js app, copy the template into the project and install the manifest dependencies. For an existing app, merge the files deliberately; do not overwrite product code or replace existing dependency versions.

Once adopted, the project owns its Workbench copy. This repository remains the source for future stamps rather than a bidirectional sync target.

Status

Workbench is an early-stage, opinionated reference implementation for the Next.js App Router, React 19, Tailwind CSS 4, and Bun.

License

MIT