developing-with-turbo-drive
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.
Install
mkdir -p .claude/skills/developing-with-turbo-drive && curl -L -o skill.zip "https://mcp.directory/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
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.
More by hotwired-laravel
View all skills by hotwired-laravel →You might also like
flutter-development
aj-geddes
Build beautiful cross-platform mobile apps with Flutter and Dart. Covers widgets, state management with Provider/BLoC, navigation, API integration, and material design.
drawio-diagrams-enhanced
jgtolentino
Create professional draw.io (diagrams.net) diagrams in XML format (.drawio files) with integrated PMP/PMBOK methodologies, extensive visual asset libraries, and industry-standard professional templates. Use this skill when users ask to create flowcharts, swimlane diagrams, cross-functional flowcharts, org charts, network diagrams, UML diagrams, BPMN, project management diagrams (WBS, Gantt, PERT, RACI), risk matrices, stakeholder maps, or any other visual diagram in draw.io format. This skill includes access to custom shape libraries for icons, clipart, and professional symbols.
ui-ux-pro-max
nextlevelbuilder
"UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient."
godot
bfollington
This skill should be used when working on Godot Engine projects. It provides specialized knowledge of Godot's file formats (.gd, .tscn, .tres), architecture patterns (component-based, signal-driven, resource-based), common pitfalls, validation tools, code templates, and CLI workflows. The `godot` command is available for running the game, validating scripts, importing resources, and exporting builds. Use this skill for tasks involving Godot game development, debugging scene/resource files, implementing game systems, or creating new Godot components.
nano-banana-pro
garg-aayush
Generate and edit images using Google's Nano Banana Pro (Gemini 3 Pro Image) API. Use when the user asks to generate, create, edit, modify, change, alter, or update images. Also use when user references an existing image file and asks to modify it in any way (e.g., "modify this image", "change the background", "replace X with Y"). Supports both text-to-image generation and image-to-image editing with configurable resolution (1K default, 2K, or 4K for high resolution). DO NOT read the image file first - use this skill directly with the --input-image parameter.
fastapi-templates
wshobson
Create production-ready FastAPI projects with async patterns, dependency injection, and comprehensive error handling. Use when building new FastAPI applications or setting up backend API projects.
Related MCP Servers
Browse all servers
FirecrawlUnlock AI-ready web data with Firecrawl: scrape any website, handle dynamic content, and automate web scraping for resea
Chrome DevTools MCPAI-driven control of live Chrome via Chrome DevTools: browser automation, debugging, performance analysis and network mo
Task MasterBoost productivity with Task Master: an AI-powered tool for project management and agile development workflows, integrat
RepomixOptimize your codebase for AI with Repomix—transform, compress, and secure repos for easier analysis with modern AI tool
BlenderConnect Blender to Claude AI for seamless 3D modeling. Use AI 3D model generator tools for faster, intuitive, interactiv
Figma ContextUnlock seamless Figma to code: streamline Figma to HTML with Framelink MCP Server for fast, accurate design-to-code work
Stay ahead of the MCP ecosystem
Get weekly updates on new skills and servers.