Open Skills Logo
Open Skills

tailwind-design-system

使用Tailwind CSS、设计令牌、组件库和响应式模式构建可扩展的设计系统。适用于创建组件库、实施设计系统或标准化UI模式时使用。

查看详情
name:tailwind-design-systemdescription:Build scalable design systems with Tailwind CSS, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.

Tailwind Design System

Build production-ready design systems with Tailwind CSS, including design tokens, component variants, responsive patterns, and accessibility.

Use this skill when

  • Creating a component library with Tailwind

  • Implementing design tokens and theming

  • Building responsive and accessible components

  • Standardizing UI patterns across a codebase

  • Migrating to or extending Tailwind CSS

  • Setting up dark mode and color schemes

    • Do not use this skill when

  • The task is unrelated to tailwind design system

  • You need a different domain or tool outside this scope

    • Instructions

  • Clarify goals, constraints, and required inputs.

  • Apply relevant best practices and validate outcomes.

  • Provide actionable steps and verification.

  • If detailed examples are required, open resources/implementation-playbook.md.

    • Resources

  • resources/implementation-playbook.md for detailed patterns and examples.