VerifiedPlugin
Development
emulate
Local drop-in replacement services for CI and no-network sandboxes. Fully stateful, production-fidelity API emulation. Not mocks.
14 skills
@vercel-labs-2Development
Plugin
vercel-labs-agent-skills
A collection of skills for AI coding agents. Skills are packaged instructions and scripts that extend agent capabilities. Skills follow the Agent Skills format.
Plugin Signal81/100Strong
maintained91
capable48
documented100
adopted95
Install
$ npx -y skills add vercel-labs/claude-skills --agent claude-code
Run the curl in your terminal, the rest in Claude Code.
Stats
29,922
Stars
2,678
Forks
Active
Maintenance
JavaScript
Language
17d ago
Last commit
8mo ago
Created
Repo: vercel-labs/claude-skills
What's inside
Skills
9/composition-patternsComposition patterns for building flexible, maintainable React components. Avoid boolean prop proliferation by using compound components, lifting state, and composing internals. These patterns make codebases easier for both humans and AI agents to work with as they scale./deploy-to-vercelDeploy applications and websites to Vercel. Use when the user requests deployment actions like "deploy my app", "deploy and give me the link", "push this live", or "create a preview deployment"./react-best-practicesReact and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching,/react-native-skillsComprehensive best practices for React Native and Expo applications. Contains rules across multiple categories covering performance, animations, UI patterns, and platform-specific optimizations./react-view-transitionsGuide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create/vercel-cli-with-tokensDeploy and manage projects on Vercel using token-based authentication. Use when working with Vercel CLI using access tokens rather than interactive login — e.g. "deploy to vercel", "set up vercel", "add environment variables to vercel".
Show all 9 skillsShow fewer
/vercel-optimizeUse for Vercel cost and performance optimization on deployed projects, especially Next.js, SvelteKit, Nuxt, and limited Astro apps. Collect Vercel metrics, usage, project config, and code scan results first; investigate only metric-backed candidates; produce ranked/web-design-guidelinesReview UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices"./writing-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".
README
1Agent Skills
A collection of skills for AI coding agents. Skills are packaged instructions and scripts that extend agent capabilities.
Skills follow the Agent Skills format.
Available Skills
vercel-optimize
Audits a Vercel project for cost, performance, reliability, caching, function usage, and billing opportunities. It collects Vercel metrics first, then investigates only the routes and files those metrics point to.
Use when:
- Optimizing a deployed Vercel project
- Reducing Vercel costs or function usage
- Investigating slow or expensive routes
- Finding caching, ISR, middleware, image, or build-minute issues
- Producing a ranked cost and performance report
react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. Contains 40+ rules across 8 categories, prioritized by impact.
Use when:
- Writing new React components or Next.js pages
- Implementing data fetching (client or server-side)
- Reviewing code for performance issues
- Optimizing bundle size or load times
Categories covered:
- Eliminating waterfalls (Critical)
- Bundle size optimization (Critical)
- Server-side performance (High)
- Client-side data fetching (Medium-High)
- Re-render optimization (Medium)
- Rendering performance (Medium)
- JavaScript micro-optimizations (Low-Medium)
web-design-guidelines
Review UI code for compliance with web interface best practices. Audits your code for 100+ rules covering accessibility, performance, and UX.
Use when:
- "Review my UI"
- "Check accessibility"
- "Audit design"
- "Review UX"
- "Check my site against best practices"
Categories covered:
- Accessibility (aria-labels, semantic HTML, keyboard handlers)
- Focus States (visible focus, focus-visible patterns)
- Forms (autocomplete, validation, error handling)
- Animation (prefers-reduced-motion, compositor-friendly transforms)
- Typography (curly quotes, ellipsis, tabular-nums)
- Images (dimensions, lazy loading, alt text)
- Performance (virtualization, layout thrashing, preconnect)
- Navigation & State (URL reflects state, deep-linking)
- Dark Mode & Theming (color-scheme, theme-color meta)
- Touch & Interaction (touch-action, tap-highlight)
- Locale & i18n (Intl.DateTimeFormat, Intl.NumberFormat)
writing-guidelines
Review docs and prose for compliance with the Vercel writing handbook. Audits your pages for 80+ rules covering voice, structure, content types, code samples, typography, and AI workflow.
Use when:
- "Review my docs"
- "Check writing style"
- "Audit prose"
- "Review docs voice and tone"
- "Check this page against the writing handbook"
Categories covered:
- Planning (content plan, content type, user-shaped titles)
- Voice & tone (active voice, direct address, banned words like
easy/simple/quick) - Tone by content type (tutorial, how-to, reference, conceptual, troubleshooting)
- Headings & structure (sentence case, descriptive subheadings, TL;DR opens)
- Lists (when to use, bold/description format)
- Code (language tags, TypeScript first,
<Steps/>, 80-col / 25-line limits) - Placeholders, units, & numbers (
snake_casetext, count-up numbers,64 KB/200 ms) - Typography (no em dashes as punctuation, curly quotes, ellipsis character, non-breaking spaces)
- Source formatting (no hard-wrap, no
---rules, blank line discipline) - Pricing & money pages (tables, uncompromising detail)
- AI workflow (accountability, enterprise models, plan first, disclose AI use)
- Review (PR description discipline, author accountability)
react-native-guidelines
React Native best practices optimized for AI agents. Contains 16 rules across 7 sections covering performance, architecture, and platform-specific patterns.
Use when:
- Building React Native or Expo apps
- Optimizing mobile performance
- Implementing animations or gestures
- Working with native modules or platform APIs
Categories covered:
- Performance (Critical) - FlashList, memoization, heavy computation
- Layout (High) - flex patterns, safe areas, keyboard handling
- Animation (High) - Reanimated, gesture handling
- Images (Medium) - expo-image, caching, lazy loading
- State Management (Medium) - Zustand patterns, React Compiler
- Architecture (Medium) - monorepo structure, imports
- Platform (Medium) - iOS/Android specific patterns
react-view-transitions
Implement smooth, native-feeling animations using React's View Transition API. Covers the <ViewTransition> component, addTransitionType, transition types, and Next.js integration including the transitionTypes prop on next/link.
Use when:
- Adding page transitions or route animations
- Animating enter/exit of components
- Creating shared element transitions (list-to-detail morphing)
- Implementing directional (forward/back) navigation animations
- Integrating view transitions in Next.js App Router
- Animating list reorder or Suspense fallback reveals
Topics covered:
<ViewTransition>component (enter, exit, update, share triggers)addTransitionTypefor directional/context-specific animations- View Transition Classes and CSS pseudo-elements
- Shared element transitions with the
nameprop - JavaScript animations via Web Animations API
- Next.js
transitionTypesprop onnext/link - Ready-to-use CSS animation recipes (fade, slide, scale, flip)
- Accessibility (
prefers-reduced-motion)
composition-patterns
React composition patterns that scale. Helps avoid boolean prop proliferation through compound components, state lifting, and internal composition.
Use when:
- Refactoring components with many boolean props
- Building reusable component libraries
- Designing flexible APIs
- Reviewing component architecture
Patterns covered:
- Extracting compound components
- Lifting state to reduce props
- Composing internals for flexibility
- Avoiding prop drilling
vercel-deploy-claimable
Deploy applications and websites to Vercel instantly. Designed for use with claude.ai and Claude Desktop to enable deployments directly from conversations. Deployments are "claimable" - users can transfer ownership to their own Vercel account.
Use when:
- "Deploy my app"
- "Deploy this to production"
- "Push this live"
- "Deploy and give me the link"
Features:
- Auto-detects 40+ frameworks from
package.json - Returns preview URL (live site) and claim URL (transfer ownership)
- Handles static HTML projects automatically
- Excludes
node_modulesand.gitfrom uploads
How it works:
- Packages your project into a tarball
- Detects framework (Next.js, Vite, Astro, etc.)
- Uploads to deployment service
- Returns preview URL and claim URL
Output:
Deployment successful!
Preview URL: https://skill-deploy-abc123.vercel.app
Claim URL: https://vercel.com/claim-deployment?code=...
Installation
npx skills add vercel-labs/agent-skills
Usage
Skills are automatically available once installed. The agent will use them when relevant tasks are detected.
Examples:
Deploy my app
Review this React component for performance issues
Help me optimize this Next.js page
Skill Structure
Each skill contains:
SKILL.md- Instructions for the agentscripts/- Helper scripts for automation (optional)references/- Supporting documentation (optional)
License
MIT
File tree
442vercel-labs/claude-skillsView on GitHub
.github/
workflows/
react-best-practices-ci.yml
.gitignore
AGENTS.md
CLAUDE.md
packages/
react-best-practices-build/
.gitignore
package.json
pnpm-lock.yaml
src/
build.ts
config.ts
extract-tests.ts
migrate.ts
parser.ts
types.ts
validate.ts
test-cases.json
tsconfig.json
vercel-optimize-tests/
package.json
test/
account-scope-grading.test.mjs
budget-summary.test.mjs
build-minutes-fanout.test.mjs
cache-components-suspense-dedupe.test.mjs
check-citations-script.test.mjs
citations.test.mjs
cold-start-revival.test.mjs
collect-framework-preflight.test.mjs
collect-sub-agent-outputs.test.mjs
collection-command-docs.test.mjs
cost-coverage.test.mjs
dedup-recs.test.mjs
deep-dive-extract.test.mjs
deep-dive.test.mjs
display-labels.test.mjs
edge-heavy-import.test.mjs
fixtures/
real-cli-output/
contract-commitments-empty-200.txt
contract-empty-commitments.json
deep-dive/
README.md
slow_route_latency_p95.json
slow_route_perDeployment.json
slow_route_startTypeSplit.json
slow_route_statusDist.json
uncached_route_cacheBreakdown.json
metrics-bot-id-checks.json
metrics-cwv-cls-by-route.json
metrics-cwv-count-by-route.json
metrics-cwv-count.json
metrics-cwv-inp-by-route.json
metrics-cwv-lcp-by-route.json
metrics-cwv-ttfb-by-route.json
metrics-error-invalid-dimension.json
metrics-ext-api-p75.json
metrics-external-api-bytes.json
metrics-external-api-count.json
metrics-fdt-by-bot.json
metrics-fdt-by-cache.json
metrics-fdt-by-route.json
metrics-firewall-by-action.json
metrics-fn-count-by-route-http-status.json
metrics-fn-cpu-by-route.json
metrics-fn-duration-p95-by-route.json
metrics-fn-gbhr-by-route.json
metrics-fn-peak-memory-by-route.json
metrics-fn-provisioned-memory-by-route.json
metrics-fn-start-type-by-route.json
metrics-fn-ttfb-p95-by-route.json
metrics-image-by-host.json
metrics-image-count.json
metrics-image-source-bytes.json
metrics-isr-reads-by-route.json
metrics-isr-writes-by-route.json
metrics-middleware-count.json
metrics-middleware-duration-p95.json
metrics-request-count-by-route-method.json
metrics-request-count-group-by-http-status.json
metrics-request-count-group-by-route-cache.json
metrics-request-count-group-by-route.json
metrics-request-count-since-30d.json
metrics-schema.json
project-v9.json
README.md
usage-404-stderr.txt
signals.hobby.json
signals.pro-oplus.json
flags-gate.test.mjs
framework-support.test.mjs
gate-contract.test.mjs
gate-selection.test.mjs
gate.test.mjs
grade-and-verify.test.mjs
hallucination-probe.test.mjs
impact-label.test.mjs
impact-magnitude.test.mjs
infer-plan.test.mjs
investigation-brief.test.mjs
large-static-asset.test.mjs
merge-signals.test.mjs
new-gates.test.mjs
observability-events-attribution.test.mjs
observability-preflight.test.mjs
observations.test.mjs
oplus-diagnose.test.mjs
prepare-investigation-brief-cli.test.mjs
project-config-contradict.test.mjs
project-facts.test.mjs
public-release-safety.test.mjs
queries.test.mjs
reconcile-candidates-cli.test.mjs
reconcile-candidates.test.mjs
reconcile-pipeline.test.mjs
region-misconfig.test.mjs
region-pin-in-config.test.mjs
render-report.test.mjs
repo-root.test.mjs
route-errors.test.mjs
route-normalize.test.mjs
route-shape-warnings.test.mjs
sanitizers.test.mjs
scan-codebase-layouts.test.mjs
slow-route-5xx-disqualify.test.mjs
support-topics.test.mjs
sveltekit-parity.test.mjs
throttle.test.mjs
time-window.test.mjs
turbo-force-bypass.test.mjs
uncached-route-method-filter.test.mjs
unoptimized-image-ext.test.mjs
usage-spike-triage.test.mjs
use-cache-date-stamp.test.mjs
vercel-command.test.mjs
vercel-redaction.test.mjs
verify-and-regen-cli.test.mjs
voice-drift.test.mjs
workspace-resolver.test.mjs
README.md
skills/
skills.sh.json
composition-patterns/
AGENTS.md
metadata.json
README.md
rules/
_sections.md
_template.md
architecture-avoid-boolean-props.md
architecture-compound-components.md
patterns-children-over-render-props.md
patterns-explicit-variants.md
react19-no-forwardref.md
state-context-interface.md
state-decouple-implementation.md
state-lift-state.md
SKILL.md
deploy-to-vercel/
deploy-to-vercel.zip
Archive.zip
resources/
deploy-codex.sh
deploy.sh
SKILL.md
react-best-practices/
react-best-practices.zip
AGENTS.md
metadata.json
README.md
rules/
_sections.md
_template.md
advanced-effect-event-deps.md
advanced-event-handler-refs.md
advanced-init-once.md
advanced-use-latest.md
async-api-routes.md
async-cheap-condition-before-await.md
async-defer-await.md
async-dependencies.md
async-parallel.md
async-suspense-boundaries.md
bundle-analyzable-paths.md
bundle-barrel-imports.md
bundle-conditional.md
bundle-defer-third-party.md
bundle-dynamic-imports.md
bundle-preload.md
client-event-listeners.md
client-localstorage-schema.md
client-passive-event-listeners.md
client-swr-dedup.md
js-batch-dom-css.md
js-cache-function-results.md
js-cache-property-access.md
js-cache-storage.md
js-combine-iterations.md
js-early-exit.md
js-flatmap-filter.md
js-hoist-regexp.md
js-index-maps.md
js-length-check-first.md
js-min-max-loop.md
js-request-idle-callback.md
js-set-map-lookups.md
js-tosorted-immutable.md
rendering-activity.md
rendering-animate-svg-wrapper.md
rendering-conditional-render.md
rendering-content-visibility.md
rendering-hoist-jsx.md
rendering-hydration-no-flicker.md
rendering-hydration-suppress-warning.md
rendering-resource-hints.md
rendering-script-defer-async.md
rendering-svg-precision.md
rendering-usetransition-loading.md
rerender-defer-reads.md
rerender-dependencies.md
rerender-derived-state-no-effect.md
rerender-derived-state.md
rerender-functional-setstate.md
rerender-lazy-state-init.md
rerender-memo-with-default-value.md
rerender-memo.md
rerender-move-effect-to-event.md
rerender-no-inline-components.md
rerender-simple-expression-in-memo.md
rerender-split-combined-hooks.md
rerender-transitions.md
rerender-use-deferred-value.md
rerender-use-ref-transient-values.md
server-after-nonblocking.md
server-auth-actions.md
server-cache-lru.md
server-cache-react.md
server-dedup-props.md
server-hoist-static-io.md
server-no-shared-module-state.md
server-parallel-fetching.md
server-parallel-nested-fetching.md
server-serialization.md
SKILL.md
react-native-skills/
AGENTS.md
metadata.json
README.md
rules/
_sections.md
_template.md
animation-derived-value.md
animation-gesture-detector-press.md
animation-gpu-properties.md
design-system-compound-components.md
fonts-config-plugin.md
imports-design-system-folder.md
js-hoist-intl.md
list-performance-callbacks.md
list-performance-function-references.md
list-performance-images.md
list-performance-inline-objects.md
list-performance-item-expensive.md
list-performance-item-memo.md
list-performance-item-types.md
list-performance-virtualize.md
monorepo-native-deps-in-app.md
monorepo-single-dependency-versions.md
navigation-native-navigators.md
react-compiler-destructure-functions.md
react-compiler-reanimated-shared-values.md
react-state-dispatcher.md
react-state-fallback.md
react-state-minimize.md
rendering-no-falsy-and.md
rendering-text-in-text-component.md
scroll-position-no-state.md
state-ground-truth.md
ui-expo-image.md
ui-image-gallery.md
ui-measure-views.md
ui-menus.md
ui-native-modals.md
ui-pressable.md
ui-safe-area-scroll.md
ui-scrollview-content-inset.md
ui-styling.md
SKILL.md
react-view-transitions/
react-view-transitions.zip
AGENTS.md
metadata.json
README.md
references/
css-recipes.md
implementation.md
nextjs.md
patterns.md
SKILL.md
vercel-cli-with-tokens/
vercel-cli-with-tokens.zip
SKILL.md
vercel-optimize/
AGENTS.md
CONTRIBUTING.md
lib/
auth-route.mjs
budget-summary.mjs
citations.mjs
cost-coverage.mjs
dedup-recs.mjs
deep-dive.mjs
display-labels.mjs
extract-claims.mjs
framework-support.mjs
gates/
build-minutes-fanout.mjs
cold-start.mjs
contract.mjs
cwv-poor.mjs
external-api-slow.mjs
hard-gates.mjs
index.mjs
isr-overrevalidation.mjs
middleware-heavy.mjs
observability-events-attribution.mjs
platform-bot-protection.mjs
platform-fluid-compute.mjs
region-misconfig.mjs
route-errors.mjs
scanner-driven.mjs
select-candidates.mjs
slow-route.mjs
types.d.ts
uncached-route.mjs
usage-spike-triage.mjs
grade-recommendation.mjs
impact-label.mjs
impact-magnitude.mjs
investigation-brief.mjs
observation-safety.mjs
project-facts.mjs
queries.mjs
reconcile-candidates.mjs
render-report.mjs
repo-root.mjs
route-normalize.mjs
sanitizers/
bot-protection-certainty.mjs
cache-tag-invalidation-certainty.mjs
count-correct.mjs
function-duration-invocations.mjs
index.mjs
middleware-conflict.mjs
missing-citation.mjs
pre-release.mjs
rate-limit.mjs
rendering-mode-mislabel.mjs
undeclared-dep.mjs
vercel-directive-strip.mjs
window-units.mjs
scanners/
cache-components-suspense-dedupe.mjs
edge-heavy-import.mjs
force-dynamic.mjs
headers-in-page.mjs
index.mjs
large-static-asset.mjs
max-age-without-s-maxage.mjs
middleware-broad-matcher.mjs
missing-cache-headers.mjs
prisma-include-tree.mjs
region-pin-in-config.mjs
source-maps-production.mjs
sveltekit-prerender-missing.mjs
turbo-force-bypass.mjs
unoptimized-image.mjs
use-cache-date-stamp.mjs
support-topics.mjs
throttle.mjs
util.mjs
vercel.mjs
verify-claim.mjs
workspace-resolver.mjs
metadata.json
README.md
references/
candidates.md
data-collection.md
docs-library.json
doctrine.md
observability-plus.md
playbooks/
ai-application.md
api-service.md
content-site.md
ecommerce.md
... 75 moreMore Flows by @vercel-labs-2.
@vercel-labs-2VerifiedPlugin
Automation
agent-browser
Browser automation CLI for AI agents. Fast native Rust CLI.
1 skill
@vercel-labs-2VerifiedPlugin
Development
json-render
The Generative UI framework. Generate dynamic, personalized UIs from prompts without sacrificing reliability. Predefined components and actions for safe, predictable output.
26 skills
@vercel-labs-2FAQ
vercel-labs-agent-skills is a Claude Code plugin with 9 hand-picked skills for development work, indexed on Flowy. Install it with the command on its page. It includes composition-patterns, deploy-to-vercel, react-best-practices. Its skills do not fire on their own yet. Request auto-invocation to have Flowy route them as you prompt. Free and open source.
- What is vercel-labs-agent-skills?
- A collection of skills for AI coding agents. Skills are packaged instructions and scripts that extend agent capabilities. Skills follow the Agent Skills format.
- How do I install vercel-labs-agent-skills?
- Run these in Claude Code: npx -y skills add vercel-labs/claude-skills --agent claude-code. Then prompt normally.
- Does vercel-labs-agent-skills auto-invoke its skills?
- Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.
- Is vercel-labs-agent-skills free?
- Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.