Diyaa AlbouzanTech
حزمة جاهزة · Claude Code Skills

Claude Code Skill Pack — 15 Skill بتحوّله لـ Full-Stack Agent

15 مهارة بتخلي Claude Code يصمم، يبرمج، يختبر، يعمل Refactor، ويطلق المشروع. الـ 5 اللي بالفيديو بأول القائمة، والـ 10 الإضافية بعدهم مباشرة. كل Skill هي ملف نصي واحد — ما في install ولا packages.

كيف تركّب أي Skill

كل Skill هي فولدر فيه ملف واحد اسمه SKILL.md. ما في install ولا packages — بتحط الملف و Claude بياخده لحاله.

١) اعمل فولدر الـ skills وفولدر المهارة macOS / Linux / Git Bash

# 1. اعمل فولدر الـ skills إذا مش موجود mkdir -p ~/.claude/skills # 2. اعمل فولدر للمهارة cd ~/.claude/skills mkdir code-review cd code-review # 3. اعمل ملف SKILL.md جواه، وفيه: # - description بيقول لـ Claude إمتى يستخدم المهارة # - الخطوات اللي لازم يمشي عليها # وهيك خلصت. Claude بيلتقطها تلقائياً.

٢) شكل ملف SKILL.md — انسخه وعدّل الاسم والوصف:

--- name: code-review description: راجع الكود ودوّر على bugs و security issues و performance problems. استخدمها لما المستخدم يقول "راجع الكود" أو "دوّر على أخطاء" أو "افحص الأمان". --- # Code Review لما تراجع أي كود، امشي على هالمحاور بالترتيب: ## Security - SQL injection، تسريب secrets، فجوات الـ auth ## Performance - N+1 queries، re-renders غير ضرورية، memory leaks ## Correctness - Race conditions، edge cases، error handling ## Maintainability - تكرار، naming، complexity لكل مشكلة: وضّح السطر، اشرح الخطر، واقترح البديل.
الـ description هو كل شي. اكتب فيه الجمل اللي إنت فعلاً بتقولها وقت الطلب — حتى بالعربي. هو اللي بيخلّي Claude يعرف إمتى يشغّل المهارة لحاله.
ابدأ من هون

هاي الخمسة اللي شرحتها بالريل. كل وحدة بتسكّر فجوة حقيقية بشغل المبرمج.

1

MCP Builder

شو بيعمل: بتحط أي API documentation أو OpenAPI spec، وبيطلعلك MCP server شغال كامل. بدون أي setup يدوي.

ليش مهم: أي أداة بدك Claude يتحكم فيها بدها MCP server. بناء واحد بإيدك بياخد ساعات. هاي بتعمله بـ prompt واحد.

Trigger phrases
ابني MCP server، اعمل MCP لـ [الخدمة]، لُف هاد الـ API كـ MCP
شو بيطلعلك
MCP server scaffold كامل بـ TypeScript · معالجة الـ auth (API key، OAuth، bearer token) · Tool definitions مربوطة من الـ endpoints · Error handling و rate limit logic · ملف package.json مع install instructions
متوفرة رسمياً من Anthropic — github.com/anthropics/skills → mcp-builder
2

Playwright

شو بيعمل: Claude بيجرب تطبيقك جوا browser حقيقي — بيضغط الأزرار، بيعبي الـ forms، بيمشي كل الـ user flows، وبياخد screenshot لحظة ما يوقع اشي.

ليش مهم: معظم الـ bugs بتختبي بالفجوة بين «الكود بيشتغل» و«الـ user flow بيشتغل». هاي بتسكّر الفجوة تلقائياً.

Trigger phrases
جرّب هاد الـ flow، شغّل e2e tests، تأكد إن الـ signup شغال
شو بيعمل إلك
بيشغّل headless Chromium · بيسجّل شو صار على الشاشة بكل step · بياخد screenshot لحظة الانهيار · بيرجعلك pass/fail report منظم
النسخة الرسمية اسمها webapp-testing — github.com/anthropics/skills
3

Frontend Design

شو بيعمل: بيرفع الـ UI تبعك من «شكل AI عادي» لتصميم بمستوى production.

ليش مهم: مخرجات Claude الافتراضية بتطلع زي أي تطبيق مبني بالـ AI. هاي بتفرض عليه design tokens حقيقية، spacing system، typography hierarchy، و component patterns.

Trigger phrases
خلي شكله حلو، حسّن الـ UI، صمّم هالصفحة، لمّع الـ frontend
شو بيفرض
8-point spacing grid · Type scale ثابت (بدون أحجام عشوائية) · Color system حقيقي بـ semantic tokens · حالات hover و focus و disabled · Loading و empty states
متوفرة رسمياً كمان — github.com/anthropics/skills → frontend-design
4

Code Review

شو بيعمل: بيدقق الـ codebase تبعك، وبيطلعلك الـ bugs والـ security issues ومشاكل الـ performance والأنماط السيئة.

راجع هاد الكوددقق الـ codebaseدوّر على bugsافحص الأمان
المحورشو بيفحص
SecurityInjection، تسريب secrets، فجوات الـ auth
PerformanceN+1 queries، re-renders غير ضرورية، memory leaks
CorrectnessRace conditions، edge cases، error handling
Maintainabilityتكرار، naming، complexity
5

Refactor

شو بيعمل: بياخد الأجزاء الفوضوية من الـ codebase وبيعيد كتابتها لكود نظيف و modular، بدون ما يغيّر السلوك.

اعمل refactor لهادنضّف هادخليه modularاسحب هاد الـ logic برا

الـ patterns اللي بيعرفها

  • Extract function / extract module
  • استبدال الـ conditionals بـ polymorphism
  • Introduce parameter object
  • تفكيك الـ god classes
  • سحب الـ pure logic بعيد عن الكود المليان side effects
كمّل الحزمة

نفس الطريقة بالضبط: فولدر + SKILL.md + description واضح. ضيفهم وحدة وحدة.

6

Test Writer

بيكتب unit + integration tests لأي function أو module بتشاور عليها. بيولّد assertions حقيقية، مش expect(true).toBe(true).

اكتب tests لـغطّي هاد بـ testsضيف unit tests

ليش مهمة: الـ tests هي الجزء الممل بالشغل. هاي بتخلي Claude يعملها عنك، وبتغطي edge cases كنت رح تنساها.

7

Git Workflow

بيرتّب الـ git hygiene عندك — commit messages مفهومة، branch names نظيفة، و PR descriptions بتشرح التغيير فعلاً.

اعمل commitاعمل PRاكتب commit messageنضّف الـ branches

شو بيطلع

  • Conventional commits (feat:، fix:، refactor:)
  • PR description فيه summary و changes و testing notes
  • Branch names مطابقة لرقم الـ issue
8

API Designer

بيصمم REST أو GraphQL API من requirements doc — endpoints، schemas، auth، versioning.

صمّم API لـخطّط الـ endpointsschema لـ

شو بتاخد

  • OpenAPI 3.0 spec
  • Resource naming بيتبع REST conventions
  • Pagination و filtering و sorting patterns
  • Error response shapes
9

Database Architect

بيصمم الـ schema والـ indexes والـ migrations. وبيمسك أخطاء الـ normalization قبل ما تكلفك بالـ production.

صمّم الـ schemaاعمل migrationنمذج هالبيانات

بيغطي

  • Postgres، MySQL، SQLite، MongoDB
  • Migration files (up + down)
  • Index strategy مبنية على query patterns
  • Foreign key relationships
10

Deployment

بيجهز الـ deploy pipeline تبعك. بيختار المنصة المناسبة، بيكتب الـ config، وبيطلق.

انشر هادship itجهّز Vercelاعمله dockerize

بيعرف: Vercel، Railway، Fly.io، AWS، Docker، أساسيات Kubernetes، GitHub Actions.

11

Documentation

بيكتب README و API docs و JSDoc/TSDoc بلغة ما بتحس إنها مكتوبة من robot.

وثّق هاداكتب READMEضيف docstrings

شو بينكتب

  • Install + quickstart
  • أمثلة usage بتشتغل فعلاً
  • API reference
  • Troubleshooting section
12

Performance Optimizer

بيعمل profiling لتطبيقك، بيلاقي الـ bottleneck، وبيصلحه.

خليه أسرعحسّن الـ performanceليش هاد بطيء

بيفحص

  • Render bottlenecks (React، Vue)
  • Bundle size
  • Database query plans
  • N+1 patterns
  • إعادة حسابات غير ضرورية
13

Security Auditor

مسح OWASP Top 10 على الـ codebase. بيطلّع الـ vulnerabilities قبل ما تنشرها.

security auditافحص الـ vulnerabilitiesهاد آمن؟

بيمسك

  • SQL injection، XSS، CSRF
  • Secrets مكشوفة بالكود أو الـ env
  • Auth flows غير آمنة
  • CORS مفتوح، وغياب rate limits
14

Type Safety

بيشيل الـ any من الـ codebase. وبيضيف TypeScript types حقيقية مكان الناقصة.

ضيف typesصلّح TypeScriptخليه strict mode

ليش مهمة: معظم مشاريع TS فيها 30% any. هاي بتسكّر الفجوة عشان الـ types تمسك الـ bugs فعلاً.

15

Error Handling

بيدقق الـ error handling عندك. وبيستبدل الـ try/catch الصامتة بـ recovery logic حقيقي و observability.

حسّن الـ error handlingضيف loggingخليه resilient

شو بيضيف

  • Typed error classes
  • Retry logic بـ exponential backoff
  • Structured logging (عشان الأخطاء تكون قابلة للبحث بـ Sentry أو Datadog)
  • رسائل خطأ للمستخدم مش «Something went wrong»
السحر بالـ chain

مش بأي مهارة لحالها — السحر لما تمشي ورا بعض على نفس المشروع.

كيف تركّبهم مع بعض

الـ workflow الحقيقي بيكون هيك:

#المهارةالدور
1API Designerبيخطط الـ endpoints
2Database Architectبيصمم الـ schema
3MCP Builderبيلف الـ APIs لـ Claude
4Frontend Designبيبني الـ UI
5Test Writer + Playwrightبيغطوا end-to-end
6Code Review + Security Auditorبيمسكوا المشاكل
7Refactor + Performance Optimizerبينضفوا
8Documentationبيكتب الـ README
9Git Workflow + Deploymentبيطلقوا
هاي دورة منتج كاملة Claude بيمشيها معك وانت مشرف. مش autocomplete. Agent.

شو تعمل بعدين

  1. اختار مهارة وحدة من القائمة — مش الـ 15.
  2. حط ملف SKILL.md بـ ~/.claude/skills/<الاسم>/.
  3. استخدمها على مشروعك الحالي الليلة.
  4. لما تظبط معك، ضيف اللي بعدها.
تركيب المهارات بالتدريج بيشتغل. تركيب 15 مرة وحدة ما بيشتغل — Claude بيتشتت لما يكون عنده خيارات كثيرة متشابهة.
✓ تم النسخ