在 React 中使用 View Transition API 實現流暢、原生感動畫的指南（包括 `<ViewTransition>` 元件、`addTransitionType` 和 CSS 檢視轉場偽元素）。
此技能提供了一套完整的指南，幫助開發者在 React 應用程式中利用瀏覽器原生的 View Transition API 來實現流暢的頁面轉場、路由切換動畫、共享元素動畫、元件進出動畫以及列表重新排序等效果。它涵蓋了 `vercel-labs/vercel-react-view-transitions` 庫的核心用法，包括 `<ViewTransition>` 元件的 declarative API、使用 `addTransitionType` 為過渡添加類型以便於 CSS 選擇器控制，以及如何使用 CSS 偽元素 `::view-transition-old` 和 `::view-transition-new` 來自訂動畫。該技能特別適用於 Next.js 專案，可整合到頁面路由或 App Router 中，實現前進/後退導航的方向性動畫，而無需依賴任何第三方動畫庫。此外，`startViewTransition` 瀏覽器 API 也被作為基礎概念涵蓋在內，但技能主要推薦使用基於 React 元件的封裝方式以獲得更好的開發體驗。
npx skills add https://github.com/vercel-labs/agent-skills/tree/main/skills/vercel-react-view-transitions在 React 中使用 View Transition API 實現流暢、原生感動畫的指南（包括 <ViewTransition> 元件、addTransitionType 和 CSS 檢視轉場偽元素）。當使用者想要新增頁面轉場、為路由變換製作動畫、建立共享元素動畫、為元件的進入/離開製作動畫、為列表重新排序製作動畫、實現方向性（前進/返回）導航動畫，或在 Next.js 中整合檢視轉場時，請使用此技能。當使用者提及檢視轉場、startViewTransition、ViewTransition、轉場類型，或詢問如何在 React 中不使用第三方動畫庫來在 UI 狀態之間製作動畫時，也請使用此技能。
This repo contains 11 individual skills — each has its own dedicated page.
Deploy applications and websites to Vercel. Use when the user requests deployment actions like "deploy my app", "deploy and give me the link", "push this live", or "create a preview deployment".
Deploy and manage projects on Vercel using token-based authentication. Use when working with Vercel CLI using access tokens rather than interactive login — e.g.
React composition patterns that scale. Use when refactoring components with
React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.
Use for Vercel cost and performance optimization on deployed projects, especially Next.js, SvelteKit, Nuxt, and limited Astro apps. Collect Vercel metrics, usage, project config, and code scan results first; investigate only metric-backed candidates; produce ranked recommendations grounded in verified files and version-aware Vercel/framework docs. Trigger for Vercel bill reduction, slow or expensive routes, caching opportunities, Function Invocations, Build Minutes, Fast Data Transfer, Core Web Vitals, Bot Management, Fluid compute, or cost breakdown requests.
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
React Native and Expo best practices for building performant mobile apps. Use
Review UI code for Web Interface Guidelines compliance. Use when asked to
Review docs/prose for Writing Guidelines compliance. Use when asked to
Extract frames or short clips from videos using ffmpeg.
Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.
Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.
Obra superpowers agent skills.
See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...
End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.