这是一套给AI编程助手用的技能包,里面包含两个主要技能。第一个是vercel optimize,它能自动审计你的Vercel项目,先收集指标数据,再针对性地检查有问题的路由和文件,帮你找出成本、性能、缓存、计费等方面的优化点,最后生成一份按优先级排序的报告。第二个是react best practices,它整理了Vercel工程团队总结的40多条React和Next.js性能优化规则,覆盖8个类别,按影响程度排序。安装方式就是按照Agent Skills格式把这些技能配置到你的AI编码工具里。适用场景包括优化已上线的Vercel项目、降低费用、排查慢路由、检查缓存或中间件问题,以及写新React组件或实现数据获取时参考最佳实践。
查看英文原文
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 lin