ContextQMD
Back to Agent Skills

Agent Skills

README.md

latest4.5 KB
Original Source

Agent Skills

A collection of skills for AI coding agents. Skills are packaged instructions and scripts that extend agent capabilities.

Skills follow the Agent Skills format.

Available Skills

react-best-practices

React and Next.js performance optimization guidelines from Vercel Engineering. Contains 40+ rules across 8 categories, prioritized by impact.

Use when:

  • Writing new React components or Next.js pages
  • Implementing data fetching (client or server-side)
  • Reviewing code for performance issues
  • Optimizing bundle size or load times

Categories covered:

  • Eliminating waterfalls (Critical)
  • Bundle size optimization (Critical)
  • Server-side performance (High)
  • Client-side data fetching (Medium-High)
  • Re-render optimization (Medium)
  • Rendering performance (Medium)
  • JavaScript micro-optimizations (Low-Medium)

web-design-guidelines

Review UI code for compliance with web interface best practices. Audits your code for 100+ rules covering accessibility, performance, and UX.

Use when:

  • "Review my UI"
  • "Check accessibility"
  • "Audit design"
  • "Review UX"
  • "Check my site against best practices"

Categories covered:

  • Accessibility (aria-labels, semantic HTML, keyboard handlers)
  • Focus States (visible focus, focus-visible patterns)
  • Forms (autocomplete, validation, error handling)
  • Animation (prefers-reduced-motion, compositor-friendly transforms)
  • Typography (curly quotes, ellipsis, tabular-nums)
  • Images (dimensions, lazy loading, alt text)
  • Performance (virtualization, layout thrashing, preconnect)
  • Navigation & State (URL reflects state, deep-linking)
  • Dark Mode & Theming (color-scheme, theme-color meta)
  • Touch & Interaction (touch-action, tap-highlight)
  • Locale & i18n (Intl.DateTimeFormat, Intl.NumberFormat)

react-native-guidelines

React Native best practices optimized for AI agents. Contains 16 rules across 7 sections covering performance, architecture, and platform-specific patterns.

Use when:

  • Building React Native or Expo apps
  • Optimizing mobile performance
  • Implementing animations or gestures
  • Working with native modules or platform APIs

Categories covered:

  • Performance (Critical) - FlashList, memoization, heavy computation
  • Layout (High) - flex patterns, safe areas, keyboard handling
  • Animation (High) - Reanimated, gesture handling
  • Images (Medium) - expo-image, caching, lazy loading
  • State Management (Medium) - Zustand patterns, React Compiler
  • Architecture (Medium) - monorepo structure, imports
  • Platform (Medium) - iOS/Android specific patterns

composition-patterns

React composition patterns that scale. Helps avoid boolean prop proliferation through compound components, state lifting, and internal composition.

Use when:

  • Refactoring components with many boolean props
  • Building reusable component libraries
  • Designing flexible APIs
  • Reviewing component architecture

Patterns covered:

  • Extracting compound components
  • Lifting state to reduce props
  • Composing internals for flexibility
  • Avoiding prop drilling

vercel-deploy-claimable

Deploy applications and websites to Vercel instantly. Designed for use with claude.ai and Claude Desktop to enable deployments directly from conversations. Deployments are "claimable" - users can transfer ownership to their own Vercel account.

Use when:

  • "Deploy my app"
  • "Deploy this to production"
  • "Push this live"
  • "Deploy and give me the link"

Features:

  • Auto-detects 40+ frameworks from package.json
  • Returns preview URL (live site) and claim URL (transfer ownership)
  • Handles static HTML projects automatically
  • Excludes node_modules and .git from uploads

How it works:

  1. Packages your project into a tarball
  2. Detects framework (Next.js, Vite, Astro, etc.)
  3. Uploads to deployment service
  4. Returns preview URL and claim URL

Output:

Deployment successful!

Preview URL: https://skill-deploy-abc123.vercel.app
Claim URL:   https://vercel.com/claim-deployment?code=...

Installation

bash
npx skills add vercel-labs/agent-skills

Usage

Skills are automatically available once installed. The agent will use them when relevant tasks are detected.

Examples:

Deploy my app

Review this React component for performance issues

Help me optimize this Next.js page

Skill Structure

Each skill contains:

  • SKILL.md - Instructions for the agent
  • scripts/ - Helper scripts for automation (optional)
  • references/ - Supporting documentation (optional)

License

MIT