firedev

Tailwind Skill — Design skill for Claude Code

Design community

A Claude Code skill for building production-grade Tailwind CSS UI.

How to install Tailwind Skill

This entry records only its repository, not the path inside it, so there is no exact command to give. Open firedev/tailwind-skill and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Tailwind Skill does

A Claude Code skill for building production-grade Tailwind CSS UI.

Alternatives in Design

Frontend Design — Create distinctive, production-grade frontend interfaces with high design quality 94.1k ★
Figma Implement Design — Translate Figma designs into production-ready code with pixel-perfect accuracy 14.6k ★
Grade — Generate a shareable HTML "Design Report Card" — letter grade, 8 dimensions, evidence (palette, type, rhythm) 3.6k ★

README

tailwind-skill

A Claude Code skill for building production-grade Tailwind CSS UIs inside Rails apps. Opinionated about the stack — **Rails + tailwindcss-rails + Propshaft + Stimulus + Turbo**. No React, no JSX.

What it does

Guides component-by-component implementation against a consistent philosophy (utility-first, token-driven, accessible, dark mode from day one).
Curates 20+ component libraries (HyperUI, Flowbite, Preline, DaisyUI, Headless UI, and others) with licensing notes and copy-paste workflows.
Covers Tailwind v4 (CSS-first @theme) and v3 (tailwind.config.js).
Ships canonical Rails patterns: ViewComponent, Stimulus controllers, Turbo gotchas, dark-mode toggle without FOUC.
Includes a compliance audit mode (/tailwind audit) that scores ten categories and generates a report.

Structure

SKILL.md                          — entry point, philosophy, decision tree, audit procedure
references/
  tokens-and-theme.md             — v4 @theme, v3 config, OKLCH, dark-mode pairings
  component-libraries.md          — full catalog, WebFetch recipes, React→ERB porting
  component-patterns.md           — buttons, forms, cards, modals, menu, tabs, nav, tables
  layout-and-responsive.md        — breakpoints, container queries, page shells, z-index
  rails-integration.md            — tailwindcss-rails, ViewComponent, Stimulus, dark-mode toggle
  anti-patterns.md                — 20 common mistakes with bad/good/grep

Install

Drop the `tailwind-skill/` directory into your Claude Code skills folder (typically `~/.claude/skills/` or a project-level `.claude/skills/`). Claude Code auto-loads skills from these locations.

Invoke

Mention any trigger in conversation: "tailwind", "dark mode", "responsive", "landing page", "dashboard", "daisyui", etc.
Run audit mode explicitly: /tailwind audit [path or URL]