compound-eng-tailwind-cssTailwind CSS v4 patterns: CSS-first config, utility classes, component variants, v3 migration. Use when styling with Tailwind, configuring @theme tokens, usi...
Install via ClawdBot CLI:
clawdbot install iliaal/compound-eng-tailwind-cssGrade Fair — based on market validation, documentation quality, package completeness, maintenance status, and authenticity signals.
Generated May 23, 2026
Use Tailwind v4's @theme directive to define design tokens directly in CSS, eliminating the need for tailwind.config.ts. This allows for centralized color, font, spacing, and animation definitions that auto-generate utility classes, streamlining theming across large projects.
Assist development teams in upgrading existing Tailwind CSS v3 codebases to v4, handling breaking changes like replacing tailwind.config.ts with @theme, updating class names (e.g., bg-gradient to bg-linear), and adopting new patterns like gap over space-x. Use the @tailwindcss/upgrade codemod for automation.
Implement type-safe component variant patterns using tailwind-variants (tv) or class-variance-authority (cva) for UI component libraries. Define base styles, variant combinations, and default variants in a clean, reusable way, reducing class duplication and improving maintainability.
Set up a cn() utility combining clsx and tailwind-merge to handle conditional class merging without conflicts. This is essential for React/Next.js projects where dynamic classes are common, ensuring that Tailwind utilities don't override each other unexpectedly.
Configure eslint-plugin-better-tailwindcss to automate class validation, catching typos, deprecated v3 classes, conflicting utilities, and enforcing canonical ordering. This improves code quality and enforces best practices in teams with multiple developers.
Offer specialized consulting or development services to clients needing Tailwind v4 migration, custom design token setup, or component library creation. Revenue comes from hourly rates or fixed project fees for modernization projects.
Create and sell a pre-built, variant-driven component library using tailwind-variants and Tailwind v4 best practices. Customers subscribe monthly for access to new components, updates, and support.
Provide corporate training sessions, online courses, or workshops focused on Tailwind v4 features, migration strategies, and coding patterns. Revenue streams include per-attendee fees or bulk corporate contracts.
💬 Integration Tip
Start by verifying v4 syntax via search_docs before coding, and run the @tailwindcss/upgrade codemod to automate most v3 breaking changes.
Scored Jun 21, 2026
Build or update the BlueBubbles external channel plugin for Clawdbot (extension package, REST send/probe, webhook inbound).
Expert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when building web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
CSS implementation patterns for layout, typography, color, spacing, and responsive design. Complements ui-design (fundamentals) with code-focused examples.
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.