使用 React 的视图过渡 API（`<ViewTransition>` 组件、`addTransitionType` 和 CSS 视图过渡伪元素）实现流畅、原生感动画的指南。
该技能提供了在 React 应用程序中利用浏览器原生视图过渡 API（View Transition API）的全面指南。它涵盖了核心组件如 `<ViewTransition>` 和辅助函数 `addTransitionType`，以及用于自定义动画的 CSS 伪元素（如 `::view-transition-old` 和 `::view-transition-new`）。该技能旨在帮助开发者实现页面过渡、路由变化动画、共享元素动画、组件进入/退出动画、列表重新排序动画以及方向性导航（前进/后退）动画，而无需依赖第三方动画库。它特别适用于 Next.js 项目，但也适用于任何 React 设置。通过利用浏览器的内置过渡机制，该技能使开发者能够创建高性能、流畅的动画，这些动画在用户浏览体验中感觉自然且不突兀。详细文档涵盖了设置步骤、API 使用示例、CSS 自定义技巧以及常见用例的实现策略。
npx skills add https://github.com/vercel-labs/agent-skills/tree/main/skills/vercel-react-view-transitions使用 React 的视图过渡 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.