/ الدليل / الملعب / cc-frontend-skills
← كل الخوادم ↗ GitHub
● مجتمع oikon48 ⚡ فوري

cc-frontend-skills

بواسطة oikon48 · oikon48/cc-frontend-skills

مكون Claude Code لواجهات المستخدم الأمامية التي لا تبدو مثل كل صفحة أخرى يولدها ChatGPT — اهرب من جمالية التدرجات الأرجوانية والزوايا المستديرة.

مهارة Claude Code من تأليف ياباني لبناء واجهات مستخدم أمامية برؤية بصرية متعمدة. يوجه Claude بعيداً عن 'لغة التصميم الافتراضية للذكاء الاصطناعي' (التدرجات العامة، نفس تخطيطات البطاقات، نسخة shadcn) نحو خيارات تبدو مقصودة — الطباعة، الشبكات، أنظمة الألوان المستندة إلى مراجع تصميم حقيقية.

▶ شاهد العرض 📦 التثبيت 💡 حالات الاستخدام

لماذا تستخدمه

الميزات الأساسية

عرض مباشر

كيف يبدو في الممارسة

cc-frontend-skill.replay ▶ جاهز
0/0

التثبيت

اختر العميل

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "cc-frontend-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/oikon48/cc-frontend-skills",
        "~/.claude/skills/cc-frontend-skills"
      ],
      "_inferred": true
    }
  }
}

افتح Claude Desktop → Settings → Developer → Edit Config. أعد التشغيل بعد الحفظ.

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "cc-frontend-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/oikon48/cc-frontend-skills",
        "~/.claude/skills/cc-frontend-skills"
      ],
      "_inferred": true
    }
  }
}

يستخدم Cursor نفس مخطط mcpServers مثل Claude Desktop. إعدادات المشروع أولى من الإعدادات العامة.

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "cc-frontend-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/oikon48/cc-frontend-skills",
        "~/.claude/skills/cc-frontend-skills"
      ],
      "_inferred": true
    }
  }
}

انقر على أيقونة MCP Servers في شريط Cline الجانبي، ثم "Edit Configuration".

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "cc-frontend-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/oikon48/cc-frontend-skills",
        "~/.claude/skills/cc-frontend-skills"
      ],
      "_inferred": true
    }
  }
}

نفس الصيغة مثل Claude Desktop. أعد تشغيل Windsurf لتطبيق التغييرات.

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "cc-frontend-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/oikon48/cc-frontend-skills",
        "~/.claude/skills/cc-frontend-skills"
      ]
    }
  ]
}

يستخدم Continue مصفوفة من كائنات الخادم بدلاً من خريطة.

~/.config/zed/settings.json
{
  "context_servers": {
    "cc-frontend-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/oikon48/cc-frontend-skills",
          "~/.claude/skills/cc-frontend-skills"
        ]
      }
    }
  }
}

أضف إلى context_servers. يعيد Zed التحميل تلقائيًا عند الحفظ.

claude mcp add cc-frontend-skill -- git clone https://github.com/oikon48/cc-frontend-skills ~/.claude/skills/cc-frontend-skills

أمر من سطر واحد. تحقق باستخدام claude mcp list. احذف باستخدام claude mcp remove.

حالات الاستخدام

استخدامات عملية: cc-frontend-skills

بناء صفحة هبوط برؤية بصرية متميزة، وليس بمخلفات الذكاء الاصطناعي

👤 مطورون مستقلون، مؤسسون يكرهون مظهر صفحات الهبوط التي ينشئها الذكاء الاصطناعي ⏱ ~60 min intermediate

متى تستخدمه: طلبت من Claude صفحة هبوط وحصلت على نموذج أولي بتدرج أرجواني وبطاقات مستديرة.

المتطلبات الأساسية
  • المهارة مثبتة — git clone https://github.com/oikon48/cc-frontend-skills ~/.claude/skills/cc-frontend-skills
  • أسلوب مرجعي في الذهن — اذكر واحداً — editorial, swiss, brutalist, y2k, warm-monochrome، أو أي شيء
الخطوات
  1. تسمية الجماليات
    استخدم cc-frontend-skills. بناء صفحة هبوط لكتابي بنمط أغلفة كتب Penguin بدون الغلاف من منتصف القرن — طباعة متحفظة، لون تمييز واحد، مساحة بيضاء سخية.✓ تم النسخ
    → مسودة التخطيط مع خيارات طباعة محددة، وليس نموذج shadcn
  2. التكرار على الشبكة والطباعة
    شدّد مقياس الطباعة إلى مقياس معياري 1.333؛ استخدم Charter أو serif مشابهة.✓ تم النسخ
    → CSS ملموس مع خطوط مسماة، وليس 'sans-serif'
  3. إزالة علامات الذكاء الاصطناعي
    تدقيق لعلامات تصميم الذكاء الاصطناعي: رؤوس emoji، shadow-lg مفرط، نص تدرج، تخطيطات بطاقات متطابقة. احذفها.✓ تم النسخ
    → الفرق يزيل المشبوهين المعتادين

النتيجة: صفحة هبوط تبدو كأن شخصاً اهتم بها.

المزالق
  • يعود Claude إلى الإعدادات الافتراضية بعد عدة تكرارات — ثبّت المرجع الأسلوبي في كل موجه متابعة — لا تعتمد على السياق لحمله
اجمعها مع: filesystem

إعادة صياغة لوحة معلومات عامة إلى شيء يبدو مصمماً

👤 الفرق التي تشحن أدوات داخلية يكرهها الجميع بصمت ⏱ ~90 min intermediate

متى تستخدمه: لوحتك تعمل لكن تبدو مثل كل تطبيق آخر يعتمد على shadcn.

الخطوات
  1. التشخيص
    استخدم cc-frontend-skills. انظر إلى /app/dashboard. ما علامات التصميم الخاصة بالذكاء الاصطناعي هنا؟✓ تم النسخ
    → قائمة ملموسة: 'كل شيء lg-rounded، ظلال على كل بطاقة، تدرج CTA، الشبكة دائماً 3-col'
  2. اقترح بديلاً
    اقترح اتجاهاً جمالياً مرتكزاً على مرجع تصميم كثيف البيانات (Bloomberg terminal, Figma's inspector panel).✓ تم النسخ
    → مراجع مسماة مع تطبيقات ملموسة
  3. التطبيق بشكل تدريجي
    ابدأ بالطباعة فقط — أصلح التسلسل الهرمي دون لمس التخطيط.✓ تم النسخ
    → الفرق يغير font-size, letter-spacing, weight فقط

النتيجة: لوحة معلومات برأي واضح.

المزالق
  • الإفراط في التصميم وكسر إمكانية الوصول — حافظ على تباين AA؛ الهوية البصرية لا تتطلب رمادي فاتح على أبيض
اجمعها مع: chrome-devtools

أعط مكتبة المكونات الخاصة بك صوتاً بصرياً متسقاً

👤 محافظو نظام التصميم ⏱ ~60 min advanced

متى تستخدمه: تم إنشاء الأزرار والبطاقات والمدخلات الخاصة بك بشكل مستقل والآن تتضارب.

الخطوات
  1. الجرد
    استخدم cc-frontend-skills. راجع components/ وحدد عدم التسقية في border-radius, shadow, spacing.✓ تم النسخ
    → جدول التباين لكل رمز
  2. اقترح الرموز
    اقترح مجموعة رموز تصميم موحدة برمز نصف قطر واحد، رمز ظل واحد، رمز تباعد واحد.✓ تم النسخ
    → Token JSON / Tailwind config

النتيجة: مجموعة رموز تجعل المكتبة تبدو كشيء واحد.

التركيبات

اجمعها مع خوادم MCP أخرى لتحقيق نتائج x10

cc-frontend-skill + chrome-devtools

تعديل الأنماط مباشرة في المتصفح وإرسال التغييرات إلى المصدر

افتح الصفحة، عدل مقياس الطباعة في devtools حتى يبدو صحيحاً، ثم طبق الفرق على CSS.✓ تم النسخ
cc-frontend-skill + filesystem

تطبيق تحديثات نظام التصميم عبر monorepo

حدّث جميع متغيرات الأزرار في packages/ui/ إلى مجموعة الرموز الجديدة.✓ تم النسخ

الأدوات

ما يوفره هذا الـ MCP

الأداةالمدخلاتمتى تستدعيهاالتكلفة
style_audit component or page تشخيص جمالية الذكاء الاصطناعي العامة 0
aesthetic_brief named reference style بدء صفحة جديدة برؤية واضحة 0
typography_tune current scale إصلاح التسلسل الهرمي للطباعة 0

التكلفة والحدود

تكلفة التشغيل

حصة API
بلا
الرموز لكل استدعاء
معتدل
التكلفة المالية
مجاني
نصيحة
قم بتحديث صفحة واحدة في المرة؛ إعادة صياغة التطبيق الكاملة تنسف السياق.

الأمان

الصلاحيات والأسرار ونطاق الأثر

تخزين بيانات الاعتماد: بلا
نقل البيانات الخارجي: بلا — مهارة محلية

استكشاف الأخطاء

الأخطاء الشائعة وحلولها

Claude keeps suggesting shadcn/Tailwind defaults

كن واضحاً: 'لا تستخدم الإعدادات الافتراضية shadcn؛ استخدم الملخص الجمالي من cc-frontend-skills'

Generated code uses unnamed fonts

حدد رموز الخطوط في الموجه؛ Claude غالباً ما يتركها عامة

Skill docs are in Japanese and I can't read them

اطلب من Claude ترجمة SKILL.md؛ المهارة تعمل بغض النظر عن لغة الموجه

البدائل

cc-frontend-skills مقابل البدائل

البديلمتى تستخدمهاالمقايضة
apple-hig-designer-skillاستهداف جمالية iOS / macOS HIG بشكل محددمحدد للمنصة
Tailwind UI / shadcn blocksتريد السرعة على حساب الهويةكل شيء يبدو متشابهاً

المزيد

الموارد

📖 اقرأ ملف README الرسمي على GitHub

🐙 تصفح القضايا المفتوحة

🔍 تصفح أكثر من 400 خادم MCP و Skills