Guides
AI Agents & Skills
Help AI coding assistants write correct twblazor code with llms.txt, a Markdown copy of every docs page and Agent Skills for Claude Code.
Last updated
Overview
AI coding assistants often guess at a component library: they invent parameters, borrow another library's setup steps or write a theme by hand. twblazor publishes everything an assistant needs in the formats assistants read, so it can use the real components from the first try.
All of it is generated from these docs every time the site is built. Each component's parameters come straight from the library's own source, so an assistant only ever sees components and parameters that exist in the current release.
llms.txt
llms.txt is a plain text index written for language models. It sets out the rules for using twblazor, the setup steps and a link to the Markdown page of every component and guide.
| File | What it holds |
|---|---|
/llms.txt (opens in a new tab) |
The rules, the setup steps and a link to every page. Start here. |
/llms-full.txt (opens in a new tab) |
llms.txt followed by every page in full, for assistants that read one file. |
/button.md (opens in a new tab) |
Any docs page as Markdown: add .md to its address. Component pages list their examples, keyboard navigation, theme and every parameter. |
Point your assistant at llms.txt
Add these lines to the instructions file your assistant reads, such as CLAUDE.md, AGENTS.md, .github/copilot-instructions.md or a Cursor rule. Any assistant that can fetch a web page will then look things up instead of guessing.
## twblazor
This project uses the twblazor component library. Before writing or changing twblazor code, read
https://twblazor.com/llms.txt and the Markdown page of each component you use. Use only the parameters
those pages list, and never write Theme.cs by hand: generate it at https://twblazor.com/theme.Agent skills
A skill is a folder with a SKILL.md file and the reference pages it needs. The assistant reads only each skill's short description up front, and loads the rest when a task calls for it, so a skill adds detailed guidance without filling the context. Each twblazor skill bundles the Markdown pages it refers to, so it also works offline.
| Skill | What it covers | Download |
|---|---|---|
twblazor-components |
Writes Razor markup with twblazor components such as TwButton, TwTextfield, TwSelect, TwDataTable, TwDialog, toasts and TwChart, using only the parameters each component really has. Use whenever building or changing UI with twblazor, or when converting markup from another Blazor component library to twblazor. | .zip |
twblazor-localization |
Translates twblazor components and configures date and time formats and right to left layouts, using the 24 built-in languages, the app's own .resx files, options.Localization in AddTwBlazor, a custom ITwLocalizer and TwDirectionProvider. Use when localizing a twblazor app, rewording built-in component text, or supporting Arabic, Hebrew or other right to left languages. | .zip |
twblazor-setup |
Installs and sets up the twblazor Tailwind CSS component library in a Blazor Server or Blazor WebAssembly app, covering the NuGet package, App.razor links, imports, toast and dialog providers, Theme.cs, AddTwBlazor and the Tailwind build. Use when adding twblazor to a project, or when twblazor components render unstyled or throw on startup. | .zip |
twblazor-theming |
Creates and changes the Theme.cs that styles every twblazor component, using the twblazor Theme builder for brand colours, surfaces, rounding, shadows, default variants and the components to include, plus dark mode and per-instance Class overrides. Use when theming twblazor, changing its look, adding a component to the theme or fixing a missing component theme. | .zip |
Install the skills in Claude Code
Extract the zip into .claude/skills at the root of your project. Commit the folder and everyone working on the project gets the skills too. To use them in every project instead, extract it into ~/.claude/skills in your home folder.
macOS and Linux:
curl -L -o twblazor-skills.zip https://twblazor.com/skills/twblazor-skills.zip
mkdir -p .claude/skills
unzip -o twblazor-skills.zip -d .claude/skills
rm twblazor-skills.zipWindows PowerShell:
Invoke-WebRequest https://twblazor.com/skills/twblazor-skills.zip -OutFile twblazor-skills.zip
Expand-Archive twblazor-skills.zip -DestinationPath .claude/skills -Force
Remove-Item twblazor-skills.zipClaude Code finds the skills when a session starts and uses them whenever a task matches their descriptions, such as adding twblazor to a project or building a form. Run the same commands again after upgrading twblazor to pick up the new release.
Use the skills in the Claude apps
Download a single skill's zip from the table above and upload it in the skills section of Claude's settings. Upload each skill you want separately, since an upload holds one skill.
Other assistants
The skills use the open Agent Skills format: a folder holding a SKILL.md with a name and description. Assistants that support the format can read the same folders from their own skills directory. For an assistant that does not, use the llms.txt instructions above.
How they stay accurate
- The pages, the component list and the descriptions come from these docs and from
components.json, the same source as the sidebar. - Every parameter table is read from the
[Parameter]properties and XML documentation in the library's source. - The install command names the same version as the Get started guide, which moves with every release.
- The code samples are the same samples these pages render live, so they compile with the current release.