--- title: "vercel-labs/agent-skills" description: "Vercel's official collection of agent skills" source: https://github.com/vercel-labs/agent-skills ref: main license: null licenseName: "No licence detected" canonical: https://skillsdocs.com/vercel-labs/agent-skills base: https://github.com/vercel-labs/agent-skills/blob/main/ provenance: authored chapters: 9 inlined: 4 withheld: 5 words: 6410 updated: 2026-08-28T13:36:31Z generator: "Skills Docs" --- > **vercel-labs/agent-skills** — every Agent Skill in this repository, inlined verbatim. > > Canonical HTML: https://skillsdocs.com/vercel-labs/agent-skills > Per-skill Markdown: https://skillsdocs.com/vercel-labs/agent-skills/.md > Machine manifest: https://skillsdocs.com/vercel-labs/agent-skills/.well-known/agent-skills/index.json > JSON: https://skillsdocs.com/api/v1/books/vercel-labs/agent-skills > Install: `npx skills add vercel-labs/agent-skills` > Upstream: https://github.com/vercel-labs/agent-skills @ `main` > Licence: No licence detected — all rights reserved by its authors > > Content is mirrored from GitHub and © its authors, served unmodified. Takedown: https://github.com/DreambaseAI/skillsdocs/issues/new?labels=takedown&title=Takedown+request # vercel-labs/agent-skills Vercel's official collection of agent skills - **Skills:** 9 - **Inlined:** 4 (licence detected) - **Words:** 6,410 - **Reading time:** 31 min - **Stars:** 30,582 ## Table of contents 1. [vercel-composition-patterns](https://skillsdocs.com/vercel-labs/agent-skills/composition-patterns.md) — React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reu… 2. [deploy-to-vercel](https://skillsdocs.com/vercel-labs/agent-skills/deploy-to-vercel.md) — Not licensed for republication — link only. 3. [vercel-react-best-practices](https://skillsdocs.com/vercel-labs/agent-skills/react-best-practices.md) — React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js… 4. [vercel-react-native-skills](https://skillsdocs.com/vercel-labs/agent-skills/react-native-skills.md) — React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing… 5. [vercel-react-view-transitions](https://skillsdocs.com/vercel-labs/agent-skills/react-view-transitions.md) — Guide for implementing smooth, native-feeling animations using React's View Transition API (`` component, `addTransitionType`, and CSS view tra… 6. [vercel-cli-with-tokens](https://skillsdocs.com/vercel-labs/agent-skills/vercel-cli-with-tokens.md) — Not licensed for republication — link only. 7. [vercel-optimize](https://skillsdocs.com/vercel-labs/agent-skills/vercel-optimize.md) — Not licensed for republication — link only. 8. [web-design-guidelines](https://skillsdocs.com/vercel-labs/agent-skills/web-design-guidelines.md) — Not licensed for republication — link only. 9. [writing-guidelines](https://skillsdocs.com/vercel-labs/agent-skills/writing-guidelines.md) — Not licensed for republication — link only. ## Licence notice 5 of 9 skills in this book have no licence that we could detect, at either the repository or the skill level. Their bodies are **not** reproduced here and they are **not** listed in the Agent Skills manifest. Read them upstream: - deploy-to-vercel — https://github.com/vercel-labs/agent-skills/blob/main/skills/deploy-to-vercel/SKILL.md - vercel-cli-with-tokens — https://github.com/vercel-labs/agent-skills/blob/main/skills/vercel-cli-with-tokens/SKILL.md - vercel-optimize — https://github.com/vercel-labs/agent-skills/blob/main/skills/vercel-optimize/SKILL.md - web-design-guidelines — https://github.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md - writing-guidelines — https://github.com/vercel-labs/agent-skills/blob/main/skills/writing-guidelines/SKILL.md ## Front matter _The repository README, verbatim except that relative links are resolved against https://github.com/vercel-labs/agent-skills/blob/main/._ # Agent Skills A collection of skills for AI coding agents. Skills are packaged instructions and scripts that extend agent capabilities. Skills follow the [Agent Skills](https://agentskills.io/) format. [![skills.sh](https://skills.sh/b/vercel-labs/agent-skills)](https://skills.sh/vercel-labs/agent-skills) ## Available Skills ### vercel-optimize Audits a Vercel project for cost, performance, reliability, caching, function usage, and billing opportunities. It collects Vercel metrics first, then investigates only the routes and files those metrics point to. **Use when:** - Optimizing a deployed Vercel project - Reducing Vercel costs or function usage - Investigating slow or expensive routes - Finding caching, ISR, middleware, image, or build-minute issues - Producing a ranked cost and performance report ### react-best-practices React and Next.js performance optimization guidelines from Vercel Engineering. Contains 40+ rules across 8 categories, prioritized by impact. **Use when:** - Writing new React components or Next.js pages - Implementing data fetching (client or server-side) - Reviewing code for performance issues - Optimizing bundle size or load times **Categories covered:** - Eliminating waterfalls (Critical) - Bundle size optimization (Critical) - Server-side performance (High) - Client-side data fetching (Medium-High) - Re-render optimization (Medium) - Rendering performance (Medium) - JavaScript micro-optimizations (Low-Medium) ### web-design-guidelines Review UI code for compliance with web interface best practices. Audits your code for 100+ rules covering accessibility, performance, and UX. **Use when:** - "Review my UI" - "Check accessibility" - "Audit design" - "Review UX" - "Check my site against best practices" **Categories covered:** - Accessibility (aria-labels, semantic HTML, keyboard handlers) - Focus States (visible focus, focus-visible patterns) - Forms (autocomplete, validation, error handling) - Animation (prefers-reduced-motion, compositor-friendly transforms) - Typography (curly quotes, ellipsis, tabular-nums) - Images (dimensions, lazy loading, alt text) - Performance (virtualization, layout thrashing, preconnect) - Navigation & State (URL reflects state, deep-linking) - Dark Mode & Theming (color-scheme, theme-color meta) - Touch & Interaction (touch-action, tap-highlight) - Locale & i18n (Intl.DateTimeFormat, Intl.NumberFormat) ### writing-guidelines Review docs and prose for compliance with the Vercel writing handbook. Audits your pages for 80+ rules covering voice, structure, content types, code samples, typography, and AI workflow. **Use when:** - "Review my docs" - "Check writing style" - "Audit prose" - "Review docs voice and tone" - "Check this page against the writing handbook" **Categories covered:** - Planning (content plan, content type, user-shaped titles) - Voice & tone (active voice, direct address, banned words like `easy`/`simple`/`quick`) - Tone by content type (tutorial, how-to, reference, conceptual, troubleshooting) - Headings & structure (sentence case, descriptive subheadings, TL;DR opens) - Lists (when to use, bold/description format) - Code (language tags, TypeScript first, ``, 80-col / 25-line limits) - Placeholders, units, & numbers (`snake_case` text, count-up numbers, `64 KB`/`200 ms`) - Typography (no em dashes as punctuation, curly quotes, ellipsis character, non-breaking spaces) - Source formatting (no hard-wrap, no `---` rules, blank line discipline) - Pricing & money pages (tables, uncompromising detail) - AI workflow (accountability, enterprise models, plan first, disclose AI use) - Review (PR description discipline, author accountability) ### react-native-guidelines React Native best practices optimized for AI agents. Contains 16 rules across 7 sections covering performance, architecture, and platform-specific patterns. **Use when:** - Building React Native or Expo apps - Optimizing mobile performance - Implementing animations or gestures - Working with native modules or platform APIs **Categories covered:** - Performance (Critical) - FlashList, memoization, heavy computation - Layout (High) - flex patterns, safe areas, keyboard handling - Animation (High) - Reanimated, gesture handling - Images (Medium) - expo-image, caching, lazy loading - State Management (Medium) - Zustand patterns, React Compiler - Architecture (Medium) - monorepo structure, imports - Platform (Medium) - iOS/Android specific patterns ### react-view-transitions Implement smooth, native-feeling animations using React's View Transition API. Covers the `` component, `addTransitionType`, transition types, and Next.js integration including the `transitionTypes` prop on `next/link`. **Use when:** - Adding page transitions or route animations - Animating enter/exit of components - Creating shared element transitions (list-to-detail morphing) - Implementing directional (forward/back) navigation animations - Integrating view transitions in Next.js App Router - Animating list reorder or Suspense fallback reveals **Topics covered:** - `` component (enter, exit, update, share triggers) - `addTransitionType` for directional/context-specific animations - View Transition Classes and CSS pseudo-elements - Shared element transitions with the `name` prop - JavaScript animations via Web Animations API - Next.js `transitionTypes` prop on `next/link` - Ready-to-use CSS animation recipes (fade, slide, scale, flip) - Accessibility (`prefers-reduced-motion`) ### composition-patterns React composition patterns that scale. Helps avoid boolean prop proliferation through compound components, state lifting, and internal composition. **Use when:** - Refactoring components with many boolean props - Building reusable component libraries - Designing flexible APIs - Reviewing component architecture **Patterns covered:** - Extracting compound components - Lifting state to reduce props - Composing internals for flexibility - Avoiding prop drilling ### vercel-deploy-claimable Deploy applications and websites to Vercel instantly. Designed for use with claude.ai and Claude Desktop to enable deployments directly from conversations. Deployments are "claimable" - users can transfer ownership to their own Vercel account. **Use when:** - "Deploy my app" - "Deploy this to production" - "Push this live" - "Deploy and give me the link" **Features:** - Auto-detects 40+ frameworks from `package.json` - Returns preview URL (live site) and claim URL (transfer ownership) - Handles static HTML projects automatically - Excludes `node_modules` and `.git` from uploads **How it works:** 1. Packages your project into a tarball 2. Detects framework (Next.js, Vite, Astro, etc.) 3. Uploads to deployment service 4. Returns preview URL and claim URL **Output:** ``` Deployment successful! Preview URL: https://skill-deploy-abc123.vercel.app Claim URL: https://vercel.com/claim-deployment?code=... ``` ## Installation ```bash npx skills add vercel-labs/agent-skills ``` ## Usage Skills are automatically available once installed. The agent will use them when relevant tasks are detected. **Examples:** ``` Deploy my app ``` ``` Review this React component for performance issues ``` ``` Help me optimize this Next.js page ``` ## Discovery index Every change to a skill on `main` publishes an immutable GitHub release with an Agent Skills discovery index and one artifact per skill. Build the same artifacts locally with: ```bash npm ci --ignore-scripts node scripts/build-discovery-index.mjs https://example.com/skills ``` ## Skill Structure Each skill contains: - `SKILL.md` - Instructions for the agent - `scripts/` - Helper scripts for automation (optional) - `references/` - Supporting documentation (optional) ## License MIT --- ## 1. vercel-composition-patterns - **Source:** https://github.com/vercel-labs/agent-skills/blob/main/skills/composition-patterns/SKILL.md - **Raw:** https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/composition-patterns/SKILL.md - **Markdown:** https://skillsdocs.com/vercel-labs/agent-skills/composition-patterns.md - **Licence:** MIT — https://spdx.org/licenses/MIT.html Bundled files (13), referenced from this skill's directory: - `AGENTS.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/composition-patterns/AGENTS.md - `metadata.json` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/composition-patterns/metadata.json - `README.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/composition-patterns/README.md - `rules/_sections.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/composition-patterns/rules/_sections.md - `rules/_template.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/composition-patterns/rules/_template.md - `rules/architecture-avoid-boolean-props.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/composition-patterns/rules/architecture-avoid-boolean-props.md - `rules/architecture-compound-components.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/composition-patterns/rules/architecture-compound-components.md - `rules/patterns-children-over-render-props.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/composition-patterns/rules/patterns-children-over-render-props.md - `rules/patterns-explicit-variants.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/composition-patterns/rules/patterns-explicit-variants.md - `rules/react19-no-forwardref.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/composition-patterns/rules/react19-no-forwardref.md - `rules/state-context-interface.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/composition-patterns/rules/state-context-interface.md - `rules/state-decouple-implementation.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/composition-patterns/rules/state-decouple-implementation.md - `rules/state-lift-state.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/composition-patterns/rules/state-lift-state.md --- name: vercel-composition-patterns description: 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. license: MIT metadata: author: vercel version: '1.0.0' --- # React Composition Patterns Composition patterns for building flexible, maintainable React components. Avoid boolean prop proliferation by using compound components, lifting state, and composing internals. These patterns make codebases easier for both humans and AI agents to work with as they scale. ## When to Apply Reference these guidelines when: - Refactoring components with many boolean props - Building reusable component libraries - Designing flexible component APIs - Reviewing component architecture - Working with compound components or context providers ## Rule Categories by Priority | Priority | Category | Impact | Prefix | | -------- | ----------------------- | ------ | --------------- | | 1 | Component Architecture | HIGH | `architecture-` | | 2 | State Management | MEDIUM | `state-` | | 3 | Implementation Patterns | MEDIUM | `patterns-` | | 4 | React 19 APIs | MEDIUM | `react19-` | ## Quick Reference ### 1. Component Architecture (HIGH) - `architecture-avoid-boolean-props` - Don't add boolean props to customize behavior; use composition - `architecture-compound-components` - Structure complex components with shared context ### 2. State Management (MEDIUM) - `state-decouple-implementation` - Provider is the only place that knows how state is managed - `state-context-interface` - Define generic interface with state, actions, meta for dependency injection - `state-lift-state` - Move state into provider components for sibling access ### 3. Implementation Patterns (MEDIUM) - `patterns-explicit-variants` - Create explicit variant components instead of boolean modes - `patterns-children-over-render-props` - Use children for composition instead of renderX props ### 4. React 19 APIs (MEDIUM) > **⚠️ React 19+ only.** Skip this section if using React 18 or earlier. - `react19-no-forwardref` - Don't use `forwardRef`; use `use()` instead of `useContext()` ## How to Use Read individual rule files for detailed explanations and code examples: ``` rules/architecture-avoid-boolean-props.md rules/state-context-interface.md ``` Each rule file contains: - Brief explanation of why it matters - Incorrect code example with explanation - Correct code example with explanation - Additional context and references ## Full Compiled Document For the complete guide with all rules expanded: `AGENTS.md` --- ## 2. deploy-to-vercel 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". - **Source:** https://github.com/vercel-labs/agent-skills/blob/main/skills/deploy-to-vercel/SKILL.md - **Raw:** https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/deploy-to-vercel/SKILL.md - **Markdown:** https://skillsdocs.com/vercel-labs/agent-skills/deploy-to-vercel.md - **Licence:** No licence detected — all rights reserved by its authors Bundled files (3), referenced from this skill's directory: - `Archive.zip` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/deploy-to-vercel/Archive.zip - `resources/deploy-codex.sh` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/deploy-to-vercel/resources/deploy-codex.sh - `resources/deploy.sh` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/deploy-to-vercel/resources/deploy.sh _Body withheld: no licence could be detected for this skill. Read it upstream._ --- ## 3. vercel-react-best-practices - **Source:** https://github.com/vercel-labs/agent-skills/blob/main/skills/react-best-practices/SKILL.md - **Raw:** https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-best-practices/SKILL.md - **Markdown:** https://skillsdocs.com/vercel-labs/agent-skills/react-best-practices.md - **Licence:** MIT — https://spdx.org/licenses/MIT.html Bundled files (75), referenced from this skill's directory: - `AGENTS.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-best-practices/AGENTS.md - `metadata.json` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-best-practices/metadata.json - `README.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-best-practices/README.md - `rules/_sections.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-best-practices/rules/_sections.md - `rules/_template.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-best-practices/rules/_template.md - `rules/advanced-effect-event-deps.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-best-practices/rules/advanced-effect-event-deps.md - `rules/advanced-event-handler-refs.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-best-practices/rules/advanced-event-handler-refs.md - `rules/advanced-init-once.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-best-practices/rules/advanced-init-once.md - `rules/advanced-use-latest.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-best-practices/rules/advanced-use-latest.md - `rules/async-api-routes.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-best-practices/rules/async-api-routes.md - `rules/async-cheap-condition-before-await.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-best-practices/rules/async-cheap-condition-before-await.md - `rules/async-defer-await.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-best-practices/rules/async-defer-await.md - `rules/async-dependencies.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-best-practices/rules/async-dependencies.md - `rules/async-parallel.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-best-practices/rules/async-parallel.md - `rules/async-suspense-boundaries.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-best-practices/rules/async-suspense-boundaries.md - `rules/bundle-analyzable-paths.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-best-practices/rules/bundle-analyzable-paths.md - `rules/bundle-barrel-imports.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-best-practices/rules/bundle-barrel-imports.md - `rules/bundle-conditional.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-best-practices/rules/bundle-conditional.md - `rules/bundle-defer-third-party.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-best-practices/rules/bundle-defer-third-party.md - `rules/bundle-dynamic-imports.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-best-practices/rules/bundle-dynamic-imports.md - `rules/bundle-preload.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-best-practices/rules/bundle-preload.md - `rules/client-event-listeners.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-best-practices/rules/client-event-listeners.md - `rules/client-localstorage-schema.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-best-practices/rules/client-localstorage-schema.md - `rules/client-passive-event-listeners.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-best-practices/rules/client-passive-event-listeners.md - …and 51 more, listed in https://skillsdocs.com/api/v1/books/vercel-labs/agent-skills/skills/react-best-practices --- name: vercel-react-best-practices description: 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. license: MIT metadata: author: vercel version: "1.0.0" --- # Vercel React Best Practices Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 70 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation. ## When to Apply Reference these guidelines when: - Writing new React components or Next.js pages - Implementing data fetching (client or server-side) - Reviewing code for performance issues - Refactoring existing React/Next.js code - Optimizing bundle size or load times ## Rule Categories by Priority | Priority | Category | Impact | Prefix | |----------|----------|--------|--------| | 1 | Eliminating Waterfalls | CRITICAL | `async-` | | 2 | Bundle Size Optimization | CRITICAL | `bundle-` | | 3 | Server-Side Performance | HIGH | `server-` | | 4 | Client-Side Data Fetching | MEDIUM-HIGH | `client-` | | 5 | Re-render Optimization | MEDIUM | `rerender-` | | 6 | Rendering Performance | MEDIUM | `rendering-` | | 7 | JavaScript Performance | LOW-MEDIUM | `js-` | | 8 | Advanced Patterns | LOW | `advanced-` | ## Quick Reference ### 1. Eliminating Waterfalls (CRITICAL) - `async-cheap-condition-before-await` - Check cheap sync conditions before awaiting flags or remote values - `async-defer-await` - Move await into branches where actually used - `async-parallel` - Use Promise.all() for independent operations - `async-dependencies` - Use better-all for partial dependencies - `async-api-routes` - Start promises early, await late in API routes - `async-suspense-boundaries` - Use Suspense to stream content ### 2. Bundle Size Optimization (CRITICAL) - `bundle-barrel-imports` - Import directly, avoid barrel files - `bundle-analyzable-paths` - Prefer statically analyzable import and file-system paths to avoid broad bundles and traces - `bundle-dynamic-imports` - Use next/dynamic for heavy components - `bundle-defer-third-party` - Load analytics/logging after hydration - `bundle-conditional` - Load modules only when feature is activated - `bundle-preload` - Preload on hover/focus for perceived speed ### 3. Server-Side Performance (HIGH) - `server-auth-actions` - Authenticate server actions like API routes - `server-cache-react` - Use React.cache() for per-request deduplication - `server-cache-lru` - Use LRU cache for cross-request caching - `server-dedup-props` - Avoid duplicate serialization in RSC props - `server-hoist-static-io` - Hoist static I/O (fonts, logos) to module level - `server-no-shared-module-state` - Avoid module-level mutable request state in RSC/SSR - `server-serialization` - Minimize data passed to client components - `server-parallel-fetching` - Restructure components to parallelize fetches - `server-parallel-nested-fetching` - Chain nested fetches per item in Promise.all - `server-after-nonblocking` - Use after() for non-blocking operations ### 4. Client-Side Data Fetching (MEDIUM-HIGH) - `client-swr-dedup` - Use SWR for automatic request deduplication - `client-event-listeners` - Deduplicate global event listeners - `client-passive-event-listeners` - Use passive listeners for scroll - `client-localstorage-schema` - Version and minimize localStorage data ### 5. Re-render Optimization (MEDIUM) - `rerender-defer-reads` - Don't subscribe to state only used in callbacks - `rerender-memo` - Extract expensive work into memoized components - `rerender-memo-with-default-value` - Hoist default non-primitive props - `rerender-dependencies` - Use primitive dependencies in effects - `rerender-derived-state` - Subscribe to derived booleans, not raw values - `rerender-derived-state-no-effect` - Derive state during render, not effects - `rerender-functional-setstate` - Use functional setState for stable callbacks - `rerender-lazy-state-init` - Pass function to useState for expensive values - `rerender-simple-expression-in-memo` - Avoid memo for simple primitives - `rerender-split-combined-hooks` - Split hooks with independent dependencies - `rerender-move-effect-to-event` - Put interaction logic in event handlers - `rerender-transitions` - Use startTransition for non-urgent updates - `rerender-use-deferred-value` - Defer expensive renders to keep input responsive - `rerender-use-ref-transient-values` - Use refs for transient frequent values - `rerender-no-inline-components` - Don't define components inside components ### 6. Rendering Performance (MEDIUM) - `rendering-animate-svg-wrapper` - Animate div wrapper, not SVG element - `rendering-content-visibility` - Use content-visibility for long lists - `rendering-hoist-jsx` - Extract static JSX outside components - `rendering-svg-precision` - Reduce SVG coordinate precision - `rendering-hydration-no-flicker` - Use inline script for client-only data - `rendering-hydration-suppress-warning` - Suppress expected mismatches - `rendering-activity` - Use Activity component for show/hide - `rendering-conditional-render` - Use ternary, not && for conditionals - `rendering-usetransition-loading` - Prefer useTransition for loading state - `rendering-resource-hints` - Use React DOM resource hints for preloading - `rendering-script-defer-async` - Use defer or async on script tags ### 7. JavaScript Performance (LOW-MEDIUM) - `js-batch-dom-css` - Group CSS changes via classes or cssText - `js-index-maps` - Build Map for repeated lookups - `js-cache-property-access` - Cache object properties in loops - `js-cache-function-results` - Cache function results in module-level Map - `js-cache-storage` - Cache localStorage/sessionStorage reads - `js-combine-iterations` - Combine multiple filter/map into one loop - `js-length-check-first` - Check array length before expensive comparison - `js-early-exit` - Return early from functions - `js-hoist-regexp` - Hoist RegExp creation outside loops - `js-min-max-loop` - Use loop for min/max instead of sort - `js-set-map-lookups` - Use Set/Map for O(1) lookups - `js-tosorted-immutable` - Use toSorted() for immutability - `js-flatmap-filter` - Use flatMap to map and filter in one pass - `js-request-idle-callback` - Defer non-critical work to browser idle time ### 8. Advanced Patterns (LOW) - `advanced-effect-event-deps` - Don't put `useEffectEvent` results in effect deps - `advanced-event-handler-refs` - Store event handlers in refs - `advanced-init-once` - Initialize app once per app load - `advanced-use-latest` - useLatest for stable callback refs ## How to Use Read individual rule files for detailed explanations and code examples: ``` rules/async-parallel.md rules/bundle-barrel-imports.md ``` Each rule file contains: - Brief explanation of why it matters - Incorrect code example with explanation - Correct code example with explanation - Additional context and references ## Full Compiled Document For the complete guide with all rules expanded: `AGENTS.md` --- ## 4. vercel-react-native-skills - **Source:** https://github.com/vercel-labs/agent-skills/blob/main/skills/react-native-skills/SKILL.md - **Raw:** https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-native-skills/SKILL.md - **Markdown:** https://skillsdocs.com/vercel-labs/agent-skills/react-native-skills.md - **Licence:** MIT — https://spdx.org/licenses/MIT.html Bundled files (41), referenced from this skill's directory: - `AGENTS.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-native-skills/AGENTS.md - `metadata.json` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-native-skills/metadata.json - `README.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-native-skills/README.md - `rules/_sections.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-native-skills/rules/_sections.md - `rules/_template.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-native-skills/rules/_template.md - `rules/animation-derived-value.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-native-skills/rules/animation-derived-value.md - `rules/animation-gesture-detector-press.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-native-skills/rules/animation-gesture-detector-press.md - `rules/animation-gpu-properties.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-native-skills/rules/animation-gpu-properties.md - `rules/design-system-compound-components.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-native-skills/rules/design-system-compound-components.md - `rules/fonts-config-plugin.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-native-skills/rules/fonts-config-plugin.md - `rules/imports-design-system-folder.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-native-skills/rules/imports-design-system-folder.md - `rules/js-hoist-intl.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-native-skills/rules/js-hoist-intl.md - `rules/list-performance-callbacks.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-native-skills/rules/list-performance-callbacks.md - `rules/list-performance-function-references.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-native-skills/rules/list-performance-function-references.md - `rules/list-performance-images.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-native-skills/rules/list-performance-images.md - `rules/list-performance-inline-objects.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-native-skills/rules/list-performance-inline-objects.md - `rules/list-performance-item-expensive.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-native-skills/rules/list-performance-item-expensive.md - `rules/list-performance-item-memo.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-native-skills/rules/list-performance-item-memo.md - `rules/list-performance-item-types.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-native-skills/rules/list-performance-item-types.md - `rules/list-performance-virtualize.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-native-skills/rules/list-performance-virtualize.md - `rules/monorepo-native-deps-in-app.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-native-skills/rules/monorepo-native-deps-in-app.md - `rules/monorepo-single-dependency-versions.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-native-skills/rules/monorepo-single-dependency-versions.md - `rules/navigation-native-navigators.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-native-skills/rules/navigation-native-navigators.md - `rules/react-compiler-destructure-functions.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-native-skills/rules/react-compiler-destructure-functions.md - …and 17 more, listed in https://skillsdocs.com/api/v1/books/vercel-labs/agent-skills/skills/react-native-skills --- name: vercel-react-native-skills description: 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. license: MIT metadata: author: vercel version: '1.0.0' --- # React Native Skills Comprehensive best practices for React Native and Expo applications. Contains rules across multiple categories covering performance, animations, UI patterns, and platform-specific optimizations. ## When to Apply Reference these guidelines when: - Building React Native or Expo apps - Optimizing list and scroll performance - Implementing animations with Reanimated - Working with images and media - Configuring native modules or fonts - Structuring monorepo projects with native dependencies ## Rule Categories by Priority | Priority | Category | Impact | Prefix | | -------- | ---------------- | -------- | -------------------- | | 1 | List Performance | CRITICAL | `list-performance-` | | 2 | Animation | HIGH | `animation-` | | 3 | Navigation | HIGH | `navigation-` | | 4 | UI Patterns | HIGH | `ui-` | | 5 | State Management | MEDIUM | `react-state-` | | 6 | Rendering | MEDIUM | `rendering-` | | 7 | Monorepo | MEDIUM | `monorepo-` | | 8 | Configuration | LOW | `fonts-`, `imports-` | ## Quick Reference ### 1. List Performance (CRITICAL) - `list-performance-virtualize` - Use FlashList for large lists - `list-performance-item-memo` - Memoize list item components - `list-performance-callbacks` - Stabilize callback references - `list-performance-inline-objects` - Avoid inline style objects - `list-performance-function-references` - Extract functions outside render - `list-performance-images` - Optimize images in lists - `list-performance-item-expensive` - Move expensive work outside items - `list-performance-item-types` - Use item types for heterogeneous lists ### 2. Animation (HIGH) - `animation-gpu-properties` - Animate only transform and opacity - `animation-derived-value` - Use useDerivedValue for computed animations - `animation-gesture-detector-press` - Use Gesture.Tap instead of Pressable ### 3. Navigation (HIGH) - `navigation-native-navigators` - Use native stack and native tabs over JS navigators ### 4. UI Patterns (HIGH) - `ui-expo-image` - Use expo-image for all images - `ui-image-gallery` - Use Galeria for image lightboxes - `ui-pressable` - Use Pressable over TouchableOpacity - `ui-safe-area-scroll` - Handle safe areas in ScrollViews - `ui-scrollview-content-inset` - Use contentInset for headers - `ui-menus` - Use native context menus - `ui-native-modals` - Use native modals when possible - `ui-measure-views` - Use onLayout, not measure() - `ui-styling` - Use StyleSheet.create or Nativewind ### 5. State Management (MEDIUM) - `react-state-minimize` - Minimize state subscriptions - `react-state-dispatcher` - Use dispatcher pattern for callbacks - `react-state-fallback` - Show fallback on first render - `react-compiler-destructure-functions` - Destructure for React Compiler - `react-compiler-reanimated-shared-values` - Handle shared values with compiler ### 6. Rendering (MEDIUM) - `rendering-text-in-text-component` - Wrap text in Text components - `rendering-no-falsy-and` - Avoid falsy && for conditional rendering ### 7. Monorepo (MEDIUM) - `monorepo-native-deps-in-app` - Keep native dependencies in app package - `monorepo-single-dependency-versions` - Use single versions across packages ### 8. Configuration (LOW) - `fonts-config-plugin` - Use config plugins for custom fonts - `imports-design-system-folder` - Organize design system imports - `js-hoist-intl` - Hoist Intl object creation ## How to Use Read individual rule files for detailed explanations and code examples: ``` rules/list-performance-virtualize.md rules/animation-gpu-properties.md ``` Each rule file contains: - Brief explanation of why it matters - Incorrect code example with explanation - Correct code example with explanation - Additional context and references ## Full Compiled Document For the complete guide with all rules expanded: `AGENTS.md` --- ## 5. vercel-react-view-transitions - **Source:** https://github.com/vercel-labs/agent-skills/blob/main/skills/react-view-transitions/SKILL.md - **Raw:** https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-view-transitions/SKILL.md - **Markdown:** https://skillsdocs.com/vercel-labs/agent-skills/react-view-transitions.md - **Licence:** MIT — https://spdx.org/licenses/MIT.html Bundled files (8), referenced from this skill's directory: - `AGENTS.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-view-transitions/AGENTS.md - `metadata.json` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-view-transitions/metadata.json - `README.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-view-transitions/README.md - `references/css-recipes.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-view-transitions/references/css-recipes.md - `references/implementation.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-view-transitions/references/implementation.md - `references/nextjs.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-view-transitions/references/nextjs.md - `references/patterns.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-view-transitions/references/patterns.md - `references/troubleshooting.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-view-transitions/references/troubleshooting.md --- name: vercel-react-view-transitions description: Guide for implementing smooth, native-feeling animations using React's View Transition API (`` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, `startViewTransition`, `ViewTransition`, transition types, or asks about animating between UI states in React without third-party animation libraries. license: MIT metadata: author: vercel version: "1.0.0" --- # React View Transitions Animate between UI states using the browser's native `document.startViewTransition`. Declare *what* with ``, trigger *when* with `startTransition` / `useDeferredValue` / `Suspense`, control *how* with CSS classes. Unsupported browsers skip animations gracefully. ## When to Animate Every `` should communicate a spatial relationship or continuity. If you can't articulate what it communicates, don't add it. Implement **all** applicable patterns from this list, in this order: | Priority | Pattern | What it communicates | |----------|---------|---------------------| | 1 | **Shared element** (`name`) | "Same thing — going deeper" | | 2 | **Suspense reveal** | "Data loaded" | | 3 | **List identity** (per-item `key`) | "Same items, new arrangement" | | 4 | **State change** (`enter`/`exit`) | "Something appeared/disappeared" | | 5 | **Route change** (page-level) | "Going to a new place" | This is an implementation order, not a "pick one" list. Implement every pattern that fits the app. Only skip a pattern if the app has no use case for it. ### Choosing Animation Style | Context | Animation | Why | |---------|-----------|-----| | Hierarchical navigation (list → detail) | Type-keyed `nav-forward` / `nav-back` | Communicates spatial depth | | Lateral navigation (tab-to-tab) | Bare `` (fade) or `default="none"` | No depth to communicate | | Suspense reveal | `enter`/`exit` string props | Content arriving | | Revalidation / background refresh | `default="none"` | Silent — no animation needed | Reserve directional slides for hierarchical navigation (list → detail) and ordered sequences (prev/next photo, carousel, paginated results). For ordered sequences, the direction communicates position: "next" slides from right, "previous" from left. Lateral/unordered navigation (tab-to-tab) should not use directional slides — it falsely implies spatial depth. --- ## Availability - **Next.js:** Do **not** install `react@canary` — the App Router already bundles React canary internally. `ViewTransition` works out of the box. `npm ls react` may show a stable-looking version; this is expected. - **Without Next.js:** Install `react@canary react-dom@canary` (`ViewTransition` is not in stable React). - Browser support: Chromium 125+ (React needs the v2 object form of `startViewTransition`), Firefox 144+, Safari 18.2+. Graceful degradation on unsupported browsers. --- ## Implementation Workflow When adding view transitions to an existing app, **follow [references/implementation.md](references/implementation.md) step by step.** Start with the audit — do not skip it. Use [references/css-recipes.md](references/css-recipes.md) for the applicable CSS and adapt it to the app. --- ## Core Concepts ### The `` Component ```jsx import { ViewTransition } from 'react'; ``` React auto-assigns a unique `view-transition-name` and calls `document.startViewTransition` behind the scenes. Never call `startViewTransition` yourself. ### Animation Triggers | Trigger | When it fires | |---------|--------------| | **enter** | `` first inserted during a Transition | | **exit** | `` first removed during a Transition | | **update** | DOM mutations inside a ``, or the boundary itself changing size/position due to an immediate sibling. With nested VTs, mutation applies to the innermost one | | **share** | Named VT unmounts and another with same `name` mounts in the same Transition | Only `startTransition`, `useDeferredValue`, or `Suspense` activate VTs. Regular `setState` does not animate. ### Critical Placement Rule `` only activates enter/exit if it appears **before any DOM nodes**: ```jsx // Works
Content
 // Broken — div wraps the VT, suppressing enter/exit
Content
``` --- ## Styling with View Transition Classes ### Props Values: `"auto"` (browser cross-fade), `"none"` (disabled), `"class-name"` (custom CSS), or `{ [type]: value }` for type-specific animations. ```jsx ``` If `default` is `"none"`, all triggers are off unless explicitly listed. ### CSS Pseudo-Elements - `::view-transition-old(.class)` — outgoing snapshot - `::view-transition-new(.class)` — incoming snapshot - `::view-transition-group(.class)` — container - `::view-transition-image-pair(.class)` — old + new pair See [references/css-recipes.md](references/css-recipes.md) for ready-to-use animation recipes. --- ## Transition Types Tag transitions with `addTransitionType` so VTs can pick different animations based on context. Call it multiple times to stack types — different VTs in the tree react to different types: ```jsx startTransition(() => { addTransitionType('nav-forward'); addTransitionType('select-item'); router.push('/detail/1'); }); ``` Pass an object to map types to CSS classes. Works on `enter`, `exit`, **and** `share`: ```jsx ``` `enter` and `exit` don't have to be symmetric. For example, fade in but slide out directionally: ```jsx ``` **TypeScript:** `ViewTransitionClassPerType` requires a `default` key in the object. For apps with multiple pages, extract the type-keyed VT into a reusable wrapper: ```jsx export function DirectionalTransition({ children }: { children: React.ReactNode }) { return ( {children} ); } ``` ### `router.back()` and Browser Back Button `router.back()` and the browser's back/forward buttons carry **no transition types**, so type-keyed animations (directional slides) resolve to their `default` and don't play — untyped shared-element morphs still apply. For typed animations, use `router.push()` with an explicit URL. ### Types and Suspense Types are available during navigation but **not** during subsequent Suspense reveals (separate transitions, no type). Use type maps for page-level enter/exit; use simple string props for Suspense reveals. ### Shared Element Readiness A shared element transition can pair elements only when both the old and new views are rendered in the same Transition. If incoming content suspends, only its fallback exists for that update; the resolved content appears in a later Suspense transition and can be animated separately. --- ## Shared Element Transitions Same `name` on two VTs — one unmounting, one mounting — creates a shared element morph: ```jsx startTransition(() => onSelect())} /> // On the other view — same name ``` - Only one VT with a given `name` can be mounted at a time — use unique names (`photo-${id}`). Watch for reusable components: if a component with a named VT is rendered in both a modal/popover *and* a page, both mount simultaneously and break the morph. Either make the name conditional (via a prop) or move the named VT out of the shared component into the specific consumer. - `share` takes precedence over `enter`/`exit`. Think through each navigation path: when no matching pair forms (e.g., the target page doesn't have the same name), `enter`/`exit` fires instead. Consider whether the element needs a fallback animation for those paths. - Two ways a wired-up morph silently never fires: (1) `default="none"` with no explicit `share` prop — share resolves to none; (2) type-keyed `share` where the navigation never adds the type — a plain link click resolves the map's `default`. Every link that should morph must add the type (`transitionTypes` on `next/link`, or `addTransitionType`). - Never use a fade-out exit on pages with shared morphs — use a directional slide instead. --- ## Common Patterns ### Enter/Exit ```jsx {show && ( )} ``` ### List Reorder ```jsx {items.map(item => ( ))} ``` Trigger inside `startTransition`. Avoid wrapper `
`s between list and VT. ### Layout Displacement Morph Only content inside an activated boundary animates position — everything else teleports to its new layout spot. Wrap the sibling content below a growing/shrinking list in a bare `` so it glides instead of jumping. See [Layout Displacement Morph](references/patterns.md#layout-displacement-morph). ### Composing Shared Elements with List Identity Shared elements and list identity are independent concerns — don't confuse one for the other. When a list item contains a shared element (e.g., an image that morphs into a detail view), use two nested `` boundaries: ```jsx {items.map(item => ( {/* list identity */} {/* shared element */}

{item.name}

 ))} ``` The outer VT handles list reorder/enter animations. The inner VT handles the cross-route shared element morph. Missing either layer means that animation silently doesn't happen. ### Force Re-Enter with `key` ```jsx ``` **Caution:** If wrapping ``, changing `key` remounts the boundary and refetches. ### Suspense Fallback to Content Simple cross-fade: ```jsx }> ``` Directional reveal: ```jsx }> ``` For more patterns, see [references/patterns.md](references/patterns.md). --- ## How Multiple VTs Interact Every VT matching the trigger fires simultaneously in a single `document.startViewTransition`. VTs in **different** transitions (navigation vs later Suspense resolve) don't compete. ### Use `default="none"` Deliberately Without it, every VT fires the browser cross-fade on **every** transition — Suspense resolves, `useDeferredValue` updates, background revalidations. Use `default="none"` on named/shared elements and type-keyed page VTs. But it also turns off `update` (layout/reflow morphs) and `share` (a named pair with no explicit `share` prop never morphs). Keyed list items and displaced siblings *want* update — leave them bare or set `update="auto"`. ### Two Patterns Coexist **Pattern A — Directional slides:** Type-keyed VT on each page, fires during navigation. **Pattern B — Suspense reveals:** Simple string props, fires when data loads (no type). They coexist because they fire at different moments. `default="none"` on both prevents cross-interference. Always pair `enter` with `exit`. Place directional VTs in page components, not layouts. ### Nested VT Limitation When a parent VT mounts/unmounts **as one unit** with nested VTs inside it, the nested ones do not fire their own enter/exit — only the outermost VT animates. (A child VT mounted inside a *persistent* parent VT fires enter/exit normally.) Per-item staggered animations during page navigation are not currently available in Next.js; see [troubleshooting](references/troubleshooting.md) for the upstream experimental status. --- ## Next.js Integration For Next.js integration (`transitionTypes` on `next/link` and `useRouter`, App Router patterns, Server Components), see [references/nextjs.md](references/nextjs.md). --- ## Accessibility Always add the reduced motion CSS from [references/css-recipes.md](references/css-recipes.md#reduced-motion) to your global stylesheet. --- ## Reference Files - **[references/implementation.md](references/implementation.md)** — Step-by-step implementation workflow. - **[references/patterns.md](references/patterns.md)** — Patterns, animation timing, and events API. - **[references/troubleshooting.md](references/troubleshooting.md)** — Symptom-driven debugging and runtime limitations. - **[references/css-recipes.md](references/css-recipes.md)** — Ready-to-use CSS animation recipes. - **[references/nextjs.md](references/nextjs.md)** — Next.js App Router patterns and Server Component details. ## Full Compiled Document For the complete guide with all reference files expanded: `AGENTS.md` --- ## 6. vercel-cli-with-tokens 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. "deploy to vercel", "set up vercel", "add environment variables to vercel". - **Source:** https://github.com/vercel-labs/agent-skills/blob/main/skills/vercel-cli-with-tokens/SKILL.md - **Raw:** https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/vercel-cli-with-tokens/SKILL.md - **Markdown:** https://skillsdocs.com/vercel-labs/agent-skills/vercel-cli-with-tokens.md - **Licence:** No licence detected — all rights reserved by its authors _Body withheld: no licence could be detected for this skill. Read it upstream._ --- ## 7. vercel-optimize 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. - **Source:** https://github.com/vercel-labs/agent-skills/blob/main/skills/vercel-optimize/SKILL.md - **Raw:** https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/vercel-optimize/SKILL.md - **Markdown:** https://skillsdocs.com/vercel-labs/agent-skills/vercel-optimize.md - **Licence:** No licence detected — all rights reserved by its authors Bundled files (155), referenced from this skill's directory: - `AGENTS.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/vercel-optimize/AGENTS.md - `CONTRIBUTING.md` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/vercel-optimize/CONTRIBUTING.md - `lib/auth-route.mjs` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/vercel-optimize/lib/auth-route.mjs - `lib/budget-summary.mjs` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/vercel-optimize/lib/budget-summary.mjs - `lib/citations.mjs` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/vercel-optimize/lib/citations.mjs - `lib/cost-coverage.mjs` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/vercel-optimize/lib/cost-coverage.mjs - `lib/dedup-recs.mjs` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/vercel-optimize/lib/dedup-recs.mjs - `lib/deep-dive.mjs` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/vercel-optimize/lib/deep-dive.mjs - `lib/display-labels.mjs` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/vercel-optimize/lib/display-labels.mjs - `lib/extract-claims.mjs` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/vercel-optimize/lib/extract-claims.mjs - `lib/framework-support.mjs` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/vercel-optimize/lib/framework-support.mjs - `lib/gates/build-minutes-fanout.mjs` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/vercel-optimize/lib/gates/build-minutes-fanout.mjs - `lib/gates/cold-start.mjs` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/vercel-optimize/lib/gates/cold-start.mjs - `lib/gates/contract.mjs` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/vercel-optimize/lib/gates/contract.mjs - `lib/gates/cwv-poor.mjs` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/vercel-optimize/lib/gates/cwv-poor.mjs - `lib/gates/external-api-slow.mjs` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/vercel-optimize/lib/gates/external-api-slow.mjs - `lib/gates/hard-gates.mjs` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/vercel-optimize/lib/gates/hard-gates.mjs - `lib/gates/index.mjs` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/vercel-optimize/lib/gates/index.mjs - `lib/gates/isr-overrevalidation.mjs` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/vercel-optimize/lib/gates/isr-overrevalidation.mjs - `lib/gates/middleware-heavy.mjs` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/vercel-optimize/lib/gates/middleware-heavy.mjs - `lib/gates/observability-events-attribution.mjs` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/vercel-optimize/lib/gates/observability-events-attribution.mjs - `lib/gates/platform-bot-protection.mjs` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/vercel-optimize/lib/gates/platform-bot-protection.mjs - `lib/gates/platform-fluid-compute.mjs` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/vercel-optimize/lib/gates/platform-fluid-compute.mjs - `lib/gates/region-misconfig.mjs` — https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/vercel-optimize/lib/gates/region-misconfig.mjs - …and 131 more, listed in https://skillsdocs.com/api/v1/books/vercel-labs/agent-skills/skills/vercel-optimize _Body withheld: no licence could be detected for this skill. Read it upstream._ --- ## 8. web-design-guidelines Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices". - **Source:** https://github.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md - **Raw:** https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/web-design-guidelines/SKILL.md - **Markdown:** https://skillsdocs.com/vercel-labs/agent-skills/web-design-guidelines.md - **Licence:** No licence detected — all rights reserved by its authors _Body withheld: no licence could be detected for this skill. Read it upstream._ --- ## 9. writing-guidelines Review docs/prose for Writing Guidelines compliance. Use when asked to "review my docs", "check writing style", "audit prose", "review docs voice and tone", or "check this page against the writing handbook". - **Source:** https://github.com/vercel-labs/agent-skills/blob/main/skills/writing-guidelines/SKILL.md - **Raw:** https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/writing-guidelines/SKILL.md - **Markdown:** https://skillsdocs.com/vercel-labs/agent-skills/writing-guidelines.md - **Licence:** No licence detected — all rights reserved by its authors _Body withheld: no licence could be detected for this skill. Read it upstream._