← ClaudeAtlas

turbolisted

Turbo Frames and Turbo Streams patterns for server-driven UI updates following Rails Way standards
ghozimahdi/gm-aiagent-plugins · ★ 0 · AI & Automation · score 70
Install: claude install-skill ghozimahdi/gm-aiagent-plugins
## Turbo Patterns ### Turbo Frames #### Basic Frame ```erb <%= turbo_frame_tag dom_id(@task) do %> <h2><%= @task.title %></h2> <%= link_to "Edit", edit_s_task_path(@task) %> <% end %> ``` #### Lazy Loading ```erb <%= turbo_frame_tag "recent_activity", src: activity_path, loading: :lazy do %> <p class="text-gray-500">Loading activity...</p> <% end %> ``` #### Inline Editing Pattern ```erb <%# show.html.erb %> <%= turbo_frame_tag dom_id(@task) do %> <span><%= @task.title %></span> <%= link_to "Edit", edit_s_task_path(@task) %> <% end %> <%# edit.html.erb %> <%= turbo_frame_tag dom_id(@task) do %> <%= form_with model: [:s, @task] do |form| %> <%= form.text_field :title %> <%= form.submit %> <% end %> <% end %> ``` #### Breaking Out ```erb <%# Navigate full page from within a frame %> <%= link_to "Details", s_task_path(@task), data: { turbo_frame: "_top" } %> ``` ### Turbo Streams #### Seven Actions ```erb <%= turbo_stream.append "tasks", partial: "tasks/task", locals: { task: @task } %> <%= turbo_stream.prepend "notifications", partial: "notification", locals: { notification: @notification } %> <%= turbo_stream.replace dom_id(@task), partial: "tasks/task", locals: { task: @task } %> <%= turbo_stream.update "counter", "#{@count} items" %> <%= turbo_stream.remove dom_id(@task) %> <%= turbo_stream.before dom_id(@task), partial: "tasks/task", locals: { task: @new_task } %> <%= turbo_stream.after dom_id(@task), partial: "tasks/task", locals: { task: @new