vercel-labs/claude-skills
8 skills1.3k installs222k starsGitHub
Install
npx skills add https://github.com/vercel-labs/claude-skillsSkills in this repo
1Vercel React Best PracticesVercel React Best Practices is an agent-oriented performance playbook for React and Next.js codebases. Solo and indie builders install it when they want refactors and new UI work to follow the same engineering bar Vercel uses internally, instead of one-off chat suggestions that miss waterfall bugs or silent bundle growth. The document spans eight categories ordered by impact, starting with eliminating request waterfalls and shrinking bundles, then moving through rendering, caching, and advanced patterns. Each rule pairs explanation with wrong vs right implementations so Claude Code, Cursor, or Codex can apply changes mechanically during build work and again during ship-phase performance passes. It complements composition and routing skills: use it whenever agents touch data loading, route handlers, or client components where latency and JavaScript weight directly affect conversion on a small team’s only production app.287installs2Vercel Composition PatternsVercel Composition Patterns is an agent-first guide for designing React components that stay understandable as a solo builder’s product grows feature by feature. Instead of accumulating isOpen, isLoading, and showFooter booleans on a single mega-component, the skill pushes compound components, lifted provider state, and explicit variants so codegen and refactors do not collapse into unmaintainable prop matrices. It pairs architectural guidance with medium-impact implementation habits—generic context interfaces for dependency injection and preferring composed children over render props—so Cursor or Claude Code can extend UI without rewriting parents every sprint. Use it during active frontend build work whenever agents scaffold design-system pieces, dashboards, or multi-step flows where state and presentation should split cleanly. It complements Vercel’s performance skill: composition keeps structure sane; performance rules keep the resulting tree fast.283installs3Web Design Guidelinesweb-design-guidelines is a checker skill for solo builders who want agent-assisted UI quality without maintaining a static rule doc locally. Each run uses WebFetch to pull the latest Web Interface Guidelines from Vercel Labs’ public repository, then reads the files or pattern you specify and evaluates them against every rule in that payload. It is aimed at founders and small teams shipping web apps in Claude Code, Cursor, or Codex who need consistent accessibility, interaction, and UX hygiene before merge or launch. Use it when someone asks to review UI, check accessibility, audit design, review UX, or compare a site to interface best practices—not as a layout generator. Because guidelines update at the source, you avoid stale checklists; the tradeoff is you need network access for fetches and you must point the agent at concrete files when none are provided.232installs4Vercel 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.185installs5Deploy 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.111installs6Vercel 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.103installs7Vercel 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.92installs8Writing 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.9installs