● مجتمع
secondsky
⚡ فوري
claude-skills
بواسطة secondsky · secondsky/claude-skills
مهارات Claude Code جاهزة للإنتاج لـ Cloudflare و React و Tailwind v4 والتكاملات الذكية — حزمة full-stack حديثة.
مجموعة مركزة من المهارات لمكدس Cloudflare + React + Tailwind v4 + AI. تركيزها على ما يُطلق فعلاً في 2026: Workers و D1 و R2 و Pages على Cloudflare؛ React 19 + Tailwind v4 على الواجهة الأمامية؛ أنماط تكامل ذكية محايدة تجاه موفري الخدمات.
لماذا تستخدمه
الميزات الأساسية
- توليد كود Cloudflare Workers / D1 / R2 / Pages
- أنماط React 19 (مكونات الخادم حيث ينطبق)
- إعدادات Tailwind v4 + رموز التصميم
- محولات التكامل الذكي (متعددة موفري الخدمات)
- جاهزة للإنتاج — وليست رسومات تعليمية
عرض مباشر
كيف يبدو في الممارسة
claude-skill-5.replay
▶ جاهز
حالات الاستخدام
استخدامات عملية: claude-skills
متى تستخدمه: تريد Workers + Pages + D1 متصلة دون قراءة 5 وثائق Cloudflare.
الخطوات
-
توليد الكود
استخدم claude-skills. وليد كود لتطبيق React 19 + Tailwind v4 مُنشر على Cloudflare Pages مع Workers API و D1 قاعدة بيانات.✓ تم النسخ
→ Monorepo structure with apps/web, apps/api (Worker), wrangler.toml
-
إضافة ميزة
أضف ميزة 'notes' — مخطط D1، نقاط نهاية CRUD Worker، واجهة مستخدم React بأسلوب Tailwind v4.✓ تم النسخ
→ Migration + Worker + React page
-
نشر
نشر على Cloudflare.✓ تم النسخ
→ wrangler deploy output; URLs returned
النتيجة: عنوان URL مباشر خلال ساعة.
المزالق
- انجراف إعدادات wrangler بين البيئات — استخدم بيئات wrangler من البداية — أقسام dev/staging/prod
متى تستخدمه: تريد المحرك الجديد + إعدادات CSS-first دون كسر كل شيء.
الخطوات
-
تدقيق الحالة الحالية
استخدم claude-skills. دقق tailwind.config.js الخاص بي عن تغييرات v4 الكاسرة.✓ تم النسخ
→ قائمة التغييرات مع الخطورة
-
ترحيل الإعدادات
حول إلى إعدادات v4 CSS-first مع توجيهات @theme.✓ تم النسخ
→ globals.css جديد مع كتلة @theme
-
إصلاح الأدوات
ابحث عن أدوات v3 التي تغيرت أو تم إزالتها؛ أعد كتابة الاستخدام.✓ تم النسخ
→ Grep + rewrite pass
النتيجة: مشروع على v4 دون انحدارات بصرية.
المزالق
- نظام الإضافات ليس جاهزاً لـ v4 بعد — تحقق من حالة v4 لكل إضافة؛ ابق على v3 إذا تأخرت واحدة حرجة
متى تستخدمه: تثبيت موفر واحد يشعر بأنه خطأ وتريد واجهة نظيفة.
الخطوات
-
تحديد الواجهة
استخدم نمط claude-skills ai-adapter. عرّف واجهة TS تجرد إكمال الدردشة عبر Claude و OpenAI ونموذج محلي.✓ تم النسخ
→ الواجهة + 3 تطبيقات
-
توصيل البث
أضف دعم بث SSE للمحول.✓ تم النسخ
→ تطبيق البث متسق عبر موفري الخدمات
النتيجة: طبقة ذكية قابلة للتبديل.
المزالق
- الإفراط في التجريد وفقدان الميزات الخاصة بموفر الخدمة — احتفظ بمخرج طوارئ خاص بموفر الخدمة بجانب الواجهة المشتركة
التركيبات
اجمعها مع خوادم MCP أخرى لتحقيق نتائج x10
نشر وإدارة موارد CF التي ينشئها البناء
بعد البناء، استخدم cloudflare MCP للتحقق من DNS وتتبع سجلات Worker.✓ تم النسخ
عمليات إعدادات CF بكميات كبيرة
قم بإعداد قواعد التخزين المؤقت و WAF لمشروع Pages المنشور.✓ تم النسخ
التكلفة والحدود
تكلفة التشغيل
- حصة API
- لا توجد حصص في المهارة
- الرموز لكل استدعاء
- معتدل
- التكلفة المالية
- يتمتع Cloudflare بطبقة مجانية سخية؛ الميزات المدفوعة عند النمو
- نصيحة
- استخدم wrangler dev محلياً؛ احفظ نشر المحرك السحابي للبيئات المرحلية والإنتاجية.
الأمان
الصلاحيات والأسرار ونطاق الأثر
تخزين بيانات الاعتماد: يتعامل wrangler مع مصادقة CF؛ مفاتيح موفري الذكاء عبر env / CF secrets
نقل البيانات الخارجي: CF وموفري الذكاء التي تقوم بإعدادها
- استخدم CF secrets (wrangler secret put) لمفاتيح API، لا تلتزم .dev.vars أبداً.
استكشاف الأخطاء
الأخطاء الشائعة وحلولها
D1 migration fails
ترحيلات wrangler D1 حساسة؛ قم بالتشغيل مع --local أولاً وفحص SQL
تحقق: wrangler d1 migrations list <db>
Tailwind v4 styles not applying
تحقق من أن توجيه @source يلتقط مسارات المحتوى الخاصة بك
Deploy succeeds but Worker returns 500
استخدم wrangler tail لرؤية الخطأ الفعلي
تحقق: wrangler tail <worker>
البدائل
claude-skills مقابل البدائل
| البديل | متى تستخدمها | المقايضة |
|---|
| مكدس Vercel / Next.js | تفضل نظام Next البيئي | نموذج نشر مختلف، التسعير |
| cc-frontend-skill | تهتم بشكل أساسي بالهوية البصرية | ليست خاصة بمكدس معين |