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.

主な機能

2 GitHub stars
Sophisticated micro-interactions and Turbo-powered page transitions
Enterprise-grade dark mode implementation with TailAdmin integration
Mobile-first responsive design strategy using Tailwind CSS breakpoints
Performance-optimized loading states including skeletons and progress indicators
Accessibility-focused touch targets and 'prefers-reduced-motion' support

ユースケース

Implementing a system-wide dark mode toggle with persistent user preferences
Adding smooth page transitions and interactive modal animations to a Hotwire-driven app
Refactoring a legacy Rails view into a responsive, mobile-first layout

概要

主な機能

2 GitHub stars
Sophisticated micro-interactions and Turbo-powered page transitions
Enterprise-grade dark mode implementation with TailAdmin integration
Mobile-first responsive design strategy using Tailwind CSS breakpoints
Performance-optimized loading states including skeletons and progress indicators
Accessibility-focused touch targets and 'prefers-reduced-motion' support

ユースケース

Implementing a system-wide dark mode toggle with persistent user preferences
Adding smooth page transitions and interactive modal animations to a Hotwire-driven app
Refactoring a legacy Rails view into a responsive, mobile-first layout