Skills
.Work. You
Rest

generating-tailwind-brand-config

Community

Generate Tailwind CSS brand config from design tokens.

Software Engineering#css#design tokens#frontend development#tailwind#ui generation#brand config
Authormarchatton
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill automates the creation of Tailwind CSS configurations, including color palettes, typography, and spacing, directly from your brand's design tokens, ensuring brand consistency across web applications and marketing sites.

Core Features & Use Cases

  • Automated Token Transformation: Converts design tokens (JSON, Markdown) into CSS variables and Tailwind presets.
  • Multi-Platform Output: Generates configurations suitable for both web applications (product UI) and marketing websites.
  • Dark Mode & Accessibility: Supports dark mode strategies and ensures accessible color contrast ratios.
  • Use Case: When launching a new product, use this Skill to instantly generate a Tailwind preset that perfectly matches the new brand guidelines, including light/dark modes and semantic color roles.

Quick Start

Use the generating-tailwind-brand-config skill to transform the design tokens found in docs/02-guidelines/inspiration/design_tokens.json into a Tailwind CSS preset.

Dependency Matrix

Required Modules

None required

Components

scriptsreferences

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: generating-tailwind-brand-config
Download link: https://github.com/marchatton/agent-skills/archive/main.zip#generating-tailwind-brand-config

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.