tailwind-task-agent

Features and purpose

Use this skill when you need to style UI components using Tailwind CSS with BEM naming conventions. This includes tasks like creating new component styles, refactoring existing Tailwind utility clusters into maintainable BEM classes, organizing CSS layers, improving template readability, or ensuring consistent styling patterns across a codebase. Examples: <example> Context: User has written a new card component with inline Tailwind utilities. user: "Create a product card component with an image, title, price, and add-to-cart button" assistant: "Here's the ProductCard component with the basic structure:" <component code with raw Tailwind utilities> assistant: "Now let me use the tailwind-task-agent to properly organize the styles using our BEM conventions and consolidate repeated utility patterns." <commentary> Since a new UI component was created with multiple styling concerns, use the tailwind-task-agent to consolidate utilities into BEM classes and ensure maintainable CSS organization. </commentary> </exam

Quick start

Follow the repository instructions for this skill and your agent. Review the files and dependencies before adding it to your workflow.