tailwindcss
Tailwind CSS v4 conventions — semantic design tokens for theme-safe styling, mobile-first responsive layouts, and v4-first utilities. Use when styling components or writing className utilities with Tailwind. Don't use for plain CSS, CSS-in-JS (styled-components, emotion), or other utility frameworks.
Works with
---
name: tailwindcss
description: Tailwind CSS v4 conventions — semantic design tokens for theme-safe styling, mobile-first responsive layouts, and v4-first utilities. Use when styling components or writing className utilities with Tailwind. Don't use for plain CSS, CSS-in-JS (styled-components, emotion), or other utility frameworks.
license: MIT
---
# Tailwind CSS v4
Style with utility classes only, and prefer v4 utilities over v3 idioms and hand-written CSS.
## Design tokens (theme-safe)
Every color, background, and border class uses a semantic token so theme and dark-mode switching stays automatic. Reach for a token, never a literal like `bg-white` or `bg-blue-500`:
- Backgrounds — `bg-background`, `bg-card`, `bg-muted`, `bg-popover`
- Text — `text-foreground`, `text-muted-foreground`, `text-card-foreground`
- Borders — `border-border`, `border-input`, `border-ring`
- Actions — `bg-primary text-primary-foreground`, `bg-secondary text-secondary-foreground`
- States — `bg-destructive text-destructive-foreground`, `bg-accent text-accent-foreground`
- Shades — tune with the opacity modifier (`bg-primary/90`), not a new color.
## Class conventions
- Break class strings over 100 characters into a logical array joined into `cn()`/`clsx()`.
- Compose conflicting classes through `tailwind-merge` so the last value wins.
- Use complete, static class names — a lookup map for variants, never an interpolated `bg-${color}-500`.
- Extract shared styles by composing utilities; reserve `@apply` for element defaults in `@layer base`.
- Resolve specificity through class order and merging, not `!important`.
## Reach for v4
Default to v4 utilities: `size-10` over `w-10 h-10`, `h-dvh`/`h-svh` for viewport height, `@container` queries, `bg-(--var)` for CSS variables, `text-shadow-*`, `text-balance`/`text-pretty`. Build layouts mobile-first, adding `sm:`/`md:`/`lg:` for larger screens.
## Before finishing
- Colors, backgrounds, and borders all use semantic tokens.
- Long class strings broken into arrays; class names static; `@apply` only in the base layer; no `!important`.
- `focus-visible:` used for keyboard focus rings.
- `pnpm run lint` and `pnpm run typecheck` pass.
For copy-ready examples and the full utility/variant catalog — extended v4 utilities, focus/peer/group/ARIA variants, dark mode, and anti-pattern examples — see [references/patterns.md](references/patterns.md); when a utility or variant you need is not listed above, read it before choosing classes.More Design Systems skills
stitch-design-taste
leonxlnx/taste-skill
Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion, and hardware-accelerated performance.
figma
heygen-com/hyperframes
Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.
image
coreyhaines31/marketingskills
When the user wants to create, generate, edit, or optimize images for marketing — blog heroes, social graphics, product mockups, profile banners, listing visuals, or brand assets. Also use when the user mentions 'AI image generation,' 'generate an image,' 'create a graphic,' 'product mockup,' 'hero image,' 'social media graphic,' 'banner image,' 'cover photo,' 'profile banner,' 'listing screenshot,' 'Flux,' 'Flux Kontext,' 'Midjourney,' 'DALL-E,' 'GPT Image,' 'ChatGPT Images,' 'Ideogram,' 'Gemini image,' 'Nano Banana,' 'Recraft,' 'Stable Diffusion,' 'Canva,' 'Figma,' 'image optimization,' 'compress images,' 'WebP,' or 'OG image.' Use this for general-purpose marketing image creation and optimization. For paid ad image creative and platform-specific ad specs, see ad-creative. For video production, see video.
