vercel-labs/agent-skills
9 skills2M installs266k starsGitHub
Install
npx skills add https://github.com/vercel-labs/agent-skillsSkills in this repo
1Vercel React Best Practicesvercel-react-best-practices is a Vercel-maintained skill that embeds 70 React and Next.js performance rules across 8 impact-prioritized categories. It applies when an agent writes, reviews, or refactors components, pages, data fetching, or bundle configuration and steers toward patterns Vercel Engineering uses. Rules cover eliminating network waterfalls, bundle size, server-side performance, client fetching, re-render and rendering optimization, JavaScript hot paths, and advanced patterns. A developer uses it during performance audits, PR reviews, and refactors where generic React advice is not specific enough.584kinstalls2Web Design Guidelinesweb-design-guidelines is a Claude Code skill that audits existing frontend code against Vercel's Web Interface Guidelines. When a developer asks to review a UI, check accessibility, or audit UX, it fetches the latest guidelines from a live source URL, reads the specified files or pattern, checks every rule, and reports findings in a terse file:line format. Developers use it during pull-request review or pre-release QA to turn subjective design opinions into a repeatable, fetch-fresh rule check. It only reviews code and does not scaffold or generate UI.495kinstalls3Vercel Composition PatternsVercel Composition Patterns is a React architecture skill for flexible, maintainable components that scale for humans and AI agents. It targets boolean prop proliferation, rigid component libraries, and unclear provider boundaries with prioritized rule categories: component architecture, state management, implementation patterns, and React 19 APIs. High-impact rules include architecture-avoid-boolean-props, architecture-compound-components, state-decouple-implementation, state-context-interface, state-lift-state, patterns-explicit-variants, and patterns-children-over-render-props. React 19 guidance covers react19-no-forwardref and preferring use() over useContext(), noted as React 19+ only. Each rule file in rules/ provides incorrect and correct code examples with explanations, and AGENTS.md compiles the full guide. Apply when refactoring components with many boolean flags, designing reusable library APIs, reviewing component architecture, or working with compound components and context providers. The skill helps teams replace mode-switching props with explicit variant components, provider-owned state interfaces, and clearer extension points for future features.265kinstalls4Vercel React Native Skillsvercel-react-native-skills is Vercel Engineering's comprehensive performance guide for AI agents maintaining React Native codebases (v1.0.0, January 2026). It bundles 35+ rules across 13 categories covering core rendering, list performance, animation, and scroll optimization. Each rule includes incorrect vs. correct examples and impact metrics. Developers use vercel-react-native-skills when LLM-generated mobile code ships with janky lists, unnecessary re-renders, or other common performance pitfalls.175kinstalls5Deploy To VercelDeploy applications to Vercel instantly with auto-framework detection. The skill checks your project state, selects the best deployment method (git push, CLI, or full setup), and returns preview and claim URLs for ownership transfer.98.7kinstalls6Vercel React View TransitionsAgent skill for implementing smooth animations with React's View Transition API. Covers ViewTransition component patterns, shared element transitions, and Next.js routing integration.87.4kinstalls7Vercel Cli With Tokensvercel-cli-with-tokens is a Vercel-authored agent skill for deploying and managing projects with the Vercel CLI using token-based authentication instead of interactive vercel login. The skill walks agents through locating a VERCEL TOKEN from environment variables or secrets, then running deploy, setup, and environment-variable commands safely in CI and headless contexts.74.1kinstalls8Vercel OptimizeSkill for auditing Vercel-deployed projects with an observability-first approach. Collects production metrics, scans codebases, and produces ranked recommendations grounded in verified files and framework-aware Vercel documentation. Supports Next.js, SvelteKit, Nuxt, and Astro with limited Hono/Remix support.41.5kinstalls9Writing GuidelinesReview 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". --- name: writing-guidelines description: 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". metadata: author: vercel version: "1.0.0" argument-hint: <file-or-pattern> --- # Writing Guidelines Review files for compliance with Writing Guidelines. Fetch the latest guidelines from the source URL below 2. Read the specified files (or prompt user for files/pattern) 3. Check against all rules in the fetched guidelines 4. Output findings in the terse `file:line` format ## Guidelines Source Fetch fresh guidelines before each review: ``` https://raw.githubusercontent.com/vercel-labs/writing-guidelines/main/command.md ``` Use WebFetch to retrieve the latest rules.35.1kinstalls