skills.rest
TechsioCZ
TechsioCZOFFICIAL
Explore all skills by this author →
GitHub

tailwind-token-authoring

Author and validate Tailwind v4 UI kit tokens with validator scripts.

2|Updated Dec 2, 2024
Search Tags:#validation#css#tailwind#tokens#design-system#token-authoring
One-click install
npx skills add https://github.com/TechsioCZ/new-engine --skill tailwind-token-authoring
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-token-authoring
Source: https://github.com/TechsioCZ/new-engine/tree/main/libs/ui/skills/tailwind-token-authoring
Command: npx skills add https://github.com/TechsioCZ/new-engine --skill tailwind-token-authoring

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill guides teams to systematically author and validate Tailwind v4 tokens for UI kits, reducing drift between design tokens and implementation.

Core Features & Use Cases

  • Token provisioning for theme variables and component tokens using @theme static layers.
  • Validation patterns and best practices for naming, mapping, and deriving tokens.
  • Use Case: Align design tokens with frontend code across libs/ui to ensure consistent styling and theming.

Quick Start

Update component tokens in the source CSS and run the validator scripts to ensure semantic correctness.

Frequently Asked Questions about tailwind-token-authoring

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

FAQPage Schema
How do I author and validate Tailwind v4 tokens for a UI kit?▼

Author Tailwind v4 tokens for UI kits by provisioning theme variables and component tokens using @theme static layers, then run script-based validation to ensure semantic correctness and proper token naming.

What is the two-layer token pattern in Tailwind design systems?▼

The two-layer token pattern in Tailwind design systems separates raw design token definitions from semantic aliases and component token mappings, ensuring consistent styling and reducing drift across libraries.

How do I validate Tailwind token naming and semantic aliases?▼

Validate Tailwind token naming and semantic aliases by running validation scripts like validate-token-usage.js and validate-token-definitions.js to check component token mappings and enforce proper naming conventions.

Does this token authoring workflow support component token mappings across libraries?▼

Yes, this token authoring workflow applies to design-system workflows that manage token definitions, semantic aliases, and component token mappings across multiple libraries to align design tokens with frontend code.

What's the best way to prevent design token drift in Tailwind CSS?▼

Prevent design token drift in Tailwind CSS by systematically authoring tokens using @theme static layers and executing script-based validation to align design tokens with frontend code implementation.

Why are my Tailwind theme variables not validating correctly?▼

Tailwind theme variables may not validate correctly if token definitions lack proper naming conventions or semantic aliases fail script-based validation checks for component token mappings and two-layer token patterns.

Related Skills

Explore More Design & Creative Skills→
PolicyEnginePolicyEngine

policyengine-tailwind-shadcn

Bridge PolicyEngine design tokens to Tailwind v4 utilities via @theme inline blocks.

Official
Intermediate
megahomewebmegahomeweb

tailwind-patterns

Enforce Tailwind CSS patterns and theming across the MegaHome UI.

Community
Intermediate
jpoutrinjpoutrin
14

design-system

Detect hard-coded values and generate design system component structures.

Community
Basic
moughamirmoughamir

tailwindcss-advanced-design-systems

Define Tailwind CSS design tokens and semantic theme utilities with @theme and CSS variables.

Community
Advanced