Vercel Agent Skills - Setup Guide¶
Source: vercel-labs/agent-skills (29,139⭐) Category: Development / Quality Language: JavaScript
Vercel's official collection of skills for AI coding agents. Four skills covering Vercel project optimization, React/Next.js best practices (40+ rules), web design guidelines (100+ rules), and writing guidelines (80+ rules). Follows the Agent Skills format.
Installation¶
# Install all skills
npx skills add vercel-labs/agent-skills
# Or install individual skills
npx skills add vercel-labs/agent-skills --skill vercel-optimize
npx skills add vercel-labs/agent-skills --skill react-best-practices
npx skills add vercel-labs/agent-skills --skill web-design-guidelines
npx skills add vercel-labs/agent-skills --skill writing-guidelines
Prerequisites¶
| Requirement | Details |
|---|---|
| Vercel account | Required for vercel-optimize skill only |
| Vercel API token | Set as VERCEL_TOKEN env var for optimization skill |
| Hermes Agent | Any version - skills load as markdown instructions |
Key Capabilities¶
Available Skills¶
| Skill | What It Does | Use When |
|---|---|---|
| vercel-optimize | Audits Vercel project for cost, performance, caching, function usage | Reducing Vercel bills, investigating slow routes, optimizing deployments |
| react-best-practices | 40+ React/Next.js rules across 8 categories | Writing new components, code review, bundle optimization |
| web-design-guidelines | 100+ UI rules covering accessibility, performance, UX | "Review my UI", accessibility audits, design reviews |
| writing-guidelines | 80+ writing rules covering voice, structure, typography | "Review my docs", content audits, style checks |
react-best-practices Categories¶
| Category | Priority | Focus |
|---|---|---|
| Eliminating waterfalls | Critical | Data fetching patterns |
| Bundle size optimization | Critical | Tree shaking, dynamic imports |
| Server-side performance | High | Caching, streaming |
| Client-side data fetching | Medium-High | SWR, React Query patterns |
| Re-render optimization | Medium | Memoization, state placement |
| Rendering performance | Medium | Virtualization, CSS containment |
| JavaScript micro-optimizations | Low-Medium | Loop patterns, object reuse |
web-design-guidelines Categories¶
Accessibility (aria-labels, semantic HTML, keyboard handlers), Focus States, Forms, Animation (prefers-reduced-motion), Typography, Images, Performance (virtualization, layout thrashing), Navigation & State, Dark Mode & Theming, Touch & Interaction, Locale & i18n.
CorpusIQ Use Cases¶
| Use Case | How |
|---|---|
| Vercel cost optimization | Run vercel-optimize on corpusiq-docs deployment to find billing savings |
| Code review automation | Use react-best-practices when reviewing PRs for corpusiq-docs frontend |
| UI accessibility audits | Run web-design-guidelines on landing pages to catch a11y issues before launch |
| Content quality checks | Use writing-guidelines on blog posts, docs pages, and marketing copy |
| Onboarding new agents | Install all skills to give new Hermes agents production-grade development instincts |
Troubleshooting¶
| Issue | Fix |
|---|---|
| vercel-optimize fails | Ensure VERCEL_TOKEN env var is set with team scope |
| Skill not found | Verify install: npx skills list - should show vercel-labs/agent-skills |
| Rules conflict with project conventions | Skills are advisory - override specific rules in project config |
Verification¶
# Verify skill installed
npx skills list | grep vercel-labs
# Verify Vercel token (for optimize skill)
npx vercel whoami
# Quick test - check web design guidelines load
ls $(npx skills list --json 2>/dev/null | python3 -c "import json,sys; d=json.load(sys.stdin); print([s['path'] for s in d if 'web-design' in s.get('name','')][0])" 2>/dev/null)
← Skills Catalog | Discovery Page → Powered by CorpusIQ
Integration with CorpusIQ¶
CorpusIQ is the connector layer that lets AI assistants read the systems a business already runs on - accounting, payments, CRM, email, files and analytics - and answer with the source named. It is read-only by design: it retrieves data and never writes to, or acts in, a connected system, which is what makes it safe to point at live accounts.
This page is part of the CorpusIQ directory, the reference we maintain for the MCP server and agent-skill ecosystem. Run alongside CorpusIQ, a third-party server like this one can be combined with a company's own business data in a single answer.