# Vercel React View Transitions: Adding Native Transition Animations to React Following the Official Workflow
`vercel-react-view-transitions` is an official Agent Skill from Vercel Labs, teaching Cursor, Claude Code and Codex to use React's ViewTransition and `addTransitionType` to implement native page transitions. It can be installed via `npx skills add`. It covers shared element transitions, Suspense reveal, list reordering and route direction animations, with instructions for Next.js App Router included. ViewTransition is currently available in the React Canary channel; App Router has built-in support and no longer requires installing `react@canary`. Unsupported browsers will simply not display the animations.
Read More# vercel-optimize: Optimize Cost and Performance of Vercel Projects Based on Production Metrics First
`vercel-optimize` is an official Agent Skill from vercel-labs/agent-skills (SKILL.md 1.2.0) that performs cost and performance audits for deployed projects. The workflow involves first collecting metrics from the past 14 days, then identifying routes using a deterministic script, and finally modifying code. It has the most complete support for Next.js/SvelteKit, is available for Nuxt, and has limited support for Astro. The installation command is: `npx skills add vercel-labs/agent-skills --skill vercel-optimize`. You need Node.js 20+, Vercel CLI v53+, and have completed login/link operations; route-level sorting additionally requires Observability Plus.
Read MoreAdd a React Performance Goalkeeper for AI Programming with react-best-practices
### Official Vercel Agent Skill `react-best-practices` (formal name: `vercel-react-best-practices`) Introduction This skill organizes React/Next.js performance optimization experience into a rule set sorted by impact severity. The current `SKILL.md` contains 70 rules covering 8 categories, with priority given to eliminating request waterfalls and bundle bloat. Details include source attribution, the 8 rule categories, installation command (`npx skills add … --skill vercel-react-best-practices`), triggering usage in tools like Cursor, Claude Code and Codex, as well as applicable scenarios and notes on names and versions.
Read More