skills.rest
tenzir
tenzirOFFICIAL
Explore all skills by this author →
Website𝕏@tenzir_companyGitHub

styling-tenzir-ui

Provide Tenzir design system tokens and CSS component specifications for UI styling.

2|Updated Dec 3, 2025
Search Tags:#branding#frontend#design system#css#components#ui design#tailwind
One-click install
npx skills add https://github.com/tenzir/claude-plugins --skill styling-tenzir-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: styling-tenzir-ui
Source: https://github.com/tenzir/claude-plugins/tree/main/plugins/brand/skills/styling-tenzir-ui
Command: npx skills add https://github.com/tenzir/claude-plugins --skill styling-tenzir-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend developers often struggle to maintain design consistency across UI components, leading to fragmented user experiences and wasted time on style decisions. This Skill provides instant access to Tenzir's complete design system, ensuring every UI element adheres to brand guidelines without guesswork.

Core Features & Use Cases

  • Comprehensive Design Tokens: Access precise specifications for colors, typography, spacing, shadows, and border radii, ensuring visual harmony.
  • Component Blueprints: Get detailed styling and state specifications for common UI elements like buttons, inputs, tags, toasts, checkboxes, and more.
  • CSS Custom Properties: Implement the design system effortlessly using predefined CSS variables, compatible with CSS and Tailwind.
  • Use Case: You're building a new feature and need to implement a button, an input field, and a tag. Instead of guessing styles or searching through design files, you can use this Skill to instantly retrieve the exact CSS properties, sizes, and states for each component, ensuring pixel-perfect brand compliance.

Quick Start

Use the styling-tenzir-ui skill to get the CSS custom properties for Tenzir's primary blue color palette.

Frequently Asked Questions about styling-tenzir-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I maintain consistent UI styling across frontend components?▼

Design system consistency requires standardized tokens for colors, typography, and spacing. Tenzir's design system provides CSS custom properties with --tnz- prefix and component specifications, ensuring every button, input, and badge adheres to brand guidelines without manual style decisions.

What CSS custom properties does Tenzir's design system use?▼

Tenzir uses token-based design with CSS custom properties prefixed --tnz- for colors, typography, spacing, shadows, and border radii. These variables work seamlessly with CSS and Tailwind, enabling pixel-perfect implementation of the complete design system across all UI elements.

Can I use Tenzir's design system with Tailwind CSS?▼

Yes. Tenzir's design system tokens are compatible with both CSS and Tailwind. CSS custom properties integrate directly into your Tailwind workflow, allowing you to apply consistent colors, spacing, and component styles while maintaining brand compliance.

How do I style buttons, inputs, and badges consistently?▼

Tenzir provides detailed component blueprints with styling specifications and state definitions for buttons, inputs, tags, checkboxes, toasts, and dropdowns. Use the accompanying CSS snippets with design tokens to implement consistent, accessible components across your product.

What design specifications does Tenzir define for components?▼

Tenzir specifies standard 5px border radii, accessible focus rings, and complete styling for interactive elements. Component blueprints include colors, typography, spacing, shadows, and state variations, eliminating guesswork when building UI elements.

Do I need design files to implement Tenzir's UI components?▼

No. This Skill provides instant access to complete design specifications and CSS snippets, removing the need to reference separate design files. Developers get precise token values and component styling directly, enabling rapid, consistent implementation.

Related Skills

Explore More Design & Creative Skills→
RaheesAhmedRaheesAhmed
66

styling-patterns

Guide developers in implementing scalable styling systems with Tailwind CSS, vanilla CSS, or CSS-in-JS.

Community
Intermediate
roanbrasilroanbrasil
5

design-systems

Builds W3C-compliant design token systems and accessible component libraries with Storybook documentation.

Community
Advanced
chris78reychris78rey

design-system-components

Generate HTML/Tailwind UI components and design tokens with CSS variables and reusable patterns.

Community
Basic
caiokfcaiokf

conventions-css

Enforce CSS conventions with custom properties, scoping, and design tokens.

Community
Basic