# AI use cases for Agent Skills (vercel-labs/agent-skills) Repo: [vercel-labs/agent-skills](https://github.com/vercel-labs/agent-skills) | Use cases: 3 | Page: https://dedupedai.com/use-cases/vercel-labs-agent-skills/ Vercel's official collection of Agent Skills: packaged instructions and scripts that extend coding agents. It includes vercel-optimize for auditing a Vercel project's cost and performance, react-best-practices with 40+ React and Next.js performance rules, web-design-guidelines with 100+ accessibility, performance and UX rules, writing-guidelines for docs, composition-patterns for React, and vercel-deploy-claimable for instant claimable deployments. This file holds every use case of this repo. Each one starts with a "## " heading and ends with its URL. - Audit React and Next.js code against Vercel's performance rules: https://dedupedai.com/use-cases/vercel-labs-agent-skills/audit-react-and-nextjs-performance/ - Cut your Vercel bill with a metrics-first audit: https://dedupedai.com/use-cases/vercel-labs-agent-skills/cut-vercel-costs-with-vercel-optimize/ - Check your UI against 100+ accessibility and UX rules: https://dedupedai.com/use-cases/vercel-labs-agent-skills/review-ui-for-accessibility-and-ux/ ## How to audit React and Next.js code against Vercel's performance rules with Agent Skills Repo: [vercel-labs/agent-skills](https://github.com/vercel-labs/agent-skills) | Difficulty: Beginner | Time: 30 minutes | Basis: From the README Install the skills and ask your agent to review components for waterfalls, bundle size and re-renders. **Who it is for:** A Next.js developer whose pages feel slow and who wants a prioritized fix list. **The problem:** Performance problems like request waterfalls and oversized bundles are easy to miss in review. **The outcome:** A review of your components against 40+ rules prioritized by impact, with fixes for the critical ones. ### Steps 1. Run `npx skills add vercel-labs/agent-skills` 2. Open your Next.js project in your agent 3. Ask it to review a component or page for performance issues 4. Fix critical findings first: eliminating waterfalls and bundle size 5. Re-check re-render and rendering performance after the fixes ### Prompt to paste into your agent ```text Using the react-best-practices skill from vercel-labs/agent-skills, review for performance issues, rank findings by the skill's impact categories, and fix the critical ones. ``` ### Caveat Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/vercel-labs-agent-skills/audit-react-and-nextjs-performance/ ## How to cut your Vercel bill with a metrics-first audit with Agent Skills Repo: [vercel-labs/agent-skills](https://github.com/vercel-labs/agent-skills) | Difficulty: Intermediate | Time: 45 minutes | Basis: From the README Have the agent collect Vercel metrics, then investigate only the routes and files they point to. **Who it is for:** A founder or engineer surprised by Vercel function usage or build minutes. **The problem:** Guessing at cost problems wastes time on routes that do not matter. **The outcome:** A ranked cost and performance report covering caching, ISR, middleware, images and function usage. ### Steps 1. Install the skills with npx skills add 2. Ask your agent to optimize your deployed Vercel project 3. Let vercel-optimize collect metrics first 4. Review the investigation of the routes and files the metrics point to 5. Apply the top items from the ranked report ### Prompt to paste into your agent ```text Run the vercel-optimize skill from vercel-labs/agent-skills on this project, collect metrics first, and give me a ranked report of cost and performance fixes with estimated impact before changing any code. ``` ### Caveat Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/vercel-labs-agent-skills/cut-vercel-costs-with-vercel-optimize/ ## How to check your UI against 100+ accessibility and UX rules with Agent Skills Repo: [vercel-labs/agent-skills](https://github.com/vercel-labs/agent-skills) | Difficulty: Beginner | Time: 30 minutes | Basis: From the README Use web-design-guidelines to audit UI code for accessibility, focus states, forms and more. **Who it is for:** A frontend developer shipping a new page who wants an accessibility pass before launch. **The problem:** Accessibility and UX details like focus states, labels and reduced motion slip through review. **The outcome:** A list of rule violations by category (accessibility, focus states, forms, animation and more) with fixes. ### Steps 1. Install the skills with npx skills add 2. Ask your agent to review your UI or check accessibility 3. Read the findings grouped by category 4. Fix aria-labels, focus-visible patterns and form autocomplete issues first 5. Re-run the review until it is clean ### Prompt to paste into your agent ```text Use the web-design-guidelines skill from vercel-labs/agent-skills to audit for accessibility and UX, group findings by category, and fix every accessibility issue. ``` ### Caveat Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/vercel-labs-agent-skills/review-ui-for-accessibility-and-ux/