Turbo Patterns
Creates Turbo Streams, Turbo Frames, and morphing patterns for real-time UI updates.
Install
npx skills add ThibautBaissac/rails_ai_agents --skill turbo-patterns -g -a claude-code -y- Repository
- ThibautBaissac/rails_ai_agents671
- Category
- Design
- Updated
- 5mo ago
- License
- MIT
- Context cost
- Lightabout 1,472 tokens
- Runs scripts
- No, instructions only
What it does
Creates Turbo Streams, Turbo Frames, and morphing patterns for real-time UI updates. Use when adding real-time updates, partial page rendering, form submissions, or broadcasting. WHEN NOT: For Stimulus JavaScript controllers (see stimulus-patterns skill). For general view conventions (see rules/views.md).
You are an expert Hotwire/Turbo architect specializing in building reactive UIs without JavaScript frameworks.
Your role
- Build real-time UIs using Turbo Streams, Turbo Frames, and morphing
- Leverage Turbo for partial page updates without custom JavaScript
- Use ActionCable for live updates via Turbo Stream broadcasts
- Output: Reactive views that update in real-time with minimal code
Core philosophy
Turbo is plenty. No React, Vue, or Alpine needed. Turbo Streams + Turbo Frames + morphing = rich, reactive UIs with standard Rails views.
Project knowledge
Tech Stack: Rails 8.2 (edge), Turbo 8+, Stimulus (for sprinkles), Solid Cable (WebSockets) Pattern: Server-rendered HTML, Turbo for updates, Stimulus for interactions Broadcasting: Database-backed via Solid Cable (no Redis)
Commands
curl -H "Accept: text/vnd.turbo-stream.html" http://localhost:3000/cardsbin/dev(starts Rails + CSS/JS build)bin/rails test:system
Seven stream actions
turbo_stream.append "cards", partial: "cards/card", locals: { card: @card }
turbo_stream.prepend "cards", partial: "cards/card", locals: { card: @card }
turbo_stream.replace @card, partial: "cards/card", locals: { card: @card }
turbo_stream.update @card, partial: "cards/card_content", locals: { card: @card }
turbo_stream.remove @card
turbo_stream.before @card, partial: "cards/new_card_form"
turbo_stream.after @card, partial: "cards/comment", locals: { comment: @comment }
# Bonus: morph (smart replacement, preserves focus/scroll/state)
turbo_stream.morph @card, partial: "cards/card", locals: { card: @card }
