reactive-rails-uilisted

Build smooth, reactive Rails UIs using Turbo Morphing, the View Transitions API, and Stimulus optimistic UI patterns. Activate when the user is working on a Rails app and wants responsive, SPA-like interactions without client-side state management.
lorismaz/rails-claude-code-plugins · ★ 0 · Web & Frontend · score 60

Install: claude install-skill lorismaz/rails-claude-code-plugins

# Reactive Rails UI Three techniques that combine to make standard Rails redirect-based controllers feel as responsive as a SPA — with zero client-side state management: 1. **Turbo Morphing** — diffs the DOM instead of replacing it, preserving scroll position and focus 2. **View Transitions API** — browser-native cross-fade animations between page states 3. **Stimulus Optimistic UI** — instant visual feedback via aria-attribute toggling before the server responds Together, they let you keep simple CRUD controllers that `redirect_to` after every mutation — no Turbo Streams, no Turbo Frames (except for inline editing), and no client-side state. ## Prerequisites & Setup - **Rails 8+** with Turbo (included by default) - **Stimulus** (included by default) - **Tailwind CSS** (for `group-aria-*` utility variants) - **Importmaps** or any JS bundler ### One-time layout setup Add the View Transitions meta tag to your application layout: ```erb <%# app/views/layouts/application.html.erb %> <head>  <meta name="view-transition" content="same-origin"> </head> ``` This opts the entire application into the View Transitions API for same-origin navigations. --- ## Technique 1: Turbo Morphing Instead of replacing the entire `<body>`, Turbo Morphing diffs the old and new DOM and applies only the changes — like a server-side virtual DOM. This preserves scroll position, focus state, and CSS transitions. ### View declaration At the top of any index/li