By djankies
Tailwind CSS v4 patterns: CSS-first config, oklch colors, container queries, @utility directive
npx claudepluginhub djankies/claude-configs --plugin tailwind-4Configure Tailwind CSS v4 using Vite plugin, PostCSS, or CLI with CSS-first configuration via @import and @theme directives. Use when setting up new projects or migrating build tools.
Create custom utilities with @utility directive supporting static utilities, functional utilities with values, theme-based utilities, and multi-value utilities. Use when extending Tailwind with custom CSS properties or patterns.
Define animations with @keyframes within @theme directive, use animate-{name} utilities, and implement entry animations with starting: variant. Use when creating custom animations or entry effects.
Migrate from Tailwind CSS v3 to v4 including configuration migration (JS to CSS), utility renames, opacity changes, and color system updates. Use when upgrading existing projects to v4.
Review Tailwind CSS v4 patterns for configuration, theming, and utility usage. Use when reviewing CSS files, Vite configs, or components using Tailwind.
Expert Tailwind CSS v4.1 - CSS-first configuration, @theme, @utility, @variant, Oxide engine 5x faster, OKLCH colors, container queries, 15 specialized skills
Tailwind CSS v4 tools for initialization, auditing, migration, and optimization
Complete Tailwind CSS v4 expertise system with 2025/2026 best practices. PROACTIVELY activate for: (1) ANY Tailwind CSS task, (2) Tailwind v4 CSS-first configuration (@theme, @utility, @custom-variant), (3) Mobile-first responsive design and container queries, (4) Dark mode implementation, (5) WCAG 2.2 accessibility (44px touch targets, focus states), (6) Performance optimization and Core Web Vitals, (7) Plugin integration (@tailwindcss/typography, @tailwindcss/forms, container-queries), (8) Framework integration (React, Vue, Next.js, Vite), (9) Migration from v3 to v4, (10) Custom utility and component creation. Provides: Mobile-first design patterns, fluid typography (CSS clamp), container queries, WCAG 2.2 touch targets, OKLCH color systems, CSS-first @theme configuration, @utility and @custom-variant directives, responsive breakpoints, dark mode patterns, typography and forms plugins, animation utilities with reduced motion support, framework-specific integration, performance optimization, and production-ready 2025/2026 patterns. Ensures modern, accessible, performant Tailwind CSS implementations.
Cross-cutting code review plugin that orchestrates review skills from tool plugins
Prisma 6 ORM patterns, client management, query optimization, and security best practices based on real-world AI coding failures
React 19 patterns, hooks, and best practices for modern React applications
TypeScript 5.9 type safety, compiler configuration, and best practices based on real-world AI coding failures. Provides intelligent skill recommendations, type safety validation, and prevents common TypeScript anti-patterns.
Comprehensive guidance for Zod v4 schema validation, covering breaking changes, new features, and best practices for TypeScript-first runtime validation
tailwind-4Modifies files
Hook triggers on file write and edit operations
Share bugs, ideas, or general feedback.
Tailwind v4 theming and shadcn/ui component installation, customisation, and recipes.
Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React. Use when: initializing React projects with Tailwind v4, setting up shadcn/ui, implementing dark mode, debugging CSS variable issues, fixing theme switching, migrating from Tailwind v3, or encountering color/theming problems. Covers: @theme inline pattern, CSS variable architecture, dark mode with ThemeProvider, component composition, vite.config setup, common v4 gotchas, and production-tested patterns.
Ultra-compressed communication mode. Cuts ~75% of tokens while keeping full technical accuracy by speaking like a caveman.
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge.
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge.
Sign in to claim