Set up a project
Start a new project with the whole kit, or add the design system to one you already have.
The whole kit
From an empty folder to a first feature. Run these once, in order.
- 1
Create the app
A Next.js app with TypeScript, Tailwind, ESLint and the App Router.
kit initedits the files this creates, so pass the flags rather than relying on saved preferences.bunx create-next-app@latest your-app --ts --tailwind --eslint --app --use-bun --yesWant the app at the root of an existing repo?
create-next-app checks that the target's parent is writable, socreate-next-app .can fail in a sandbox whose writable root is the repo itself. Scaffold into a subfolder and move its contents up,.gitignoreincluded.Running inside a sandboxed agent?
bunxwrites to the system temp and cache directories first; under a file sandbox that fails withEPERMbefore anything runs. Point them at a writable place first:TMPDIR=/tmp BUN_INSTALL_CACHE_DIR=/tmp/bun-cache. A firstConnectionRefused downloading package manifestthat works on an identical retry is the download, not your registry configuration — run it again. - 2
Run kit init
Copies the house style into
context/, installs the skills, runs shadcn init against the registry, removes the leftover CSS that would override the theme, wires the lint rule, adds a check script, and locks what it installed.cd your-app && bunx @ja3dan/kit init next16-insforgeyour-app/- .claude/skills/8 skills
- app/globals.cssimports the contract and a theme
- context/
- features/
- README.md
- code-standards.md
- library-docs.md
- progress.md
- ui-registry.md
- ui-rules.md
- components.jsonpoints shadcn at the registry
- eslint.config.mjsno-raw-colors wired in
- kit.lock.jsonwhat was installed, hashed
- package.jsonadds a check script
Before the first check: generate route types
Next generatesLayoutPropsandPagePropsinto.next/types. create-next-app does it during install — not with--skip-install— and moving routes into groups later leaves stale paths behind. Either waybun run checkfails on types that aren't yours;rm -rf .next/types && bunx next typegenregenerates them.Linking a backend before your first commit?
Some CLIs append a bare.claudeto.gitignore(the InsForge CLI does), which hides the skills kit init just installed from git.kit doctorflags it; narrow the rule to.claude/settings.local.json. - 3
Write the context
Paste the kickoff prompts into any LLM chat, in order, and save each answer into
context/. Each answer is the next prompt's input.Read the promptsyour-app/- context/
- project-overview.mdfrom 01-interview.md
- architecture.mdfrom 02-architecture.md
- build-plan.mdfrom 03-build-plan.md
- 4
Check the project
kit doctorandkit checkpass straight away.bun run checkfails on create-next-app's own home page, which uses raw palette colours: that is the lint rule working, and it passes once the first feature replaces the page.bunx @ja3dan/kit doctor- required files, kickoff docs, git-ignored kit files, and outdated/missing items
bunx @ja3dan/kit check- scan locked files for raw colours and a theme missing required tokens
bunx @ja3dan/kit list- every item the registry can install, and which are installed here
bun run check- typecheck and lint, including no-raw-colors
- 5
Start the first feature
In Claude Code, from the project. The feature skill opens a branch and a folder, and writes the spec with its done when criteria.
Read the loop/feature start 01
Only the design system
shadcn does the install. Two things kit init would have done are yours to do by hand.
Before you start, in an app with its own styles
primary, accent, success and the rest). A name the app already uses for something else takes on the contract's meaning once the theme loads. Override it straight after the imports.- 1
Initialise on the contract
Initialises a project on the token contract: installs @ja3dan/tokens and the lint plugin, wires the theme into global CSS, adds the @ja3dan registry to components.json. Run with shadcn init.
bunx shadcn@latest init https://gw.jaedan.me/r/setup.json - 2
Remove the leftover CSS
In a fresh create-next-app project,
app/globals.csskeeps its own colour variables, a dark media query copy and abodyrule after the imports, and they override the theme. Keep the imports below and any--font-*lines; delete the rest.app/globals.css @import "tw-animate-css";@import "@ja3dan/tokens/theme.css";@import "@ja3dan/tokens/base.css";@import "@ja3dan/tokens/themes/neutral.css"; - 3
Wire the lint rule
The plugin is installed but does not run until the config names it. Add these two lines to
eslint.config.mjs.eslint.config.mjs import ja3dan from "@ja3dan/eslint-plugin";// inside the config array:{ ...ja3dan.configs.recommended, files: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"] }, - 4
Add components
Start with the button, which replaces shadcn's, then add any of the other 23.
Browse the componentsbunx shadcn@latest add @ja3dan/button --overwrite
Keep it current
Installed components and skills are yours to edit. The kit tells you when a newer version exists, merges components with your edits, and leaves an edited skill alone unless you say otherwise.
bunx @ja3dan/kit sync status- what's outdated, and what's been edited locally
bunx @ja3dan/kit sync update <item>- update one item on a branch: overwrite if unedited, 3-way merge if edited
bunx @ja3dan/kit@latest skills status- the project's skills against this kit's: current, outdated, edited, missing, new
bunx @ja3dan/kit@latest skills update- install this kit's skills over outdated, missing and new ones, and lock them
Where to go next
- The loopThe steps every feature takes, and the one that refuses to close it.
- ContextWhat gets written down before any code exists.
- KickoffThe three prompts that write a project's context.
- KnowledgeGotchas already paid for, installed to match the stack.
- Token contractEvery colour name a component may use, and what it is for.
- Components24 items, each with a live preview and its source.