Agent SkillsAgent Skills
korallis

tailwind-design-system

@korallis/tailwind-design-system
korallis
93
10 forks
Updated 4/1/2026
View on GitHub

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

$npx agent-skills-cli install @korallis/tailwind-design-system
Claude Code
Cursor
Copilot
Codex
Antigravity

Details

Repositorykorallis/Droidz
Pathdroidz_installer/payloads/claude/default/skills/tailwind-design-system/SKILL.md
Branchmain
Scoped Name@korallis/tailwind-design-system

Usage

After installing, this skill will be available to your AI coding assistant.

Verify installation:

npx agent-skills-cli list

Skill 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 all
incident-response
93

Respond 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.

typescript-strict
93

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.

performance-optimization
93

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.

frontend-component-patterns
93

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.