mcpField
V
vercel-skills

vercel-skills

github.com/podoDevelopment29170 installsUpdated 1d ago
Repository

About vercel-skills

vercel-skills is Vercel’s collection of skills for UI review, component architecture, and React/Next.js performance work. It includes guidance for accessible, composable components and reusable composition patterns.

Key features

  1. 01Review UI against Web Interface Guidelines
  2. 02Guide accessible component architecture
  3. 03Support composable and themeable components
  4. 04Optimize React and Next.js performance
  5. 05Establish reusable composition patterns

Use cases

  1. 01Reviewing UI code against design guidelines
  2. 02Building accessible, composable components
  3. 03Optimizing React or Next.js performance

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/podo/design-agent-skills --skill vercel-skills

After installing, type/vercel-skillsin Claude Code to confirm it loaded.

Bundled filesstub.yaml

Details

From the project README

vercel-skills

Catalogue stub — full package: vercel-labs/skills

Decision tree

Run this before using Vercel skill workflows:

  1. Is a Vercel skill already installed? Check: ~/.design-agent-skills/skills/building-components/SKILL.md exists (representative skill).

    • Yes → invoke the specific skill by name and proceed
    • No → go to step 2

  2. Do you have shell access?

    • Yes → install the specific skill below, then invoke it
    • No → show the install command; in Claude Code, send it as a chat message starting with ! — add -g for global install or omit for project-only

Install command

# Review UI code against 100+ Web Interface Guidelines
npx skills add vercel-labs/web-design-guidelines

# Build accessible, composable, themeable UI components
npx skills add vercel-labs/building-components

# React/Next.js performance optimization
npx skills add vercel-labs/react-best-practices

# React component composition and reusable patterns
npx skills add vercel-labs/composition-patterns

Note: web-design-guidelines may be a stale listing — verify install before use.

Invoke after install

  • web-design-guidelines — "web design guidelines", "UI review"
  • building-components — "build component", "accessible component", "composable API"
  • react-best-practices — "React performance", "Next.js optimization"
  • composition-patterns — "composition patterns", "reusable React patterns"

What it does

Vercel's official skill collection: enforces 100+ Web Interface Guidelines in UI code review, guides accessible and composable component architecture, optimizes React/Next.js performance, and establishes reusable component composition patterns.

Comments

Markdown supported