{
  "markdown": "# Agent Skills\n\nA collection of skills for AI coding agents. Skills are packaged instructions and scripts that extend agent capabilities.\n\nSkills follow the [Agent Skills](https://agentskills.io/) format.\n\n[![skills.sh](https://skills.sh/b/vercel-labs/agent-skills)](https://skills.sh/vercel-labs/agent-skills)\n\n## Available Skills\n\n### vercel-optimize\n\nAudits a Vercel project for cost, performance, reliability, caching, function usage, and billing opportunities. It collects Vercel metrics first, then investigates only the routes and files those metrics point to.\n\n**Use when:**\n\n- Optimizing a deployed Vercel project\n- Reducing Vercel costs or function usage\n- Investigating slow or expensive routes\n- Finding caching, ISR, middleware, image, or build-minute issues\n- Producing a ranked cost and performance report\n\n### react-best-practices\n\nReact and Next.js performance optimization guidelines from Vercel Engineering. Contains 40+ rules across 8 categories, prioritized by impact.\n\n**Use when:**\n\n- Writing new React components or Next.js pages\n- Implementing data fetching (client or server-side)\n- Reviewing code for performance issues\n- Optimizing bundle size or load times\n\n**Categories covered:**\n\n- Eliminating waterfalls (Critical)\n- Bundle size optimization (Critical)\n- Server-side performance (High)\n- Client-side data fetching (Medium-High)\n- Re-render optimization (Medium)\n- Rendering performance (Medium)\n- JavaScript micro-optimizations (Low-Medium)\n\n### web-design-guidelines\n\nReview UI code for compliance with web interface best practices. Audits your code for 100+ rules covering accessibility, performance, and UX.\n\n**Use when:**\n\n- \"Review my UI\"\n- \"Check accessibility\"\n- \"Audit design\"\n- \"Review UX\"\n- \"Check my site against best practices\"\n\n**Categories covered:**\n\n- Accessibility (aria-labels, semantic HTML, keyboard handlers)\n- Focus States (visible focus, focus-visible patterns)\n- Forms (autocomplete, validation, error handling)\n- Animation (prefers-reduced-motion, compositor-friendly transforms)\n- Typography (curly quotes, ellipsis, tabular-nums)\n- Images (dimensions, lazy loading, alt text)\n- Performance (virtualization, layout thrashing, preconnect)\n- Navigation & State (URL reflects state, deep-linking)\n- Dark Mode & Theming (color-scheme, theme-color meta)\n- Touch & Interaction (touch-action, tap-highlight)\n- Locale & i18n (Intl.DateTimeFormat, Intl.NumberFormat)\n\n### writing-guidelines\n\nReview docs and prose for compliance with the Vercel writing handbook. Audits your pages for 80+ rules covering voice, structure, content types, code samples, typography, and AI workflow.\n\n**Use when:**\n\n- \"Review my docs\"\n- \"Check writing style\"\n- \"Audit prose\"\n- \"Review docs voice and tone\"\n- \"Check this page against the writing handbook\"\n\n**Categories covered:**\n\n- Planning (content plan, content type, user-shaped titles)\n- Voice & tone (active voice, direct address, banned words like `easy`/`simple`/`quick`)\n- Tone by content type (tutorial, how-to, reference, conceptual, troubleshooting)\n- Headings & structure (sentence case, descriptive subheadings, TL;DR opens)\n- Lists (when to use, bold/description format)\n- Code (language tags, TypeScript first, `<Steps/>`, 80-col / 25-line limits)\n- Placeholders, units, & numbers (`snake_case` text, count-up numbers, `64 KB`/`200 ms`)\n- Typography (no em dashes as punctuation, curly quotes, ellipsis character, non-breaking spaces)\n- Source formatting (no hard-wrap, no `---` rules, blank line discipline)\n- Pricing & money pages (tables, uncompromising detail)\n- AI workflow (accountability, enterprise models, plan first, disclose AI use)\n- Review (PR description discipline, author accountability)\n\n### react-native-guidelines\n\nReact Native best practices optimized for AI agents. Contains 16 rules across 7 sections covering performance, architecture, and platform-specific patterns.\n\n**Use when:**\n\n- Building React Native or Expo apps\n- Optimizing mobile performance\n- Implementing animations or gestures\n- Working with native modules or platform APIs\n\n**Categories covered:**\n\n- Performance (Critical) - FlashList, memoization, heavy computation\n- Layout (High) - flex patterns, safe areas, keyboard handling\n- Animation (High) - Reanimated, gesture handling\n- Images (Medium) - expo-image, caching, lazy loading\n- State Management (Medium) - Zustand patterns, React Compiler\n- Architecture (Medium) - monorepo structure, imports\n- Platform (Medium) - iOS/Android specific patterns\n\n### react-view-transitions\n\nImplement smooth, native-feeling animations using React's View Transition API. Covers the `<ViewTransition>` component, `addTransitionType`, transition types, and Next.js integration including the `transitionTypes` prop on `next/link`.\n\n**Use when:**\n\n- Adding page transitions or route animations\n- Animating enter/exit of components\n- Creating shared element transitions (list-to-detail morphing)\n- Implementing directional (forward/back) navigation animations\n- Integrating view transitions in Next.js App Router\n- Animating list reorder or Suspense fallback reveals\n\n**Topics covered:**\n\n- `<ViewTransition>` component (enter, exit, update, share triggers)\n- `addTransitionType` for directional/context-specific animations\n- View Transition Classes and CSS pseudo-elements\n- Shared element transitions with the `name` prop\n- JavaScript animations via Web Animations API\n- Next.js `transitionTypes` prop on `next/link`\n- Ready-to-use CSS animation recipes (fade, slide, scale, flip)\n- Accessibility (`prefers-reduced-motion`)\n\n### composition-patterns\n\nReact composition patterns that scale. Helps avoid boolean prop proliferation through compound components, state lifting, and internal composition.\n\n**Use when:**\n\n- Refactoring components with many boolean props\n- Building reusable component libraries\n- Designing flexible APIs\n- Reviewing component architecture\n\n**Patterns covered:**\n\n- Extracting compound components\n- Lifting state to reduce props\n- Composing internals for flexibility\n- Avoiding prop drilling\n\n### vercel-deploy-claimable\n\nDeploy 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.\n\n**Use when:**\n\n- \"Deploy my app\"\n- \"Deploy this to production\"\n- \"Push this live\"\n- \"Deploy and give me the link\"\n\n**Features:**\n\n- Auto-detects 40+ frameworks from `package.json`\n- Returns preview URL (live site) and claim URL (transfer ownership)\n- Handles static HTML projects automatically\n- Excludes `node_modules` and `.git` from uploads\n\n**How it works:**\n\n1. Packages your project into a tarball\n2. Detects framework (Next.js, Vite, Astro, etc.)\n3. Uploads to deployment service\n4. Returns preview URL and claim URL\n\n**Output:**\n\n```\nDeployment successful!\n\nPreview URL: https://skill-deploy-abc123.vercel.app\nClaim URL:   https://vercel.com/claim-deployment?code=...\n```\n\n## Installation\n\n```bash\nnpx skills add vercel-labs/agent-skills\n```\n\n## Usage\n\nSkills are automatically available once installed. The agent will use them when relevant tasks are detected.\n\n**Examples:**\n\n```\nDeploy my app\n```\n\n```\nReview this React component for performance issues\n```\n\n```\nHelp me optimize this Next.js page\n```\n\n## Discovery index\n\nEvery change to a skill on `main` publishes an immutable GitHub release with\nan Agent Skills discovery index and one artifact per skill. Build the same\nartifacts locally with:\n\n```bash\nnpm ci --ignore-scripts\nnode scripts/build-discovery-index.mjs https://example.com/skills\n```\n\n## Skill Structure\n\nEach skill contains:\n\n- `SKILL.md` - Instructions for the agent\n- `scripts/` - Helper scripts for automation (optional)\n- `references/` - Supporting documentation (optional)\n\n## License\n\nMIT\n",
  "bytes": 7838,
  "sha": "7c02f64b08fc6c4eef03c01d64f3e2ed478193ccfcbd14edba379abe23304651",
  "repo_slug": "vercel-labs/agent-skills",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/skl_vercel_labs_agent_skills_deploy_to_verce_6e2d1973/readme"
}