rails-cto-tailwind

The Tailwind CSS skill. Keeps styling consistent, responsive, and accessible across every ERB template and component.

What it does

Tailwind is the only styling system the skill accepts. No plain CSS, no inline style attributes, no external frameworks. Every visual decision flows through Tailwind utilities and the design tokens defined in tailwind.config.js.

The skill enforces six golden rules:

1. No plain CSS. All styling goes through Tailwind utilities or @apply in @layer components.
2. No inline styles. Never use the style attribute. Extend the config if a utility is missing.
3. Reuse components first. Check for an existing partial or ViewComponent before adding classes to a new element.
4. Design tokens over magic numbers. Colors, spacing, and sizes come from tailwind.config.js — no arbitrary values like bg-[#3b82f6] or p-[13px].
5. Every UI works in light and dark mode. No exceptions — every color-related class needs a dark: variant.
6. Every UI is responsive. Mobile-first breakpoints, 44px minimum touch targets.

Plus: accessibility is non-negotiable — focus-visible rings, semantic HTML, sr-only labels for icon-only buttons, and prefers-reduced-motion support.

When it triggers

• Creating or modifying any file that contains Tailwind classes — .html.erb views, partials, layouts, ViewComponent templates
• Touching tailwind.config.js
• When you mention tailwind, css, styling, dark mode, responsive, design system, colors, spacing, class soup, or @apply

This skill is mandatory after every .html.erb change, alongside rails-cto-erb. The task isn't done until both have run.

Example

<%# Agent's first draft (rejected) %>
<button style="background: #c7262a; padding: 13px 20px;">Save</button>

<%# After the skill runs %>
<button class="inline-flex items-center gap-2 min-h-[44px] px-5 py-3
               bg-primary-500 text-white rounded-lg shadow-sm
               hover:bg-primary-600 focus:outline-none
               focus-visible:ring-2 focus-visible:ring-primary-300
               dark:bg-primary-600 dark:hover:bg-primary-700
               dark:focus-visible:ring-primary-500">
  Save
</button>

View source

skills/rails-cto-tailwind/SKILL.md on GitHub →