MCPInstall

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, turbostreamfrom, turboframetag, data-controller, data-action, or Hotwire performance. Complementary to rails-dev, rails-testing, rails-design-system, ruby-optimise, and ruby-refactor skills.

Installs
372
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/pproenca/dot-skills --skill rails-hotwire
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads rails-hotwire automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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.

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

PriorityCategoryImpactPrefix
1Navigation & DriveCRITICALdrive-
2Turbo FramesCRITICALframe-
3Turbo StreamsHIGHstream-
4Broadcasting & Real-TimeHIGHbcast-
5Morphing & Page RefreshHIGHmorph-
6Performance OptimizationMEDIUM-HIGHperf-
7Stimulus PatternsMEDIUM-HIGHstim-
8Architecture DecisionsMEDIUMarch-
9Testing HotwireMEDIUMtest-

Quick Reference

1. Navigation & Drive (CRITICAL)

  • drive-prefetch-links - Enable link prefetching for instant navigation
  • drive-form-submissions - Use Turbo Drive for form submissions
  • drive-visit-actions - Control history with visit actions
  • drive-cache-control - Configure Turbo cache for preview pages
  • drive-selective-disable - Disable Turbo Drive on incompatible pages
  • drive-progress-bar - Customize the Turbo progress bar
  • drive-confirm-dialog - Use data-turbo-confirm for destructive actions
  • drive-error-recovery - Handle Turbo navigation and fetch errors gracefully

2. Turbo Frames (CRITICAL)

  • frame-lazy-loading - Defer frame loading until viewport entry
  • frame-scope-navigation - Scope navigation within frames
  • frame-src-navigation - Use src for dynamic frame content
  • frame-break-out - Handle frame breakout for redirects
  • frame-promote-visits - Promote frame navigation to page visits
  • frame-dom-id - Use dom_id for frame identification
  • frame-empty-state - Provide meaningful frame loading states

3. Turbo Streams (HIGH)

  • stream-progressive-enhance - Always provide HTML fallback for streams
  • stream-action-selection - Choose the right stream action for DOM mutations
  • stream-multi-target - Use targets for multi-element updates
  • stream-http-delivery - Deliver streams via HTTP for form responses
  • stream-websocket-source - Connect WebSocket sources in the body
  • stream-custom-actions - Register custom stream actions for complex DOM updates

4. Broadcasting & Real-Time (HIGH)

  • bcast-model-broadcasts - Use broadcasts_refreshes for simple model updates
  • bcast-debounce-n1 - Debounce broadcasts to prevent N+1 broadcast storms
  • bcast-scope-streams - Scope broadcast streams to accounts or users
  • bcast-refresh-over-replace - Prefer broadcast refresh over granular stream updates
  • bcast-avoid-view-logic-in-models - Keep broadcasting logic out of models
  • bcast-signed-stream-names - Use signed stream names for security
  • bcast-reconnect-handling - Handle WebSocket disconnection and reconnection

5. Morphing & Page Refresh (HIGH)

  • morph-enable-page-refresh - Enable morphing for page refreshes
  • morph-permanent-elements - Mark stateful elements as permanent
  • morph-scroll-preservation - Preserve scroll position during morphing
  • morph-stimulus-reconnect - Handle Stimulus controller reconnection after morph
  • morph-frame-refresh - Use refresh='morph' on frames for additive content
  • morph-vs-streams - Choose morphing over complex stream orchestration

6. Performance Optimization (MEDIUM-HIGH)

  • perf-optimistic-ui - Implement optimistic UI updates before server confirmation
  • perf-batch-streams - Batch multiple stream updates into single responses
  • perf-frame-caching - Cache Turbo Frame responses with fragment caching
  • perf-prefetch-strategic - Disable prefetch on expensive endpoints
  • perf-memory-leak-prevention - Clean up subscriptions and event listeners

7. Stimulus Patterns (MEDIUM-HIGH)

  • stim-outlets-communication - Use outlets for cross-controller communication
  • stim-values-reactive-state - Use Values API for reactive controller state
  • stim-action-descriptors - Use declarative action descriptors over addEventListener
  • stim-small-reusable-controllers - Keep Stimulus controllers small and reusable

8. Architecture Decisions (MEDIUM)

  • arch-progressive-enhancement - Follow the progressive enhancement hierarchy
  • arch-frame-vs-stream-decision - Use frames for scoped navigation, streams for multi-target updates
  • arch-importmap-management - Pin JavaScript dependencies with import maps
  • arch-avoid-client-state - Keep state on the server, not the client
  • arch-stimulus-boundaries - Use Stimulus only for client-side behavior

9. Testing Hotwire (MEDIUM)

  • test-system-test-async - Wait for Turbo updates in system tests
  • test-stream-assertions - Use Turbo Stream test helpers in integration tests
  • test-broadcast-assertions - Assert broadcasts with Turbo test helpers
  • test-frame-navigation - Test frame navigation with scoped assertions
  • test-websocket-timing - Handle WebSocket connection timing in system tests

How to Use

Read individual reference files for detailed explanations and code examples:

  • Section definitions - Category structure and impact levels
  • Rule template - Template for adding new rules

Reference Files

FileDescription
references/_sections.mdCategory definitions and ordering
assets/templates/_template.mdTemplate for new rules
metadata.jsonVersion and reference information

FAQ

What does the rails-hotwire skill do?

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, turbostreamfrom, turboframetag, data-controller, data-action, or Hotwire performance. Complementary to rails-dev, rails-testing, rails-design-system, ruby-optimise, and ruby-refactor skills.

How do I install rails-hotwire?

Run npx skills add https://github.com/pproenca/dot-skills --skill rails-hotwire in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/rails-hotwire/ (personal) or .claude/skills/rails-hotwire/ (project).

Which AI agents can use rails-hotwire?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is rails-hotwire safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains rails-hotwire?

It is published by pproenca in pproenca/dot-skills. It has 372 recorded installs.

More from pproenca/dot-skills

View all →

zod

pproenca/dot-skills

Zod schema validation best practices for type safety, parsing, and error handling. This skill should be used when defining z.object schemas, using z.string validations, safeParse, or z.infer. This skill does NOT cover React Hook Form integration patterns (use react-hook-form skill) or OpenAPI client generation (use orval skill).

Frontend & Design7.1K installs

vitest

pproenca/dot-skills

Vitest testing framework patterns for test setup, async testing, mocking with vi., snapshots, and test performance (formerly test-vitest). This skill should be used when writing or debugging Vitest tests. This skill does NOT cover TDD methodology (use test-tdd skill), API mocking with MSW (use test-msw skill), or Jest-specific APIs.

Testing & QA6.2K installs

react-hook-form

pproenca/dot-skills

React Hook Form performance optimization for client-side form validation using useForm, useWatch, useController, useFieldArray, the subscribe() API, and the Watch / FormStateSubscribe / FieldArray render-prop components. Covers RHF 7.82 additions including resetDefaultValues() and the disabled field-array option. This skill should be used when building client-side controlled forms with React Hook Form library. This skill does NOT cover React 19 Server Actions, useActionState, or server-side form handling (use react-19 skill for those).

emilkowal-animations

pproenca/dot-skills

Emil Kowalski's animation best practices for web interfaces. Use when writing, reviewing, or implementing animations in React, CSS, or Framer Motion. Triggers on tasks involving transitions, easing, gestures, toasts, drawers, or motion.

Frontend & Design2.8K installs

nuqs

pproenca/dot-skills

nuqs (type-safe URL query state) best practices for Next.js and other React frameworks. This skill should be used when writing, reviewing, or refactoring code that uses nuqs for URL state management. Triggers on tasks involving useQueryState, useQueryStates, search params, URL state, query parameters, nuqs parsers, limitUrlUpdates, Standard Schema, NuqsAdapter, or Next.js routing with state.

Frontend & Design2.3K installs

clean-architecture

pproenca/dot-skills

Clean Architecture principles and best practices from Robert C. Martin's book. This skill should be used when designing software systems, reviewing code structure, or refactoring applications to achieve better separation of concerns. Triggers on tasks involving layers, boundaries, dependency direction, entities, use cases, or system architecture.

Popular backend & apis skills

View category →

find-skills

vercel-labs/skills

Helps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skill should be used when the user is looking for functionality that might exist as an installable skill.

OfficialBackend & APIs4.1M installs

entra-app-registration

microsoft/azure-skills

Guides Microsoft Entra ID app registration, OAuth 2.0 authentication, and MSAL integration. USE FOR: create app registration, register Azure AD app, configure OAuth, set up authentication, add API permissions, generate service principal, MSAL example, console app auth, Entra ID setup, Azure AD authentication. DO NOT USE FOR: Key Vault secrets (use azure-keyvault-expiration-audit), general Azure resource security guidance.

OfficialBackend & APIs566.7K installs

This skill should be used when the user wants to "write agent code", "build an agent with ADK", "add a tool", "create a callback", "define an agent", "use state management" — in a project that needs ADK (Agent Development Kit) API patterns and code examples. It provides a quick reference for agent types, tool definitions, orchestration patterns, callbacks, state management, the graph Workflow API, and reference recipes to study. Do NOT use for scaffolding (use google-agents-cli-scaffold) or deployment (use google-agents-cli-deploy).

Backend & APIs514.8K installs

embedded-captions

heygen-com/hyperframes

Add captions or subtitles to an existing single-subject talking-head video without editing the footage. Use for plain verbatim captions, cinematic captions embedded behind the subject, VFX captions, “炸/特效/酷炫字幕,” or a named identity from the 35-style catalog. Route by visual identity, not by backend engine. The quiet anchor rail is the default; embed every word only when the user explicitly wants a fully cinematic treatment. The workflow runs locally end to end, including transcription and subject matting; split multi-shot footage before applying it.

Backend & APIs453.3K installs

entra-agent-id

microsoft/azure-skills

Provision Microsoft Entra Agent Identity Blueprints, BlueprintPrincipals, and per-instance Agent Identities via Microsoft Graph, and configure OAuth 2.0 token exchange (fmipath, OBO, cross-tenant) including the Microsoft Entra SDK for AgentID sidecar. USE FOR: Agent Identity Blueprint, BlueprintPrincipal, agent OAuth, fmipath token exchange, agent OBO, Workload Identity Federation for agents, polyglot agent auth, Microsoft.Identity.Web.AgentIdentities. DO NOT USE FOR: standard Entra app registration (use entra-app-registration), Microsoft Foundry agent authoring (use microsoft-foundry).

OfficialBackend & APIs336.6K installs

neon

neondatabase/agent-skills

Overview of Neon, a complete set of cloud backend primitives around Lakebase Postgres: Auth, Object Storage, Functions, the AI Gateway, and Realtime. Start here to choose Neon for undecided login, files, APIs, and LLM calls, set up the CLI or MCP server, and follow the branch-first workflow. Use when building an app or backend on Neon, or when "Neon" or "Lakebase Postgres" is mentioned. Child skill neon-postgres wins for an existing DATABASEURL, SQL, schema, inspect, or search. Child skill neon-auth wins for login, users, sessions, identity routing, and Managed Better Auth setup. Child skill neon-realtime wins for live queries in reactive apps and agents. Also use for object storage, S3, buckets, serverless functions, function triggers, cron, AI gateway, LLM calls, realtime, logs, Loki, Grafana, observability, postgres, database, backend, Claimable Neon, neon.new, or a no-signup database.

Backend & APIs237.1K installs