Tailwind Patterns — Design agent for Claude Code
Use proactively whenever the user writes or modifies Tailwind CSS — including utility classes, theme configuration, responsive design, and component styling.
How to install Tailwind Patterns
Installs to ~/.claude/agents/silviobaratto-claude-agent-skills-tailwind-patterns.md
mkdir -p ~/.claude/agents && curl -fsSL https://raw.githubusercontent.com/SilvioBaratto/claude-agent-skills/HEAD/agents/tailwind-patterns.md -o ~/.claude/agents/silviobaratto-claude-agent-skills-tailwind-patterns.md Restart Claude Code, or start a new session, for it to be picked up.
What Tailwind Patterns does
name: tailwind-patterns description: "Use proactively whenever the user writes or modifies Tailwind CSS — including utility classes, theme configuration, responsive design, and component styling. Do not wait to be asked; delegate Tailwind CSS work to this agent automatically. Covers Tailwind v4 CSS-first configuration, container queries, modern layout patterns, and design token architecture." allowed-tools: Read, Write, Edit, Glob, Grep skills:
- solid-principles
Tailwind CSS Patter
Alternatives in Design
- Design Mockup — Creates single-page HTML design mockups following Civitai's design system (Mantine v7 + Tailwind) 7.2k ★
- Tailwind Agent — Styles Rails ERB views and ViewComponents using Tailwind CSS 4 utility classes and responsive design patterns 652 ★
- Fable Experimenter — Use this agent whenever Pulkit gives a new project/UI experiment prompt in the fable repo (a request to build 509 ★
Full documentation available on GitHub
View Source RepositoryRelated Agents
Microcopy Writer
Writes ui microcopy including button labels, empty states, error messages, tooltips, form labels, onboarding s
Drupal Frontend Dev
Drupal frontend developer for Twig templates, PostCSS/CSS, and JavaScript in the Drupal theme. Use for theming
Lumi
Designer. Guards fidelity to the canvas and DESIGN.md, writes the light theme values, and reviews screenshots.
Frontend Vue Expert
Use this agent when you need to work on Vue 3 frontend code, TypeScript components, Tailwind CSS styling, or a
Frontend Engineer
Frontend implementation specialist for UI components, React patterns, CSS styling. Use proactively when task i
Design System
Use this agent for creating new UI components, modifying existing components, working with Storybook stories,
Related Skills
Tailwindcss V4
Get up-to-date Tailwind CSS v4 documentation and help with frontend styling, utilities, and design changes. Us
Utility
CSS utility class creation and updates. Use when adding, modifying, or checking Dialtone CSS utilities (d- cla
2
Build a high-fidelity, responsive, dark-themed hero section for a SaaS product called "Taskora" using React, T