tailwind▌

This skill provides comprehensive guidance for building modern web applications with the SvelteKit 2 + Svelte 5 + Tailwind CSS v4 stack.

Expert guide for creating and managing a centralized Design System using Tailwind CSS (v4.1+) and shadcn/ui. This skill provides structured workflows for defining design tokens, configuring themes with CSS variables, and building a consistent UI component library based on shadcn/ui primitives.

When libraries don't accept className (like Recharts):

Styling patterns and conventions for frontend applications. Contains 10 rules covering layout utilities, affordances, color schemes, responsive design, and className handling.

Modern utility-first CSS with CSS-native configuration and container queries. \n \n CSS-first configuration using @theme directives instead of JavaScript, powered by the Oxide engine for 10x faster compilation \n Native container queries ( @container , @sm: , @md: ) for component-level responsive design independent of viewport \n Comprehensive design token architecture using CSS variables for colors, spacing, typography, and semantic naming \n Mobile-first responsive breakpoints ( sm: , md: , lg

$22

$22

Styling guidelines for the Mastra Playground UI, containing 5 rules across 3 categories. Rules are prioritized by impact to guide automated refactoring and code generation. These rules ensure design system consistency, prevent token drift, and maintain component library integrity.

Utility-first CSS framework for rapid UI development with responsive design and dark mode support. \n \n Provides single-purpose utility classes for layout, spacing, typography, colors, and effects without writing custom CSS \n Includes mobile-first responsive breakpoints (sm, md, lg, xl, 2xl) and built-in dark mode with class or media strategy \n Supports framework integration with React, Next.js, Vue, Svelte, and others; includes official plugins for forms, typography, and aspect ratios \n Off

Tailwind v4 and shadcn/ui setup with CSS variables, dark mode, and semantic color theming. \n \n Automates dependency installation, Vite configuration with the Tailwind plugin, and shadcn/ui initialization \n Implements a mandatory four-step CSS architecture: root CSS variables, @theme inline mapping, base styles, and dark mode via class switching \n Includes pre-built theme provider component for dark mode toggling and persistent theme storage \n Provides troubleshooting guides for common v4 mi