Vercel Composition Patterns
React composition patterns that scale. Use when refactoring components with
Install
Quick install
npx skills add https://github.com/vercel-labs/claude-skills/tree/HEAD/skills/vercel-composition-patternsnpx skills add vercel-labs/claude-skills --skill vercel-composition-patterns --agent claude-codenpx skills add vercel-labs/claude-skills --skill vercel-composition-patterns --agent cursornpx skills add vercel-labs/claude-skills --skill vercel-composition-patterns --agent codexnpx skills add vercel-labs/claude-skills --skill vercel-composition-patterns --agent opencodenpx skills add vercel-labs/claude-skills --skill vercel-composition-patterns --agent github-copilotnpx skills add vercel-labs/claude-skills --skill vercel-composition-patterns --agent windsurfMore install options
Shorthand — useful for multi-skill repos:
npx skills add vercel-labs/claude-skills --skill vercel-composition-patternsManual — clone the repo and drop the folder into your agent's skills directory:
git clone https://github.com/vercel-labs/claude-skills.gitcp -r claude-skills/skills/vercel-composition-patterns ~/.claude/skills/vercel-composition-patterns
React composition patterns that scale. Use when refactoring components with
vercel-composition-patternsby vercel
React composition patterns that scale. Use when refactoring components withnpx skills add https://github.com/vercel-labs/claude-skills --skill vercel-composition-patternsDownload ZIPGitHub
More skills from vercel
agent-friendly-apisby vercelCompanion skill for the Agent-Friendly APIs course on Vercel Academy. Build a feedback API, make it agent-friendly with structured documentation, then create a Claude Code skill that generates the docs automatically.filesystem-agentsby vercelYou are a knowledgeable teaching assistant for the Building Filesystem Agents course on Vercel Academy. You help students build agents that navigate filesystems with bash to answer questions about structured data.add-provider-packageby vercelGuide for adding new AI provider packages to the AI SDK. Use when creating a new @ai-sdk/<provider> package to integrate an AI service into the SDK.csvby vercelAnalyze and transform CSV data using bash toolsaiby vercelPythonai module — models, agents, hooks, middleware, MCP, structured outputcron-jobsby vercelVercel Cron Jobs configuration and best practices. Use when adding, editing, or debugging scheduled tasks in vercel.json.frontend-designby vercelCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts,…vercel-react-best-practicesby vercelReact and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js…
---
Source: https://github.com/vercel-labs/claude-skills/tree/HEAD/skills/vercel-composition-patterns
Author: vercel
Discovered via: mcpservers.org
SKILL.md source
--- name: vercel-composition-patterns description: React composition patterns that scale. Use when refactoring components with --- # vercel-composition-patterns React composition patterns that scale. Use when refactoring components with # vercel-composition-patternsby vercel React composition patterns that scale. Use when refactoring components with `npx skills add https://github.com/vercel-labs/claude-skills --skill vercel-composition-patterns`Download ZIPGitHub ## More skills from vercel agent-friendly-apisby vercelCompanion skill for the Agent-Friendly APIs course on Vercel Academy. Build a feedback API, make it agent-friendly with structured documentation, then create a Claude Code skill that generates the docs automatically.filesystem-agentsby vercelYou are a knowledgeable teaching assistant for the Building Filesystem Agents course on Vercel Academy. You help students build agents that navigate filesystems with bash to answer questions about structured data.add-provider-packageby vercelGuide for adding new AI provider packages to the AI SDK. Use when creating a new @ai-sdk/<provider> package to integrate an AI service into the SDK.csvby vercelAnalyze and transform CSV data using bash toolsaiby vercelPython `ai` module — models, agents, hooks, middleware, MCP, structured outputcron-jobsby vercelVercel Cron Jobs configuration and best practices. Use when adding, editing, or debugging scheduled tasks in vercel.json.frontend-designby vercelCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts,…vercel-react-best-practicesby vercelReact and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js… --- **Source**: https://github.com/vercel-labs/claude-skills/tree/HEAD/skills/vercel-composition-patterns **Author**: vercel **Discovered via**: mcpservers.org
Related skills 6
microsoft-foundry
Deploy, evaluate, and manage Foundry agents end-to-end: Docker build, ACR push, hosted/prompt agent create, container start, batch eval, continuous eval, prompt optimizer workflows, agent.yaml, dataset curation from traces. USE FOR: deploy agent to Foundry, hosted agent, create agent, invoke agent, evaluate agent, run batch eval, continuous eval, continuous monitoring, continuous eval status, optimize prompt, improve prompt, prompt optimizer, optimize agent instructions, improve agent instruc...
azure-ai
Use for Azure AI: Search, Speech, OpenAI, Document Intelligence. Helps with search, vector/hybrid search, speech-to-text, text-to-speech, transcription, OCR. WHEN: AI Search, query search, vector search, hybrid search, semantic search, speech-to-text, text-to-speech, transcribe, OCR, convert text to speech.
azure-deploy
Execute Azure deployments for ALREADY-PREPARED applications that have existing .azure/deployment-plan.md and infrastructure files. DO NOT use this skill when the user asks to CREATE a new application — use azure-prepare instead. This skill runs azd up, azd deploy, terraform apply, and az deployment commands with built-in error recovery. Requires .azure/deployment-plan.md from azure-prepare and validated status from azure-validate. WHEN: "run azd up", "run azd deploy", "execute deployment", "p...
azure-diagnostics
Debug Azure production issues on Azure using AppLens, Azure Monitor, resource health, and safe triage. WHEN: debug production issues, troubleshoot app service, app service high CPU, app service deployment failure, troubleshoot container apps, troubleshoot functions, troubleshoot AKS, kubectl cannot connect, kube-system/CoreDNS failures, pod pending, crashloop, node not ready, upgrade failures, analyze logs, KQL, insights, image pull failures, cold start issues, health probe failures, resource...
azure-resource-lookup
List, find, and show Azure resources across subscriptions or resource groups. Handles prompts like "list the websites in my subscription", "list my web apps", "show my app services", "list virtual machines", "list my VMs", "show storage accounts", "find container apps", and "what resources do I have". USE FOR: list websites, list web apps, list app services, show websites in subscription, resource inventory, find resources by tag, tag analysis, orphaned resource discovery (not for cost analys...
azure-resource-visualizer
Analyze Azure resource groups and generate detailed Mermaid architecture diagrams showing the relationships between individual resources. WHEN: create architecture diagram, visualize Azure resources, show resource relationships, generate Mermaid diagram, analyze resource group, diagram my resources, architecture visualization, resource topology, map Azure infrastructure.