What is the purpose of the turbo-mount gem?

It enables islands architecture in Rails, allowing React components to be mounted in specific places while automatically handling lifecycle events during Turbo navigation.

Does this skill help with React and Stimulus communication?

Yes, it provides patterns for using custom DOM events to bridge communication between React components and Stimulus controllers or other parts of the Rails app.

When should I use React instead of Hotwire in my Rails app?

React is justified for complex interactive widgets, diagrams, or canvas-based interactions where Stimulus and Turbo would become overly difficult to manage.

How do I pass data from Rails to a React component using this skill?

Use the turbo_mount helper in your views and always serialize your data into plain JSON-compatible objects rather than passing ActiveRecord objects directly.

Turbo Mount React for Rails

Name: Turbo Mount React for Rails
Author: Grupo-AFAL

byGrupo-AFAL

•

デザインツール

Integrates React components into Ruby on Rails applications using an islands architecture and the turbo-mount gem.

This skill provides specialized guidance and implementation patterns for embedding React components within Rails views using the turbo-mount gem. It empowers developers to maintain a 'Hotwire-first' philosophy, reserving React for high-complexity interactive widgets like diagrams or rich data visualizations while ensuring seamless integration with Turbo navigation, Stimulus-based communication, and clean component unmounting.

主な機能

011 GitHub stars

02Facilitates communication between React components and Stimulus controllers

03Implements islands architecture by embedding React components in Rails views

04Automates prop serialization best practices for ActiveRecord data

05Provides a decision framework for choosing between Hotwire/Stimulus and React

06Ensures clean component mounting and unmounting during Turbo navigation

ユースケース

01Converting specific high-interactivity frontend modules into isolated React islands

02Integrating rich, state-heavy data visualizations into a Hotwire-based application

03Adding complex interactive diagrams like React Flow to a Rails dashboard

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add grupo-afal/claude-plugins turbo-mount-react

For use in Claude.ai and ChatGPT

主な機能

011 GitHub stars

02Facilitates communication between React components and Stimulus controllers

03Implements islands architecture by embedding React components in Rails views

04Automates prop serialization best practices for ActiveRecord data

05Provides a decision framework for choosing between Hotwire/Stimulus and React

06Ensures clean component mounting and unmounting during Turbo navigation

ユースケース

01Converting specific high-interactivity frontend modules into isolated React islands

02Integrating rich, state-heavy data visualizations into a Hotwire-based application

03Adding complex interactive diagrams like React Flow to a Rails dashboard

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add grupo-afal/claude-plugins turbo-mount-react

For use in Claude.ai and ChatGPT