TENDUI / DOCUMENTATION

Build with a coding agent.

Give Codex, Claude Code and other tools practical TendUI project instructions.

Give your agent the right starting point.

TendUI works with coding agents just as it does with people: use the installed API, semantic HTML and your application's existing stack. Tell the agent whether you use plain HTML, Go's html/template, or Go with templ. HTMX is optional.

Using TendUI or contributing to it?

The instructions below are for your own application. To change the library or this website, use the repository instructions linked at the end of this page.

1. Add context to your project

Merge this section into AGENTS.md in your application root. Preserve your existing instructions and adapt the validation commands to your project. Installing a Go dependency does not install project instructions into your app.

## TendUI in this application

- Read go.mod (or the pinned CSS source) to identify the installed TendUI version.
  Do not upgrade it or guess component props/classes to complete a task.
- Prefer semantic HTML and native browser controls. Do not add Node/npm, a CSS
  build step, or client JavaScript solely to use TendUI.
- With Go, import github.com/Tend-Stack/TendUI/v2026 as package tendui.
  Mount tendui.AssetHandler() at tendui.AssetPath without StripPrefix and link
  tendui.StylesheetURL. CSS is embedded and ships inside the executable.
- With templ, use typed components from the /components package. Inspect the
  installed API before writing props. Edit .templ files, regenerate with the
  generator matching the application's templ dependency, and commit generated Go.
- For plain HTML or html/template, serve the pinned stylesheet as a local asset;
  keep existing escaping and server-side rendering. templ is optional.
- Applications own routes, validation, authentication, CSRF protection, sessions
  and persistence. Never copy demo handlers as production security logic.
- HTMX attributes alone do not execute requests. Add the optional runtime only
  when requested; keep native form/link fallbacks and correct fragment responses.
- Use documented --tendui-* tokens and data-theme="light" or "dark"; omit the
  theme attribute for system preference. Preserve labels, focus, keyboard access,
  responsive layout, error messages and reduced-motion behavior.
- Run the application's relevant tests and build. Check the page and stylesheet
  routes and the requested user flow; report checks performed and limitations.

Start from the Go and templ quickstart or HTML and CSS guide. Use the catalog to find a pattern, then check the source and props at your installed version; online examples may describe a newer release.

2. Connect your coding tool

Codex

Codex reads project AGENTS.md files. Keep the shared instructions in your project root and follow the official instruction-discovery guide for directory scope and overrides.

Claude Code

Add this import to a neighboring CLAUDE.md, preserving existing content. Put the import on its own line outside a code fence in the actual file:

@AGENTS.md

The documented import mechanism lets you maintain one shared policy, including in sessions that do not load AGENTS.md directly.

Other tools

Select this file in the tool's project-context settings or ask it explicitly to read it. Automatic discovery varies. Start a fresh session after setup and ask the agent to summarize the applicable instructions and installed TendUI version before editing.

Instruction files guide behavior. Tests, human review and tool permissions still matter; the files do not enforce permissions or guarantee correctness.

3. Give it a concrete task

Read our project instructions and installed TendUI API. Add a labeled settings form using our existing stack and server routes. Preserve native submission, light/dark themes and keyboard behavior. Show the changed files, run relevant tests, and explain anything you could not verify. Do not add dependencies.

Review the result in the browser, including keyboard focus, narrow screens and error states. Verify that the stylesheet loads and native interactions work with JavaScript disabled. If you intentionally enable HTMX, test both enhanced and ordinary requests.

Contributing to TendUI itself

Library agent instructions: components, semantic CSS, generated code, API compatibility and validation.
Website agent instructions: guide routes, shared header, pinned dependencies and deployment verification.
Application guidance in the repository: a Markdown version of this setup.

Both repositories include a CLAUDE.md import of their own AGENTS.md. AI-assisted contributions follow MIT + DCO contribution rules: a human reviews, tests and authorizes their own sign-off.