fec-tailwind-design-system

Consolidate Tailwind design-system governance into maintainable configuration files.

21|3|Updated Mar 17, 2026
One-click install
npx skills add https://github.com/bovinphang/frontend-craft --skill fec-tailwind-design-system
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: fec-tailwind-design-system
Source: https://github.com/bovinphang/frontend-craft/tree/main/localized/zh-CN/skills/fec-tailwind-design-system
Command: npx skills add https://github.com/bovinphang/frontend-craft --skill fec-tailwind-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Tailwind 项目在 token 映射、主题扩展、工具类治理、组件变体、暗色模式以及响应式工具的维护上往往缺乏统一规范。本技能提供一个系统化框架,帮助团队将设计语言以可维护的方式编码到 Tailwind 配置中,减少重复工作并提升一致性。

Core Features & Use Cases

  • Token 映射与主题扩展:将设计 token、颜色、圆角、阴影等映射到 Tailwind 配置并实现主题扩展,确保跨项目的一致性。
  • 组件变体治理:通过统一的变体 API/CVAs 等方法,定义稳定的组件行为与样式组合,降低样式膨胀。
  • 暗色模式与响应式工具:提供暗色模式策略和响应式工具的治理,确保跨平台的一致性。
  • Use Case:在跨团队的设计与开发工作流中,建立统一的 token、variant、以及 safelist,提升组件可复用性和设计一致性。

Quick Start

将设计 token、颜色、圆角等映射到 Tailwind 配置并实现主题扩展,然后在组件中应用统一的 variant 与 token。

Frequently Asked Questions about fec-tailwind-design-system

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

FAQPage Schema
How do I map design tokens to a Tailwind configuration for consistent theming?

To map design tokens for Tailwind theming, consolidate semantic tokens, colors, radii, and shadows into the configuration to ensure cross-project UI consistency. This framework defines stable mappings and guidelines for extending themes without mutating core utilities.

What is the best way to manage Tailwind component variants across multiple teams?

Managing Tailwind component variants requires a unified variant API or CVA approach to define stable component behaviors and style combinations. This governance method reduces style bloat and ensures maintainable configurations across design and development workflows.

How do I extend Tailwind themes without mutating core utilities?

Extending Tailwind themes without mutating core utilities involves applying safelist practices and semantic token mappings. This approach governs theme extension by encoding design language systematically, preventing duplicate work and maintaining UI consistency across projects.

Can I use this Tailwind design system framework for dark mode and responsive tooling?

Yes, this Tailwind design system framework supports dark mode strategies and responsive tooling governance. It provides systematic guidelines to ensure cross-platform UI consistency when applying semantic tokens and component variants across different screen sizes and themes.

Why do I need safelist practices in a Tailwind design system?

Safelist practices are needed in a Tailwind design system to govern dynamic class generation and ensure consistent token application. They prevent missing styles in production while maintaining the integrity of semantic tokens and variant mappings across extended themes.

Does this Tailwind token governance approach work for large scale cross-team projects?

Yes, this Tailwind token governance approach is specifically designed for cross-team projects requiring maintainable configuration. It consolidates design-system governance by defining semantic tokens, variant mappings, and safelist practices to ensure UI consistency across multiple teams and projects.