Compétences tailwind-design-system
📦

tailwind-design-system

Sûr

Build design systems with Tailwind CSS

Également disponible depuis: wshobson

Creating consistent design systems is complex and time-consuming. This skill provides proven patterns for building scalable component libraries with Tailwind CSS, design tokens, and accessibility built-in.

Prend en charge: Claude Codex Code(CC)
🥉 74 Bronze
1

Télécharger le ZIP du skill

2

Importer dans Claude

Allez dans Paramètres → Capacités → Skills → Importer un skill

3

Activez et commencez à utiliser

Tester

Utilisation de "tailwind-design-system". Create a button with Tailwind CSS

Résultat attendu:

  • Button component created with CVA variants
  • Includes: default, destructive, outline, secondary, ghost, link variants
  • Size options: default, sm, lg, icon
  • Accessibility features: focus-visible ring, disabled state
  • Type-safe with TypeScript interfaces

Utilisation de "tailwind-design-system". Set up dark mode for my app

Résultat attendu:

  • ThemeProvider component with system preference detection
  • CSS variables configured in globals.css
  • Tailwind config extended with darkMode: class
  • ThemeToggle component with sun/moon icons
  • localStorage persistence for user preference

Audit de sécurité

Sûr
v1 • 2/25/2026

Static analysis detected 78 potential issues, all confirmed as false positives. The 'backtick execution' patterns are Markdown code fences (```) for code samples. URLs are documentation references. localStorage usage is standard theme persistence. No executable code or security risks present.

2
Fichiers analysés
702
Lignes analysées
0
résultats
1
Total des audits
Aucun problème de sécurité trouvé
Audité par: claude

Score de qualité

38
Architecture
100
Maintenabilité
87
Contenu
50
Communauté
100
Sécurité
91
Conformité aux spécifications

Ce que vous pouvez construire

Startup Component Library

Build a complete component library from scratch for a new product, including buttons, cards, forms, and dialogs with consistent styling.

Design System Migration

Migrate an existing CSS or styled-components codebase to Tailwind CSS with proper design token structure and component patterns.

Accessible Form Implementation

Create accessible form components with proper validation, error states, and keyboard navigation following WCAG guidelines.

Essayez ces prompts

Basic Button Component 
Create a reusable Button component using Tailwind CSS and CVA. Include variants for primary, secondary, outline, and ghost styles. Add size variants (sm, md, lg) and a disabled state.
Design Token Configuration 
Generate a Tailwind CSS configuration file with semantic color tokens. Include primary, secondary, destructive, muted, accent, background, foreground, and border colors. Support both light and dark mode using CSS variables.
Compound Card Component 
Build a Card component using the compound component pattern. Create Card, CardHeader, CardTitle, CardDescription, CardContent, and CardFooter subcomponents. Use forwardRef for proper React composition.
Dark Mode Theme Provider 
Implement a complete dark mode solution with a ThemeProvider component. Support system preference detection, localStorage persistence, and manual toggle. Include a ThemeToggle button component with sun/moon icons.

Bonnes pratiques

  • Use CSS variables for runtime theming and design tokens
  • Compose variants with CVA for type-safe component APIs
  • Always include focus-visible states for keyboard accessibility

Éviter

  • Using arbitrary values like h-[500px] instead of extending the theme
  • Hardcoding colors directly in components instead of semantic tokens
  • Skipping dark mode styles when building new components

Foire aux questions

What is CVA and why should I use it?
CVA (Class Variance Authority) is a library for creating type-safe component variants. It allows you to define base styles and variant options that compose cleanly, with full TypeScript support.
How do I add custom colors to my design system?
Extend the Tailwind theme in tailwind.config.ts using CSS variables. Define the color in both light and dark mode in your globals.css file for full theming support.
Can I use this skill with vanilla CSS or other frameworks?
This skill focuses on Tailwind CSS specifically. For vanilla CSS or other frameworks like styled-components, different patterns and approaches would be needed.
How do I handle component accessibility?
Always include proper ARIA attributes, focus states, and keyboard navigation. Use semantic HTML elements and ensure proper heading hierarchy. Test with screen readers.
What is the compound component pattern?
Compound components work together to create a flexible UI. Examples include Select with SelectTrigger, SelectValue, SelectContent or Card with CardHeader, CardTitle, CardContent. This pattern enables clean composition.
How do I migrate from Bootstrap or Material UI?
Start by setting up design tokens that match your existing design. Then migrate components one at a time, starting with foundational elements like buttons and inputs. Use the implementation playbook for patterns.

Détails du développeur

Auteur

sickn33

Licence

MIT

Dépôt

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/tailwind-design-system

Réf

main

Structure de fichiers

📁 resources/

📄 implementation-playbook.md

📄 SKILL.md