پلاگین Claude Code

نصب پلاگین Claude Code پرتو — دستیار هوشمند برای کدنویسی RTL-first با کامپوننت‌های پرتو

پلاگین Claude Code پرتو، هوش مصنوعی Claude را با دانش کامل دیزاین سیستم مجهز می‌کند. به‌جای اینکه هر بار نام کامپوننت‌ها، قوانین RTL، یا سیستم رنگ را توضیح دهید، Claude این‌ها را از قبل می‌داند و کد صحیح تولید می‌کند.

قابلیت‌ها

قابلیت	توضیح
دانش خودکار	Claude بدون توضیح اضافه، کامپوننت درست را انتخاب می‌کند
RTL-first	هیچ‌گاه `ml-4` به‌جای `ms-4` تولید نمی‌شود
رنگ سمانتیک	`text-light` نه `text-gray-500` — به‌صورت خودکار
دستورات `/parto:`	ابزارهای آماده برای کارهای رایج
هشدار فوری	بلافاصله پس از نوشتن کد اشتباه، هشدار نمایش داده می‌شود

نصب

مرحله ۱ — دریافت پلاگین

ریپوی پرتو را clone کنید. فقط یک بار لازم است، هر جایی روی دیسک:

git clone https://github.com/dadenegarco/parto-ui.git ~/parto-ui

پلاگین در مسیر ~/parto-ui/claude-plugin/ قرار دارد.

مرحله ۲ — فعال‌سازی در پروژه

در ریشه پروژه Next.js خود، فایل .claude/settings.json را بسازید:

{
  "plugins": ["/Users/your-username/parto-ui/claude-plugin"]
}

مسیر را با مسیر واقعی روی دیسک خود جایگزین کنید. چند مثال:

// macOS / Linux
{ "plugins": ["/Users/ali/parto-ui/claude-plugin"] }

// Windows
{ "plugins": ["C:/Users/ali/parto-ui/claude-plugin"] }

نکته: مسیر باید کامل و مطلق باشد — مسیر نسبی مثل ./parto-ui کار نمی‌کند.

مرحله ۳ — تأیید نصب

Claude Code را ری‌استارت کنید، سپس این پیام را بفرستید:

کدام کامپوننت پرتو برای نمایش نرخ تعامل استفاده کنم؟

اگر Claude پاسخ دقیقی درباره EngagementRate و category prop داد، پلاگین فعال است.

آپدیت

چون پلاگین داخل همان ریپوست، با یک دستور به آخرین نسخه می‌رسید:

cd ~/parto-ui && git pull

هر بار که دیزاین سیستم کامپوننت جدیدی اضافه می‌کند، پلاگین هم به‌روز می‌شود.

نصب سراسری (همه پروژه‌ها)

برای فعال‌سازی در تمام پروژه‌ها بدون تنظیم جداگانه، به فایل ~/.claude/settings.json اضافه کنید:

{
  "plugins": ["/Users/your-username/parto-ui/claude-plugin"]
}

دستورات آماده

`/parto:setup` — راه‌اندازی خودکار پروژه

پروژه را اسکن و تمام تنظیمات لازم را اعمال می‌کند:

/parto:setup

این دستور به‌صورت خودکار:

transpilePackages را به next.config.mjs اضافه می‌کند
مسیر پرتو را به tailwind.config.ts اضافه می‌کند
lang="fa" dir="rtl" و ThemeProvider را به layout.tsx اضافه می‌کند
import '@parto-system-design/ui/styles.css' را اضافه می‌کند

`/parto:component` — کد آماده کامپوننت

/parto:component ProfileCard
/parto:component جدول با قابلیت سرچ برای لیست اینفلوئنسرها

کد کامل TypeScript با محتوای فارسی واقعی و تمام props تولید می‌کند.

`/parto:review` — بررسی کد

/parto:review
/parto:review app/components/dashboard.tsx

کد را بررسی می‌کند و دقیقاً خط‌هایی که مشکل دارند را با راه‌حل نمایش می‌دهد. سپس می‌پرسد «الان رفع کنم؟»

`/parto:page` — scaffold صفحه کامل

/parto:page dashboard
/parto:page list
/parto:page form
/parto:page detail

یک صفحه Next.js کامل با کامپوننت‌های پرتو، داده نمونه فارسی، و حالت‌های loading/empty تولید می‌کند.

هشدار خودکار

پس از هر بار نوشتن فایل .tsx یا .jsx، پلاگین بدون استفاده از توکن اضافه بررسی می‌کند. نمونه هشدار:

⚠️  پرتو: ۳ نقض در dashboard.tsx

🔴 RTL (۲ مورد):
   خط ۱۲: ml-4 (باید ms-4 باشد)
   خط ۱۸: pr-6 (باید pe-6 باشد)

🟡 رنگ hardcode (۱ مورد):
   خط ۴۵: text-gray-500 (باید text-light باشد)

💡 برای رفع کامل: /parto:review

تنظیمات اختیاری پروژه

برای شخصی‌سازی رفتار پلاگین، فایل .claude/parto.local.md در ریشه پروژه بسازید:

## تنظیمات پرتو

- **نسخه پکیج**: 2.1.0
- **تم پیش‌فرض**: dark
- **پلتفرم‌های فعال**: instagram, telegram, youtube
- **نوع پروژه**: dashboard

این فایل را در .gitignore اضافه کنید — اطلاعات خصوصی هر توسعه‌دهنده است.

صفحات مرتبط

نصب و راه‌اندازی — نصب پکیج npm در Next.js
فارسی‌محور بودن — قوانین RTL که پلاگین اعمال می‌کند
رنگ‌ها — سیستم رنگ سمانتیک که پلاگین آموزش می‌دهد