Create consistent, scalable design systems using Tailwind CSS utility classes with custom themes, design tokens, and responsive design patterns. Use when building design systems, implementing custom themes, creating reusable utility patterns, configuring Tailwind theme extensions, implementing dark mode, building responsive layouts, creating design tokens, using arbitrary values, or establishing consistent spacing and typography scales.
Installation
Details
Usage
After installing, this skill will be available to your AI coding assistant.
Verify installation:
npx agent-skills-cli listSkill Instructions
name: tailwind-design-system description: Create consistent, scalable design systems using Tailwind CSS utility classes with custom themes, design tokens, and responsive design patterns. Use when building design systems, implementing custom themes, creating reusable utility patterns, configuring Tailwind theme extensions, implementing dark mode, building responsive layouts, creating design tokens, using arbitrary values, or establishing consistent spacing and typography scales.
Tailwind CSS - Utility-First Styling
When to use this skill
- Building design systems with Tailwind CSS
- Implementing custom themes and design tokens
- Creating reusable utility class patterns
- Configuring Tailwind theme extensions
- Implementing light and dark mode themes
- Building responsive layouts with Tailwind grid/flexbox
- Creating consistent spacing and typography scales
- Using arbitrary values for one-off styles
- Implementing custom color palettes
- Building component variants with Tailwind
- Creating animation and transition systems
- Establishing design consistency across projects
When to use this skill
- Styling with Tailwind, creating design systems, responsive layouts.
- When working on related tasks or features
- During development that requires this expertise
Use when: Styling with Tailwind, creating design systems, responsive layouts.
Core Pattern
```jsx
<div className="flex items-center justify-between p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md"> <h2 className="text-xl font-bold">Title</h2> </div> \`\`\`Resources
More by korallis
View allRespond to production incidents systematically with triage, investigation, resolution, and post-mortem analysis to minimize downtime and prevent recurrence. Use when handling production outages, triaging incidents, investigating critical bugs, coordinating incident response, implementing hotfixes, conducting post-mortems, or establishing incident response procedures.
Write type-safe TypeScript code with strict mode enabled, comprehensive type definitions, proper error handling, and elimination of any types. Use when enabling TypeScript strict mode, adding types to existing JavaScript, fixing type errors, creating type definitions, using utility types, implementing type guards, avoiding any types, creating generic types, or ensuring complete type safety across the codebase.
Optimize application performance through code splitting, lazy loading, caching strategies, bundle size reduction, render optimization, and profiling. Use when improving page load times, reducing bundle sizes, optimizing React rendering, implementing code splitting, configuring caching strategies, lazy loading components and routes, optimizing images and assets, profiling performance bottlenecks, implementing virtual scrolling for large lists, or improving Core Web Vitals and Lighthouse scores.
Build reusable, composable, and maintainable React/Vue/Angular components following established design patterns like compound components, render props, custom hooks, and HOCs. Use when creating component libraries, implementing component composition, building reusable UI elements, designing prop APIs, managing component state patterns, implementing controlled vs uncontrolled components, creating compound components, using render props or children as functions, building custom hooks, or establishing component architecture standards.
