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

•

Design Tools

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.

Key Features

01Standardized Tenzir typography and JetBrains Mono code fonts

02Consistent 4px spacing units and 5px border radius tokens

03Enforced CSS Custom Property naming conventions with the --tnz prefix

04Comprehensive semantic color tokens and 11-shade neutral grey scale

05Pre-defined component specs for buttons, inputs, tags, and toasts

061 GitHub stars

Use Cases

01Refactoring legacy CSS to use standardized design tokens

02Building accessible and brand-consistent Tenzir web interfaces

03Prototyping new UI components that match the existing Tenzir ecosystem

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add tenzir/claude-plugins styling-tenzir-ui

For use in Claude.ai and ChatGPT

Download Skill