Does it support Tailwind's dark mode?

Yes, it includes patterns for implementing dark: variant classes and handling various element states like hover, focus, and active.

Can I use this for mobile-first design?

Yes, the skill emphasizes mobile-first principles using Tailwind's standard breakpoint system including sm, md, lg, and xl prefixes.

How does this skill help with Tailwind CSS in Rails?

It provides optimized utility-first patterns, responsive layout templates, and consistent design tokens specifically for Rails-based frontend development.

How do I trigger this skill in Claude Code?

You can trigger the skill by using keywords like 'tailwind', 'style with', 'css classes', or 'responsive layout' during your chat session.

Tailwind CSS Expert

Name: Tailwind CSS Expert
Author: aviflombaum

byaviflombaum

•

Design Tools

Implements utility-first Tailwind CSS patterns and responsive UI components specifically optimized for Ruby on Rails applications.

Tailwind CSS Expert provides a comprehensive suite of utility-first styling patterns and responsive design best practices for modern frontend development. It enables developers to rapidly build production-grade user interfaces by providing pre-defined templates for layouts, typography, buttons, cards, and forms while ensuring mobile-first responsiveness and dark mode compatibility. This skill streamlines the styling workflow within Claude Code by enforcing consistent spacing, design tokens, and state management, making it an essential tool for developers aiming for polished, accessible, and maintainable Rails views.

Key Features

01Mobile-first responsive layout patterns using standard Tailwind breakpoints

02Comprehensive support for dark mode and interactive states like hover and focus

03Production-ready design patterns for complex components like cards and grids

04Advanced animation and transition utilities for enhanced user experiences

05Pre-configured utility classes for typography, buttons, and interactive elements

0630 GitHub stars

Use Cases

01Styling complex forms and interactive buttons with consistent design tokens

02Building a responsive dashboard layout with mobile-first grid systems

03Implementing accessible dark mode and focus states across a Rails application

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add aviflombaum/claude-code-in-avinyc tailwind

For use in Claude.ai and ChatGPT

Download Skill