ستة عشر أمرًا مخصّصًا (slash commands) لمن يبني بـ Svelte أو SvelteKit داخل Claude Code. كل أمر ملف Markdown يضع Claude في دور محدد، كمطوّر Svelte أو مختص اختبارات أو خبير Storybook، ويعطيه خطوات مرقّمة ومثال طلب لمهمة واحدة.
الأوامر في ثلاث مجموعات
بناء التطبيق وصيانته
- svelte-component: يجمع متطلبات المكوّن: الخصائص (props) والأحداث وslots وتفضيلك لـ TypeScript، ثم يكتبه مع ملف اختبار له.
- svelte-scaffold: ينشئ مشروع SvelteKit عبر npx sv create، أو هيكل وحدة كتسجيل الدخول ولوحة الإدارة.
- svelte-migrate: ينقل المشروع من Svelte 3 إلى 4 ومن 4 إلى 5، ومن SvelteKit 1 إلى 2، ويستبدل stores بـ runes.
- svelte-debug: يقرأ رسالة الخطأ وتتبّع الاستدعاءات، ويفحص svelte.config.js ودوال load وتعارضات العرض بين الخادم والمتصفح.
- svelte-a11y: يراجع إمكانية الوصول وفق WCAG 2.1: لوحة المفاتيح وسمات ARIA وتباين الألوان وتسميات الحقول.
الاختبارات
- svelte-test-setup: يجهّز Vitest وTesting Library لاختبار المكوّنات، وPlaywright للاختبارات الشاملة (E2E).
- svelte-test-fix: يعالج الاختبارات الفاشلة والمتقلّبة: يحلّ مشكلات التوقيت بـ tick وflushSync، ويثبّت المحددات بسمات data-testid.
- svelte-test-coverage: يرتّب الأجزاء غير المختبرة بحسب خطورتها، فيقدّم تسجيل الدخول والدفع على المحتوى الثابت.
Storybook
- svelte-storybook-setup: يثبّت Storybook بإطاره الخاص بـ SvelteKit، ويكتب ملفي main.js وpreview.js.
- svelte-storybook-story: يكتب stories بصيغة Svelte CSF لحالات المكوّن: التحميل والخطأ والفراغ والنص الطويل.
- svelte-storybook-mock: يحاكي وحدات SvelteKit للصفحة والتنقل والنماذج، ويذكر أن متغيرات البيئة الخاصة بالخادم غير مدعومة.
- svelte-storybook-troubleshoot: يعالج أخطاء البناء والوحدات، ومنها خطأ esbuild الذي يظهر بعد الترقية من الإصدار 6 إلى 7.
والأربعة الباقية: svelte-test لكتابة الاختبارات، وsvelte-optimize لتصغير ملفات البناء (bundle) والتحميل الكسول، وsvelte-storybook-migrate للانتقال إلى Svelte CSF 5، وsvelte-storybook للأسئلة العامة عن Storybook.
مثال من ملف svelte-migrate
يضرب الملف مثالًا بطلب «Migrate my Svelte 4 app to Svelte 5 with runes». وبحسب تعليماته يحلل Claude الكود ويضع خطة، ثم يشغّل npx sv migrate svelte-5، ويحوّل التعليمات التفاعلية القديمة إلى runes، ويحدّث ملفات الاختبار، ويختم بخطة للتراجع. وأول خطوة يذكرها نسخة احتياطية، فابدأ من فرع Git مستقل.
التثبيت والاستدعاء
- فك ضغط الملف في مجلد ثابت، ثم شغّل من مجلد مشروعك
claude --plugin-dir "PATH/TO/EXTRACTED/plugin"بمسار فك الضغط الفعلي. - استدعِ الأمر باسم الإضافة، مثل
/commands-framework-svelte:svelte-test، واكتب بعده طلبك، كاسم المكوّن أو نص الخطأ. - للاستخدام الدائم انسخ ملفات plugin/commands إلى .claude/commands في مشروعك، أو إلى ~/.claude/commands لكل مشروعاتك، فتستدعيها بأسمائها المختصرة.
أرفقتُ دليلًا عربيًا بخطوات التشغيل، وفهرسًا بمسار كل أمر.
قبل أول أمر
- يلزمك Claude Code مسجَّل الدخول، وتُحسب تكلفة النموذج على حسابك، وNode.js لأوامر npx وnpm.
- يسمح سطر allowed-tools في svelte-storybook-migrate بأوامر npm والكتابة في الملفات، وفي svelte-test-coverage بأوامر gh، فاحفظ عملك في Git قبل استدعائهما.
- بعض الأمثلة كُتبت لإصدارات أقدم: svelte-test-fix يقرأ داخليات المكوّن بطريقة Svelte 4، وأمرا ترحيل Storybook وإصلاح أعطاله مبنيان على الانتقال من الإصدار 6 إلى 7، فقارن ما يقترحه Claude بالتوثيق الرسمي.
- الأوامر مصممة لـ Claude Code؛ في claude.ai أو Codex يمكنك لصق نص الأمر مع طلبك، لكنني لم أجهّز لهما طريقة تثبيت.
- الملفات بالإنجليزية كما كتبها أصحابها، ووصفتُ تعليماتها هنا بالعربية.
كتب الأوامر مجتمع BuildWithClaude في مستودع buildwithclaude لـ davepoon، بترخيص MIT المرفق نصه في مجلد licenses.
