فهرست مطالب ۸ بخش
ساعت سه بعدازظهر است و مشتری فرم ثبت‌نامی می‌خواهد که کد ملی، موبایل، تاریخ تولد شمسی، شماره کارت و شبا بگیرد. اگر از دستیار بخواهید همه را از صفر بنویسد، ممکن است برایتان یک تابع بلند برای تقویم شمسی در shadcn/ui و یک چکسام کد ملی دست‌ساز بیاورد که در حالت‌های مرزی می‌لنگد. مهارت «shadcn فارسی» جلوی همین را می‌گیرد: دستیار کامپوننت آماده برمی‌دارد و فرم را با آن می‌چیند.
تقویم شمسی در shadcn/ui را از کجا بگیریم؟
shadcn/ui به‌طور پیش‌فرض تقویم میلادی دارد، و ساختن یک تقویم شمسی درست با ماه‌ها و روزهای هفته‌ی فارسی کار کمی نیست. مهارت این کار را به کتابخانه‌ی PersianLabs/ui می‌سپارد: دستیار تقویم و انتخابگر تاریخ شمسی را کنار بقیه‌ی ورودی‌های ایرانی از آنجا می‌گیرد، با همان ظاهر shadcn.
اگر تقویم تنها ورودی فرم‌تان نیست، این راه به‌صرفه‌تر است، چون کد ملی، کارت و استان و شهر هم از همان مجموعه می‌آیند و سبک‌شان یکدست می‌ماند.
دستیار با این مهارت چه فرقی میکند؟
بدون مهارت، دستیار از حافظه‌اش می‌نویسد. با مهارت، به قول سازنده، مستندات، کد منبع و صدها نمونه‌ی آماده کنار دستش است و لازم نیست چیزی را از اینترنت پیدا کند.
- نصب کامپوننت: به‌جای نوشتن، دستور
npx shadcn@latest add @persianlabsui/<name>را اجرا میکند و اگر نشد، از کد آفلاین مخزن کپی میکند. - قواعد طراحی: مهارت قواعد طراحی shadcn و راهنمای تم، فونت و راست‌به‌چپ را هم دارد؛ پس RTL در shadcn دیگر از حدس دستیار نمی‌آید.
- توابع آماده: اعتبارسنجی کد ملی، تبدیل ارقام و یکدست کردن «ی» و «ک» از پیش نوشته شده‌اند.
کد ملی، کارت و شبا را چطور اعتبارسنجی کنیم؟
فهرست مهارت برای این کار کامپوننت ورودی کد ملی، کارت بانکی و شبا دارد. توابعش هم کد ملی را اعتبارسنجی میکنند و از روی شماره‌ی کارت و شبا بانک را تشخیص می‌دهند. اعتبارسنجی چکسام فقط می‌گوید عدد شکل درست دارد، نه اینکه حساب واقعاً وجود دارد؛ بررسی سمت سرور را حذف نکنید.
بقیه‌ی فهرست هم چیزهایی است که هر فرم ایرانی دیر یا زود لازم دارد: موبایل، پلاک خودرو، انتخاب استان و شهر، نقشه‌ی ایران و ورودی مبلغ با حروف. برای کار با تاریخ در پایگاه داده و گزارش‌ها مهارت تاریخ شمسی در کد مکمل خوبی است، و درباره‌ی دقت مدل‌ها در تاریخ و کد ملی این آزمایش را بخوانید.
چه پرامپت‌هایی را بدهم؟
بعد از نصب، همین‌ها را بدهید و ببینید دستیار چه می‌سازد:
- «یک فرم ثبت‌نام فارسی با Next.js بساز که کد ملی، شماره موبایل و تاریخ تولد شمسی بگیرد.»
- «برای صفحه پرداخت، ورودی شماره کارت و شبا با تشخیص نام بانک اضافه کن.»
- «یک انتخابگر استان و شهر ایران به این فرم React اضافه کن.»
- «تقویم میلادی این فرم را با تقویم و انتخابگر تاریخ شمسی عوض کن.»
جواب دستیار چه شکلی است؟
کد آماده‌ی نمونه‌ای نمی‌آوریم، چون خروجی را از اجرای واقعی نگرفته‌ایم. شکل کار این است: دستیار اول کامپوننت‌های لازم را با npx به پروژه اضافه میکند، بعد فایل فرم را می‌سازد یا تغییر میدهد و هر ورودی را به کامپوننت آماده‌اش وصل میکند. آخر هم می‌گوید چه فایل‌هایی اضافه یا عوض شده. چون پروژه‌ی شما تغییر میکند، کار را روی یک شاخه‌ی جدا بخواهید و تفاوت‌ها را قبل از ادامه بخوانید.
در سه قدم چطور نصبش کنم؟
- صفحه‌ی مهارت shadcn فارسی را باز کنید و دستور نصب را بردارید.
- دستور
git clone https://github.com/Abulfadl-Ahmadi/shadcn-persian.git ~/.claude/skills/shadcn-persianرا اجرا کنید. نتیجه: مهارت برای Claude Code آماده است. - در پروژه‌ی shadcn/ui یکی از پرامپت‌های بالا را بدهید.
این دستور مهارت را برای همه‌ی پروژه‌ها نصب میکند. برای نصب فقط در پروژه‌ی فعلی، مقصد را .claude/skills/shadcn-persian بگذارید. برای Cursor و Windsurf راهنمای مخزن پوشه‌ی .agents/skills/shadcn-persian را پیشنهاد میکند.
چه وقت این مهارت به کارم نمی‌آید؟
- پروژه‌تان shadcn/ui ندارد. این مهارت فقط برای پروژههایی است که از آن استفاده میکنند. برای قواعد عمومی راست‌به‌چپ سراغ رابط کاربری راست‌به‌چپ و طراحی راست‌به‌چپ بروید.
- کتابخانه‌ی دیگری می‌خواهید. وایبفارسی با React و Tailwind کار میکند؛ معرفی آن و صفحه‌ی سرور را ببینید. فرق مهارت و سرور MCP را اینجا توضیح داده‌ایم.
- اعتماد. مهارت را یک عضو جامعه ساخته (مجوز MIT) و ما رفتار تک‌تک کامپوننتها را اجرا نکرده‌ایم. با چند شماره‌ی واقعی امتحان کنید و روی شاخه‌ی جدا کار کنید.
اگر فرم بعدی‌تان فارسی است، از صفحه‌ی «دریافت مهارت» شروع کنید و پرامپت اول را امتحان کنید. اگر سرورهای MCP هم می‌خواهید، با «اتصال دستیار» به دستیارتان وصلشان کنید.
سؤال‌های پرتکرار
چطور تقویم شمسی را در shadcn/ui اضافه کنیم؟
مهارت shadcn فارسی را نصب کنید و از دستیار بخواهید تقویم و انتخابگر تاریخ شمسی را اضافه کند. دستیار کامپوننت آماده را از PersianLabs/ui با دستور shadcn نصب میکند و اگر نشد، از کد آفلاین مخزن کپی میکند. قبل از استفاده در پروژه‌ی واقعی، خروجی را با چند تاریخ خودتان امتحان کنید.
اعتبارسنجی کد ملی در React را چطور بنویسیم؟
کد ملی چکسام دارد و نوشتنش با دست راحت اشتباه میشود. این مهارت یک تابع اعتبارسنجی کد ملی و یک کامپوننت ورودی کد ملی دارد. مهارت را نصب کنید و از دستیار فرمی با کد ملی بخواهید. بررسی سمت سرور را هم نگه دارید.
تشخیص نام بانک از شماره کارت یا شبا چطور انجام میشود؟
طبق توضیح مهارت، توابع آن بانک را از روی شماره کارت و شبا تشخیص می‌دهند و ورودی کارت و شبا هم جداگانه در بسته هست. نتیجه برای نمایش به کاربر است. ما رفتار دقیق آن را اجرا نکرده‌ایم، پس با چند شماره‌ی واقعی خودتان امتحانش کنید.
فرق این مهارت با وایبفارسی چیست؟
وایبفارسی یک سرور MCP برای پروژههای React و Tailwind است که قواعد طراحی و کد کامپوننتها را به دستیار میدهد. این مهارت مخصوص پروژههایی است که از shadcn/ui استفاده میکنند و کد و مستندات را همراه خود در مخزن دارد.
برای استفاده از کامپوننتها باید چیزی نصب شود یا اینترنت لازم است؟
مهارت را یک بار با git clone نصب میکنید. طبق توضیح سازنده، مستندات و کد منبع داخل مخزن است و دستیار برای ساخت رابط به جستوجوی اینترنت نیاز ندارد. نصب کامپوننت با npx انجام میشود و اگر نشد، دستیار از کد آفلاین مخزن استفاده میکند.
