How does this skill handle animations in Rails?

It provides patterns for both CSS transitions and Stimulus-controlled JavaScript animations to ensure smooth, high-performance interactions that work with Turbo.

Does it support web accessibility (a11y)?

Absolutely. The skill enforces WCAG touch target sizes, accessible icon labeling, and automatically respects user 'prefers-reduced-motion' settings.

Is this skill compatible with Hotwire and Turbo?

Yes, it includes specific implementation guides for Turbo page transitions, frame loading states, and Stimulus-based modal behaviors.

Does this skill require specific CSS frameworks?

The patterns provided are optimized for Tailwind CSS, leveraging its utility classes for responsive design, dark mode, and layout management.

Rails User Experience Design Patterns

Name: Rails User Experience Design Patterns
Author: Kaakati

byKaakati

•

デザインツール

Implements polished, production-ready UX patterns for Ruby on Rails applications using Tailwind CSS and Hotwire.

This skill equips Claude with specialized knowledge for building enterprise-grade user interfaces within the Ruby on Rails ecosystem. It provides standardized, battle-tested patterns for mobile-first responsive layouts, sophisticated micro-interactions using Stimulus, and robust dark mode support via TailAdmin. By leveraging this skill, developers can ensure their Rails applications meet modern web standards for accessibility, interactivity, and Core Web Vitals performance while maintaining a consistent design system across complex features like multi-step forms and asynchronous loading states.

主な機能

012 GitHub stars

02Sophisticated micro-interactions and Turbo-powered page transitions

03Enterprise-grade dark mode implementation with TailAdmin integration

04Mobile-first responsive design strategy using Tailwind CSS breakpoints

05Performance-optimized loading states including skeletons and progress indicators

06Accessibility-focused touch targets and 'prefers-reduced-motion' support

ユースケース

01Implementing a system-wide dark mode toggle with persistent user preferences

02Adding smooth page transitions and interactive modal animations to a Hotwire-driven app

03Refactoring a legacy Rails view into a responsive, mobile-first layout

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add kaakati/rails-enterprise-dev user-experience-design

For use in Claude.ai and ChatGPT

Download Skill