vercel-labs/vercel-skills
10 skills405k installsGitHub
Install
npx skills add https://github.com/vercel-labs/vercel-skillsSkills in this repo
1Agent Browseragent-browser teaches coding agents to run the agent-browser CLI for programmatic Chrome control. Solo builders reach for it when chat alone cannot click production UI, file upload widgets, or multi-step logins. The workflow is deliberate: navigate, snapshot with interactive refs like @e1, act on those refs, then snapshot again after navigation or DOM updates because stale refs break automation. Commands can chain in one shell call while a daemon keeps the session warm, which matters for efficient agent loops. Triggers span opening sites, form fills, screenshots, data extraction, and web app tests—useful in Validate when clicking a prototype, in Ship when regression-testing, or in Launch when sampling competitor pages. It is a shell-integrated browser driver, not a hosted scraping API, so local install and site terms still apply.404kinstalls2Next Best PracticesNext Best Practices is a reference agent skill from Vercel Labs that consolidates how solo builders should write and review Next.js apps on the App Router era, including React Server Component boundaries, async request APIs in Next 15+, and the supporting topic docs for conventions, directives, functions, runtime choice, images, fonts, and bundling. It is not user-invocable as a standalone chat command; the agent applies these rules when you are implementing features, fixing production bugs, or doing pre-ship review on a Next codebase headed for Vercel or compatible hosting. The skill steers you away from subtle footguns—treating client components as async, passing non-serializable props across the server boundary, or missing metadata and error-handling patterns—before they become deploy blockers. Treat it as living checklist documentation wired into the agent rather than a one-shot generator. Pair it with your implementation plan and testing workflow so Build and Ship stay aligned with current Next releases, including middleware renaming called out for v16.75installs3Vercel React Best PracticesVercel React Best Practices is an agent-oriented performance playbook for React and Next.js codebases, maintained by Vercel Engineering (v1.0.0). Solo builders and small teams install it so Claude Code, Cursor, Codex, and similar agents do not ship slow patterns by default—stacked awaits in routes, heavy barrel imports, unnecessary client components, and chatty client fetches are called out with concrete fixes. The material spans eight categories: eliminating waterfalls, bundle size, server-side execution, client-side data fetching, re-render optimization, rendering behavior, JavaScript micro-performance, and advanced patterns. It is written for automation: rules are ordered by impact, and examples contrast anti-patterns with implementations agents can apply during generation or refactor passes. Use it during active frontend implementation, before release when auditing Core Web Vitals risk, and when iterating on hot paths in production apps—not as a substitute for product design or accessibility checklists.65installs4Web Design Guidelinesweb-design-guidelines is a Vercel agent skill that reviews your interface code against the public Web Interface Guidelines, always pulling the latest rule set from GitHub before scoring files you name. Solo builders who ship fast but worry about accessibility, UX consistency, and Vercel-style best practices invoke it when they want a second pass without hiring a design systems reviewer. The workflow is deliberate: fetch command.md, read the requested paths, map violations to every rule in that document, and emit compact file:line findings so fixes slot into normal editor workflows. It fits Ship review gates and also helps during Build when you polish new screens, but it does not replace user research or brand design—it's a compliance-oriented checker. Because rules evolve upstream, each review stays current rather than relying on stale cached checklists baked into the skill file.61installs5TurborepoTurborepo Skill is procedural guidance for Vercel’s Turborepo build system on JavaScript and TypeScript monorepos. Solo builders and small teams use it when they add apps and packages directories, edit turbo.json, debug cache misses, or optimize CI to run only affected packages. The skill stresses a non-negotiable pattern: register tasks per package, mirror them in root turbo.json, and never host build logic in the root package.json, because root tasks break parallelization. It walks through task pipelines with dependsOn, local and remote caching, filtering, and environment variable handling for reproducible builds. Triggers include configuring workflows, sharing code between apps, creating internal packages, and troubleshooting when changed-package runs behave wrong. It fits agents working in repos that already look like a monorepo or are migrating from a single app to multiple packages.57installs6Next Cache ComponentsNext Cache Components is an agent skill focused on Next.js 16 and later Cache Components, which implement Partial Prerendering so a single route can combine instant static shell, time-bounded cached data, and fresh dynamic segments behind Suspense. Solo builders use it when they migrate from older experimental PPR flags or when product pages need fast first paint without sacrificing personalized or session-specific blocks. The skill explains enabling cacheComponents in next.config.ts and classifying work into static synchronous UI, async regions marked with the use cache directive plus cacheLife, and dynamic fetches that must stream inside Suspense fallbacks. It also covers cacheTag and updateTag for targeted revalidation when content changes. The guidance suits SaaS dashboards, marketing sites with embedded feeds, and content apps where most HTML is stable but a slice of the tree must stay live per request.56installs7Ai Sdkai-sdk is an agent skill for solo and indie builders who add AI to web apps with Vercel’s AI SDK. It activates when you mention the AI SDK, generateText, streamText, agents, tool calling, structured output, embeddings, RAG, or useChat. The workflow treats the model’s baked-in AI SDK knowledge as unreliable: it checks that the ai package is installed, searches local docs under node_modules/ai/docs/ and source, and falls back to ai-sdk.dev when needed. That keeps answers aligned with the version in your repo instead of deprecated training-data APIs. It supports designing chatbots and ToolLoopAgent flows, choosing and layering provider packages, streaming responses, defining tools, and wiring React hooks for interactive UIs. Use it during validation prototypes that need a thin AI demo and during full product build when integrations become production paths. It is reference-driven integration help, not a substitute for your own threat modeling of API keys, rate limits, and user-data policies in production.55installs8Ai ElementsAI Elements is a Vercel-maintained agent skill for solo builders extending the ai-elements component library—the shadcn/ui-based registry for AI-native UIs built on the Vercel AI SDK. Invoke it when you need a new chat-related component in packages/elements/src or when you ask the agent to add a component to ai-elements. The skill encodes composable patterns, registry layout, and install paths (CLI or shadcn) so generated code stays consistent with existing elements like conversations and messages. It fits indie SaaS and agent-product teams already on Next.js 18+ who want faster iteration on streaming chat UX without re-reading the full docs each time. Prerequisites are a Next.js project with AI SDK and shadcn/ui; the workflow emphasizes alignment with Vercel AI Gateway for keys and routing. Use during Build when the interface is the bottleneck, not during idea validation or post-launch growth tooling.48installs9Vercel DeployVercel Deploy is an official Vercel agent skill that runs a packaged deploy script to upload your app and return live links. Solo builders use it when they say deploy my app, create a preview, or push this live without stopping to configure CLI auth first. The flow tarballs the tree (skipping node_modules and .git), detects the framework, sends it to Vercel’s deployment service, and prints a preview hostname plus a claim URL to transfer ownership. It supports deploying the current directory, a named path, or a prebuilt .tgz. Primary journey placement is Ship launch, though the same action appears when validating a prototype on a real URL during Validate. Intermediate complexity: you need a deployable Node-oriented project and bash. Pair with normal Vercel account setup after claiming. Not for long-running infra beyond Vercel or non-web artifacts.47installs10Electronelectron teaches your coding agent to automate native Electron desktop applications using Vercel’s agent-browser and Chrome DevTools Protocol. Solo builders use it when a task lives inside Slack, VS Code, Discord, or another Chromium-shell app instead of a normal browser tab. The workflow is deliberate: launch or attach with --remote-debugging-port, connect on that port, take an interactive snapshot, click and type using element refs, then re-snapshot after UI state changes. It fits indie teams validating desktop UX, scripting repetitive clicks in tools they already use, or smoke-testing their own Electron builds without maintaining a separate Playwright suite for every app. You need comfort with shell commands and knowing which port your target app exposes; permissions are limited to agent-browser bash invocations rather than broad network access.35installs