Skill عملی برای AI Agent
Vercel Composition Patterns
برای ساخت componentهای React و Next.js با الگوهای ترکیبپذیر و قابل نگهداری استفاده میشود.
آمادهReact Architectureمتوسطبهروزرسانی ۱۶ تیر ۱۴۰۵
1
این Skill چه کاری میکند؟
این Skill به شما کمک میکند ساختار componentهای React و Next.js را با کمک AI Agent سریعتر و دقیقتر بازطراحی کنید. کافی است componentهای فعلی، flow داده و مرز مسئولیتها را به Agent بدهید تا الگوی composition، تقسیم نقشها و refactor پیشنهادی دریافت کنید. این Skill برای تیمهایی مناسب است که میخواهند UI را تمیزتر و نگهداری را سادهتر کنند.
2
ورودی لازم
- componentهای فعلی
- مرز مسئولیتها
- flow داده
- محدودیت نگهداری
3
خروجی نهایی
- الگوی ترکیب component
- تقسیم مسئولیت
- پیشنهاد refactor
- نمونه ساختار جدید
4
مناسب کدام Agentهاست؟
Claude CodeCursorCodexGitHub CopilotGemini
5
Copy Prompt / Workflow
ساختار React را با الگوی composition بازطراحی کن. ورودی: componentهای فعلی، flow داده و مرز مسئولیتها. خروجی: ساختار ترکیبپذیر، تقسیم مسئولیت و refactor پیشنهادی.
6
آموزش استفاده مرحلهای
- componentهای درگیر را مشخص کن.
- از Skill بخواه مرز مسئولیت هر بخش را بنویسد.
- الگوی composition را به ساختار قابل پیادهسازی تبدیل کن.
- قبل از merge، رفتار فعلی را دوباره تست کن.
7
مثال واقعی
برای یک dashboard شلوغ، این Skill میتواند بخشهای data fetching، presentation و state را از هم جدا کند.
8
خطاهای رایج
- composition را با پیچیدهسازی اشتباه میگیری.
- state را بیدلیل در componentهای سطح پایین پخش میکنی.
- بعد از refactor، تست رفتار قبلی را فراموش میکنی.
9
منبع و نصب Skill
منبع اصلی و تأییدشده در skills.sh
npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-composition-patterns
10