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.

Jump to install

Repository: pproenca/dot-skills
Last source activity: May 27, 2026 at 09:50
Detected SKILL.md language: English
Stars: 193
Forks: 17

Install options

The review-first prompt is selected by default. You can switch to a direct command or download a local copy.

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

A direct command skips the review prompt. Inspect the source before running it.

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

The command stays on one line. Scroll horizontally to inspect it before copying.

Prefer a local copy? Download the files currently available to SkillsMP.

Review the source files

Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.

File Explorer

57 files

SKILL.md

Source instructions · Read-only preview

Back to search Back to installation

drizzle-nextjs-postgres

Drizzle ORM against PostgreSQL inside a Next.js App Router app. Covers client construction (globalThis singleton across HMR, serverless pool sizing, `prepare:false` behind PgBouncer/Supavisor, driver choice when you need interactive transactions, `server-only`), reads in Server Components under Next.js 16 Cache Components (`use cache` superseding `unstable_cache` and the `revalidate`/`dynamic` segment configs, Suspense boundaries, React `cache()` dedupe), Server Actions (authorization inside the action, `updateTag` vs `revalidateTag`, `after()`), Postgres schema types (timestamptz, identity vs serial, jsonb, numeric-as-string, bigint modes), drizzle-kit migrations (generate vs push, CONCURRENTLY outside the migrator, NOT VALID constraints, rename prompts), transactions and pooled connections, and Postgres query traps (keyset pagination, count cost, driver-dependent `db.execute()` shape, NOT IN nulls, prepared statements). Use when writing or reviewing Drizzle + Postgres code in Next.js.

2026-07-24

relational-data-modeling

Corrects the wrong defaults a model has when designing a relational schema — the DDL decisions an experienced engineer makes differently. Use when creating or reviewing tables, migrations, ER models, or ORM schema definitions. Covers identity and keys (surrogate vs natural, identity vs serial, uuidv7, composite keys that make cross-tenant references impossible), relationships (polymorphic foreign keys the database cannot enforce, referential actions, unindexed FK columns, disjoint subtypes), invariants the engine can prove instead of application code (EXCLUDE, partial unique indexes, CHECK limits, deferrable cycles, NOT VALID), types (timestamptz, exact money, range types, enum vs lookup table), derived and encoded data (generated columns, JSONB as an escape hatch), and time (events vs in-place updates, soft-delete flags that silently disable constraints, temporal keys). NOT for query tuning, index selection for read paths, or connection pooling.

2026-07-23

relational-database-design

Distills a logical relational-database design methodology into rules an agent applies while designing or reviewing a schema. Covers the design sequence (mission → tables → fields → keys → relationships → business rules → views → integrity review), one-subject-per-table decomposition, atomic single-valued fields, candidate/primary/foreign keys, relationship types with deletion rules and participation, the four levels of data integrity, database-vs-application business rules, validation tables, views for derived data, and the flat-file / spreadsheet / RDBMS-driven antipatterns to avoid. The structure is logical and RDBMS-agnostic, and normalized by construction. Use when designing a new relational schema, reviewing or refactoring an existing one, resolving redundant or repeating data, choosing keys, modeling relationships, or deciding where a constraint belongs.

2026-07-23

View all from this repository

name

rails-hotwire

description

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

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)

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

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

rails-hotwire

Source facts

Install options

Review the source files

More from this repository

More from this repository

Community Rails Hotwire Best Practices

When to Apply

Rule Categories by Priority

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

Reference Files

Community Rails Hotwire Best Practices

When to Apply

Rule Categories by Priority

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

Reference Files