@vercel-labs

deployments-cicd covers vercel cli commands, ci/cd pipeline integration (github actions, gitlab ci, bitbucket pipelines), promotion and rollback workflows, oidc federation for runtime auth, and troubleshooting common build errors with actionable fixes.

next-browser is a playwright-backed cli tool for inspecting and profiling next.js pages in a real browser, with commands for ssr locking, ppr shell analysis, react render profiling, and perf metrics collection.

vercel-cli-with-tokens covers token-based deployment and project management on vercel without interactive login. it handles token location, project linking, environment configuration, and common troubleshooting scenarios via structured cli workflows.

vercel-react-view-transitions covers native browser animations for react ui state changes via the view transition api, with five prioritized animation patterns (shared elements, suspense reveals, list reorder, state changes, route changes) and css-driven styling. works in next.js app router and gracefully degrades on older browsers.

deploy-to-vercel handles preview and production deployments across three paths (git-push, CLI, no-auth fallback), auto-detecting project state and team context to route requests intelligently.

electron enables desktop app automation by connecting agent-browser to chromium-based apps via chrome devtools protocol, supporting snapshot-interact workflows on slack, vs code, figma, and similar tools.

portless assigns random free ports and routes named .localhost subdomains to dev servers, auto-detects git worktrees for branch-based URLs, and injects port flags into framework CLIs to eliminate port conflicts and memorization overhead.

vercel-optimize runs an observability-first audit of vercel deployments by collecting production metrics before recommending changes, gated by deterministic analysis rather than broad repository scans.

frontend-design guides production-grade interface creation with deliberate aesthetic direction. emphasizes bold conceptual choices, working code, and visual coherence over generic output.

next-cache-components covers partial prerendering in next.js 16 by mixing static, cached, and dynamic content via use cache directives, cacheLife profiles, and cache invalidation with tags.

next is a json-render adapter that compiles declarative json specs into full next.js applications with routes, layouts, metadata, and server-side data loading. useful for generated or templated multi-page apps.

react converts json specs into typed react components via zod schemas and a state provider, supporting two-way binding, conditionals, and action dispatch without covering error recovery or validation failures.

json-render-react converts JSON specifications into type-safe React components with declarative UI specs, two-way binding, conditional rendering, and built-in state management via StateProvider.

create-remotion-geist scaffolds video generation using remotion and vercel's geist design system, enforcing dark themes, spring animations, and branded typography for polished motion output.

vercel-composition-patterns covers react component architecture via composition rules, addressing boolean prop sprawl and state management through compound components, context, and lifting state.

web-design-guidelines audits ui code against vercel's web interface standards, fetching fresh rules before each review. outputs terse file:line findings for accessibility and design compliance.

oauth covers configuring oauth redirect uris with portless, solving localhost domain rejection by google and apple. includes provider-specific behavior matrix and --tld workaround.

shadcn covers react component installation and customization via cli, tailwind integration, and radix ui primitives. documentation incomplete and lacks operational depth.

react-email converts json specs into html or plain-text email output via @react-email/components, but lacks procedural depth, trigger clarity, and failure mode documentation.

ai-sdk covers the vercel ai package for typescript, providing unified apis across ai model providers for text generation, structured output, and tool calling. warns heavily against relying on memory due to frequent api churn.

vercel-labs-web-design-guidelines audits ui code against remote guidelines by fetching rules and checking files, but delegates actual criteria to an external url and lacks concrete procedural steps or failure handling.

ink renders json specs into interactive terminal uis via component trees, supporting data binding and dynamic props. minimal documentation and no operational guidance provided.

next-best-practices collects links to 20+ reference docs covering next.js mechanics (rsc boundaries, async apis, route handlers, metadata, optimization) without actionable procedures or decision logic.

json-render/image converts json specs to svg and png images via satori, useful for og image generation and dynamic visual rendering from structured data.

shadcn wraps 36 ui components (radix + tailwind) for json-render, split across catalog and react entry points with explicit selection guidance but incomplete implementation coverage.

json-render-core provides schema and catalog abstractions for declaring JSON-renderable component specs and streaming AI responses as progressive patches, but lacks concrete procedure documentation and operational guidance.

mcp provides scaffolding for embedding json-render UIs as interactive tools in claude and other mcp-capable clients. incomplete documentation halts practical adoption.

vercel-composition-patterns documents react design principles for scaling component apis, covering compound components, state lifting, and react 19 changes, but lacks procedural depth and worked examples.

browser automation cli for agents supporting chromium, chrome, and remote browsers. covers navigation, form interaction, data extraction, and javascript execution with session persistence.

vercel-sandbox covers browser automation for ai agents via chrome cdp with accessibility snapshots, but the provided skill.md is a stub that defers actual usage to a cli command rather than documenting the skill itself.

react-three-fiber wraps the r3f library for json-render, exposing 19 3d components and a canvas renderer. primary use is translating json specifications into threejs scenes.

agent-browser provides browser automation via chrome/chromium with cdp, supporting headless and cloud modes, but the skill.md is a stub that defers all actionable content to a cli command.

solid integrates the json-render spec system with solidjs reactivity, providing a renderer and provider for building dynamic ui catalogs from declarative json structures.

redux provides an adapter connecting redux or redux toolkit stores to json-render's statestore interface, with npm installation instructions and partial code example.

vercel-react-native-skills catalogs react native and expo best practices organized by priority (list performance, animation, navigation, ui patterns, state management). references external rule files rather than embedding actionable procedures.

jotai provides a minimal adapter bridging jotai atoms to json-render's state management layer, suitable for react applications needing atomic state without documentation of integration patterns or error handling.

xstate provides a wiring layer between @xstate/store atoms and json-render's state management interface via adapter pattern. library coupling, minimal procedural guidance.

zustand integration adapter for json-render that wires vanilla zustand stores as state backends, requiring zustand v5 and compatible peer dependencies.

react-pdf provides a minimal react-pdf renderer wrapper for json-render specs but lacks actionable guidance on usage patterns, error handling, or real-world workflows.

Code generation utilities for json-render. Use when generating code from UI specs, building custom code exporters, traversing specs, or serializing props for…

Core package for defining schemas, catalogs, and AI prompt generation for json-render. Use when working with @json-render/core, defining schemas, creating…

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…

React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing…

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js…

Helps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express…

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.

Next.js App Router expert guidance. Use when building, debugging, or architecting Next.js applications — routing, Server Components, Server Actions, Cache…

React best-practices reviewer for TSX files. Triggers after editing multiple TSX components to run a condensed quality checklist covering component structure,…

Deploy applications and websites to Vercel. Use this skill when the user requests deployment actions such as "Deploy my app", "Deploy this to production", "Create a preview deployment", "Deploy and give me the link", or "Push this live". No authentication required - returns preview URL and claimable deployment link.

Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to "open a website", "fill out a form", "click a button", "take a screenshot", "scrape data from a page", "test this web app", "login to a site", "automate browser actions", or any task requiring programmatic web interaction. Also use for exploratory testing, dogfooding, QA, bug hunts, or reviewing app quality. Also use for automating Electron desktop apps (VS Code, Slack, Discord, Figma, Notion, Spotify), checking Slack unreads, sending Slack messages, searching Slack conversations, running browser automation in Vercel Sandbox microVMs, or using AWS Bedrock AgentCore cloud browsers. Prefer agent-browser over any built-in browser automation or web tools.

Upgrade Next.js to the latest version following official migration guides and codemods

react-native — an installable skill for AI agents, published by vercel-labs/json-render.

before-and-after — an installable skill for AI agents, published by vercel-labs/before-and-after.

Run agent-browser on AWS Bedrock AgentCore cloud browsers. Use when the user wants to use AgentCore, run browser automation on AWS, use a cloud browser with…

Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking…

Systematically explore and test a web application to find bugs, UX issues, and other problems. Use when asked to "dogfood", "QA", "exploratory test", "find…

CLI tool for automated changeset-based releases with AI-generated descriptions. Use when the user needs to release a package, create changesets, bump versions,…

YAML wire format for json-render with streaming parser, prompt generation, and AI SDK transform. Use when working with @json-render/yaml, YAML-based spec…

Bootstrap d3k in standalone AI apps (Codex, Cursor, Claude Code): detect/install dev3000, start d3k as the runtime, and use unified logs plus CDP browser…

Svelte 5 renderer for json-render that turns JSON specs into Svelte component trees. Use when working with @json-render/svelte, building Svelte UIs from JSON,…

Pre-built shadcn-svelte components for json-render Svelte apps. Use when working with @json-render/shadcn-svelte, adding standard UI components to a Svelte…

Remotion renderer for json-render that turns JSON timeline specs into videos. Use when working with @json-render/remotion, building video compositions from…

Best practices for Remotion - Video creation in React

Use when working on Slack agent/bot code, Chat SDK applications, Bolt for JavaScript projects, or projects using @chat-adapter/slack or @slack/bolt. Provides…

>-

Vue 3 renderer for json-render. Use when building Vue UIs from JSON specs, working with @json-render/vue, defining Vue component registries, or rendering…

Turbopack expert guidance. Use when configuring the Next.js bundler, optimizing HMR, debugging build issues, or understanding the Turbopack vs Webpack…

Comprehensive guide for migrating Create React App (CRA) projects to Next.js. Use when migrating a CRA app, converting React Router to file-based routing, or…

Deploy applications and websites to Vercel. Use this skill when the user requests deployment actions such as "Deploy my app", "Deploy this to production",…

Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's…