Provides Tenzir design system tokens and component specifications. Use when building UI components, styling with CSS/Tailwind, choosing colors, typography, spacing, or implementing buttons, inputs, tags/badges, toasts, and other Tenzir UI elements.
Provides Tenzir design system tokens and component specifications. Use when building UI components, styling with CSS/Tailwind, choosing colors, typography, spacing, or implementing buttons, inputs, tags/badges, toasts, and other Tenzir UI elements.
/plugin marketplace add tenzir/claude-plugins/plugin install changelog@tenzirThis skill inherits all available tools. When active, it can use any tool Claude has access to.
badge.mdborder-radius.mdbuttons.mdcheckbox.mdcolors.mddropdown.mdhyperlinks.mdinput-field.mdradio-button.mdsearch-input.mdsegmented-control.mdshadows.mdspacing.mdtab-bar.mdtag.mdtoast.mdtoggle-switch.mdtypography.mdThis skill provides Tenzir's brand and style guidelines for frontend development.
Tenzir's design system provides consistent styling across all Tenzir products.
When implementing frontend components, always reference the appropriate section:
| Aspect | Reference | Description |
|---|---|---|
| Typography | typography.md | Font families, sizes, weights, line heights |
| Colors | colors.md | Brand colors, semantic colors, neutrals |
| Spacing | spacing.md | Padding and margin scale |
| Shadows | shadows.md | Elevation and shadow styles |
| Border Radius | border-radius.md | Corner radius tokens (always 5px) |
| Buttons | buttons.md | All button styles (standard, delete, floating) |
| Dropdown | dropdown.md | Dropdown trigger with chevron |
| Hyperlinks | hyperlinks.md | Link styling with underline |
| Segmented Ctrl | segmented-control.md | Toggle between mutually exclusive options |
| Input Field | input-field.md | Text input with title and states |
| Search Input | search-input.md | Search field with icon and clear |
| Checkbox | checkbox.md | Square multi-select control |
| Radio Button | radio-button.md | Circular single-select control |
| Toggle Switch | toggle-switch.md | Binary on/off switch |
| Tag | tag.md | Colored labels for categorization |
| Badge | badge.md | Small uppercase status indicators |
| Tab Bar | tab-bar.md | Horizontal navigation tabs |
| Toast | toast.md | Transient notification messages |
text-sm, text-base)#0A54FF) and Green (#29E06C)neutral-800 (black) to neutral-50 (white)blue-500), main actionsneutral-250 border), alternative actionsWhen implementing the design system in CSS, use the --tnz- prefix for all custom properties:
:root {
/* Typography */
--tnz-font-sans: "Inter Variable", "Inter", system-ui, sans-serif;
--tnz-font-mono: "JetBrains Mono Variable", "JetBrains Mono", monospace;
/* Font Sizes */
--tnz-text-xxs: 0.625rem; /* 10px */
--tnz-text-xs: 0.75rem; /* 12px */
--tnz-text-sm: 0.875rem; /* 14px */
--tnz-text-base: 1rem; /* 16px */
--tnz-text-lg: 1.125rem; /* 18px */
--tnz-text-xl: 1.25rem; /* 20px */
--tnz-text-2xl: 1.5rem; /* 24px */
--tnz-text-3xl: 1.875rem; /* 30px */
--tnz-text-4xl: 2.25rem; /* 36px */
--tnz-text-5xl: 3rem; /* 48px */
/* Border Radius - 5px is the standard */
--tnz-radius: 5px;
/* Spacing Scale (base unit: 4px) */
--tnz-space-0: 0;
--tnz-space-0-5: 0.125rem; /* 2px */
--tnz-space-1: 0.25rem; /* 4px */
--tnz-space-1-5: 0.375rem; /* 6px */
--tnz-space-2: 0.5rem; /* 8px */
--tnz-space-3: 0.75rem; /* 12px */
--tnz-space-4: 1rem; /* 16px */
--tnz-space-5: 1.25rem; /* 20px */
--tnz-space-6: 1.5rem; /* 24px */
--tnz-space-7: 1.75rem; /* 28px */
--tnz-space-8: 2rem; /* 32px */
--tnz-space-10: 2.5rem; /* 40px */
--tnz-space-16: 4rem; /* 64px */
--tnz-space-20: 5rem; /* 80px */
/* Shadows */
--tnz-shadow-xs: 0px 8px 16px -8px #0e10171a, 0px 3px 6px -3px #0e10171a;
--tnz-shadow-s: 0px 8px 16px -8px #0e101733, 0px 3px 6px -3px #0e101733;
--tnz-shadow-m: 0px 10px 20px -8px #0e101733, 0px 4px 8px -6px #0e101733;
--tnz-shadow-l: 0px 20px 40px -16px #0e101733, 0px 8px 16px -8px #0e101733;
/* Transitions */
--tnz-transition-fast: 0.15s ease;
--tnz-transition-base: 0.2s ease;
--tnz-transition-slow: 0.3s ease;
/* Colors - see colors.md for full palette */
/* Primary Blue */
--tnz-primary-500: #0a54ff;
--tnz-primary-600: #0043e0;
/* ... etc */
/* Neutrals */
--tnz-neutral-50: #fdfdfe;
--tnz-neutral-100: #f7f8fa;
--tnz-neutral-200: #f0f1f5;
/* ... etc */
}
Important: Always use design tokens via CSS custom properties. Never hardcode values like font-family: 'Inter' or border-radius: 5px - use var(--tnz-font-sans) and var(--tnz-radius) instead.
Load the specific reference file when you need detailed specifications:
This skill should be used when the user asks to "create a slash command", "add a command", "write a custom command", "define command arguments", "use command frontmatter", "organize commands", "create command with file references", "interactive command", "use AskUserQuestion in command", or needs guidance on slash command structure, YAML frontmatter fields, dynamic arguments, bash execution in commands, user interaction patterns, or command development best practices for Claude Code.
This skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.
This skill should be used when the user asks to "create a hook", "add a PreToolUse/PostToolUse/Stop hook", "validate tool use", "implement prompt-based hooks", "use ${CLAUDE_PLUGIN_ROOT}", "set up event-driven automation", "block dangerous commands", or mentions hook events (PreToolUse, PostToolUse, Stop, SubagentStop, SessionStart, SessionEnd, UserPromptSubmit, PreCompact, Notification). Provides comprehensive guidance for creating and implementing Claude Code plugin hooks with focus on advanced prompt-based hooks API.