DOCSEARCHbyAlgolia
Submit Docs

Agent Skills

repository·main·Indexed 12 days ago

https://github.com/vercel-labs/agent-skills

A collection of packaged instructions and scripts to extend AI coding agents. Includes specialized skills for Vercel optimization (vercel-optimize), React and Next.js best practices (react-best-practices), web design audits (web-design-guidelines), documentation reviews (writing-guidelines), React View Transitions, and claimable Vercel deployments (vercel-deploy-claimable).

Tokens
139.2K
Snippets
306
Records
508
Agent score
98%

What's inside Agent Skills

  1. Overview of React Composition Patterns

    main

    The composition-patterns skill provides a structured set of React patterns designed to help developers build scalable component architectures. The primary goal is to avoid 'boolean prop proliferation' (adding many boolean props to a single component to handle different behaviors) by utilizing techniques like compound components, lifting state, and composing internals.

    Core Principles

    • Composition over configuration: Instead of adding more props to a component to handle every edge case, allow consumers to compose the component using subcomponents.
    • Lift your state: Move state into provider components rather than trapping it inside individual UI components.
    • Compose your internals: Design subcomponents so they can access shared context directly instead of relying on prop drilling.
    • Explicit variants: Avoid generic components with boolean flags (e.g., isThread). Instead, create specific, named components like ThreadComposer or EditComposer.

  2. Overview of the vercel-optimize skill

    main

    The vercel-optimize skill is designed to perform observability-first Vercel optimization audits. It focuses on reducing costs and improving performance for deployed projects (primarily Next.js, SvelteKit, and Nuxt).

    Core Workflow Principles:

    • Metrics First: Recommendations must be driven by Vercel production signals (metrics, usage, config) rather than simple code searches.
    • Deterministic Gating: Investigations are only triggered when scripts/gate-investigations.mjs identifies a specific candidate (route, file, or setting).
    • Candidate-Bound Scope: The agent only reads files explicitly identified by a candidate or its local import chain.
    • Version-Awareness: All citations must use references/docs-library.json to ensure they are version-compatible.
    • Strict Documentation: Recommendations should be grounded in verified files and follow the project's voice guidelines.
    name: vercel-optimize
description: "Use for Vercel cost and performance optimization on deployed projects..."
metadata:
  version: "1.2.0"

  3. Overview of React View Transitions Skill coverage

    main

    This skill provides an agent with the necessary knowledge to implement smooth, native-feeling animations using the React View Transition API. It covers:

    • <ViewTransition> component: Managing animation triggers (enter, exit, update, share), placement rules, and View Transition Classes.
    • addTransitionType: Tagging transitions for directional or context-specific animations.
    • Shared element transitions: Morphing elements across different views.
    • View Transition Events: Using imperative JavaScript animations via the Web Animations API.
    • CSS pseudo-elements: Styling ::view-transition-old, ::view-transition-new, and ::view-transition-group.
    • Next.js integration: Configuring experimental.viewTransition, using the transitionTypes prop on next/link, and implementing App Router patterns.
    • Accessibility: Handling prefers-reduced-motion.
    • CSS Recipes: Ready-to-use animations for fade, slide, scale, and directional navigation.

  4. Overview of Vercel React Best Practices Skill

    main
    The vercel-react-best-practices skill provides a comprehensive set of 70 performance optimization guidelines for React and Next.js applications. It is designed to be used during code writing, reviewing, or refactoring to ensure optimal performance patterns. The rules are categorized into 8 priority levels, ranging from CRITICAL (Eliminating Waterfalls and Bundle Size) to LOW (Advanced Patterns).

  5. Overview of vercel-react-native-skills

    main
    The vercel-react-native-skills skill provides a comprehensive set of best practices for building performant React Native and Expo applications. It is designed to be triggered when tasks involve React Native, Expo, mobile performance, or native platform APIs. It covers critical areas such as list performance, animations, navigation, UI patterns, and monorepo structuring.

  6. Overview of React Native Guidelines

    main
    The react-native-skills repository provides a structured set of best practices for React Native development, specifically optimized for use by AI agents and LLMs. It categorizes rules by impact level (CRITICAL to LOW) and functional area (e.g., Core Rendering, List Performance, Animation) to ensure high-performance and stable mobile applications.

  7. Capabilities and output of vercel-optimize

    main

    The vercel-optimize skill provides data-driven recommendations to improve cost and performance.

    Key Features

    • Ranked Recommendations: Suggestions are prioritized based on observed Vercel metrics.
    • Contextual Evidence: Provides specific route and file references when code changes are justified by data.
    • Actionable Code: Delivers "before/after" code snippets for implementation.
    • Verified Citations: Uses a curated, version-aware allow-list of documentation to ensure accuracy.
    • Reporting: Produces a concise final summary along with a comprehensive Markdown report.

    Supported Metrics & Signals

    • Functions: Invocations, duration, TTFB, cold starts, CPU, memory, and GB-hours.
    • Traffic & Networking: Request volume, cache hit rate, HTTP status, method distribution, and Fast Data Transfer/bot patterns.
    • Storage & Caching: ISR reads/writes/re-validation, and external API latency/volume.
    • Infrastructure: Routing Middleware volume/duration, Build Minutes, and usage spikes by billing service.
    • Web Vitals & Assets: Core Web Vitals (from Speed Insights) and Image Optimization usage.
    • Configuration: Bot Protection/BotID, Fluid Compute signals, and Region pinning mismatches.

  8. Understand the React Native Skill sections and impact levels

    main

    The react-native-skills package organizes its rules into specific sections, each categorized by an impact level and a unique section ID (used as a filename prefix). When using these skills, you can expect rules to be grouped into the following categories:

    Section NameIDImpactDescription
    Core RenderingrenderingCRITICALFundamental rendering rules; violations cause crashes or broken UI.
    List Performancelist-performanceHIGHOptimizing FlatList, LegendList, or FlashList for smooth scrolling.
    AnimationanimationHIGHGPU-accelerated animations and Reanimated patterns.
    Scroll PerformancescrollHIGHTracking scroll position without causing render thrashing.
    NavigationnavigationHIGHUsing native navigators for stack and tab navigation.
    React Statereact-stateMEDIUMManaging state to avoid stale closures and unnecessary re-renders.
    State ArchitecturestateMEDIUMPrinciples for state variables and derived values.
    React Compilerreact-compilerMEDIUMCompatibility with React Compiler, React Native, and Reanimated.
    User InterfaceuiMEDIUMNative UI patterns for images, menus, modals, and styling.
    Design Systemdesign-systemMEDIUMArchitecture for maintainable component libraries.
    MonorepomonorepoLOWDependency management and native module configuration.
    Third-Party DependenciesimportsLOWWrapping and re-exporting dependencies.
    JavaScriptjsLOWMicro-optimizations like hoisting expensive object creation.
    FontsfontsLOWNative font loading for performance.

  9. Use the vercel-composition-patterns skill

    main

    The vercel-composition-patterns skill provides guidelines for building flexible, maintainable React components. It is designed to help developers and AI agents avoid 'boolean prop proliferation' and instead use scalable patterns like compound components, render props, and context providers.

    Use this skill when:

    • Refactoring components that have too many boolean props.
    • Building reusable component libraries.
    • Designing flexible component APIs.
    • Reviewing component architecture.
    • Working with compound components or context providers.

  10. What is in scope for vercel-optimize

    main

    The vercel-optimize skill is strictly bounded to runtime cost and performance optimization for Vercel-hosted projects.

    In Scope

    • Optimizing routes based on observed traffic, latency (p95), and cache hit rates.
    • Reducing runtime costs associated with specific SKUs (e.g., bot traffic via WAF).
    • Addressing build-time issues that directly impact billing (e.g., build-minutes-fanout).

    Out of Scope

    • Deployment Artifact Size: Unless it directly impacts runtime performance (LCP, INP) or cost (cold starts).
    • General Build Issues: Slow builds that do not impact billing or runtime.
    • Security: RCE, credential rotation, or general security hygiene (unless it's a cost lever like Bot protection).
    • Commercial/Billing Trivia: Contract negotiations or seat reconciliation.

  11. Overview of Scanner Patterns in vercel-optimize

    main

    The vercel-optimize tool uses AST (Abstract Syntax Tree) and grep-style scanners to identify known anti-patterns in your codebase. These scanners run in parallel with metric-driven investigations.

    Important Note on Findings: Findings on cold-path or unmappable files are typically dropped by the system. A scanner will only report findings on these files if it explicitly declares trafficIndependent: true in its metadata.

  12. When not to recommend fixing 'use cache' date-stamps

    main

    Do not suggest replacing dynamic date/random values in 'use cache' contexts if:

    1. The date/value is inside a React hook like useEffect, useCallback, or useMemo (which are client-side and do not affect the server-side cache key in the same way).
    2. The 'use cache' string is only present as a comment and not used as a directive.
    3. The dynamic date/value is explicitly intended to serve as the cache key (i.e., you want the cache to invalidate based on that value).