Docs for LLMs

Coding assistants read these docs badly when they scrape HTML: the live examples are rendered custom elements, the source sits behind a “Show code” toggle, and the navigation chrome comes along for the ride.

So every page also exists as plain Markdown, generated from the same source the page itself renders. Examples become fenced code blocks; nothing else is lost.

One page

Append .md to any docs URL:

https://design.nanatec.co.ke/components/button.md
https://design.nanatec.co.ke/guides/theming.md

Every page carries a Copy as Markdown button under its title, alongside View .md and Download — pick whichever fits how you work.

The whole library

File	What it is	Use it when
/llms.txt	An llmstxt.org index: the install snippet plus a titled, described link to every page’s Markdown.	The assistant can fetch URLs and should pull only the pages it needs.
/llms-full.txt	Every page concatenated into one Markdown document.	You want the whole design system in context, or you’re seeding a retrieval index in a single request.

Which one?

Start with llms.txt. It costs a few hundred tokens and lets the model choose what to read, whereas llms-full.txt spends the budget up front — worth it only when the assistant can’t fetch URLs on its own.

Recipes

Point an assistant at one component

Read https://design.nanatec.co.ke/components/combobox.md
and build me a country picker with async filtering.

Give a CLI agent the whole library

curl -sL https://design.nanatec.co.ke/llms-full.txt -o nana-ui.md

Then reference nana-ui.md in your prompt, or drop it where your agent picks up project context.

Vendor only the components you use

for c in button input dialog table; do
  curl -sL "https://design.nanatec.co.ke/components/$c.md" -o "docs/nana-$c.md"
done

• Directorydocs

  • nana-button.md
  • nana-input.md
  • nana-dialog.md
  • nana-table.md
• Directorysrc/

  • …
• package.json

Checking these into the repo keeps the guidance versioned alongside your code.

Pin your version

The Markdown always reflects the latest release. If you pin an older @nana-tec/ui-components, vendor the files rather than fetching at runtime — otherwise an assistant will happily suggest APIs your version doesn’t have.

What the Markdown contains

For each page: the title, a source link, the description, and — where the frontmatter declares them — lifecycle status and the version the component landed in. Then the body, with every example inlined as an html code block, so an assistant sees the exact markup the page demonstrates.

Finding things quickly

The sidebar filter (press /) narrows the navigation as you type; matching a group name like “forms” reveals that whole section. For full-text search across page bodies, press Ctrl / ⌘ + K — and the filter’s empty state links straight to it.