vercel-labs/agent-skills
10 skills1M installs277k starsGitHub
Install
npx skills add https://github.com/vercel-labs/agent-skillsSkills in this repo
1Vercel React Best PracticesVercel React Best Practices is an agent skill packaging Vercel Engineering’s performance playbook for React and Next.js. Solo builders and small teams use it whenever an AI agent drafts components, implements App Router or Pages data fetching, or audits an existing UI for regressions. Instead of generic lint advice, the skill orders roughly seventy concrete rules into eight categories ranked by user-visible impact—eliminating request waterfalls and shrinking bundles first, then server-side work, client fetching, rerenders, rendering cost, JavaScript micro-optimizations, and advanced patterns last. That structure fits agentic workflows: the model can scan for `async-` and `bundle-` class issues before spending tokens on low-yield `js-` tweaks. Triggers align with implementation and review, but the same checklist pays off again during Ship when you harden for real traffic and Core Web Vitals. It is not a deploy tool or test runner; it is procedural knowledge that steers refactors and generation toward patterns Vercel uses in production. Pair it with your stack’s bundler and framework versions, and treat rule application as incremental PR-sized changes rather than a one-shot rewrite.459kinstalls2Web Design GuidelinesWeb Design Guidelines is a Vercel Labs agent skill that audits your UI source against the public Web Interface Guidelines. Before each review it pulls the latest rule set from the upstream repository, reads the files or patterns you name, and returns concise findings mapped to file and line so you can fix issues without wading through a generic checklist. It is aimed at solo and indie builders shipping web apps with Claude Code, Cursor, Codex, or similar agents—especially when you want a second pass on accessibility, interaction patterns, and interface consistency after you have already written components or pages. Invoke it when you say things like review my UI, check accessibility, audit design, review UX, or check my site against best practices. It is a procedural checker backed by live guidelines, not a design generator or a hosted scanning service, which makes it easy to fold into PR review, pre-launch sweeps, or iterative polish on marketing and product surfaces.374kinstalls3Vercel Composition PatternsVercel Composition Patterns is an agent-oriented skill from Vercel Labs that documents how solo and indie builders should structure React codebases for flexibility and maintainability. It targets the common failure mode where every new feature adds another boolean or mode flag until components become impossible for humans—or LLMs—to extend safely. The guidance covers compound components, decoupled state management, provider-based lifting, explicit variants, and children-over-render-props conventions, with priority tiers so agents apply the highest-impact architecture rules first. Install it when you or your agent are generating new UI, refactoring legacy screens, or reviewing agent output in React or Next.js apps. It does not replace a design system; it defines how primitives compose so refactors stay consistent across sessions. Prism lists it under Build → Frontend as the primary shelf, with natural reuse during code review and production iteration.204kinstalls4Vercel React Native SkillsAgent-oriented React Native performance playbook spanning core rendering, list optimization, and incremental tuning for LLM-driven code changes.137kinstalls5Deploy To VercelDeploy to Vercel is an agent skill from Vercel Labs that walks solo builders through shipping a project to Vercel with deliberate guardrails. Before any deploy command, the agent gathers four pieces of state: whether a git remote exists, whether the folder is linked via .vercel/project.json or repo.json, whether the Vercel CLI is installed and authenticated, and which teams are available when the account has more than one. That ordering prevents half-linked deploys and confusing scope errors. The skill’s default posture is preview-first, which keeps accidental production pushes rare while still satisfying “give me the link” requests. When multiple teams appear in JSON from vercel teams list, the workflow asks once for a team slug and then threads --scope through link, deploy, and inspect so later steps stay consistent. It is aimed at indie developers who already have a buildable app locally and want an agent to execute Vercel CLI steps instead of improvising from chat memory. Use it when you are ready to validate the app in a real hosted environment or share a preview, not when you still need local test suites or security hardening. The narrative throughout favors long-term hygiene67.1kinstalls6Vercel React View TransitionsReact View Transitions is a Vercel-authored agent skill that teaches solo builders and small teams how to implement smooth, app-like animations using the browser View Transition API in React. It targets developers shipping SaaS dashboards, marketing sites, or mobile web apps who want route changes, modals, and list updates to feel cohesive instead of jarring. The skill is optimized for automation: it walks through auditing where motion helps, adding reusable CSS recipes, applying transition types, and integrating with Next.js without fighting framework boundaries. You reach for it when a prototype works functionally but navigation feels abrupt, when you need shared-element continuity between screens, or when you are standardizing motion across an AI-assisted refactor. It matters because view transitions are easy to get wrong—conflicting VT roots, missing reduced-motion handling, and Suspense timing bugs waste polish time. Following the workflow keeps implementations consistent across pages and agents.52.2kinstalls7Vercel Cli With TokensVercel CLI with Tokens is a Vercel Labs agent skill that teaches coding agents how to deploy and manage projects when interactive login is unavailable. Solo builders running Claude Code in CI, Docker, or remote sandboxes routinely hit blocked browsers during vercel login; this skill forces a deterministic token hunt—environment variable, .env file, or user prompt—before any deploy runs. It aligns with common indie workflows: ship a Next.js or API route app, push preview and production deployments, and inject secrets as Vercel environment variables without pasting tokens into chat. The procedure is intentionally narrow and actionable, making it ideal for launch-night automation rather than general cloud architecture. Pair it with your repo’s existing build scripts so the agent only handles Vercel-specific auth and CLI flags.47.2kinstalls8Vercel Optimizevercel-optimize is a cross-agent procedural skill from Vercel Labs for projects already deployed on Vercel. Solo builders reach for it when invoices climb, specific routes feel slow, or function invocations spike without an obvious code culprit. The workflow deliberately inverts casual optimization: the agent must authenticate the Vercel CLI, ensure the repo is linked to the correct team or personal scope, pull usage and metrics, run version-aware deterministic gates, and only then open source files tied to launched candidates. A final mechanical verification step is required before rendering recommendations, which reduces hand-wavy “add caching” advice. It is not for greenfield apps without traffic, non-Vercel hosts, or generic code review. Complexity is advanced because of CLI version floors, Observability Plus for route-level analysis, and multi-signal correlation across contract, usage, and metrics. Use it as a structured cost/performance investigation pass you can repeat after shipping changes.11.9kinstalls9Writing GuidelinesWriting Guidelines is a Vercel agent skill that turns your documentation and UI copy into a compliance review against an always-current writing handbook. Solo builders shipping SaaS docs, landing pages, or agent-generated prose install it when they want a repeatable style audit instead of subjective “sounds fine” feedback. On each run the agent WebFetches the latest rules from the vercel-labs writing-guidelines repository, reads the files you specify (or asks which paths to scan), and checks every rule from that payload. Findings come back in the terse file:line format mandated by the fetched guidelines, which makes diffs easy to act on in your editor or CI. It fits after drafts exist—release notes, README sections, marketing pages—not as a blank-page writer. Because rules live remotely, you are not pinning stale local copies; each review tracks whatever Vercel published most recently.4.4kinstalls10Vercel DeployVercel Deploy is a task integration skill from Vercel Labs that runs a bundled shell script to tarball your project, detect its framework, upload to a deployment service, and return a working preview link plus a claim link for your Vercel account. Solo builders use it when chat turns into “deploy this” and they want a link in minutes instead of wiring CI first. Triggers match explicit deployment language: production push, preview deploy, or “give me the link.” Output is operational: Preview URL for sharing and Claim URL for account transfer. It fits Prism’s Ship phase as a low-friction path from local changes to a hosted environment, especially for Next.js and other Vercel-detected stacks.522installs