vercel-labs/vercel-skills
7 skills366 installsGitHub
Install
npx skills add https://github.com/vercel-labs/vercel-skillsSkills in this repo
1Next Best PracticesNext-best-practices is a Vercel Labs skill that encodes current Next.js App Router conventions so an agent writes and reviews Next.js code correctly - RSC vs client boundaries, async params and cookies, metadata and OG images, route handlers, image/font optimization, and hydration fixes. A solo builder reaches for it while building a Next.js app to avoid common App Router traps and keep pages fast and correct.75installs2Next 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.56installs3Ai 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.55installs4Agent BrowserThe agent-browser skill provides browser automation CLI for AI agents to interact with websites through navigate, snapshot, interact, and re-snapshot workflows. Core usage opens a URL, runs agent-browser snapshot -i for element refs like @e1, fills and clicks via refs, and re-snapshots after DOM changes because refs invalidate on navigation. Commands chain with && because a background daemon persists sessions. Essential commands cover open, snapshot, click, fill, wait, screenshot, pdf export, and diff snapshot for verifying changes. Authentication supports encrypted auth vault profiles, state save and load, and named session persistence. Security features include content boundaries, domain allowlists, action policy files, and output limits. Advanced patterns include parallel sessions, Chrome CDP auto-connect, iOS simulator Safari, semantic locators, and eval with stdin heredoc for complex JavaScript. Agents should close sessions when done and use wait --load networkidle for slow pages. Triggers include open a website, fill out a form, take a screenshot, scrape data, test this web app, or automate browser actions.50installs5Ai 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.48installs6Vercel 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.47installs7ElectronThe electron skill automates Electron desktop applications using agent-browser over Chrome DevTools Protocol. The core workflow launches an app with --remote-debugging-port, connects agent-browser, snapshots interactive elements, clicks by refs, and re-snapshots after navigation. macOS examples cover Slack, VS Code, Discord, Figma, Notion, and Spotify on distinct ports, with Linux and Windows launch commands included. If the app is already running, quit and relaunch with the flag because CDP must be enabled at startup. Tab commands list and switch between Electron windows and webviews. Named --session flags control multiple apps simultaneously on different ports. Common patterns include inspect-and-navigate, screenshots, text extraction, form fill, and multi-app sessions. Troubleshooting covers connection refused, startup wait timing, multi-webview target switching with tab, and custom input fields via keyboard type or inserttext. Playwright defaults to light color scheme unless overridden. Use when automating or testing native Electron apps like Slack, VS Code, or Discord with agent-browser.35installs