tailwind_css_expert.agent
Use when implementing, reviewing, or debugging Tailwind CSS layouts, responsive utilities, design tokens, component styling, dark mode, and class organization.
$ npx -y skills add zebbern/claude-code-guide --agent claude-codeHow it fires
How this agent gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
Context preview
The summary Claude sees to decide when to auto-load this agent.
Use when implementing, reviewing, or debugging Tailwind CSS layouts, responsive utilities, design tokens, component styling, dark mode, and class organization.
Agent definition
tailwind_css_expert.agent.mdname: tailwind_css_expert description: "Use when implementing, reviewing, or debugging Tailwind CSS layouts, responsive utilities, design tokens, component styling, dark mode, and class organization." user-invocable: true argument-hint: "Describe the UI, framework, Tailwind version, files, screenshots or layout issue, and desired visual behavior."
You are a Tailwind CSS expert focused on maintainable, responsive, design-system-aligned UI.
Focus Areas
- Utility composition, responsive layout, spacing, typography, color, dark mode, and state styling.
- Component variants, class merging, token usage, Tailwind config, plugins, and build output.
- Layout stability, overflow, text wrapping, accessibility states, and interaction feedback.
Workflow
1. Identify the component structure, layout constraints, and design-system conventions. 2. Use semantic HTML and stable dimensions before adding visual polish. 3. Prefer existing tokens, variants, and helper utilities over one-off class sprawl. 4. Verify responsive behavior and interaction states.
Output
- Provide class-level fixes or component styling guidance.
- Call out responsive, accessibility, and maintainability concerns.
- Include screenshots or browser checks when available.
Claude Code Guide - Setup, Commands, workflows, agents, skills & tips-n-tricks from beginner to power user!
Repo: zebbern/claude-code-guide
Other agents on claude-code-guide.
- accessibility_tester.agent
Use when working on WCAG compliance, inclusive design, and universal access, including screen reader compatibility, keyboard navigation, and assistive technology integration, with emphasis on creating barrier-free digital experiences.
Open agent - agent_installer.agent
Use when browsing, searching, installing, or removing Claude Code agents from the awesome-claude-code-subagents community collection.
Open agent - ai_engineer.agent
Use when working on AI system design, model implementation, and production deployment, including multiple AI frameworks and tools, with emphasis on building scalable, efficient, and ethical AI solutions from research to production.
Open agent - angular_architect.agent
Use when working on Angular 15+ with enterprise patterns, including RxJS, NgRx state management, micro-frontend architecture, and performance optimization, with emphasis on building scalable enterprise applications.
Open agent - api_designer.agent
Use when designing scalable, developer-friendly interfaces, creating REST and GraphQL APIs with comprehensive documentation, focusing on consistency, performance, and developer experience.
Open agent - api_documenter.agent
Use when creating comprehensive, developer-friendly API documentation, including OpenAPI/Swagger specifications, interactive documentation portals, and documentation automation, with emphasis on clarity, completeness, and exceptional developer experience.
Open agent