Vercel Agent Skills
React, Next.js, and deployment best practices from Vercel Engineering
What You Can Do
Access Vercel's official collection of agent skills for building and deploying modern web applications. Optimize React component architecture using composition patterns to avoid boolean prop proliferation and build scalable component libraries. Deploy applications to Vercel with flexible workflows supporting git integration, CLI authentication, and multiple fallback methods. Apply React and Next.js performance guidelines from Vercel Engineering to write efficient code and improve Core Web Vitals.
Features
Master compound components, context providers, and render props to build flexible, maintainable component libraries without boolean prop proliferation
Complete deployment workflow supporting git-based pushes, CLI authentication, team management, and no-auth fallback methods for any environment
Performance optimization guidelines and React 19 API patterns from Vercel Engineering for writing efficient, modern React code
Framework-specific techniques for image optimization, code splitting, server-side rendering, and dynamic imports to maximize performance
Decision frameworks for scaling components, managing state with providers, designing reusable APIs, and managing implementation details
Automatic preview and production deployments triggered by git pushes, with team project linking and deployment status tracking
Comprehensive solutions for authentication failures, network errors, sandbox constraints, and environment-specific deployment issues
Example Output
Deploy a Next.js app to Vercel
git add . && git commit -m "feat: add new features" && git push origin main
Vercel automatically builds and deploys your application to production. Feature branches get preview deployments for collaborative testing before merging.
Refactor a component with boolean props
Refactor this Button component with isLoading, isDisabled, isIcon, and isBold props into a compound component
The system identifies prop-drilling patterns and restructures the component using compound components with context, eliminating boolean prop proliferation and improving reusability.
Optimize React component performance
Analyze this React component and recommend performance optimizations
The system identifies rendering bottlenecks, recommends memoization strategies, and suggests code-splitting opportunities to improve Core Web Vitals and user experience.
What's Included
- Composition Pattern Guidelines: Detailed rules and code examples for compound components, state management patterns, and context-based component APIs
- Deploy Workflow Decision Trees: Step-by-step workflows for every deployment scenario including linked projects, git integration, CLI authentication, and fallback methods
- Performance Best Practices: React and Next.js optimization techniques, React 19 API patterns, and framework-specific guidelines from Vercel Engineering
- Deployment Troubleshooting: Solutions for network errors, authentication failures, sandbox constraints, build problems, and environment-specific issues
- Architecture Decision Guides: Frameworks for evaluating component design choices, state management strategies, and application scalability patterns
Who It's For
- React and Next.js Developers
- Frontend Engineers
- Full-Stack Developers
- Technical Leads and Architects
- DevOps and Platform Engineers
Best For
- Component Architecture Refactoring
- Performance Optimization and Audits
- Deployment Automation
- Code Reviews and Quality Assurance
- Team Technical Knowledge Transfer
You might also like
Design and build animations using a proven decision sequence covering when to animate, which tools to use (CSS, WAAPI, Motion.dev), property selection, easing curves, and accessibility. Review existing animations and audit codebases for quality issues. Understand and name motion effects using a comprehensive vocabulary glossary. Learn from Emil Kowalski's opinionated motion design philosophy built on decades of interface engineering experience.
Tackle specialized engineering problems with expert Claude skills spanning CI/CD automation, infrastructure security, open source governance, browser scripting, and documentation workflows. Get authoritative answers to GitHub Actions, Linux hardening, and project sustainability questions grounded in official docs and best practices. Automate routine tasks like userscript development, README localization, and configuration management across diverse technical domains.
Help users discover specialized agent skills by searching the open skills ecosystem when they ask 'how do I do X' or want to extend capabilities. Verify skill quality based on install counts and source reputation, then install skills directly for users. The skill guides users through understanding their needs, finding the best matches, and enabling immediate access to new agent capabilities.
This comprehensive collection includes 79 dedicated agent skills for all major Azure services and operations. You can automate Azure resource deployment and management, query infrastructure and logs with natural language using Kusto Graph and IRQL, analyze security events and detect threats, configure identity and access management through Entra ID, monitor application performance with Application Insights, manage storage and messaging services, execute cloud migration workflows, validate compliance policies, and query Azure resources by metadata or properties.
Elevate your interface design from strategy to pixel-perfect execution. Shape layouts and user flows before coding, critique designs against established heuristics, audit for accessibility and performance gaps, and polish for production. Enhance with purposeful animation, strategic color, harmonious spacing, and delightful moments. Includes comprehensive guidance for websites, dashboards, apps, components, forms, onboarding, and design systems across web and native platforms.
by pbakausDiscover Reddit threads where people are genuinely shopping for what you sell, then draft replies that sound like a helpful community member (not an ad). The skill runs two moves: discovery scans target subreddits for recommendation asks, expressed pain, and competitor mentions, ranking threads by signal, product fit, and timing; drafting writes experience-based replies that respect community norms, disclose your affiliation honestly, and only mention your product when it truly answers the question.
Automate Chrome/Chromium browser interactions using compact accessibility-tree snapshots that use 200-400 tokens instead of raw HTML. Navigate pages, click elements, fill forms, extract data, and take screenshots. Run on local Chrome or AWS Bedrock AgentCore cloud browsers with persistent profiles. Supports parallel sessions, MCP integration, and eve agent embedding.
Access 29 production-ready Claude agent skills that wrap RunComfy's AI models for image generation, video creation, audio synthesis, and avatar videos. Skills include music generation (ACE Step with inpaint/outpaint), AI avatars and lip-sync (OmniHuman, Seedance, HappyHorse), image editing (inpainting, outpainting, face-swap, relight), video generation and extension, and upscaling. All skills are CLI-driven via the runcomfy command, with built-in schema validation, error handling, and examples for each model.