Skill عملی برای AI Agent
Shadcn
برای استفاده بهتر از shadcn/ui و ساخت رابطهای مدرن با Agent استفاده میشود.
آمادهUI Componentsمتوسطبهروزرسانی ۱۶ تیر ۱۴۰۵
1
این Skill چه کاری میکند؟
این Skill به شما کمک میکند کامپوننتهای shadcn/ui را با کمک AI Agent سریعتر و دقیقتر به کار بگیرید. کافی است component هدف، نیاز طراحی و state را به Agent بدهید تا پیشنهاد کامپوننت، ساختار props و نکات composition دریافت کنید. این Skill برای تیمهایی مناسب است که میخواهند UI مدرن را سریع و تمیز بسازند.
2
ورودی لازم
- component هدف
- نیاز طراحی
- state یا فرم
- محدودیت استایل
3
خروجی نهایی
- پیشنهاد component
- ساختار props
- نکات composition
- گامهای پیادهسازی
4
مناسب کدام Agentهاست؟
Claude CodeCursorCodexGitHub CopilotWindsurf
5
Copy Prompt / Workflow
component را با shadcn/ui به شکل درست بساز. ورودی: component هدف، نیاز طراحی و state. خروجی: پیشنهاد component، props مهم و نکات composition.
6
آموزش استفاده مرحلهای
- نوع component را مشخص کن.
- از Skill بخواه قطعات shadcn مناسب را پیشنهاد کند.
- props و state لازم را بنویس.
- قبل از نهایی کردن، accessibility را بررسی کن.
7
مثال واقعی
برای یک modal تنظیمات، این Skill میتواند از dialog، button و form shadcn مسیر پیادهسازی واضحی بدهد.
8
خطاهای رایج
- از shadcn فقط بهعنوان کپی component استفاده میکنی.
- props و state را از اول مشخص نمیکنی.
- دسترسپذیری و keyboard flow را جا میاندازی.
9
منبع و نصب Skill
منبع اصلی و تأییدشده در skills.sh
npx skills add https://github.com/shadcn/ui --skill shadcn
10