AI agents

What to give an agent

Point the agent at one URL and it can find everything else:

https://tessinaui.com/llms.txt

That file opens with the house rules an agent most often gets wrong from training data — the package name, that headless behaviour comes from Base UI and the polymorphic prop is render (an element, not a boolean), that Tailwind v4 tokens live in @theme and there is no tailwind.config.js to edit, that Button defaults to type="button", and that icon-only controls require an accessible name. It then indexes every documentation page with its description and its Markdown URL.

Every surface on this page is plain HTTP with no key, no account and no client library. An agent that can fetch a URL can read all of it.

The machine-readable surfaces

llms.txt — the index

https://tessinaui.com/llms.txt

The preamble plus a linked, described table of contents grouped by section: Start here, Guides, Components, Templates. Around 36 KB — small enough to sit in context for a whole session.

Use it when the agent needs to know what exists and then fetch only the two or three pages a task actually touches.

llms-full.txt — everything at once

https://tessinaui.com/llms-full.txt

Every page concatenated into one document. This is roughly 6 MB, so it is meant for indexing, embedding or grep — not for pasting into a prompt. Prefer llms.txt plus targeted page fetches for interactive work.

The Markdown twin of every page

Append .md to any documentation URL and you get that page as Markdown, served as text/markdown, with the same preamble of house rules at the top:

https://tessinaui.com/docs/components/button.md
https://tessinaui.com/docs/getting-started/installation.md
https://tessinaui.com/docs/guides/responsive/02-mobile-first-doctrine.md

The twin is generated from the same source as the rendered page, so it cannot drift. Live previews are expanded into fenced code blocks of their real source rather than disappearing, which is the part an agent needs.

Example source as JSON

Every example rendered in a preview is also available on its own:

https://tessinaui.com/code/button-demo.json

The response is { "code": "...", "html": "..." } — code is the raw TSX, html is the syntax-highlighted rendering. The name is the example's name as it appears in the preview, so carousel-demo, select-sizes and so on.

The responsive guides

The guides under /docs/guides/responsive/ are the canonical, versioned reasoning behind the layout rules, and several of them are deliberately stricter than common practice. They matter more than usual for an agent, which will otherwise fall back on general web knowledge that this library rejects on measured grounds. They carry .md twins like every other page:

https://tessinaui.com/docs/guides/responsive/00-index.md

What ships inside the package

The @tessinaui/ui package publishes more than dist. Its files list also carries:

• knowledge/ — the same responsive, component, UX-pattern, app-composition and QA corpus that the guides are generated from, as plain Markdown next to your node_modules. knowledge/00-INDEX.md is the entry point.
• COMPONENTS.md — the component inventory.
• AGENTS.md — the instructions an agent should read before editing.
• .claude/skills/tessina-design/ — a skill describing the responsive and adaptive rules: breakpoints, container queries, touch targets, mobile-first doctrine and the adaptive pattern catalogue.

An agent working in a project that already has the package installed can read these straight off disk, with no network access at all.

Component registry

Every component is published as a registry item, which is what lets a CLI or an editor integration install it — source, dependencies and transitive component dependencies — without copy-paste.

Register it

Add the registry to your project's components.json. The namespace must be @tessina — a component's dependencies on its siblings are recorded with that prefix, so a different name leaves them unresolvable:

{
  "registries": {
    "@tessina": "https://tessinaui.com/r/{name}.json"
  }
}

Then install any component by name. Its dependencies come with it:

npx shadcn@latest add @tessina/button

That writes the component, the components it composes from, and the lib helpers they import, and merges the base item into the app's Tailwind stylesheet: the tokens, the --color-* theme map, the touch variants and the utilities the source is written against.

When the app's stylesheet already maps --color-primary and the other colours to variables of its own, as a project set up with the CLI's init does, name base in the first install. The CLI replaces an existing map only for an item named on the command line, never for a dependency:

npx shadcn@latest add @tessina/base @tessina/button

Give an agent direct access

An MCP server lets an agent browse and install from the registry itself, rather than being told what exists. The registry above is all the configuration it needs:

npx shadcn@latest mcp init --client claude

{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": ["-y", "shadcn@latest", "mcp"]
    }
  }
}

Use --client cursor for Cursor, which writes the equivalent into .cursor/mcp.json. With that in place an agent can search the registry, read an item's source before using it, and install it — no separate documentation step.

Themes

A theme made in the theme creator is a token: the value of the preset parameter on any share link. There is no account and no theme database — the token carries the colours, fonts, radius, spacing and shadows, so a link is the whole theme and an agent's first job is to read the token out of the URL somebody gave it.

Three files are built from a token on request:

A token that is not a theme answers 404 — the reader is strict, so a truncated or hand-edited token is not guessed at. Ask for the share link again.

Apply one

Themes install like a component, from a second namespace whose item name is the token:

{
  "registries": {
    "@tessina": "https://tessinaui.com/r/{name}.json",
    "@tessina-themes": "https://tessinaui.com/r/themes/{name}.json"
  }
}

npx shadcn@latest add @tessina-themes/YOUR_TOKEN

The full .json URL works the same way and needs no components.json entry at all, which is the shorter path for a one-off. Either writes the variables into the app's Tailwind stylesheet; when the theme picks a family that has to be loaded, the item says which, and the font markup comes from the editor's Fonts tab.

Without a CLI: fetch the .css file and replace the theme block in the app's globals.css.

Themes are deliberately not listable — they are not in the registry index, so searching will not turn one up. A token always comes from a person or a link. The editor's Export dialog has an Agents tab that hands over all of the above as one prompt.

Learnings as tools

The package ships a small MCP server that serves this library's accumulated learnings — the traps, the mechanism behind bugs already fixed, and the approaches that were tried and rejected. It reads the corpus that shipped with your installed version, needs no network, and has no dependencies of its own.

{
  "mcpServers": {
    "tessina-learnings": {
      "command": "npx",
      "args": ["-y", "tessina-learnings"]
    }
  }
}

Once it is installed in your project, ./node_modules/.bin/tessina-learnings is the same server if you would rather point at it directly.

It exposes four tools:

A component with nothing recorded says so explicitly. That means nothing non-obvious has been written down about it — not that it has no traps.

A starting prompt

Read https://tessinaui.com/llms.txt first — it carries house rules that override
prior knowledge about this library, and an index of every page with a .md URL.
Fetch the .md twin of only the pages the task needs. Before laying out a screen,
read /docs/guides/responsive/00-index.md.