agent-skills

Agent Skills is a collection of skills for AI coding agents, packaged as instructions and scripts that extend agent capabilities. Skills follow the Agent Skills format and are automatically available once installed, with the agent invoking them when relevant tasks are detected. Included skills: - vercel-optimize: Audits a Vercel project for cost, performance, reliability, caching, function usage, and billing opportunities. It gathers Vercel metrics first, then investigates only the routes and files those metrics point to. Intended for optimizing deployed projects, reducing costs or function usage, investigating slow or expensive routes, finding caching/ISR/middleware/image/build-minute issues, and producing a ranked cost and performance report. - react-best-practices: React and Next.js performance optimization guidelines from Vercel Engineering, with 40+ rules across 8 categories prioritized by impact. Categories include eliminating waterfalls, bundle size optimization, server-side performance, client-side data fetching, re-render optimization, rendering performance, and JavaScript micro-optimizations. Useful when writing components or pages, implementing data fetching, reviewing code for performance, or optimizing bundle size and load times. - web-design-guidelines: Reviews UI code against 100+ rules covering accessibility, performance, and UX. Categories include accessibility, focus states, forms, animation, typography, images, performance, navigation and state, dark mode and theming, touch and interaction, and locale/i18n. - writing-guidelines: Reviews docs and prose against the Vercel writing handbook with 80+ rules covering planning, voice and tone, tone by content type, headings and structure, lists, code, placeholders/units/numbers, typography, source formatting, pricing and money pages, AI workflow, and review. - react-native-guidelines: React Native best practices optimized for AI agents, with 16 rules across 7 sections covering performance, layout, animation, images, state management, architecture, and platform-specific patterns. - react-view-transitions: Guidance for implementing animations with React's View Transition API, covering the ViewTransition component, addTransitionType, transition types, shared element transitions, JavaScript animations via the Web Animations API, Next.js integration including the transitionTypes prop on next/link, ready-to-use CSS animation recipes, and accessibility considerations. - composition-patterns: React composition patterns for scaling, helping avoid boolean prop proliferation through compound components, state lifting, and internal composition. - vercel-deploy-claimable: Deploys applications and websites to Vercel, designed for use with claude.ai and Claude Desktop. It auto-detects 40+ frameworks from package.json, returns a preview URL and a claim URL for transferring ownership, handles static HTML projects, and excludes node_modules and .git from uploads. Installation is done via npx skills add vercel-labs/agent-skills. Each skill contains a SKILL.md with agent instructions, optional scripts for automation, and optional references. Every change to a skill on main publishes an immutable GitHub release with an Agent Skills discovery index and one artifact per skill; the same artifacts can be built locally with a provided script. The project is licensed under MIT.