Inkwell

A Nuxt UI / Vue 3 component library with a Storybook workbench and a pixel-diff visual-regression audit pipeline.

Layout

packages/inkwell    Component library (Vue 3 + Nuxt UI + Tailwind v4)
apps/playground     Nuxt app for consuming the library
tools/              Inventory, scaffold, reference capture, and audit tooling
tests/visual/       Visual-regression baselines

Quick start

Requires Node 18+ and pnpm@10.

pnpm install
pnpm dev           # run the playground
pnpm storybook     # run Storybook on :6006

Visual audit

The audit captures every story across the matrix of viewports (375 → 1920) and themes (day, night), then pixel-diffs each against a committed baseline.

pnpm storybook                              # in one terminal
pnpm inkwell:audit                          # full run
pnpm inkwell:audit --components=ink-button  # restrict to one component
pnpm inkwell:audit --viewports=1280 --themes=day

Results land in tests/visual/reports/ (gitignored). Baselines live in tests/visual/__baselines__/ and are the source of truth.

Tooling scripts

Script	Purpose
pnpm inkwell:inventory	Rebuild component-inventory.json
pnpm inkwell:scaffold	Scaffold a new component from the inventory
pnpm inkwell:extract-css	Pull design tokens / CSS from references
pnpm reference:capture	Capture reference screenshots
pnpm inkwell:audit	Visual diff audit (see above)