S claudeskill.wiki
web-development

tailwind-design-system

بناء أنظمة تصميم جاهزة للإنتاج باستخدام Tailwind CSS، بما في ذلك رموز التصميم، متغيرات المكونات، الأنماط المتجاوبة، وإمكانية الوصول.

٣٣

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.

التثبيت

npx claude-code-templates@latest --skill web-development/tailwind-design-system

Quick start

  1. Install Claude Code if you have not already.
  2. Copy the Install command from this page and run it in your project directory.
  3. In Claude Code, load or mention the skill when your task matches what the skill is for.

Documentation

Use the links below for agent skills, troubleshooting, and official examples.

موارد