# Using it with Claude and Cursor The brain is a folder an agent reads before it builds: the laws, every part’s rules, two skills and a verify tool that checks its work. Guide · Free · https://tactileui.dev/docs/agents ## What an agent gets Left alone, a coding agent builds generic UI: a blue button, a gradient, a card inside a card. The brain is the part of the kit written for it. It ships with the Pass, next to `kit.css`: - **rules.md**: The ten laws and how to work - **INVENTORY.md**: Every part, its markup, its use, its rules file - **foundations/**: Materials, light, colour, printing, grid, states, motion, voice, anti-patterns, recipes - **parts/**: One rules file per part - **skills/**: Building with the kit · reviewing against it - **tools/verify.mjs**: Checks a page against the laws [See every file in the brain](https://tactileui.dev/kit#brain), by name; the contents come with the Pass. ## Set it up **Claude Code.** First copy the complete kit as described in [Installation](https://tactileui.dev/docs/installation#the-kit); the brain is already in `kit/brain/`. From your project root, create the skills directory and copy the two skill folders into it. The following commands use a POSIX shell; on Windows, create the directory and copy those folders with PowerShell or Explorer. The skills are plain `SKILL.md` files with a name and a description, so Claude picks them up when a task matches. ``` mkdir -p .claude/skills cp -r kit/brain/skills/building-with-tactile-ui .claude/skills/ cp -r kit/brain/skills/reviewing-against-tactile-ui .claude/skills/ ``` **Cursor, or any other agent.** Point a project rule at the brain, so every request starts from it: ``` Before building UI, read kit/brain/rules.md and kit/brain/INVENTORY.md. Use only parts from the inventory. For each part you use, read kit/brain/parts/.rules.md. When done, run node kit/brain/tools/verify.mjs and fix every violation. ``` ## The two skills building-with-tactile-ui Ten steps from reading the laws to a verified page: pick a composition recipe, map every need to a part, read each part’s rules, decide the one contrast key per surface before anything else, write copy in the kit’s voice, check aluminium and graphite and 390px, run verify. reviewing-against-tactile-ui A review of a finished screen: verify first, then every anti-pattern, then each part’s rules, every finish and 390px, then every highlight and shadow against the lamp. Findings come back ordered by severity, each with the element and the fix. ## The verify tool A dependency-free Node script. It reads the markup and prints one line per violation, exiting 1 if there are any, so an agent can run it, read the lines and fix them, and so can CI. This is its real output on a deliberately broken draft, then on a fixed page: ``` $ node kit/brain/tools/verify.mjs draft.html draft.html: [finish] no finish script in that follows prefers-color-scheme (see foundations/materials-and-finishes.md) draft.html: [hue] .hero h1 uses #7c3aed, a purple/violet accent draft.html: [contrast-key] 2 primary keys on one surface (
); keep one draft.html: [label] has no label draft.html: [ghost] data-ghost "88" is 2 wide but the value "02:52" is 5 $ node kit/brain/tools/verify.mjs page.html ok: 1 page(s), no violations ``` It checks what source can show: colour literals outside displays, purple and orange hues, contrast keys per surface, labels on every control, display ghost widths and the finish script. `--contrast` prints the printing contrast of aluminium and graphite. It is not the eyes: the review skill still asks the agent to look. ## Objects and blocks Every object and block comes with two prompts: one that rebuilds it exactly, down to the tokens, and one that teaches its technique for a design of your own. For an iOS, Android, React Native or Flutter app there is a third that ports it. All three are on the piece’s page in the lab, under Prompt; the first two travel in its package. The Pass opens them for every piece; for a free piece, signing in is enough. ## Prompts to try - Build a settings page for a home battery with the Tactile UI Kit. Follow the building-with-tactile-ui skill and run verify before you finish. - Review app/billing.html against Tactile UI. List findings by severity with the fix for each. - Turn this pricing section into Tactile UI: one contrast key per plan panel, readouts for the figures, a graphite band for the call to action.