How does this skill handle CSS variables?

It enforces the use of the --tnz- prefix for all custom properties, ensuring that values like spacing, color, and border-radius are never hardcoded.

What UI components are covered by this skill?

It includes specifications for buttons, inputs, tags, badges, dropdowns, search bars, toggle switches, and toast notifications.

Which fonts are included in the Tenzir design system?

The system uses Inter as the corporate sans-serif font for UI text and JetBrains Mono for code and monospaced elements.

What is the Tenzir UI skill for Claude Code?

It is a specialized capability that provides Claude with Tenzir's design system tokens, CSS variables, and component specifications for consistent frontend styling.

Can I use this skill with Tailwind CSS?

Yes, the skill provides token values that map easily to Tailwind configurations, including specific spacing scales and color palettes used by Tenzir.

Tenzir UI Design System

Name: Tenzir UI Design System
Author: tenzir

bytenzir

•

디자인 도구

Implements Tenzir's standardized design system tokens and component specifications for consistent, brand-aligned frontend development.

소개

This skill equips Claude with the complete Tenzir design language, enabling the precise implementation of UI components like buttons, inputs, and navigation elements. It provides instant access to semantic color palettes, standardized typography, a 4px-based spacing scale, and specific CSS custom properties using the --tnz- prefix. By leveraging these design tokens, developers can ensure that any code generated aligns perfectly with Tenzir’s brand identity, promoting maintainable CSS and eliminating the need for hardcoded values in UI development.

주요 기능

Standardized Tenzir typography and JetBrains Mono code fonts
Consistent 4px spacing units and 5px border radius tokens
Enforced CSS Custom Property naming conventions with the --tnz prefix
Comprehensive semantic color tokens and 11-shade neutral grey scale
Pre-defined component specs for buttons, inputs, tags, and toasts
1 GitHub stars

사용 사례

Refactoring legacy CSS to use standardized design tokens
Building accessible and brand-consistent Tenzir web interfaces
Prototyping new UI components that match the existing Tenzir ecosystem

소개

주요 기능

Standardized Tenzir typography and JetBrains Mono code fonts
Consistent 4px spacing units and 5px border radius tokens
Enforced CSS Custom Property naming conventions with the --tnz prefix
Comprehensive semantic color tokens and 11-shade neutral grey scale
Pre-defined component specs for buttons, inputs, tags, and toasts
1 GitHub stars

사용 사례

Refactoring legacy CSS to use standardized design tokens
Building accessible and brand-consistent Tenzir web interfaces
Prototyping new UI components that match the existing Tenzir ecosystem