Design critwith your coding agents
CritKit is the design QA step in the agentic coding loop. Open your running app, walk it, and crit every flaw—spacing, a color, a label, an alignment. CritKit hands your coding agent a source-anchored to-do list it works top to bottom.
npm i -D critkitEyebrow should be sentence case, not all-caps.
Tighten the CTA padding to match the card above.
Badge contrast falls below AA on this surface.
Four keystrokes from flaw to fix.
No mode you get trapped in, no prose to write from scratch. A single crit takes two to four seconds—a full-page session, a couple of minutes.
Press C
Crit mode arms. Hover highlights every element; Esc exits.
Click a flaw
Click it. CritKit anchors it to the component that rendered it.
Drop a note
Type what's wrong, hit ⏎. CritKit harvests the DOM context.
Copy the prompt
Open the list, hit Copy Crit Prompt, paste it to your agent.
Crit this page. Right now.
CritKit is already running—no install, no sandbox. The panel below is an ordinary app surface. Walk it the way you'd walk your own build.
- 01Press C—crit mode arms across the whole page.
- 02Hover the panel; elements highlight. Click one that's off.
- 03Type a note, hit ⏎. CritKit harvests the DOM context for you.
- 04The crit list docks to your screen edge—open it, hit Copy Crit Prompt.
Your taste. You paste.
Paste a copied crit prompt into the field to see exactly what your agent receives: every item source-anchored, with values harvested live from the DOM.
One install. Dev only.
Register CritKit once, on the client, in development. It never touches a production build.
npm i -D critkitZero production footprint. The dynamic import is gated on NODE_ENV—CritKit never ships in your production bundle. Nothing to misconfigure into production.
// critkit-dev.tsx"use client"import { useEffect } from "react" export function CritKitDev() { useEffect(() => { void import("critkit").then(({ registerCritKit }) => registerCritKit(), ) }, []) return null}// app/layout.tsx (development only){process.env.NODE_ENV === "development" && <CritKitDev />}