Get Started

Keep your AI on-system

This registry ships a design-system rule for AI agents. Install it once and your assistant — Cursor, Claude, Copilot, Windsurf, Codex — keeps building and editing UI with these components and tokens: reaching for existing components instead of reinventing them, styling with semantic tokens instead of hardcoded colors, and re-skinning only through --brand. Every future change stays on-system without you having to re-explain the rules.

AI-native
1

Add the rule (Cursor — one command)

Drops the rule into .cursor/rules/byronwade-ui.mdc. Cursor auto-applies it on every edit.

npx shadcn@latest add @byronwade/design-rules
2

Using a different AI tool? Point it at the same rule

The rule's content lives at https://ui.byronwade.com/r/design-rules.json. Run the command above (or copy the file's contents) into your agent's instructions file:

  • Cursor — .cursor/rules/byronwade-ui.mdc (installed automatically above)
  • Claude Code — reference it from CLAUDE.md
  • GitHub Copilot — .github/copilot-instructions.md
  • Codex / AGENTS-aware tools — AGENTS.md
  • Windsurf — .windsurfrules
Browse all componentsBack to Theming