CritKit
Open source · MIT licensed

Design critwith your coding agents

CritKit is the design QA step in the agentic coding loop. Walk your running app, crit every flaw, and hand your coding agent a source-anchored to-do list it works top to bottom.

npm i -D critkit
Try it on this page
  1. 01Press C. Crit mode arms across the whole page.
  2. 02Hover the panel; elements highlight. Click one that's off.
  3. 03Type a note, hit ⏎. CritKit harvests the DOM context for you.
  4. 04The crit list docks to your screen edge. Open it, copy the crit prompt.
0crits loggedPress C, then click an element in the panel.
01The output

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.

crit-prompt
awaiting paste
02Install

One install. Dev only.

Register CritKit once, on the client, in development. It never touches a production build.

npm i -D critkit

Zero 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
// critkit-dev.tsx"use client"import { useEffect } from "react" export function CritKitDev() {  useEffect(() => {    void import("critkit").then(({ registerCritKit }) =>      registerCritKit(),    )  }, [])  return null}
app/layout.tsx
// app/layout.tsx (development only){process.env.NODE_ENV === "development" && <CritKitDev />}