mcpField
T
tailwind-design-system

tailwind-design-system

github.com/sickn33Design & UI48.7k1.6k installsUpdated today
Repository

About tailwind-design-system

A skill for building and maintaining Tailwind CSS design systems. It covers tokens, theming, responsive and accessible components, and shared UI patterns across a codebase.

Key features

  1. 01Design tokens and theming
  2. 02Component libraries and variants
  3. 03Responsive component patterns
  4. 04Accessible UI components
  5. 05Dark mode and color schemes
  6. 06Tailwind CSS migration and extension

Use cases

  1. 01Create a Tailwind component library
  2. 02Standardize UI across a codebase
  3. 03Set up design tokens and themes
  4. 04Add responsive and accessible patterns

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/sickn33/agentic-awesome-skills --skill tailwind-design-system

After installing, type/tailwind-design-systemin Claude Code to confirm it loaded.

Bundled filesresources/implementation-playbook.md

Details

From the project README

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.

Limitations

  • Use this skill only when the task clearly matches the scope described above.
  • Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
  • Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.

Comments

Markdown supported