Agent skill

Turbo Patterns

by dilolabs in dilolabs/nosia

Creates Turbo Streams, Turbo Frames, and morphing patterns for real-time UI updates.

MITAuto-check passedAI & LLM Engineering

Install Turbo Patterns

skills CLI
$ npx skills add dilolabs/nosia --skill turbo-patterns -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install dilolabs/nosia turbo-patterns --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/dilolabs/nosia.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.vibe/skills/turbo-patterns .claude/skills/turbo-patterns && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
turbo-patterns
GitHub stars
213
Used in
1 other repo
Token cost
~1.6k tokens
SKILL.md length
366 words
Files
4 (incl. references)
Skills in repo
15
Repo updated
First seen
Licence
MIT

At a glance

Creates Turbo Streams, Turbo Frames, and morphing patterns for real-time UI updates.

  • Works in 4 steps: Lazy load expensive content:… → Debounce broadcasts: Only broadcast… → Use morphing for large updates: Faster… → …
  • Adding real-time updates
  • SKILL.md covers Your role, Core philosophy, Project knowledge and Commands, plus 11 more sections
  • Calls curl and rails

What it does

Turbo Patterns is an agent skill from dilolabs/nosia. 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).

Its SKILL.md is about 1.6k tokens, which your agent loads only when the skill is triggered. The skill folder holds 4 other files, including reference files (for example `references/broadcasting.md`, `references/turbo-frames.md` and `references/turbo-streams.md`). Compatibility notes: Ruby 3.3+, Rails 8.0+, Turbo 8+

It sits in AI & LLM Engineering. It works with JavaScript and Ruby on Rails. The repository describes itself as: Self-hosted AI RAG + MCP Platform. The licence is MIT.

When your agent uses it

  • Adding real-time updates
  • Partial page rendering
  • Form submissions

Example prompts

  • “Use the turbo-patterns skill to create Turbo Streams, Turbo Frames, and morphing patterns for real-time UI updates”
  • “/turbo-patterns”

Requirements

  • Compatibility (from SKILL.md): Ruby 3.3+, Rails 8.0+, Turbo 8+

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

  1. Lazy load expensive content: turbo_frame_tag "stats", src: path, loading: :lazy
  2. Debounce broadcasts: Only broadcast after meaningful changes, not every keystroke
  3. Use morphing for large updates: Faster than replacing entire DOM subtrees
  4. Target specific elements: Update just the count, not the entire sidebar

What it can do on your machine

Read from SKILL.md and the folder at commit 0ef5e5d. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • curl
    • rails

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use curl, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

  • Compatibility

    Ruby 3.3+, Rails 8.0+, Turbo 8+

    From compatibility in the SKILL.md frontmatter.

Context cost

Turbo Patterns loads about 1.6k tokens when it runs, and up to ~4.9k if it reads all its reference files. Until then it costs about 80 tokens; SKILL.md has 366 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~80
When it runs · the whole SKILL.md, loaded when a task matches
~1.6k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~4.9k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from dilolabs/nosia at commit 0ef5e5d, republished under its MIT licence (© dilolabs). 366 words, ~1,579 tokens.

Download SKILL.mdSave it as .claude/skills/turbo-patterns/SKILL.md (or your agent's skills folder). This skill also uses 3 other files; get the full folder from GitHub.
name
turbo-patterns
description
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).
compatibility
Ruby 3.3+, Rails 8.0+, Turbo 8+
license
MIT

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/cards
  • bin/dev (starts Rails + CSS/JS build)
  • bin/rails test:system

Seven stream actions

ruby
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 }

When to use what

ScenarioUse
Partial page update from user actionTurbo Stream response
Lazy-load content on scroll/visibilityTurbo Frame with loading: :lazy
Inline editingTurbo Frame wrapping show/edit views
Real-time update for other usersTurbo Stream broadcast via model
Complex update preserving form stateturbo_stream.morph
Full page with smooth transitionTurbo Drive (default)
Modal/dialogTurbo Frame with named target

Controller pattern

ruby
class Cards::CommentsController < ApplicationController
  def create
    @comment = @card.comments.create!(comment_params)
    respond_to do |format|
      format.turbo_stream
      format.html { redirect_to @card }
    end
  end

  def destroy
    @comment = @card.comments.find(params[:id])
    @comment.destroy!
    respond_to do |format|
      format.turbo_stream
      format.html { redirect_to @card }
    end
  end
end

Turbo Stream view (multiple updates in one response)

erb
<%# app/views/cards/comments/create.turbo_stream.erb %>
<%= turbo_stream.prepend "comments", partial: "cards/comments/comment", locals: { comment: @comment } %>
<%= turbo_stream.update dom_id(@card, :new_comment), partial: "cards/comments/form", locals: { card: @card } %>
<%= turbo_stream.update dom_id(@card, :comment_count) do %>
  <%= pluralize(@card.comments.count, "comment") %>
<% end %>
<%= turbo_stream.prepend "flash" do %>
  <div class="flash flash--notice">Comment added</div>
<% end %>

Morphing

Use turbo_stream.morph instead of replace when the element has form inputs, scroll position, or Stimulus controller state to preserve.

Enable globally
html
<meta name="turbo-refresh-method" content="morph">
<meta name="turbo-refresh-scroll" content="preserve">
Per-element control
erb
<div id="<%= dom_id(@card) %>" data-turbo-permanent>
  <%# Persists across page loads %>
</div>
Show full SKILL.md (147 more words)Show less

Flash messages with Turbo

ruby
# app/controllers/concerns/turbo_flash.rb
module TurboFlash
  extend ActiveSupport::Concern

  private

  def turbo_notice(message)
    turbo_stream.prepend "flash", partial: "shared/flash",
      locals: { type: :notice, message: message }
  end
end

Frame targets

erb
<%= form_with model: @card, data: { turbo_frame: "_top" } %>    <%# Full page %>
<%= link_to "Edit", edit_path, data: { turbo_frame: "_self" } %> <%# Current frame %>
<%= link_to "New", new_path, data: { turbo_frame: "modal" } %>   <%# Named frame %>

Performance tips

  1. Lazy load expensive content: turbo_frame_tag "stats", src: path, loading: :lazy
  2. Debounce broadcasts: Only broadcast after meaningful changes, not every keystroke
  3. Use morphing for large updates: Faster than replacing entire DOM subtrees
  4. Target specific elements: Update just the count, not the entire sidebar

Testing Turbo

ruby
# Controller test
test "create returns turbo stream" do
  post card_comments_path(@card),
    params: { comment: { body: "Test" } },
    as: :turbo_stream

  assert_response :success
  assert_equal "text/vnd.turbo-stream.html", response.media_type
  assert_match /turbo-stream/, response.body
end

# System test
test "creating a comment" do
  visit card_path(@card)
  fill_in "Body", with: "Great card!"
  click_button "Add Comment"
  assert_text "Great card!"  # Turbo Stream inserts without reload
end

Boundaries

  • Always: Use Turbo Streams for create/update/destroy responses, broadcast to relevant streams, use dom_id for element IDs, provide fallback HTML responses, test Turbo responses
  • Ask first: Before adding JS frameworks, before broadcasting to many users (performance), before using Turbo Frames for navigation
  • Never: Mix Turbo with client-side rendering frameworks, forget Turbo Stream format responses, broadcast on every tiny change (debounce), skip turbo_stream_from subscriptions

Reference files

  • references/turbo-streams.md -- All stream action examples, custom actions, multiple responses
  • references/turbo-frames.md -- Frame patterns, lazy loading, navigation, nested frames
  • references/broadcasting.md -- Model broadcasts, ActionCable setup, Solid Cable, channel patterns

© dilolabs, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 3 other files (references) in .vibe/skills/turbo-patterns of dilolabs/nosia.

  • SKILL.md
  • references/broadcasting.md
  • references/turbo-frames.md
  • references/turbo-streams.md

Open the folder on GitHubat commit 0ef5e5d

Used in 1 other repository

We found 3 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in dilolabs/nosia, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Turbo Patterns next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Turbo Patterns compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Turbo Patterns this skilldilolabs/nosia2131 repos~1.6kAutomated safety check: PassMIT
Tavily Search API Integrationandrewyng/context-hub14k—~1.1kAutomated safety check: PassMIT
Routerbase API Integrationaiskillstore/marketplace430—~964Automated safety check: PassNone
Compromise NLP Libraryspencermountain/compromise12k—~2kAutomated safety check: PassMIT
Compromise NLP for JavaScriptspencermountain/compromise12k—~1.8kAutomated safety check: PassMIT
Gemini API Devgoogle-gemini/gemini-skills4.3k—~5.1kAutomated safety check: PassApache-2.0

Similar skills

  • Tavily Search API Integration

    andrewyng/context-hub

    Guides building Tavily integrations for web search, URL extraction, site crawling and AI-assisted research in Python or JavaScript agent and RAG projects.

    14k GitHub stars~1.1k tokensUpdated 4 mo ago
    AI & LLM EngineeringAuto-check passed
  • Routerbase API Integration

    aiskillstore/marketplace

    Integrate applications with RouterBase, the OpenAI-compatible model gateway at https://routerbase.com/v1.

    430 GitHub stars~964 tokensUpdated today
    AI & LLM EngineeringAuto-check passed
  • Compromise NLP Library

    spencermountain/compromise

    Helps write and debug JavaScript or TypeScript that uses the compromise English NLP library for matching, entity extraction, tagging and sentence transforms.

    12k GitHub stars~2k tokensUpdated today
    AI & LLM EngineeringAuto-check passed
  • Compromise NLP for JavaScript

    spencermountain/compromise

    Guide for writing correct code with the compromise rule-based NLP library: tagging, match syntax, in-place transforms and common tasks like tense changes and redaction.

    12k GitHub stars~1.8k tokensUpdated today
    AI & LLM EngineeringAuto-check passed
  • Gemini API Dev

    google-gemini/gemini-skills

    Official

    A skill your agent uses when writing code that calls the Gemini API for text generation, multi-turn chat, multimodal understanding, image generation, video generation, speech generation (TTS), voice…

    4.3k GitHub stars~5.1k tokensUpdated yesterday
    AI & LLM EngineeringAuto-check passed
  • Gemini Live API Dev

    google-gemini/gemini-skills

    Official

    A skill your agent uses when building real-time, bidirectional streaming applications with the Gemini Live API, or migrating legacy Live models (2.0/2.5/3.1) to Gemini 3.8 Live.

    4.3k GitHub stars~4.6k tokensUpdated yesterday
    Backend & APIsAuto-check passed

More from dilolabs/nosia

All 15 skills in this repo
  • API Patterns

    dilolabs/nosia

    Builds REST APIs using respondto blocks with Jbuilder templates following the 37signals same-controllers-different-formats philosophy.

    213 GitHub starsUsed in 1 repo~2.5k tokens
    Auto-check passed
  • Auth Setup

    dilolabs/nosia

    Implements custom passwordless authentication without Devise.

    213 GitHub starsUsed in 1 repo~2.9k tokens
    Auto-check passed
  • Caching Patterns

    dilolabs/nosia

    Implements HTTP caching with ETags, fragment caching, Russian doll caching, and Solid Cache configuration.

    213 GitHub starsUsed in 1 repo~1.9k tokens
    Auto-check passed
  • Concern Patterns

    dilolabs/nosia

    Creates and refactors model and controller concerns for shared behavior.

    213 GitHub starsUsed in 1 repo~1.8k tokens
    Auto-check passed
  • Event Tracking

    dilolabs/nosia

    Builds event tracking, activity feeds, and webhook systems following 37signals patterns with a generic Event model and Eventable concern.

    213 GitHub starsUsed in 1 repo~3.3k tokens
    Auto-check passed
  • Job Patterns

    dilolabs/nosia

    Implements shallow background jobs with later/now conventions using Solid Queue.

    213 GitHub starsUsed in 1 repo~1.6k tokens
    Auto-check passed

Questions about Turbo Patterns

What does Turbo Patterns do?

Creates Turbo Streams, Turbo Frames, and morphing patterns for real-time UI updates. Turbo Patterns is an agent skill from dilolabs/nosia. Creates Turbo Streams, Turbo Frames, and morphing patterns for real-time UI updates.

When should I use Turbo Patterns?

Turbo Patterns fits situations like: adding real-time updates; partial page rendering; form submissions.

How do I install Turbo Patterns in Claude Code?

Run `npx skills add dilolabs/nosia --skill turbo-patterns -a claude-code`. Or copy the skill folder (.vibe/skills/turbo-patterns in dilolabs/nosia) into .claude/skills/turbo-patterns in your project. Claude Code loads it when a task matches its description.

How do I install Turbo Patterns in Codex?

Run `npx skills add dilolabs/nosia --skill turbo-patterns -a codex`. Or copy the skill folder (.vibe/skills/turbo-patterns in dilolabs/nosia) into .agents/skills/turbo-patterns in your project. Codex loads it when a task matches its description.

Can I use Turbo Patterns in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add dilolabs/nosia --skill turbo-patterns -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/turbo-patterns, .gemini/skills/turbo-patterns, .github/skills/turbo-patterns and .opencode/skills/turbo-patterns in your project.

What does Turbo Patterns need to run?

Going by SKILL.md and its folder, Turbo Patterns needs the command-line tools its instructions call (curl and rails). Compatibility (from SKILL.md): Ruby 3.3+, Rails 8.0+, Turbo 8+.

Does Turbo Patterns access the network?

SKILL.md contains no URLs. Its commands use curl, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Turbo Patterns safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Turbo Patterns use?

Turbo Patterns is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Turbo Patterns use?

About 1.6k tokens (SKILL.md is roughly 6.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 3.3k tokens, read only when the agent opens those files.

What are the alternatives to Turbo Patterns?

Skills that share tags, products or a category with Turbo Patterns: Tavily Search API Integration (andrewyng/context-hub, 14k stars), Routerbase API Integration (aiskillstore/marketplace, 430 stars), Compromise NLP Library (spencermountain/compromise, 12k stars) and Compromise NLP for JavaScript (spencermountain/compromise, 12k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Turbo Patterns?

dilolabs (a GitHub organization) maintains it in dilolabs/nosia, which has 213 GitHub stars. The repository holds 15 skills in this directory. The repository was last updated on September 9, 2026.

Source: dilolabs/nosia on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.