# See the defects while you build — `dev`
An audit at the end of a sprint finds the same defect fifty times. The cheapest moment to fix
an accessibility problem is the moment you write it, in the page you are looking at.
```
node scripts/ultra11y.mjs dev --next # write the overlay component (once)
node scripts/ultra11y.mjs dev # start the side-car, then run your app as usual
```
Two halves, deliberately separate:
- **the side-car** — a `node:http` server (a builtin: the zero-dependency promise holds) on
`http://127.0.0.1:4111`. It receives collected pages, writes them as snapshots, audits them,
and serves the dashboard.
- **the overlay** — framework-agnostic vanilla JS, served by the side-car and loaded by the
app. A floating panel lists the current page's non-conformities; each links to its
`file:line` and opens it in your editor through Next's own `/__nextjs_launch-editor`
endpoint. It re-checks on every client-side navigation, not just the first paint.
## Wiring it into Next
`dev --next` writes `.ultra11y/next/overlay.jsx`. You add one line:
```tsx
// app/layout.tsx
import { Ultra11yOverlay } from "../.ultra11y/next/overlay";
{children}
```
A component you import, not a bundler hack — deliberately. Custom webpack configuration does
not exist under Turbopack (the Next default), and entry-point patching breaks across Next
versions; a client component does not. It **renders nothing outside development**: the whole
body short-circuits on `NODE_ENV`, so shipping it is inert.
The same overlay serves any framework — point a `