Does this skill require specialized JavaScript frameworks like React?

No, it leverages the standard Rails Hotwire stack (Turbo and Stimulus) along with native browser APIs to achieve SPA-like behavior with zero client-side state.

Are View Transitions supported in all browsers?

View Transitions are currently supported in Chromium-based browsers; however, the UI remains fully functional in Safari and Firefox, simply without the smooth animations.

Why use redirect_to instead of Turbo Streams?

Redirecting combined with Turbo Morphing simplifies controller logic and allows for full-page diffing, eliminating the need to manage dozens of granular Turbo Stream templates.

How does the optimistic UI work?

It uses a generic Stimulus controller to toggle ARIA attributes instantly on click, allowing Tailwind CSS to update the UI child elements before the server responds.

What version of Rails is required?

It is optimized for Rails 8+, which includes Turbo Morphing by default, though many patterns can be adapted for Rails 7.2.

Reactive Rails UI

Name: Reactive Rails UI
Author: lorismaz

bylorismaz

0•

设计工具

Builds responsive, SPA-like Ruby on Rails interfaces using Turbo Morphing, View Transitions, and Stimulus optimistic UI patterns.

This skill equips Claude with the expertise to implement modern, reactive user interfaces in Rails applications without the complexity of client-side state management. It focuses on three core techniques: Turbo Morphing for DOM diffing on redirects, the View Transitions API for seamless browser-native animations, and Stimulus-powered optimistic UI for instant user feedback. By following these patterns, developers can maintain simple, standard CRUD controllers while delivering a high-performance, fluid experience typically associated with Single Page Applications.

主要功能

010 GitHub stars

02Implements Turbo Morphing for DOM diffing and focus preservation

03Standardizes redirect-based CRUD patterns for reactive workflows

04Configures Tailwind CSS group-aria variants for state-driven styling

05Sets up generic Stimulus controllers for instant optimistic UI updates

06Integrates browser-native View Transitions API for smooth animations

使用场景

01Creating highly responsive task managers with instant visual feedback

02Implementing smooth expand/collapse accordions or tabbed interfaces

03Modernizing Rails apps to feel like SPAs without adding JS frameworks

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add lorismaz/rails-claude-code-plugins reactive-rails-ui

For use in Claude.ai and ChatGPT

主要功能

010 GitHub stars

02Implements Turbo Morphing for DOM diffing and focus preservation

03Standardizes redirect-based CRUD patterns for reactive workflows

04Configures Tailwind CSS group-aria variants for state-driven styling

05Sets up generic Stimulus controllers for instant optimistic UI updates

06Integrates browser-native View Transitions API for smooth animations

使用场景

01Creating highly responsive task managers with instant visual feedback

02Implementing smooth expand/collapse accordions or tabbed interfaces

03Modernizing Rails apps to feel like SPAs without adding JS frameworks

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add lorismaz/rails-claude-code-plugins reactive-rails-ui

For use in Claude.ai and ChatGPT