diff --git a/.claude/skills/figma-to-feature/SKILL.md b/.claude/skills/figma-to-feature/SKILL.md deleted file mode 100644 index dd48c8dd..00000000 --- a/.claude/skills/figma-to-feature/SKILL.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -name: figma-to-feature -description: وقتی کاربر یک لینک figma.com/design با node-id می‌دهد، صفحه را تحلیل - کن، نیازهای فرانت‌اند و بک‌اند را استخراج کن و پس از تأیید پیاده‌سازی کن. ---- - -## بخش ۰ — زبان (قبل از هر کاری) -- ورودی من فارسی است. منظور را استخراج کن، نه ترجمه‌ی لغوی. -- متن را به یک normalized English spec تبدیل کن با فیلدهای: - Goal / Scope (in-out) / Constraints / Acceptance criteria / Ambiguities -- اصطلاحات فینگلیش (کامپوننت، اندپوینت، باتن) اصطلاح فنی‌اند، ترجمه نکن. -- اسم متغیر، مسیر فایل، اسم کامپوننت و هر چیز داخل بک‌تیک را عیناً حفظ کن. -- spec انگلیسی + خلاصه‌ی برداشتت به فارسی را نشانم بده و منتظر تأیید بمان. - اگر Ambiguities خالی نبود، سؤال‌ها را بپرس. بدون تأیید، کد ننویس. -- خروجی: کد/کامنت/داکیومنت/کامیت انگلیسی. گفت‌وگو با من فارسی. - رشته‌های UI فارسی و از فایل i18n پروژه — هاردکد ممنوع. - -## بخش ۱ — استخراج از فیگما -- fileKey و node-id را از URL دربیاور. -- get_design_context → ساختار و لِی‌اوت -- get_variable_defs → رنگ/اسپیسینگ/تایپوگرافی -- get_screenshot → مرجع تطبیق بصری -- download_assets → آیکون و تصاویر -- توکن‌های فیگما را با mapping.md به متغیرهای واقعی پروژه نگاشت کن. - -## بخش ۲ — تحلیل و تأیید (قبل از کدنویسی) - -**هر صفحه‌ای که می‌رسد، اول هر دو لایه را کامل audit کن — بک‌اند و فرانت‌اند — قبل از هر کدی.** - -### گام ۲.۱ — audit بک‌اند -- کل `src//Controller/` و مدل‌ها را بگرد. -- برای هر نیاز داده‌ی صفحه مشخص کن: کدام اندپوینت/مدل **از قبل هست**؟ کدام **ادیت/توسعه** می‌خواهد؟ کدام **جدید** لازم است؟ - -### گام ۲.۲ — audit فرانت‌اند -- `assets/admin/components/ui/`، `pages/`، `hooks/`، `stores/`، `types/` را بگرد. -- برای هر المان صفحه مشخص کن: کدام کامپوننت/hook/type **موجود** است و reuse می‌شود؟ کدام **ادیت** می‌شود؟ کدام **جدید** ساخته می‌شود؟ - -### گام ۲.۳ — جدول جمع‌بندی -یک جدول بده: | مورد | فرانت/بک | **موجود / ادیت / جدید** | مسیر فایل | دلیل | -- بخش Frontend: کامپوننت‌ها، state، فرم، ولیدیشن، روت -- بخش Backend: مدل، اندپوینت (متد+مسیر+payload+response)، auth، مایگریشن -- بخش مبهم‌ها: هر چیزی که از دیزاین معلوم نیست (empty state، خطا، لودینگ) - -### گام ۲.۴ — نوشتن TODO (الزامی) -- بعد از جدول، یک TODO مرحله‌به‌مرحله بنویس (با ابزار TodoWrite). -- ترتیب: اول بک‌اند (مدل → مایگریشن → اندپوینت → تست بک)، بعد فرانت (type → hook/fetch → کامپوننت → روت → تست فرانت)، آخر تطبیق بصری. -- هر آیتم TODO دقیقاً به یک ردیف جدول وصل باشد. آیتم بدون مسیر فایل ممنوع. - -**منتظر تأیید من بمان. بدون تأیید جدول + TODO، کد ننویس.** - -## بخش ۳ — پیاده‌سازی (مرحله‌به‌مرحله طبق TODO) -- دقیقاً از روی TODO پیش برو؛ آیتم‌ها را یکی‌یکی `in_progress` → `completed` کن. چند آیتم را با هم نپَر. -- طبق مسیرها و قراردادهای CLAUDE.md. -- بعد از هر آیتم بک‌اند، تست همان بخش را اجرا کن؛ سبز نشد، جلو نرو. -- در آخر: خروجی را با اسکرین‌شات فیگما مقایسه کن و اختلاف‌ها را اصلاح کن. -- تست‌ها را اجرا کن و خروجی سبز را نشان بده. تا کل TODO سبز نشود، تسک تمام نیست. - -## قواعد الزامی — بدون استثنا - -### ۱. SOLID -- SRP: هر کامپوننت/کلاس یک مسئولیت. کامپوننتی که هم fetch می‌کند هم رندر می‌کند - باید به hook/service + کامپوننت presentational شکسته شود. -- OCP: رفتار جدید با prop/strategy، نه if/else تو در تو در کد موجود. -- LSP: هر پیاده‌سازی جایگزین قرارداد اینترفیس را کامل رعایت کند. -- ISP: props و اینترفیس بزرگ ممنوع؛ به قراردادهای کوچک بشکن. -- DIP: UI و لایه‌ی بیزنس مستقیم به axios/fetch/ORM وابسته نشوند. -اگر SOLID با ساختار فعلی تضاد داشت، توقف کن و بپرس؛ خودسرانه بازنویسی نکن. - -### ۲. API جدید — آخرین گزینه -1. کل لایه‌ی routes/controllers را بگرد. -2. اگر اندپوینتی با یک پارامتر یا فیلد اضافه کافی است → همان را - backward-compatible توسعه بده. -3. فقط اگر هیچ اندپوینتی نبود، جدید بساز. -در جدول تحلیل برای هر نیاز بنویس: «موجود X» / «توسعه‌ی X» / «جدید — چون این‌ها -را بررسی کردم و کافی نبودند: [...]». بدون این توجیه، اندپوینت جدید نساز. - -### ۳. مستندسازی — دقیق و مختصر -- هر تابع/کامپوننت عمومی: بلاک کوتاه (چه می‌کند، ورودی، خروجی، خطاها). -- هر اندپوینت: متد، مسیر، payload، response، کدهای خطا — در همان فرمت - مستندات فعلی پروژه. -- کامنت بدیهی ممنوع. «چرا» را بنویس، نه «چه». - -### ۴. تست — بدون تست کار تمام نیست -- منطق بیزنس/سرویس/هوک: unit test با حالت موفق + خطا + مرزی. -- اندپوینت جدید یا توسعه‌یافته: integration test. -- کامپوننت تعاملی: تست رندر + تست تعامل. -- از فریم‌ورک تست موجود پروژه استفاده کن. -- تست‌ها را اجرا کن و خروجی سبز را نشان بده. diff --git a/.claude/skills/figma-to-feature/mapping.md b/.claude/skills/figma-to-feature/mapping.md deleted file mode 100644 index 35578a82..00000000 --- a/.claude/skills/figma-to-feature/mapping.md +++ /dev/null @@ -1,140 +0,0 @@ -# Figma → Project token mapping - -نگاشت توکن‌های خروجی `get_variable_defs` فیگما به متغیرهای واقعی این پروژه. -**منبع حقیقت:** `assets/admin/styles.css` (بلاک `:root`). هرگز hex هاردکد نکن — همیشه `var(--token)`. - ---- - -## Colors — brand - -| نقش فیگما (نمونه نام‌ها) | متغیر پروژه | مقدار | -|---|---|---| -| Primary / Brand / Indigo 500 | `--primary` | `#5559CE` | -| Primary hover / 600 | `--primary-600` | `#494CB3` | -| Primary pressed / 700 | `--primary-700` | `#3E41A0` | -| Primary tint / subtle bg | `--primary-soft` | `#ecedfb` | -| Primary tint 2 | `--primary-soft2` | `#d9dbf6` | -| On-primary / text on brand | `--on-primary` | `#ffffff` | -| Accent / Orange (CTA ثانویه، آواتار) | `--accent` | `#f0682a` | -| Accent hover | `--accent-600` | `#db5a1f` | -| Accent tint | `--accent-bg` | `#fdeee4` | - -## Colors — surface / text / border - -| نقش فیگما | متغیر پروژه | مقدار | -|---|---|---| -| Page background | `--bg` | `#fafafa` | -| Alt background | `--bg-2` | `#f2f2f5` | -| Card / surface | `--surface` | `#ffffff` | -| Surface raised 2 | `--surface-2` | `#f6f8fc` | -| Surface raised 3 | `--surface-3` | `#eef2f8` | -| Border default | `--border` | `#e4e9f1` | -| Border strong | `--border-2` | `#d6dde8` | -| Text primary | `--text` | `#0f1b2e` | -| Text secondary | `--text-2` | `#56657c` | -| Text muted / placeholder | `--text-3` | `#8a98ad` | -| Focus ring | `--ring` | `rgba(85,89,206,.32)` | - -## Colors — status - -| نقش | fg | bg | -|---|---|---| -| Success | `--success` `#15a35a` | `--success-bg` `#e6f6ed` | -| Warning | `--warning` `#d98a09` | `--warning-bg` `#fcf2df` | -| Danger / Error | `--danger` `#e0394a` | `--danger-bg` `#fdebed` | -| Info | `--info` `#2b86d8` | `--info-bg` `#e7f1fb` | -| Violet | `--violet` `#7c5cf0` | `--violet-bg` `#efeafe` | - -## Colors — dashboard stat cards - -| رنگ | bg | fg | -|---|---|---| -| Amber | `--stat-amber-bg` | `--stat-amber-fg` `#FFC051` | -| Violet | `--stat-violet-bg` | `--stat-violet-fg` `#5559CE` | -| Green | `--stat-green-bg` | `--stat-green-fg` `#009D79` | -| Pink | `--stat-pink-bg` | `--stat-pink-fg` `#F17732` | - ---- - -## Typography - -| فیگما | پروژه | -|---|---| -| Font family (fa + latin) | `--font-sans` = `"Vazirmatn", ui-sans-serif, system-ui, sans-serif` | -| منبع فونت | `@fontsource/vazirmatn/{300,400,500,600,700,800}.css` (در `styles.css`) | - -اوزان موجود: 300 / 400 / 500 / 600 / 700 / 800. اندازه/line-height فیگما → کلاس‌های Tailwind (`text-sm`, `text-lg`, …). - -## Radius - -| فیگما | پروژه | مقدار | -|---|---|---| -| xs (chip داخلی) | `--r-xs` | `7px` | -| sm (badge, input کوچک) | `--r-sm` | `8px` | -| md (input, button, card عادی) | `--r` | `14px` | -| lg (card بزرگ) | `--r-lg` | `18px` | -| xl (modal) | `--r-xl` | `24px` | -| full (avatar, pill, toggle) | `--r-pill` | `999px` | - -## Shadow / elevation - -| فیگما | پروژه | -|---|---| -| Elevation 1 (card) | `--shadow-sm` | -| Elevation 2 (dropdown/hover) | `--shadow` | -| Elevation 3 (modal/popover) | `--shadow-lg` | - -## Spacing & layout dimensions - -| نقش | پروژه | مقدار | -|---|---|---| -| Grid gap | `--gap` | `20px` (compact: `14px`) | -| Card padding | `--card-pad` | `22px` (compact: `16px`) | -| Table row height | `--row-h` | `56px` (compact: `46px`) | -| Sidebar width | `--sidebar-w` | `243px` | -| Sidebar collapsed | `--collapsed-w` | `90px` | -| Topbar height | `--topbar-h` | `64px` | -| Motion easing | `--ease` | `cubic-bezier(.22,.61,.36,1)` | - -اسپیسینگ آزاد (margin/padding داخل اجزا) → مقیاس Tailwind (`p-4`, `gap-2`, …)؛ برای ابعاد ساختاری بالا از متغیرها استفاده کن. - -## Theming - -- Dark mode: بازتعریف متغیرها زیر `[data-theme="dark"]` در `styles.css`. رنگ خام دارک ننویس؛ همان `var(--token)` خودکار سوییچ می‌شود. -- Density: `[data-density="compact"]` مقادیر `--gap` / `--card-pad` / `--row-h` را کم می‌کند. -- RTL: کل پنل `dir="rtl"`؛ در نگاشت left/right فیگما را به start/end منطقی تبدیل کن. - ---- - -## Component mapping (فیگما → کامپوننت موجود پروژه) - -قبل از ساخت، از `assets/admin/components/ui/` reuse کن: - -| المان فیگما | کامپوننت پروژه (`assets/admin/components/ui/`) | -|---|---| -| Table / list با ستون | `DataTable.tsx` (sort، search، skeleton، empty، bulk) | -| Modal / dialog | `Modal.tsx` | -| Delete/confirm dialog | `ConfirmDialog.tsx` | -| Page title + breadcrumb + action | `PageHeader.tsx` | -| Stat / KPI card | `StatCard.tsx` | -| Status pill / badge | `StatusBadge.tsx` | -| Pagination bar | `Pagination.tsx` | -| Searchable / async select | `SearchableSelect.tsx` | -| Appointment status control | `AppointmentStatusDropdown.tsx` | -| Mobile number input | `MobileInput.tsx` | -| Price / amount input | `PriceInput.tsx` | -| Jalali date input/picker/calendar | `PersianDateInput.tsx` / `PersianDatePicker.tsx` / `PersianCalendar.tsx` | -| Overlay/portal مبنا | `Portal.tsx` | -| Feature-flag gate | `FeatureGate.tsx` | -| Captcha | `Altcha.tsx` | - -کامپوننت‌های ترکیبی فیچرمحور (نه generic) → `assets/admin/components/*.tsx`. -آیکون‌ها → `@heroicons/react/24/outline` (اول موجودها؛ فقط اگر نبود از `download_assets` فیگما). - ---- - -## قواعد نگاشت -1. هر توکن فیگما را به نزدیک‌ترین متغیر بالا map کن. اگر معادل نبود → **توقف و بپرس**، توکن جدید خودسر به `styles.css` اضافه نکن. -2. رنگ/فاصله/شعاع خام (hex/px) در کامپوننت ممنوع؛ فقط `var(--token)` یا کلاس Tailwind. -3. اختلاف جزئی رنگ فیگما با پالت پروژه → پالت پروژه برنده است (تطبیق با design system، نه عین فیگما). -4. منبع مقادیر همیشه `assets/admin/styles.css` است؛ این فایل خلاصه‌ی نگاشت است، نه منبع مستقل — هنگام تغییر `styles.css` این را هم به‌روز کن.