From coding-agent
CSS and Tailwind specialist knowledge — utility-first styling, responsive design systems, modern layout techniques, animations, dark mode, design tokens, and accessibility-compliant theming.
npx claudepluginhub devjarus/coding-agentThis skill uses the workspace's default tool permissions.
Utility-first styling, responsive design systems, modern layout, and accessibility-compliant theming.
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
Utility-first styling, responsive design systems, modern layout, and accessibility-compliant theming.
tailwind.config with project-specific tokens@apply only for highly repeated patternscn()/twMerge() for conditionalstailwind.configsm: -> md: -> lg: -> xl:dark: variant; derive values from tokensmotion-safe: / motion-reduce: variants alwaysfocus-visible: for keyboard-only focus ringstailwind.config.js or Tailwind v4 @theme block in CSS)@apply only for highly repeated patternscn() with full class namesfocus-visible: not focus: -- mouse users should not see focus indicatorsprefers-reduced-motion always -- every animation needs a safe fallbackTailwind v4 removed the config file entirely — there is NO tailwind.config.js, NO content array, NO theme export. Check which version the project is on before writing any config.
Detection: if package.json has "tailwindcss": "^4" or higher, you're on v4.
Setup (v4): just @import "tailwindcss"; at the top of your main CSS file:
/* app/globals.css */
@import "tailwindcss";
@theme {
--color-brand: oklch(0.72 0.19 147);
--font-display: "Inter Variable", system-ui, sans-serif;
}
The @theme block IS the config. No JavaScript file. Trying to create tailwind.config.js on a v4 project wastes time and produces a file Tailwind ignores.
Plugins in v4 use the @plugin directive directly in CSS:
@import "tailwindcss";
@plugin "@tailwindcss/typography";
No config file. Classes like prose, prose-slate, dark:prose-invert work out of the box. Requires @tailwindcss/typography v0.5.19+ for v4 compatibility.
@theme inline is for when your CSS variables are defined elsewhere (e.g., shadcn's :root { --background: ... } variables) and you want Tailwind to expose them as utility classes without redeclaring. Modern shadcn generates this block automatically.
Current shadcn/ui (v2+) uses OKLCH color space for theme variables, not HSL. Any older guidance saying "shadcn uses HSL vars" is out of date. Example from the current Slate preset:
:root {
--background: oklch(1 0 0);
--foreground: oklch(0.129 0.042 264.695);
--primary: oklch(0.208 0.042 265.755);
}
OKLCH is perceptually uniform — equal numeric changes produce equal perceptual changes. It handles dark mode variants more cleanly than HSL. Don't convert OKLCH to HSL when editing shadcn themes; keep the OKLCH values the CLI generates.