Application rules editor

Route: Library → Components → any component → Application Rules tab

The mental model is in application rules (concepts). This page covers the editor.

What you're editing

A ComponentRuleSet with three lists:

• Do — short imperative statements ("Use Primary for the most important action on the page.")
• Don't — what to avoid ("Don't stack two Primary buttons in the same view.")
• Notes — free-form context, edge cases, links to related components

Component-level (base) rules

The default editor scope is base — rules that apply to every variant of the component. Every entry shows:

• The rule text (click to edit inline)
• A × to remove

Add a rule with + Add do, + Add don't, or by typing in the Notes textarea.

Per-variant overrides

When a component has multiple variants (Button: primary | secondary | outline | ghost | link | destructive), each variant row in the detail page has its own Application Rules editor.

• A variant without custom rules inherits the base — the editor shows the base rules in a muted style with a "(from base)" hint.
• A variant with custom rules shows an override badge. The rules replace the base entirely for that variant (no merge).
• Click Reset to remove the override and inherit base again.

Writing rules that survive AI ingestion

Two conventions to follow:

1. Active voice. "Use Primary for the most important action" reads as a rule. "Primary buttons are typically used for the most important action" reads as trivia.
2. One rule per bullet. A bullet that says three things is a paragraph; it won't be applied as a rule.

See application rules (concepts) for examples.

How they appear in the export

In design-system.md, every component gets a section:

### Button

**Do**
- Use the most prominent variant available for the single most important action on the page.
- Place destructive buttons at the bottom-right of confirmation dialogs.

**Don't**
- Stack two Primary buttons in the same view.
- Use icon-only buttons without a `title` or visible label nearby.

**Notes**
- Loading state: use the same width as the resting state to avoid layout shift.

#### Button · destructive (override)

**Do**
- Pair destructive buttons with a confirmation dialog explaining the consequence.

**Don't**
- Use destructive buttons for actions that can be undone — use a regular variant with a toast undo instead.

Per-variant overrides render as their own sub-section.

Defaults

43 components ship with seeded application rules in src/principles/defaultComponentRules.ts. They're a starting point, not a constraint — edit, override, or replace any of them.