vercel-labs/claude-skills
8 skills1.8k installs236k starsGitHub
Install
npx skills add https://github.com/vercel-labs/claude-skillsSkills in this repo
1Vercel React Best Practicesvercel-react-best-practices is Vercel Engineering's version 1.0.0 performance playbook (January 2026) packaged as a Claude skill for AI-assisted React and Next.js work. The guide contains 40+ rules organized into 8 impact-prioritized categories, from critical waterfall elimination and bundle-size reduction to incremental advanced patterns. Developers and coding agents reach for it when maintaining, generating, or refactoring UI code so performance regressions get caught before ship. Each rule includes detailed explanations and real-world context optimized for automated refactors rather than ad-hoc micro-optimizations.380installs2Vercel Composition Patternsvercel-composition-patterns is Vercel's version 1.0.0 Engineering guide packaged as an agent skill for React composition architecture. It instructs agents and developers to replace boolean prop proliferation with compound components, lifted state, and composable internals so large React codebases stay readable for humans and LLM refactors alike. The document targets maintenance, generation, and refactoring workflows where render-prop trees and flag-heavy props create fragile APIs. Developers reach for it when components accumulate isOpen, isDisabled, or variant booleans, or when nested render props obscure layout structure. Guidance is optimized for AI-assisted consistency but applies equally to manual React reviews.354installs3Web Design Guidelinesweb-design-guidelines is a Vercel-maintained agent skill (version 1.0.0) that reviews UI code against the company's live Web Interface Guidelines. On invocation it fetches fresh rules from the published guidelines URL, reads the developer's specified files or glob pattern, checks every rule, and outputs terse file:line violations suited for quick fixes. Developers reach for it when asked to review UI, check accessibility, audit design, or validate UX best practices without manually cross-referencing a long guideline doc. The four-step workflow is fetch guidelines, read targets, check rules, and report findings. It complements linters by covering holistic interface guidance rather than syntax alone. argument-hint accepts a file or pattern such as src/components/**/*.tsx.314installs4Vercel React Native SkillsVercel React Native Skills is a dense performance playbook for solo builders shipping Expo or bare React Native apps with AI coding agents. Install it when you want automated refactors to follow the same priorities a senior mobile engineer would—fix critical rendering footguns first, then list virtualization and stable references, then smaller wins. The document is explicitly optimized for LLM maintenance: numbered categories, wrong/right pairs, and stated impact levels. Use during active feature work in Build and again before release when scrolling jank or re-renders show up in Ship perf checks.245installs5Deploy To Verceldeploy-to-vercel gives solo builders a scriptable path from a local repo to a Vercel preview without clicking through the dashboard. The skill bundles a bash deploy script that calls Vercel Labs’ claimable deploy endpoint, zips or uploads the chosen project path, and responds with structured JSON you can paste into tickets, PRs, or agent memory. Framework detection inspects package.json dependencies in a fixed order so common stacks—Next.js, Remix, Astro, Gatsby, TanStack Start, Shopify Hydrogen, and others—map to the right Vercel preset. It is aimed at Codex-style agents that need a repeatable ship command after tests pass. You still claim ownership via claimUrl when appropriate; the skill does not replace production promotion policies or env secret management.165installs6Vercel React View TransitionsVercel-react-view-transitions teaches agents how to ship motion that feels native by leaning on the browser View Transition API instead of bolting on another animation framework. It is for solo builders crafting SaaS dashboards, marketing sites, or app shells in React—especially on Next.js—who want page changes, shared-element continuity, and list updates to read as one continuous experience. The skill stresses intent: every transition should communicate spatial relationship or continuity; if you cannot articulate that, skip the effect. Implementation order follows a priority table—shared element transitions with stable `name` keys come first, then patterns like Suspense-driven reveals—so agents do not sprinkle decorative fades everywhere. Triggers include mentions of `startViewTransition`, transition types, or animating between UI states without Framer Motion–class dependencies. Unsupported browsers simply skip animations, which keeps progressive enhancement compatible with indie bandwidth and maintenance budgets. Prism tags it under Frontend Development so builders comparing motion approaches find API-first guidance tied to Vercel’s React docs mindset.165installs7Vercel Cli With TokensVercel CLI with Tokens is an agent skill for solo and indie builders who need to deploy or manage Vercel projects using the official CLI without interactive login. It walks through locating a Vercel access token—from shell environment, `.env` files, or similarly named variables—then exporting it as `VERCEL_TOKEN` before any deploy or configuration step. That pattern fits local agent sessions, scripted workflows, and headless environments where OAuth in the browser is blocked or undesirable. Use it when you hear triggers like deploy to Vercel, set up Vercel for a new repo, or add environment variables to a Vercel project. The skill emphasizes a repeatable discovery checklist rather than guessing credentials, which reduces failed deploys and leaked-token confusion. It does not replace Vercel’s hosting platform; it proceduralizes token-based CLI auth so your coding agent can ship the same way you would after `vercel login`, but with secrets you already manage in env files or secret stores.142installs8Writing Guidelineswriting-guidelines is an agent skill from Vercel Labs for solo builders and small teams who want documentation and UI copy to match a consistent editorial standard without manually re-reading a style guide each time. On invocation it retrieves the latest Writing Guidelines from the canonical GitHub raw URL, reads the files or patterns the user specifies, and checks every rule from that live source, emitting findings in the mandated terse file:line format rather than narrative fluff. It is ideal when someone asks to review docs, audit prose, or check a page against the writing handbook—especially before publishing marketing pages, CLI help, or product docs that should sound like Vercel’s public voice. The skill depends on network fetch for up-to-date rules and assumes you can point at concrete paths in your repo. It does not rewrite entire documents automatically; it surfaces compliance gaps so you or your agent can fix them deliberately. Use it across doc authoring in Build and final copy review in Ship when voice consistency matters for launch readiness.63installs