@toolr/ui-design

Shared UI design system for toolr applications. Provides components, design tokens, and a Tailwind preset.

Setup

// package.json — path is relative to your app
{ "@toolr/ui-design": "file:../../shared/ui-design" }

/* app CSS entry point */
@import "@toolr/ui-design/tokens";

Exports

| Path | Content | |------|---------| | @toolr/ui-design | All components, hooks, types, utilities | | @toolr/ui-design/tokens | CSS design tokens (semantic + primitives + keyframes) | | @toolr/ui-design/content | Info panel primitives | | @toolr/ui-design/diagrams | Diagram utilities |

Always import components from the barrel export (@toolr/ui-design), not from deep paths.

Claude Code Skills

Two skills ship with this package for Claude Code agents:

ui-playground — Building the design system

For working on components and playground pages inside this repo. Triggers when editing files in components/ui/, playground/src/pages/, or index.ts.

ui-consumer — Using the design system in apps

For consuming apps that import @toolr/ui-design. Covers setup, import patterns, FormColor, cn(), icons, tooltips, modals, sections, tokens, and common mistakes.

To make ui-consumer available in a consuming app, symlink it into the app's .shared/.claude/skills/ directory:

# From the monorepo root (adjust relative path as needed)
ln -s ../../../../shared/ui-design/.claude/skills/ui-consumer <app>/.shared/.claude/skills/ui-consumer

Currently symlinked in: configr (configr/.shared/.claude/skills/ui-consumer).

Playground

Interactive component playground with live preview, prop controls, and code generation.

# Start (requires tmux session toolr-shared-uidesign)
cd playground && npm run dev -- --port 6100