Using with AI agents

How to point an AI coding agent at Tidal docs — without cloning the repo.

If you have the repo

Two files in the repo root are mandatory reading for any agent working on Tidal code:

  • AGENTS.mdDecision tables for which component to use, plus a forwarded summary of DESIGN.md §0–§8. Claude Code reads this automatically on startup.
  • DESIGN.mdThe full design rubric — token taxonomy, forbidden patterns, composition rules, and the §10 pre-build checklist. Required before writing any UI code.
  • ux_patterns_researched.mdResearched layout patterns and UX decisions. Reference this when making structural layout choices.

Claude Code: AGENTS.md is auto-read on startup. No extra steps.

Cursor / other agents: Paste the contents of DESIGN.md into your agent context, or add a .cursorrules file that tells the agent to read it (see below).

Remote usage (no clone needed)

The docs site exposes machine-readable endpoints. Point your agent at these instead of scraping HTML:

  • /llms-full.txtAll component docs + DESIGN.md + FIGMA_SYNC.md in one file. Best single-URL context for agents.
  • /llms.txtManifest of every doc page with one-line descriptions. Use this to let the agent fetch individual pages selectively.
  • /design.mdDESIGN.md alone — token taxonomy, forbidden patterns, composition rules.

Add this line to your agent's system prompt or context file:

Read https://tidal-design-system-docs.vercel.app/llms-full.txt before building any UI with Tidal components.

Add to your project for agent access

Drop one of these files in your project root so agents pick up Tidal context automatically, without cloning the design system repo.

CLAUDE.md

Claude Code reads CLAUDE.md from the project root on startup.

# UI — Tidal Design System

This project uses the Tidal Design System for all UI.

Before building any UI:
1. Read https://tidal-design-system-docs.vercel.app/llms-full.txt — all component docs and design rules.
2. Never inline hex colors. Always use Tidal semantic tokens (CSS vars or Tailwind utilities).
3. Never write `dark:` variants in components — fix the token if a dark variant is missing.
4. Default to the calmest variant. Escalate only with intent.
5. If the brief is underspecified, ask for clarity before writing code.

.cursorrules

Cursor and compatible agents read .cursorrules as standing instructions.

# Tidal Design System

Read https://tidal-design-system-docs.vercel.app/llms-full.txt before writing any UI code.

Rules:
- Use @tidal-ds/react components. Don't hand-build what the library already ships.
- Use semantic token CSS vars (e.g. var(--primary)) or Tailwind utilities. No raw hex.
- Follow the variant x tone API shape. One Primary action per page.
- No dark: in component classes. Token-level fix only.
- Ask for clarity before building underspecified screens (see DESIGN.md §10).

Prompt templates

These templates give agents enough context to work without guessing. Fill in the bracketed parts.

Build a new page

Build a [page type, e.g. "user settings"] page using the Tidal design system.

Context:
- Read https://tidal-design-system-docs.vercel.app/llms-full.txt first.
- Data: [describe the data shown — e.g. "user profile fields: name, email, avatar"]
- States: [loading / empty / error / populated]
- Actions: [primary action, secondary actions, destructive actions if any]
- Layout: [sidebar + main / full-width / two-column / etc.]

Follow DESIGN.md §10: if anything is underspecified, ask before writing code.

Add a feature to an existing page

Add [feature, e.g. "a filter panel"] to [page/component].

Context:
- Read https://tidal-design-system-docs.vercel.app/llms-full.txt first.
- Existing components in scope: [list relevant components already on the page]
- New components needed: [your best guess — the agent should verify against /llms.txt]
- Interaction: [how the feature is triggered, what it controls, any states]

Don't invent new components if Tidal already ships one that fits.

Reminder: Per DESIGN.md §10, an agent should ask for clarity when a brief is underspecified — not silently fill in gaps. If your agent jumps straight to code without asking, your prompt is missing key constraints.