Agent skill
boardkit-design-system
Boardkit UI design system: compact density, spacing, typography, tokens, components. Use when creating/modifying UI components, adjusting spacing, icons, or themes.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/design/boardkit-design-system-kevinbarfleur-boardkit
SKILL.md
Boardkit Design System
Principles
- Compact density - Tool-like interface, not consumer app
- UnoCSS tokens - No hardcoded pixels
- Lucide icons - No other icon libraries
- Playground validation - All components showcased
Spacing Scale
| Token | Value | Usage |
|---|---|---|
gap-1 |
4px | Tight spacing |
gap-1.5 |
6px | Default gap |
gap-2 |
8px | Section gap |
p-1.5 |
6px | Tight padding |
p-2 |
8px | Default padding |
p-2.5 |
10px | Comfortable padding |
p-3 |
12px | Large padding |
Heights
| Token | Value | Usage |
|---|---|---|
h-7 |
28px | Small buttons/inputs |
h-8 |
32px | Default buttons/inputs |
h-9 |
36px | Large buttons/inputs |
Typography
--font-family: system-ui, -apple-system, sans-serif;
| Token | Size | Usage |
|---|---|---|
text-xs |
11px | Labels, hints |
text-sm |
13px | Secondary text |
text-base |
14px | Default |
font-normal |
400 | Body text |
font-medium |
500 | Labels |
font-semibold |
600 | Headings |
Colors
| Token | Usage |
|---|---|
primary |
Actions, focus rings |
background |
Surface backgrounds |
foreground |
Text color |
muted |
Disabled, secondary |
destructive |
Delete, danger |
accent |
Hover states |
border |
Borders, dividers |
Components Library (28)
Form
BkButton, BkIconButton, BkInput, BkTextarea, BkCheckbox, BkToggle, BkSelect, BkButtonGroup, BkFormRow, BkFormSection, BkDropdown
Canvas
BkToolbar, BkToolButton, BkColorPicker, BkSlider, SelectionHandles
Layout
WidgetFrame, BkModal, BkDivider, BkEditableText, BkTooltip
Data
BkDataConnectionDialog, BkDataSourcePicker, BkHistoryList
Context
BkContextMenu, BkIcon, BkMenu
Command Palette
BkCommandDialog, BkCommandInput, BkCommandList, BkCommandGroup, BkCommandItem, BkCommandEmpty
Settings
BkSettingsPanel, BkSettingsSection, BkSettingsRow, BkPreferenceToggle, BkConfigForm
Icons (Lucide)
<BkIcon icon="plus" :size="16" />
Sizes: 12, 14, 16, 18, 20
VERIFY existence before using:
# Check if icon exists
curl -I https://lucide.dev/icons/{icon-name}
Common mistakes:
code-2→ usebraceslist-check→ uselist-todo
Button Variants
<BkButton variant="default">Default</BkButton>
<BkButton variant="primary">Primary</BkButton>
<BkButton variant="ghost">Ghost</BkButton>
<BkButton variant="destructive">Delete</BkButton>
<BkButton size="sm">Small</BkButton>
<BkButton size="lg">Large</BkButton>
Key Files
| Purpose | Path |
|---|---|
| Complete spec | packages/ui/DESIGN_SYSTEM.md |
| Components | packages/ui/src/components/ |
| Tokens | packages/ui/uno.config.ts |
| CSS vars | apps/web/src/styles/globals.css |
| Playground | apps/web/src/pages/Playground.vue |
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?