SilvioBaratto

Tailwind Patterns — Design agent for Claude Code

Design community

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

Terminal
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 Repository