技能 coding-standards
📋

coding-standards

安全 ⚙️ 外部命令🌐 網路存取📁 檔案系統存取

تطبيق معايير ترميز React 19 TypeScript

يحتاج مطورو Portfolio Buddy 2 إلى أنماط ترميز متسقة للحفاظ على جودة الكود. توفر هذه المهارة معايير موثقة لمكونات React 19 وأنواع TypeScript وتنظيم المشروع.

支援: Claude Codex Code(CC)
📊 71 充足
1

下載技能 ZIP

2

在 Claude 中上傳

前往 設定 → 功能 → 技能 → 上傳技能

3

開啟並開始使用

測試它

正在使用「coding-standards」。 إنشاء مكون MetricsTable باتباع معايير الترميز

預期結果:

  • استخدم مكون وظيفي مع واجهة TypeScript
  • ضع hooks في المستوى الأعلى (useState، useMemo، useCallback)
  • أضف مصفوفة تبعيات كاملة للhooks
  • لا توجد مكتبات حالة عامة (Redux، Zustand، وما شابه)
  • صدر المكون كتصدير مسمى
  • قصر المكون على أقل من 200 سطر

正在使用「coding-standards」。 ساعدني في إعادة هيكلة مكون من 350 سطر

預期結果:

  • استخرج المكونات الفرعية بناءً على حدود الميزات
  • انقل منطق الأعمال إلى hooks مخصصة
  • حافظ على منطق التنسيق في المكون الرئيسي
  • استهدف أقل من 200 سطر لكل مكون

正在使用「coding-standards」。 اكتب دالة لحساب مقاييس المخاطر

預期結果:

  • أضف تعليقات JSDoc تشرح الحساب
  • استخدم واجهات TypeScript صريحة للمعلمات
  • تعامل مع الحالات الحدية مثل البيانات الفارغة
  • أرجع نتائج مكتوبة، لا تستخدم `any` مطلقاً

安全審計

安全
v3 • 1/16/2026

This skill contains only markdown documentation with TypeScript code examples. All 91 static findings are false positives: hash strings triggered C2/crypto keywords, mathematical formulas were misidentified as cryptographic code, and TypeScript patterns were flagged as system reconnaissance. No executable code, network calls, file system access, or environment variable usage exists.

2
已掃描檔案
614
分析行數
3
發現項
3
審計總數
審計者: claude 查看審計歷史 →

品質評分

38
架構
100
可維護性
87
內容
30
社群
100
安全
91
規範符合性

你能建構什麼

إنشاء مكون جديد

اتبع أنماط hook ومعايير TypeScript عند بناء مكونات React جديدة لتطبيق المحفظة.

مراجعة مساهمات الكود

تحقق من أن طلبات السحب تستوفي المعايير الموثقة لحجم المكونات والأنواع وتنظيم الاستيرادات.

تقليل الديون التقنية

استخدم الأنماط الموثقة لإعادة هيكلة المكونات الكبيرة مثل PortfolioSection.tsx إلى أجزاء أصغر.

試試這些提示

نمط المكون
أنشئ مكون React 19 جديدًا باتباع مهارة معايير الترميز. استخدم مكون وظيفي مع TypeScript، وhooks في المستوى الأعلى، وuseMemo للحالة المشتقة، وuseCallback للمعالجات.
أنواع TypeScript
حدد واجهات TypeScript لبياناتي باستخدام مهارة معايير الترميز. لا توجد أنواع `any`، واستخدم فحوصات null صارمة، وأضف تعليقات JSDoc للدوال المعقدة.
إعادة هيكلة المكون
ساعدني في إعادة هيكلة هذ�� المكون الكبير باستخدام أنماط معايير الترميز. استخرج المكونات الفرعية وانقل المنطق إلى hooks مخصصة للبقاء تحت 200 سطر.
تنظيم الاستيرادات
نظم استيراداتي باتباع مهارة معايير الترميز: مكتبات React أولاً، ثم hooks الداخلية، ثم الأدوات، ثم الأنواع.

最佳實務

  • حدد دائمًا واجهات TypeScript لهياكل البيانات بدلاً من استخدام `any`
  • احتفظ بالمكونات تحت 200 سطر عن طريق استخراج المكونات الفرعية وhooks المخصصة
  • استخدم React hooks في المستوى الأعلى فقط مع مصفوفات تبعيات كاملة

避免

  • استخدام نوع `any` بدلاً من واجهات TypeScript الصحيحة
  • وضع hooks داخل شروط أو حلقات
  • خلط مكتبات الحالة العامة عندما تُفضل React hooks البسيطة

常見問題

ما هي ميزات React التي تغطيها هذه المهارة؟
مكونات React 19 الوظيفية، useState، useMemo، useCallback، useRef، وuseEffect مع مصفوفات تبعيات مناسبة.
ما هي قواعد TypeScript المفروضة؟
لا توجد أنواع `any`، وفحوصات null صارمة، وواجهات صريحة لجميع هياكل البيانات، واستنتاج النوع عندما يكون واضحاً.
كيف يتكامل هذا مع Claude Code؟
توفر المهارة أنماطًا موثقة يتبعها Claude Code عند إنشاء أو مراجعة كود React 19 وTypeScript.
هل بياناتي آمنة مع هذه المهارة؟
نعم. هذه المهارة تحتوي فقط على وثائق مرجعية. لا تصل إلى الملفات أو الشبكات أو تنفذ أي كود.
لماذا يوجد حد 200 سطر للمكونات؟
المكونات الأصغر أسهل في الاختبار والصيانة والتصحيح. يجب تقسيم المكونات الكبيرة إلى مكونات فرعية مركزة.
كيف يقارن بـ eslint؟
توثق هذه المهارة الأنماط المعمارية والاتفاقيات. وهي تكمل linters من خلال تغطية قواعد التصميم والتنظيم.

開發者詳情

檔案結構

📄 SKILL.md