Toolbox

Promptable docs template

Write one component page that people and agents both read reliably: 17 fixed sections, 25 writing rules and a linter.

What it is

Field Guide 04: a component documentation template with rules first, a frontmatter schema and 25 checkable writing rules. The kit adds a linter, a generator that writes the API table from the component contract and fails CI on drift, a script that extracts every example for the compiler, an llms.txt and ready-made AGENTS.md, Claude Code, Copilot and Cursor instruction files.

When to use

When agents generate UI from your docs and get props, variants or accessibility wrong, or when you are adding llms.txt or an MCP server and need pages worth serving.

How to use

Copy component-doc.template.md for one component
Generate its API section from the contract with generate-api-table.mjs
Run lint-component-doc.mjs and fix every error
Extract the examples with extract-doc-code.mjs and compile them in CI
Publish the .md twin, list it in llms.txt and paste the AGENTS.md snippet into consuming repos

Before you start

Prerequisites and when to skip this.

Prerequisites

Component docs you control as Markdown or MDX
A component contract or typed props to generate the API table from

When NOT to use this

Docs locked inside a hosted tool with no Markdown export
A handful of internal components with one consuming team

Consider instead

You cannot restructure the docs yet: Publish an llms.txt and the AGENTS.md snippet first; they help with any docs

Downloads

Guide (PDF)Full kit (ZIP): template, linter, llms.txt, agent files

Component contract checklistAI Prompt Library for Design SystemsDesign systems in the AI era

The share link includes source tracking so LinkedIn traffic stays measurable in analytics.

Share on LinkedIn