Pocket UI

Scaffold a Next.js app preloaded with Pocket UI — an opinionated, agent-buildable component kit (atoms · ~65 sections · charts · frames), its design tokens, and an AGENTS.md that teaches any AI coding tool how to build screens from it.

Quick start

npx @nojack/pocket-ui my-app
cd my-app
npm install
npm run dev

Open http://localhost:3000 — app/page.tsx is a worked example built entirely from @/components/kit.

Build screens with your agent

Open the folder in Cursor / Claude Code / Windsurf / Copilot and ask:

"build me a dashboard to monitor API usage, make it dark" "generate a settings page" "regenerate app/page.tsx as a landing page"

Your tool reads AGENTS.md and follows the Pocket UI flow: read the docs → ask any product questions → confirm the look (seed color / light-dark) → build from the kit → verify.

What you get

• components/kit/ — the kit, one import: @/components/kit
• lib/theme/ramps — seed → ramp engine (light + dark theming)
• system/ — the docs your agent reads (reference.md, house-style.md, …)
• AGENTS.md — the generation flow every agent follows

Requires Node ≥ 18.18. Generates a Next.js 16 + Tailwind v4 + React 19 app.