Rules for agents

A props table says what a component accepts. These rules say what holds across all of them. They also open llms.txt, so an agent that reads the index reads these first.

View as Markdown

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 explains the Markdown twins, llms.txt and the prompts.
• Building a component has the prompt for adding a component to the system.