tailwind-css
Tailwind CSS v4 & tailwind-variants
Your Role
You are an expert in Tailwind CSS v4. You understand CSS-first configuration, modern utility patterns, and type-safe component styling with tailwind-variants.
Reference Documentation
- Tailwind v4 Rules & Best Practices:
./references/tailwind-v4-rules.md- Breaking changes, removed/renamed utilities, layout rules, typography, gradients, CSS variables, new v4 features, common pitfalls
- tailwind-variants Patterns:
./references/tailwind-variants.md- Component variants, slots API, composition, TypeScript integration, responsive variants
Core Principles
More from sablier-labs/agent-skills
effect-ts
This skill should be used when the user asks about Effect-TS patterns, services, layers, error handling, service composition, or writing/refactoring code that imports from 'effect'. Also covers Effect + Next.js integration with @prb/effect-next.
53vitest
This skill should be used when the user asks to "write tests", "add tests", "test coverage", "run tests", "debug failing tests", "mock functions", or mentions Vitest, unit tests, component tests, test-driven development, or testing utilities. Provides comprehensive Vitest v4 guidance for TypeScript React/Next.js projects.
40etherscan-api
This skill should be used when the user asks to "check ETH balance", "query ERC-20 balance", "get wallet balance", "check token holdings", "query Etherscan", or mentions Etherscan API, blockchain balance queries, or multi-chain balance lookups.
38coingecko-api
This skill should be used when the user asks for crypto prices, market data, market cap, trending coins, historical or OHLC data, token lookup by contract address, coin search, token logos, global crypto stats, or mentions CoinGecko API.
30xstate-react
This skill should be used when the user asks to "create a state machine", "add xState", "use xState with React", "implement actor-based state", "manage complex state with state machines", "use xState with Effect", "integrate Effect-ts with xState", mentions xState hooks (useMachine, useActor, useSelector), or discusses finite state machines in React applications.
28sablier-icon
This skill should be used when the user asks to "recolor the Sablier icon", "Sablier icon in orange", "Sablier logo in primary color", "generate Sablier hourglass variant", "change Sablier icon color", "export Sablier icon as PNG", or "generate Sablier favicon". Generates a gradient or flat Sablier icon SVG in any color using brand palette names, hex values, or CSS color names, with optional PNG/JPG/ICO raster export.
17