Vercel Skills
Curated Vercel developer toolkit packaged as a Claude Code plugin.
Included Skills
This plugin contains four high-quality skills from Vercel Labs repositories:
1. React Best Practices (react-best-practices)
Comprehensive React and Next.js optimization guidelines covering:
- Component architecture and patterns
- Performance optimization strategies
- State management best practices
- Server/client component usage
- API route design
- 40+ specific rules and recommendations
Trigger phrases: "optimize React component", "React best practices", "improve Next.js performance"
2. Web Design Guidelines (web-design-guidelines)
Extensive web design and UX rules focusing on:
- Accessibility (WCAG compliance)
- Performance optimization
- User experience patterns
- Responsive design principles
- Form design and validation
- 100+ specific guidelines
Trigger phrases: "improve accessibility", "web design best practices", "UX guidelines"
3. Vercel Deploy (vercel-deploy-claimable)
Deploy applications to Vercel directly from conversations:
- Project creation and deployment
- Environment variable configuration
- Domain setup
- Deployment status tracking
Trigger phrases: "deploy to Vercel", "create Vercel project", "set up Vercel deployment"
4. Browser Automation (agent-browser)
Headless browser automation for testing and data extraction:
- Navigate pages and capture structure via accessibility tree
- Fill forms, click elements, and automate interactions
- Extract page content, attributes, and element state
- Save/load browser sessions for authentication workflows
- Screenshot capture, PDF generation, and video recording
- Network monitoring and console message tracking
Trigger phrases: "test the website", "automate browser", "fill out form automatically", "scrape web page"
Installation
Add Marketplace
/plugin marketplace add pwarnock/pwarnock-cc-plugins
Install Plugin
/plugin install vercel-skills@pwarnock-cc-plugins
Usage
Once installed, the skills are automatically available in your Claude Code sessions. Claude will invoke them based on context and trigger phrases.
Example Workflows
Optimize a React component:
You: This React component is rendering slowly. Can you help optimize it?
Claude: [Triggers react-best-practices skill and applies optimization guidelines]
Audit accessibility:
You: Review this page for accessibility issues
Claude: [Triggers web-design-guidelines skill and checks WCAG compliance]
Deploy to Vercel:
You: Deploy this Next.js app to Vercel
Claude: [Triggers vercel-deploy-claimable skill and guides through deployment]
Automate browser testing:
You: Test the login flow on the staging site
Claude: [Triggers agent-browser skill and automates form filling, submission, and verification]
Updating Skills
The skills are included as git submodules pointing to upstream Vercel repositories. To update to the latest version:
cd ~/.claude/plugins/vercel-skills
git submodule update --remote skills browser-automation
Structure
vercel-skills/
├── .claude-plugin/
│ └── plugin.json # Plugin manifest
├── skills/ # Git submodule → vercel-labs/agent-skills
│ ├── react-best-practices/
│ ├── web-design-guidelines/
│ └── vercel-deploy-claimable/
├── browser-automation/ # Git submodule → vercel-labs/agent-browser
│ └── skills/
│ └── agent-browser/
├── commands/
│ └── sync-skills.md # Command to update skills
└── README.md # This file
Credits
Skills are curated from Vercel Labs repositories:
All credit goes to the Vercel team and contributors.
License
MIT License - See LICENSE file for details.
Skills are subject to their original licenses in the upstream repository.
pwarnock
