Skill for reviewing, optimizing, and migrating Tailwind CSS code, including HTML accessibility checks. Always use this skill when: · Asked to "review", "clean up", "check", or "look at" Tailwind classes · v3 classes like space-y-, space-x-, flex-shrink, shadow-sm, bg-opacity- are present · Hardcoded arbitrary values like text-[1e40af] or w-[320px] are used · Conflicting or redundant classes like flex and block on the same element are found · Asked whether to use cn() / clsx, or whether to consolidate with : variants · Asked to migrate or rewrite from v3 to v4 · Asked to check HTML accessibility structure: aria-label, ul/li, button type, label, etc. · Asked to review .html, .tsx, .jsx, .vue, or .astro files (if Tailwind is used) Framework-agnostic (HTML / React / Vue / Svelte / Astro, etc.). Also use for vague requests like "something looks off with the classes", "the design changed after upgrading to v4", or "migrating from CSS modules".
Install with
Claude CodeCodexCursorGitHub CopilotGemini CLI
Supported by the Atlas install prompt. Skill-specific requirements vary.
Skill stats
Skills1CategoryProduct & designStars0
About this skill
Skill for reviewing, optimizing, and migrating Tailwind CSS code, including HTML accessibility checks. Always use this skill when: · Asked to "review", "clean up", "check", or "look at" Tailwind classes · v3 classes like space-y-, space-x-, flex-shrink, shadow-sm, bg-opacity- are present · Hardcoded arbitrary values like text-[1e40af] or w-[320px] are used · Conflicting or redundant classes like flex and block on the same element are found · Asked whether to use cn() / clsx, or whether to consolidate with : variants · Asked to migrate or rewrite from v3 to v4 · Asked to check HTML accessibility structure: aria-label, ul/li, button type, label, etc. · Asked to review .html, .tsx, .jsx, .vue, or .astro files (if Tailwind is used) Framework-agnostic (HTML / React / Vue / Svelte / Astro, etc.). Also use for vague requests like "something looks off with the classes", "the design changed after upgrading to v4", or "migrating from CSS modules".
Quick start
Copy the install prompt. Use the green button above this README.
Send it to your agent. Paste it into your coding agent’s chat and send.
Review the setup. Your agent checks the skill’s instructions, requirements, and installation scope.
Skill for reviewing, optimizing, and migrating Tailwind CSS code, including HTML accessibility checks. Always use this skill when: · Asked to "review", "clean up", "check", or "look at" Tailwind classes · v3 classes like `space-y-*`, `space-x-*`, `flex-shrink`, `shadow-sm`, `bg-opacity-*` are present · Hardcoded arbitrary values like `text-[#1e40af]` or `w-[320px]` are used · Conflicting or redundant classes like `flex` and `block` on the same element are found · Asked whether to use `cn()` / `clsx`, or whether to consolidate with `*:` variants · Asked to migrate or rewrite from v3 to v4 · Asked to check HTML accessibility structure: `aria-label`, `ul/li`, `button type`, `label`, etc. · Asked to review `.html`, `.tsx`, `.jsx`, `.vue`, or `.astro` files (if Tailwind is used) Framework-agnostic (HTML / React / Vue / Svelte / Astro, etc.). Also use for vague requests like "something looks off with the classes", "the design changed after upgrading to v4", or "migrating from CSS modules".
About this listing
Category
Product & design
Reported license
MIT
Listing language (estimated)
English
Review status
Not individually reviewed
Agent compatibility
Atlas installation supports Claude Code, Codex, and Cursor. Skill-specific dependencies and features are checked during setup.
Claude Code
Codex
Cursor
GitHub Copilot
Gemini CLI