ACTIVATE when implementing page transitions, SPA-like navigation, transition:persist, or data-astro-reload in Astro. ACTIVATE for 'ViewTransitions', 'transition:name', 'transition:animate', 'data-astro-reload', 'page transition'. Covers: ViewTransitions setup, transition directives (name/animate/persist), custom animations, data-astro-reload for language switching, lifecycle events (astro:page-load), loading indicator pattern. DO NOT use for: general Astro routing, React component hydration.
From astronpx claudepluginhub fabiensalles/claude-marketplace --plugin astroThis skill uses the workspace's default tool permissions.
references/transition-patterns.mdGuides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Migrates code, prompts, and API calls from Claude Sonnet 4.0/4.5 or Opus 4.1 to Opus 4.5, updating model strings on Anthropic, AWS, GCP, Azure platforms.
Analyzes BMad project state from catalog CSV, configs, artifacts, and query to recommend next skills or answer questions. Useful for help requests, 'what next', or starting BMad.
Patterns for smooth page transitions and SPA-like navigation in Astro.
Add the <ViewTransitions /> component to your layout:
---
import { ViewTransitions } from 'astro:transitions';
---
<html>
<head>
<ViewTransitions />
</head>
<body><slot /></body>
</html>
With View Transitions enabled:
transition:name - Identify Elements<header transition:name="header">...</header>
<h1 transition:name={`title-${post.slug}`}>{post.data.title}</h1>
transition:animate - Animation Type| Animation | Description |
|---|---|
fade | Crossfade (default) |
slide | Slide in from side |
none | No animation |
initial | Only animate on first load |
transition:persist - Keep Elements Across Navigations<audio transition:persist id="player">...</audio>
<Counter client:load transition:persist initialCount={0} />
data-astro-reloadUse data-astro-reload to force a full page reload on specific links. Use cases: language switching, theme changes, auth state changes.
<a href="/en" data-astro-reload>EN</a>
When implementing custom animations, persist patterns, or loading indicators, read
references/transition-patterns.mdfor complete examples with CSS keyframes and lifecycle events.
| Event | When |
|---|---|
astro:before-preparation | Navigation started |
astro:after-preparation | New page fetched |
astro:before-swap | Before DOM swap |
astro:after-swap | After DOM swap |
astro:page-load | Fully complete |
Use astro:page-load to re-initialize scripts after navigation.
View Transitions degrade gracefully to full page loads in unsupported browsers.
| Directive/Attribute | Purpose |
|---|---|
transition:name | Identify element for morphing |
transition:animate | Set animation type |
transition:persist | Keep element across navigations |
data-astro-reload | Force full page reload |
data-astro-prefetch | Prefetch on hover/view |