developing-with-turbo-drive
An assistant for developing web applications using Turbo Drive, focusing on SPA-like navigation and form handling.
Install
mkdir -p .claude/skills/developing-with-turbo-drive && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/6040" && unzip -o skill.zip -d .claude/skills/developing-with-turbo-drive && rm skill.zipInstalls to .claude/skills/developing-with-turbo-drive
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Basics of developing with Turbo Drive in web applications. Activate when working on projects that utilize Turbo Drive for enhancing user experience through faster navigation by intercepting link clicks and form submissions to avoid full page reloads.Key capabilities
- →Intercept link clicks and form submissions to prevent full page reloads
- →Configure page morphing to preserve DOM state during refreshes
- →Manage cache control for pages to optimize navigation performance
- →Track asset changes to trigger full page reloads when necessary
- →Customize the appearance of the navigation progress bar
- →Enable View Transitions API for animated page changes
How it works
Turbo Drive intercepts navigation events, performs fetch requests, and updates the DOM by replacing the body and merging the head, maintaining the JavaScript environment.
Inputs & outputs
When to use developing-with-turbo-drive
- →Configuring Turbo Drive navigation
- →Implementing page morphing
- →Managing cache and prefetching
About this skill
Turbo Drive
Turbo Drive accelerates navigation by intercepting link clicks and form submissions, making them as fetch requests. It replaces the <body> and merges the <head> without tearing down the JavaScript environment, giving SPA-like speed with server-rendered HTML.
How It Works
- Link clicks: Turbo intercepts clicks on
<a href>links to the same domain, updates the URL via the History API, fetches the new page, and renders the HTML response. - Form submissions: Form submissions become
fetchrequests. Turbo follows the redirect and renders the response. - Rendering: Replaces
<body>, merges<head>. Thewindow,document, and<html>element persist across navigations.
Navigation Types
- Application Visits (advance/replace): Initiated by clicking a link or calling
Turbo.visit(). Issues a fetch, renders HTML. Advance pushes to history; replace modifies the current entry. - Restoration Visits: Triggered by the browser Back/Forward buttons. Turbo restores from cache if available, otherwise fetches fresh content.
Page Refreshes with Morphing
Instead of replacing the entire <body>, Turbo can morph the existing page to preserve DOM state (form inputs, scroll positions, focus):
@verbatim
<code-snippet name="Morphing config" lang="blade"> {{-- Add to your layout's <head> --}} <x-turbo::refreshes-with method="morph" scroll="preserve" /> </code-snippet>@endverbatim
When method="morph" is set, Turbo uses DOM morphing for same-page refreshes. When scroll="preserve" is set, scroll position is maintained.
Disabling Turbo Drive
Disable Turbo on a link, form, or entire section by adding data-turbo="false":
<a href="/external" data-turbo="false">Regular navigation</a>
<div data-turbo="false">
<!-- All links and forms inside are excluded from Turbo -->
<a href="/also-regular">This too</a>
<!-- Re-enable for specific elements -->
<a href="/turbo-again" data-turbo="true">Back to Turbo</a>
</div>
Form Submission Flow
- Turbo intercepts the form submission and sends it as a
fetchrequest. - The server processes the form and returns a redirect (status 303 for non-GET submissions).
- Turbo follows the redirect and renders the response.
IMPORTANT: Turbo requires redirect responses (303 See Other) for non-GET form submissions. Laravel's redirect() helper handles this correctly when the TurboMiddleware is active — it automatically converts 302 redirects to 303 for Turbo requests.
For validation errors, return a 422 status with the form HTML so Turbo can render it in place. To make it easier, Turbo Laravel will catch validation exceptions and redirect to the form based on the resources automatically (*.update to *.edit or *.store to *.create or *.destroy to *.delete) when the form route exists.
Asset Tracking
Mark assets with data-turbo-track="reload" so Turbo reloads the page when they change (e.g., after a deploy):
<link rel="stylesheet" href="/app.css?v=123" data-turbo-track="reload">
<script src="/app.js?v=123" data-turbo-track="reload"></script>
When Turbo detects tracked assets have changed, it performs a full page reload instead of a Turbo visit.
Progress Bar
Turbo shows a progress bar at the top of the page for navigations taking longer than 500ms. Customize it with CSS:
.turbo-progress-bar {
height: 3px;
background-color: #3b82f6;
}
Prefetching
Turbo prefetches links on mouseenter by default. Control this behavior:
<!-- Disable prefetching for a specific link -->
<a href="/heavy-page" data-turbo-preload="false">Heavy page</a>
<!-- Eagerly preload a link (fetches on page load) -->
<a href="/likely-next" data-turbo-preload>Likely next page</a>
Permanent Elements
Elements with data-turbo-permanent persist across navigations. Useful for media players, maps, or other stateful elements:
<div id="audio-player" data-turbo-permanent>
<audio src="/music.mp3"></audio>
</div>
The element must have a matching id in both the current and new page.
Cache Control
@verbatim
Control how Turbo caches pages using Blade components in your layout's <head>:
{{-- Cache the page but don't show preview during navigation --}} <x-turbo::exempts-page-from-preview />
{{-- Force a full page reload when visiting this page --}} <x-turbo::page-requires-reload /> </code-snippet>
@endverbatim
View Transitions API
Enable the View Transitions API for smooth animated transitions between pages:
@verbatim
<code-snippet name="View transitions" lang="blade"> {{-- Add to your layout's <head> --}} <x-turbo::page-view-transition /> </code-snippet>@endverbatim
This renders <meta name="view-transition" content="same-origin" />, enabling CSS-driven page transitions.
When not to use it
- →When full page reloads are explicitly desired for specific links or sections
Limitations
- →Requires redirect responses (303 See Other) for non-GET form submissions
How it compares
This skill provides SPA-like navigation speed with server-rendered HTML by avoiding full page reloads, unlike traditional browser navigation.
Compared to similar skills
developing-with-turbo-drive side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| developing-with-turbo-drive (this skill) | 2 | 5mo | No flags | Intermediate |
| nextjs-developer | 328 | 2mo | No flags | Advanced |
| angular | 100 | 4mo | Review | Advanced |
| flutter-expert | 73 | 4mo | No flags | Advanced |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by hotwired-laravel
View all by hotwired-laravel →You might also like
nextjs-developer
zenobi-us
Expert Next.js developer mastering Next.js 14+ with App Router and full-stack features. Specializes in server components, server actions, performance optimization, and production deployment with focus on building fast, SEO-friendly applications.
angular
sickn33
Modern Angular (v20+) expert with deep knowledge of Signals, Standalone Components, Zoneless applications, SSR/Hydration, and reactive patterns. Use PROACTIVELY for Angular development, component architecture, state management, performance optimization, and migration to modern patterns.
flutter-expert
sickn33
Master Flutter development with Dart 3, advanced widgets, and multi-platform deployment. Handles state management, animations, testing, and performance optimization for mobile, web, desktop, and embedded platforms. Use PROACTIVELY for Flutter architecture, UI implementation, or cross-platform features.
frontend-developer
sickn33
Build React components, implement responsive layouts, and handle client-side state management. Masters React 19, Next.js 15, and modern frontend architecture. Optimizes performance and ensures accessibility. Use PROACTIVELY when creating UI components or fixing frontend issues.
web-games
davila7
Web browser game development principles. Framework selection, WebGPU, optimization, PWA.
rendering-animate-svg
TheOrcDev
Wrap animated SVG elements in a div to enable hardware acceleration. Apply when animating SVG icons or elements, especially in 8-bit retro components with pixel art animations.