Skill عملی برای AI Agent
Vercel React Best Practices
برای بررسی و بهینهسازی کد React و Next.js با قوانین کاربردی Vercel استفاده میشود.
آمادهReact / Next.jsپیشرفتهبهروزرسانی ۱۶ تیر ۱۴۰۵
1
این Skill چه کاری میکند؟
این Skill به شما کمک میکند کدهای React و Next.js را با کمک AI Agent از نظر performance، ساختار componentها و best practiceهای Vercel بررسی و بهینه کنید. کافی است بخش موردنظر از کد، مشکل فعلی یا هدف بهینهسازی را به Agent بدهید تا پیشنهادهای عملی، اولویتبندیشده و قابل اجرا دریافت کنید. این Skill برای توسعهدهندگانی مناسب است که میخواهند قبل از refactor یا deploy، کیفیت کد فرانتاند را دقیقتر بررسی کنند.
2
ورودی لازم
- repo یا snippet کد
- route یا component مشکلدار
- نشانههای performance
- محدودیت پروژه
3
خروجی نهایی
- فهرست اولویت بهبود
- اشاره به bottleneckها
- workflow اجرایی
- معیار تست بعد از تغییر
4
مناسب کدام Agentهاست؟
Claude CodeCursorCodexGitHub CopilotWindsurfGemini
5
Copy Prompt / Workflow
کد React و Next.js را مثل reviewer فنی بررسی کن. ورودی: repo، route، نشانههای performance و محدودیت پروژه. خروجی: اولویت مشکلها، پیشنهادهای کمریسک و معیار تست.
6
آموزش استفاده مرحلهای
- route یا component هدف را مشخص کن.
- نشانههای مشکل را کوتاه توضیح بده.
- از Skill بخواه مشکل را به اولویتهای اجرایی تبدیل کند.
- بعد از تغییر، همان معیارها را دوباره اندازه بگیر.
7
مثال واقعی
در یک صفحه Next.js با client componentهای زیاد، این Skill میتواند boundaryها، rerenderهای اضافه و اولویت اصلاح را مشخص کند.
8
خطاهای رایج
- همه ruleها را همزمان اجرا میکنی و scope را از دست میدهی.
- اول سراغ بهبودهای کماثر میروی و bottleneck اصلی میماند.
- بعد از تغییر، دوباره measure نمیکنی.
9
منبع و نصب Skill
منبع اصلی و تأییدشده در skills.sh
npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-best-practices
10