Loading...
Loading...
Found 12 Skills
Stop your AI agent from generating Tailwind CSS v3 code. Rules for v4 syntax, CSS-first config, modern utility patterns, and common anti-patterns.
Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.
Tailwind CSS v4 with CSS-first configuration and design tokens. Use when setting up Tailwind v4, defining theme variables, using OKLCH colors, or configuring dark mode. Triggers on @theme, @tailwindcss/vite, oklch, CSS variables, --color-, tailwind v4.
Senior expert in Tailwind CSS 4.0+, CSS-First architecture, and modern Design Systems. Use when configuring themes, migrating from v3, or implementing native container queries.
Configuration and directives Tailwind CSS v4.1. @theme, @import, @source, @utility, @variant, @apply, @config. CSS-first mode without tailwind.config.js.
Validate Tailwind CSS v4 configuration and detect/prevent Tailwind v3 patterns. Use this skill when setting up Tailwind, auditing CSS configuration, or when you suspect outdated Tailwind patterns are being used. Ensures CSS-first configuration with @theme blocks.
Tailwind CSS v4 fundamentals covering installation, CSS-first configuration, design systems, and 2025/2026 best practices
Tailwind CSS v4+ best practices including new CSS-first configuration, theme customization, responsive design, dark mode, and performance optimization. Use for modern utility-first CSS styling.
Guides Tailwind CSS v4 patterns for buttons and components. Use this skill when creating components with variants, choosing between CVA/tailwind-variants, or configuring Tailwind v4's CSS-first approach.
Build production-grade frontend interfaces with modern React, Tailwind CSS, and shadcn/ui. Five modes: scaffold projects, create components, configure themes and design tokens, refactor styles, and audit codebases. Encodes best practices for React 19 Server Components (framework-dependent), TailwindCSS v4 CSS-first config, shadcn/ui with Radix primitives, modern CSS (container queries, :has(), view transitions, scroll-driven animations), Monaspace typography, and Vite 6. Supersedes the frontend-design skill. Use when building, styling, theming, or improving any frontend project. NOT for backend APIs, database design, DevOps, testing frameworks, state management libraries, routing, or full SSR framework setup.
Tailwind CSS 4.x utility-first styling patterns. Use when building UI components, creating responsive layouts, implementing design systems, or customizing themes. Covers CSS-first configuration, @theme directive, and component patterns.
This skill should be used when the user asks about "Tailwind CSS", "tailwind-variants", "tv() function", "CSS-first configuration", "Tailwind breaking changes", mentions styling with Tailwind utilities, gradient syntax, or component variants with TypeScript.