k8ordo
  • UI
  • Form
  • State
  • Router
  • Static
  • Server
Switch to dark mode
  • Get Started
  • Theming
  • i18n
  • Components
  • Hooks
  • Helpers
  • AI
Open navigation
AI
  • AI Chat
  • Generative UI
  • AI Agents
k8ordo

React libraries that use Baseline features without holding back.

Packages
  • @k8ordo/ui
  • @k8ordo/form
  • @k8ordo/state
  • @k8ordo/router
  • @k8ordo/static
  • @k8ordo/server
UI
  • Get Started
  • Theming
  • i18n
  • Components
  • Hooks
  • Helpers
  • AI Chat
  • Generative UI
  • AI Agents
  • Storybook
Resources
  • GitHub
  • npm

© 2026 k8o — MIT License

Typeset in Noto Sans JP & M PLUS 2

AI

AI
  • AI Chat
  • Generative UI
  • AI Agents

AI Agents

k8ordo UI ships surfaces meant for AI coding agents: the design guide, the component reference, the tokens and the props — each generated from the implementation.

Point your agent at the docs

The docs ship inside the npm package, so an agent always reads the version you installed. Paste this into your project’s CLAUDE.md / AGENTS.md and the setup is done.

Published surfaces

Each is available both inside the package (node_modules) and from this site.

docs/GUIDE.md
The design guide — the entry point
docs/references/*.md
Reference for components, hooks and helpers
llms.txt
Documentation index for LLMs
design.md
Design token spec (generated from CSS)
@k8ordo/ui/props.json
Props of every component (generated from the types)
https://main--687a213c85e2e4589d8db1bb.chromatic.com/mcp
MCP endpoint of the published Storybook

Query Storybook over MCP

So an agent looks up real stories and rendered props instead of recalling them. Add it to your MCP client config.

What is generated

Props come from the component types and tokens from the CSS. CI fails when either drifts from the implementation, so the docs cannot quietly rot.

Use `@k8ordo/ui` for UI. Before writing or changing UI, read
`node_modules/@k8ordo/ui/docs/GUIDE.md`, then follow only the
`docs/references/*.md` links it lists that the task actually needs.
Colors, spacing, radii and font weights go through semantic tokens —
never raw values such as `bg-teal-500` or `font-semibold`.
Look up component props in `docs/references/components.md` instead of
recalling them; a component that is not listed there does not exist.
{
  "mcpServers": {
    "k8ordo": {
      "type": "http",
      "url": "https://main--687a213c85e2e4589d8db1bb.chromatic.com/mcp"
    }
  }
}