# Agents How coding agents read these docs, and the rules they follow when they generate Tempo UI. ## Overview Every page in these docs is also published as Markdown, so an agent reads the same guidance you do without parsing HTML. Point your agent at the docs, and it builds with the components, tokens, and guidelines described here. ## Give Your Agent the Docs ### Agent Prompt [Getting Started](/docs/introduction/getting-started#agent-prompt) has a prompt you can copy into your coding agent. It points the agent at the docs site, whose home page answers agents with the page index below. ### llms.txt [`/llms.txt`](/llms.txt) lists every page in sidebar order, with a link to its Markdown and its one-sentence description. Sidebar groups become headings, labelled sections such as Actions become subheadings, and nested topics are prefixed, as in `Content › Voice`. Start here when the agent should choose which pages to read. ### llms-full.txt [`/llms-full.txt`](/llms-full.txt) holds every page's Markdown in one file, in the same order. Each page starts after a `---` separator with a `Source:` line that gives its URL. Use it when the agent should load all of the guidance at once, such as at the start of a large task. ### Markdown Twins Append `.md` to any page path for its Markdown, such as `/docs/components/button.md`. The page URL also answers with Markdown when the request comes from: * A terminal client, such as curl, Wget, HTTPie, or xh. * A known AI agent or crawler user agent. * An `Accept` header that ranks `text/markdown` or `text/plain` at least as high as `text/html`. Search engine crawlers and link previews still receive HTML. Each Markdown response carries a canonical `Link` header that points to the HTML page. ```sh curl https://ds.tehq.dev/docs/components/button ``` ### What Changes in Markdown A twin keeps the page's text, headings, and tables, and turns interactive parts into plain text: * Each Do and Don't becomes a paragraph that starts with **Do:** or **Don't:**. The previews are illustrations, so the guidance is in the text. * Each live example becomes a `tsx` code block with its full source, importing from `@tempoxyz/ds`, followed by a link to the example file. * Component pages add a View source and API link to the module on GitHub, whose TSDoc documents every prop. * Every setup option on Getting Started gets its own heading, so the agent reads each framework and variable mode. * The Components overview grid becomes a list of links with descriptions. ### Copy a Page On wide screens, the actions under On this page include Copy page, which copies the page's Markdown, and View markdown, which opens the twin. Use them to paste one page into a conversation. ## Rules for Generating Tempo UI These rules are normative, and so are the Guidelines, Content, and Accessibility sections of every page. Treat Use, Don't, and Never as requirements. When a request conflicts with a guideline, follow the request and point out the conflict. ### Use Library Components First * Find the component in the [Components](/docs/components) overview before writing markup. Choosing a Component on that page separates similar components. * Import components from `@tempoxyz/ds` on web and `@tempoxyz/ds/mobile` in React Native. Import icons from `@tempoxyz/ds/icons` or `@tempoxyz/ds/mobile/icons`. * Don't rebuild a component the library has, and don't substitute a raw Base UI primitive or another component library for it. * Compose larger components from their named parts, such as `Dialog.Root` and `Dialog.Title`. ### Style With Tokens * Style your own markup with `style` and `variants` from `@tempoxyz/ds`, using tokens such as `foreground`, `background.surface`, `'6'`, and `copy.14`. Group the definitions in a `namespace styles` block. * Don't hardcode colors, spacing, type sizes, or radii. When no token fits, mark the literal with the `!custom` suffix, as in `'24rem !custom'`, and keep those rare. * Don't add another styling system, such as utility classes or a separate stylesheet, for UI built with the library. * Don't apply the library's `vars()` to make components work. They inherit variables already. Apply a scope only to override values or fix a color scheme. ### Use Only Documented APIs * Use only the props, parts, and values that a component page or its TSDoc documents. * Don't invent variants, sizes, or tokens. When you need one, build the piece locally in the app with `style`, and tell the person you're working with so they can propose it. The [FAQ](/docs/introduction/faq#how-do-i-request-a-component-variant-or-token) describes how. * Don't patch the installed package or target the class names it generates. ### Follow the Guidelines * Read a component's whole page before using it, not only its Examples. * Apply the foundations and patterns that fit the screen, such as [Payments](/docs/patterns/payments) for send and review flows and [Blockchain Values](/docs/patterns/blockchain-values) for addresses and amounts. * Keep native semantics. Use `Button` for actions and `Button.Link` for navigation, and give every control a visible `Field.Label`. * Give icon-only buttons an `aria-label`, keep focus outlines, and keep interactive content out of `Tooltip`. ### Write Copy to the Content Guidelines * Use sentence case, verb-first button labels, and the terms in the [Word List](/docs/foundations/content/word-list). * Format amounts with `Amount` and a `currency` or `symbol`, and addresses and hashes with `Hex`. Don't format them by hand. * Write errors that say how to fix the problem, as [Writing Style](/docs/foundations/content/writing-style) describes. ## Add Rules to Your Project Add instructions like these to your project's `AGENTS.md` or `CLAUDE.md`, so every agent session starts from the docs. ```md title="AGENTS.md" ## UI - Build UI with Tempo Design System: `@tempoxyz/ds` on web, `@tempoxyz/ds/mobile` in React Native. - Read https://ds.tehq.dev/llms.txt first. Before using a component, read its page as Markdown, such as https://ds.tehq.dev/docs/components/button.md. - Treat each page's Guidelines, Content, and Accessibility sections as requirements. - Style with `style` and TDS tokens. Don't hardcode colors or spacing. - Write interface copy with the Content foundations and the Word List. ``` ## Related * [Getting Started](/docs/introduction/getting-started) for setup and the agent prompt * [FAQ](/docs/introduction/faq) for common questions * [Components](/docs/components) for the component catalog * [Voice](/docs/foundations/content/voice) for how Tempo UI copy sounds