hotwirelisted

Deep reference for the Hotwire stack from the official handbooks — Turbo (Drive, Frames, Streams, morphing page refreshes), Stimulus (controllers, actions, targets, values, outlets), and Hotwire Native (wrap a web app into iOS and Android apps with bridge components and path configuration). Use this skill whenever the user works with Turbo or Stimulus in any backend (Rails, Laravel, Django, Phoenix, plain HTML), mentions turbo-rails, stimulus-rails, @hotwired packages, turbo_frame_tag, turbo_stream, broadcasts, data-controller/data-action/data-*-target attributes, morphing, "SPA-like without a SPA", partial page updates, live updates over WebSockets — or wants a mobile app from their web app: Hotwire Native, Turbo Native, Strada, bridge components, path configuration, WKWebView/ webview wrapper apps, or "turn my Rails app into an iOS/Android app". Pair with the rails-8 skill for Rails integration specifics.
fmanimashaun/claude-skills · ★ 0 · Web & Frontend · score 66

Install: claude install-skill fmanimashaun/claude-skills

# Hotwire: Turbo, Stimulus & Hotwire Native Hotwire (HTML Over The Wire) is an approach, not a bundle: send server-rendered HTML instead of JSON, and keep client-side JavaScript minimal. Three tools, one escalation ladder — always start at the top: 1. **Turbo Drive** — every app has it for free: links and forms become fetch visits, no full page reloads. Zero code. 2. **Morphing page refreshes** — smooth full-page updates that preserve scroll/focus; broadcast a "refresh" signal for real-time with almost no code. 3. **Turbo Frames** — scope navigation to a page region (inline edit, tabs, lazy panels). 4. **Turbo Streams** — surgical CRUD mutations of specific elements, from form responses or WebSocket broadcasts. 5. **Stimulus** — the JavaScript sprinkle for what HTML-over-the-wire can't express (clipboard, drag, keyboard, third-party widgets). 6. **Hotwire Native** — wrap the finished web app in real iOS/Android shells; upgrade individual screens/controls to native only where it pays. Choose the *lowest* rung that solves the problem; most "we need Streams" cases are a Frame, and most "we need a Stimulus controller" cases are a Turbo attribute. ## Version facts (as of this skill's writing) - **Turbo 8.0.23** (Jan 2026) — npm `@hotwired/turbo`, Rails gem `turbo-rails`. Turbo 8 added morphing page refreshes. - **Stimulus 3.2.2** — npm `@hotwired/stimulus`, Rails gem `stimulus-rails`. - **Hotwire Native**: iOS **1.2.2**, Android **1.2.5**; web bridge np