AI 코딩 에이전트를 위한 기술 모음입니다. 기술은 에이전트의 기능을 확장하는 패키지된 지침과 스크립트입니다.

기술은 에이전트 기술 형식을 따릅니다.

사용 가능한 기술

베르셀-최적화

Vercel 프로젝트의 비용, 성능, 신뢰성, 캐싱, 기능 사용, 청구 기회 등을 감사합니다. 먼저 Vercel 지표를 수집한 후, 해당 지표가 가리키는 경로와 파일만 조사합니다.

언제 사용하세요:

• 배포된 Vercel 프로젝트 최적화
• Vercel 비용 또는 기능 사용량 감소
• 느리거나 비용이 많이 드는 노선 조사
• 캐싱, ISR, 미들웨어, 이미지 또는 빌드 미닛 문제 찾기
• 순위가 매겨진 비용 및 성과 보고서 작성

반응-모범 사례

Vercel Engineering의 React 및 Next.js 성능 최적화 가이드라인. 8개 카테고리에 걸쳐 40+ 규칙을 포함하며, 영향력에 따라 우선순위가 정해져 있습니다.

언제 사용하세요:

• 새로운 React 컴포넌트 작성 또는 Next.js 페이지 작성
• 데이터 가져오기 구현 (클라이언트 또는 서버 측)
• 성능 문제에 대한 코드 검토
• 번들 크기 또는 로딩 시간 최적화

다루는 카테고리:

• 폭포 제거 (중요)
• 번들 크기 최적화(중요)
• 서버 측 성능 (높음)

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

vercel-optimize

Audits 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.

Use when:

• Optimizing a deployed Vercel project
• Reducing Vercel costs or function usage
• Investigating slow or expensive routes
• Finding caching, ISR, middleware, image, or build-minute issues
• Producing a ranked cost and performance report

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)

writing-guidelines

Review 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.

Use when:

• “Review my docs”
• “Check writing style”
• “Audit prose”
• “Review docs voice and tone”
• “Check this page against the writing handbook”

Categories covered:

• Planning (content plan, content type, user-shaped titles)
• Voice & tone (active voice, direct address, banned words like easy/simple/quick)