tailwind

Files

SKILL.mdagentsreferences

Install

Install only this skill with npx skills

npx skills add alisonaquinas/llm-web-design-skills --skill 'tailwind' -g -y

Install the containing skill bundle

/plugin install web-design-skills@llm-skills

Download tailwind-skill.zip

This skill is bundled inside web-design-skills. Use npx skills when you only want this skill, or install the bundle once to make every included skill available through the plugin marketplace flow. Browse the full skill bundle repository at github.com/alisonaquinas/llm-web-design-skills.

Invoke

Invoke this skill after installation

/web-design-skills:tailwind

SKILL.md

name: tailwind description: > review, design, scaffold, refactor, and troubleshoot tailwind css based styling systems. use when the user asks for tailwind configuration, utility usage, design tokens, component extraction, theming, responsive patterns, or migration guidance.

Use this skill to keep Tailwind work grounded in maintainable architecture, predictable delivery, and framework-appropriate conventions.

Intent Router

Need	Load
core conventions, structure, review priorities, and common red flags for Tailwind	`references/best-practices.md`
setup, migration, testing, build, delivery, and day-two workflow guidance for Tailwind	`references/workflows.md`

Quick Start

Confirm Tailwind version and framework host, theme and token strategy, dark-mode posture, and direct-utility versus extracted-component boundary.
Identify whether the task is greenfield scaffolding, incremental refactoring, troubleshooting, migration planning, or code review.
Apply the defaults in references/best-practices.md before proposing custom architecture.
Prefer the smallest change set that improves clarity, safety, operability, and long-term maintainability.

Workflow

start from semantic tokens and then map utilities onto them
review responsive, dark, focus, and loading states together
extract shared recipes only after duplication is real
verify scanning paths and production build size after config changes

Typical Focus Areas

Tailwind version and framework host
theme and token strategy
dark-mode posture
direct-utility versus extracted-component boundary

Outputs to Prefer

summarize host framework and token strategy first
group findings by theme config, utility composition, extracted recipes, and responsive or dark behavior
prefer token cleanup before helper-library proliferation

First Response Pattern

restate Tailwind version, host framework, token strategy, and dark-mode posture before suggesting changes
anchor the plan at theme tokens, utility usage, and the smallest shared recipe that actually needs extraction
name the verification loop up front: host build, responsive and dark-state inspection, and generated CSS or content-scan confirmation

Common Requests

Review this Tailwind component set for utility readability, theme-token discipline, responsive and dark-mode behavior, and maintainability in a React or Vue app that already ships with `npm run build` and visual smoke tests.

Help structure Tailwind config, content scanning, and shared utility recipes for a larger design system where repeated card, button, and form patterns are drifting across multiple packages.

Safety Notes

preserve externally visible behavior unless the user explicitly requests a redesign or a breaking change
avoid style-only churn when the current repository already has working conventions and automation