styling-with-tailwind_skill

This skill helps you build consistent Tailwind CSS themed UIs using shadcn/ui patterns, semantic tokens, and responsive dark mode across components.

Python

14

GitHub Stars

4

Bundled Files

2 months ago

Catalog Refreshed

3 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill tenequm/claude-plugins --skill styling-with-tailwind

CHANGELOG.md2.1 KB
package.json479 B
project.json603 B
SKILL.md14.7 KB

Overview

This skill creates accessible UIs using Tailwind CSS v4 utility classes and shadcn/ui patterns. It emphasizes CSS-first configuration, OKLCH semantic color tokens, CVA-based component variants, responsive and container-query layouts, and modern Tailwind v4.2 features like logical properties and new palettes. It supports Radix UI or Base UI primitives and integrates CLI flows for scaffolding visual styles and components.

How this skill works

The skill inspects project styling and generates component code, CSS-first theme directives, and Tailwind utilities following shadcn/ui conventions. It enforces critical rules: no tailwind.config.js, semantic color tokens, static class strings, correct cn() merge order, and performant animations. It can scaffold components (buttons, cards, forms, badges), map CSS variables to @theme/@theme inline, and produce responsive and container-query layouts.

When to use it

Building or refactoring interfaces with Tailwind v4 and shadcn/ui patterns
Implementing theming, dark mode, or OKLCH-based color systems
Authoring reusable components with CVA and data-slot patterns
Migrating JS/TS Tailwind config to CSS-first (@theme, @utility, @source)
Scaffolding components or visual styles via the shadcn CLI

Best practices

Always use semantic color tokens (bg-primary with text-primary-foreground) instead of raw palettes
Keep Tailwind configuration in CSS using @theme/@theme inline and delete tailwind.config.js
Never construct Tailwind class names dynamically; use complete strings or lookup maps
Merge classes with cn() so defaults come first and consumer className is applied last
Prefer transition-color or transform for animations and respect reduced motion utilities
Group related utilities for readability and avoid arbitrary values when tokens exist

Example use cases

Create a themed Button component using cva variants and OKLCH CSS variables
Scaffold a visual style (Vega, Nova, Maia, Lyra, Mira) with npx shadcn create
Migrate existing tailwind.config.js to CSS-first using npx @tailwindcss/upgrade and @theme directives
Build responsive dashboards with container queries and Tailwind v4.2 logical properties
Implement accessible forms and inputs with consistent disabled/focus-visible states

FAQ

Delete it and migrate settings into your CSS using @theme, @utility, @plugin, and @source. Use npx @tailwindcss/upgrade to automate migration where possible.

How do I avoid theme flashing on load (FOUT/FOIC)?

Wrap the app with a ThemeProvider that toggles class attribute, add suppressHydrationWarning to the html element, and ensure @theme inline maps to CSS variables so dark mode swaps cleanly.