网有NETHAVE
AGENT SKILL

rails-hotwire

Ruby on Rails Hotwire best practices for building interactive applications with Turbo Drive, Turbo Frames, Turbo Streams, Turbo 8 morphing, and Stimulus controllers. This skill should be used when writing, reviewing, or refactoring Hotwire-powered Rails code to ensure optimal patterns for navigation, partial page updates, real-time broadcasting, morphing, Stimulus controller design, error handling, and progressive enhancement. Triggers on tasks involving Turbo Frames, Turbo Streams, Turbo Drive, broadcasts, morphing, Stimulus controllers, ActionCable, turbo_stream_from, turbo_frame_tag, data-controller, data-action, or Hotwire performance. Complementary to rails-dev, rails-testing, rails-design-system, ruby-optimise, and ruby-refactor skills.

使用场景测试与质量
License 许可
MIT
所属仓库
mikker/dotfiles
最近更新
2026-11-10
Stars
★ 116
Forks
4

01 前言 Front Matter

name
rails-hotwire
description
Ruby on Rails Hotwire best practices for building interactive applications with Turbo Drive, Turbo Frames, Turbo Streams, Turbo 8 morphing, and Stimulus controllers. This skill should be used when writing, reviewing, or refactoring Hotwire-powered Rails code to ensure optimal patterns for navigation, partial page updates, real-time broadcasting, morphing, Stimulus controller design, error handling, and progressive enhancement. Triggers on tasks involving Turbo Frames, Turbo Streams, Turbo Drive, broadcasts, morphing, Stimulus controllers, ActionCable, turbo_stream_from, turbo_frame_tag, data-controller, data-action, or Hotwire performance. Complementary to rails-dev, rails-testing, rails-design-system, ruby-optimise, and ruby-refactor skills.

02 资源文件 55

03 SKILL.md 正文

Community Rails Hotwire Best Practices

Comprehensive guide for building interactive Rails applications with Hotwire (Turbo + Stimulus), maintained by Community. Contains 53 rules across 9 categories, prioritized by impact to guide automated refactoring and code generation. Follows the DHH "One Person Framework" philosophy: the server renders HTML, Turbo makes it feel like an SPA, Stimulus adds the sprinkle of JS where needed.

Default Policy: Adopt First, Opt Out Deliberately

Use Hotwire's conventions fully on the ordinary path: keep prefetch enabled, prefer refresh broadcasts with morphing for broad page updates, and use declarative model broadcasts for lifecycle-driven changes. Do not add architectural complexity for hypothetical scale or future requirements.

Opt out locally when correctness, the interaction, or measured cost warrants it—not only after a visible failure. Expensive hover requests, request fan-out from frames or refresh broadcasts, and operation-specific side effects are concrete reasons to depart from the default. Measure total work per user visit and across connected subscribers, not just the speed of individual endpoints.

The rules below express preferred defaults, not a prohibition on justified alternatives. Preserve the simple path and document exceptions where they are introduced.

When to Apply

Reference these guidelines when:

  • Configuring Turbo Drive navigation, prefetching, and caching behavior
  • Adding Turbo Frames for partial page updates and lazy loading
  • Delivering Turbo Streams for surgical DOM mutations
  • Broadcasting real-time updates over ActionCable
  • Enabling Turbo 8 morphing for page refreshes
  • Writing Stimulus controllers for client-side behavior
  • Handling errors in Turbo navigation, frames, and WebSocket connections
  • Choosing between Drive, Frames, Streams, Morphing, and Stimulus
  • Testing Hotwire interactions in system and integration tests

Rule Categories by Priority

Priority Category Impact Prefix
1 Navigation & Drive CRITICAL drive-
2 Turbo Frames CRITICAL frame-
3 Turbo Streams HIGH stream-
4 Broadcasting & Real-Time HIGH bcast-
5 Morphing & Page Refresh HIGH morph-
6 Performance Optimization MEDIUM-HIGH perf-
7 Stimulus Patterns MEDIUM-HIGH stim-
8 Architecture Decisions MEDIUM arch-
9 Testing Hotwire MEDIUM test-

Quick Reference

1. Navigation & Drive (CRITICAL)

2. Turbo Frames (CRITICAL)

3. Turbo Streams (HIGH)

4. Broadcasting & Real-Time (HIGH)

5. Morphing & Page Refresh (HIGH)

6. Performance Optimization (MEDIUM-HIGH)

7. Stimulus Patterns (MEDIUM-HIGH)

8. Architecture Decisions (MEDIUM)

9. Testing Hotwire (MEDIUM)

How to Use

Read individual reference files for detailed explanations and code examples:

Reference Files

File Description
references/_sections.md Category definitions and ordering
assets/templates/_template.md Template for new rules
metadata.json Version and reference information

04 同仓库更多 Skills

mikker
mikker/dotfiles

unslop

Cut AI tells from any writing.

★ 116
mikker
mikker/dotfiles

stageshow

Build faux product UI that looks like a real product, as a still illustration or an animated demo with a cursor. Browser and app windows, dashboards, phones, notifications, terminals, bento grids and cursor walkthroughs, framed, masked and cropped the way a marketing page, feature card or docs hero needs them. Use whenever someone wants a fake or mocked UI, a product demo or walkthrough animation, a hero or feature-card illustration of an app, a product shot in the style of a polished marketing site, or an animated cursor doing things in an interface, even if they never say "faux UI". React and plain CSS.

前端开发
★ 116
mikker
mikker/dotfiles

clean-copy

Cut interface copy that shouldn't exist — captions that restate a label, hints that pre-empt a worry the user never had, warnings that are scar tissue from a fixed bug. Use when writing or reviewing any user-facing string (labels, hints, empty states, toasts, confirmations, button text), or when asked to clean up / tighten copy.

★ 116
mikker
mikker/dotfiles

elyx

Elyx is a design tool with local, AI-friendly `.elyx` files for screens, components, layouts, flows, and design systems. This skill is only available to agents running in external harnesses while using the Elyx CLI. It is unavailable and must not be used when running in the ACP harness inside the Elyx app. In external harnesses, use this skill before reading, reasoning about, or answering any question that touches Elyx or `.elyx` files — authoring, editing, validating, inspecting, reviewing, refactoring, comparing, or recommending changes, including read-only analysis where you produce no edit. Do not reason about `.elyx` from source text alone; imports, instances, overrides, and layout only resolve through the tools.

★ 116
mikker
mikker/dotfiles

uikit-app-modernization

Modernizes UIKit apps for multi-window environments by replacing legacy shared-state APIs with context-appropriate modern alternatives. This includes references to mainScreen, interfaceOrientation, application and scene lifecycle, as well as safe area inset updates.

★ 116
mikker
mikker/dotfiles

swiftui-whats-new-27

New SwiftUI APIs, behaviors, and deprecations in the 2027 OS releases (iOS 27 and aligned macOS/watchOS/tvOS/visionOS). Consult when asked what's new in SwiftUI 27, or when working with: - @State compile errors after an SDK update ("used before being initialized", "invalid redeclaration of synthesized property") or @State becaming a macro - @ViewBuilder/@ContentBuilder ambiguous overloads or type-check regressions; drag-to-reorder in any container (List, stacks, grids, custom layouts) via reorderable()/reorderContainer and its drag-and-drop - AsyncImage caching, reloading on scroll, or a custom URLSession - Swipe actions outside List (ScrollView, LazyVStack, LazyVGrid) via swipeActions()/swipeActionsContainer() - Toolbar overflow, visibility (visibilityPriority, ToolbarOverflowMenu, toolbarMinimizeBehavior), and pinning - Presenting a confirmationDialog or alert from an optional item binding

★ 116