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.

跳到安装

仓库: pproenca/dot-skills
最近来源活动: 2026年5月27日 09:50
检测到的 SKILL.md 语言: 英语
星标: 193
分支: 17

安装方式

默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

直接命令不会经过审查 Prompt；运行前请先检查来源。

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

命令会保持在同一行。复制前请横向滚动并检查完整内容。

想先保存到本地？可下载 SkillsMP 当前能够提供的文件。

检查来源文件

决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。

文件资源管理器

57 个文件

SKILL.md

来源说明 · 只读预览

返回搜索返回安装

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

查看这个仓库的全部 Skills

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

来源信息

安装方式

检查来源文件

同仓库更多 Skills

同仓库更多 Skills

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