# Rules for agents

> The constraints every component follows that a props table cannot express. Agents should read these before writing UI with the design system.

1. I9kInput names its visual scale prop `uiSize`, not `size`, so the native HTML `size` attribute stays available on the underlying input.
2. Every component owns its appearance in `<style scoped>` and must not rely on global classes for its look.
3. Components declare component-local custom properties on their root class and redefine them per size modifier, rather than consuming raw brand tokens for sizing.
4. Sizes and tones come from the shared `I9kComponentSize` and `I9kTone` types. Do not redeclare those string unions per component.
5. I9kButton renders a `<button>`, an `<a>`, or a caller-supplied component: pass `to` or `href` for a link, and `link-component="RouterLink"` in Vue Router apps.
6. I9kIcon renders from the local `src/icons/paths.json` set. Add new icons to that file rather than inlining SVG in a component.
7. Components emit legacy classes alongside their `i9k-` ones while the website migration is in progress. Do not remove a legacy selector or prop until its migration ledger row is complete.
8. Import the stylesheet once, at the application entry: `@9klabs/design/style.css`. It is the only CSS a consumer needs.
9. Any visual change needs checking in light and dark themes and in both LTR and RTL directions.

## Where to go next

- [Working with AI agents](https://design.the9klabs.com/getting-started/ai-agents.md) explains the Markdown twins, `llms.txt` and
  the prompts.
- [Building a component](https://design.the9klabs.com/guides/building-a-component.md) has the prompt for adding a component to the
  system.