المهارات frontend-dev-guidelines
📦

frontend-dev-guidelines

مراجعة المحتوى r2 آمن ⚡ يحتوي على سكربتات⚙️ الأوامر الخارجية📁 الوصول إلى نظام الملفات🌐 الوصول إلى الشبكة

بناء واجهات React أمامية متسقة

تخسر فرق الواجهات الأمامية الوقت عندما تختلف أنماط التطبيقات عبر التوجيه، وجلب البيانات، والتحميل، والتنسيق. توفر هذه المهارة إرشادات موجزة لـ Next.js وReact وTypeScript وshadcn/ui وMUI وTanStack Query.

يدعم: Claude Codex Code(CC)
🥉 78 برونزي

التثبيت باستخدام Agent لدي

انسخ هذا الطلب إلى Agent لديك. يتضمن صفحة Skill المعتمدة وملف manifest.

طلب الوكيل
Review the Skillstore skill "frontend-dev-guidelines" from https://skillstore.io/skills/bom-98-frontend-dev-guidelines.md and its manifest at https://skillstore.io/api/skills/bom-98-frontend-dev-guidelines/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

يجب أن يواصل Agent عرض خطته وطلب أي تأكيد تفرضه سياسة الأمان.

موارد مهيّأة لـ Agents

استخدم هذه الروابط عندما يحتاج AI Agent أو crawler أو script إلى سياق نظيف بدلًا من قراءة الصفحة كاملة.

تفاصيل Markdown GET /skills/bom-98-frontend-dev-guidelines.md manifest موقَّع GET /api/skills/bom-98-frontend-dev-guidelines/manifest lockfile موقَّع GET /api/skills/bom-98-frontend-dev-guidelines/lockfile

اختبرها

جارٍ استخدام "frontend-dev-guidelines". خطط لصفحة لوحة معلومات للمنشورات تحتوي على عوامل تصفية، وجدول، وإجراءات تعديل.

النتيجة المتوقعة:

  • استخدم مجلد ميزة يحتوي على API وhooks ومكونات وأنواع ومساعدات.
  • اعرض الجدول داخل حد Suspense وحمّل الشبكة الثقيلة بشكل كسول.
  • استخدم مفاتيح TanStack Query للقائمة، وسجلات التفاصيل، والطفرات.
  • أضف حدود تحميل وخطأ تحافظ على تخطيط الصفحة.

جارٍ استخدام "frontend-dev-guidelines". راجع محرر ملف تعريف من حيث سلوك التحميل والأخطاء.

النتيجة المتوقعة:

  • تجنب الإرجاعات المبكرة للتحميل التي تستبدل بنية الصفحة.
  • غلّف الأقسام المستقلة في SuspenseLoader عندما يمكن تحميل البيانات بشكل منفصل.
  • استخدم معالجات نجاح الطفرات وأخطائها لإبطال التخزين المؤقت وتقديم ملاحظات للمستخدم.

جارٍ استخدام "frontend-dev-guidelines". نظّم ميزة جديدة تحتاج إلى عروض قائمة وتفاصيل وتعديل.

النتيجة المتوقعة:

  • أنشئ مجلد ميزة يحتوي على خدمات API، ومكونات المسارات، ومكونات فرعية قابلة لإعادة الاستخدام، وhooks، وأنواع مشتركة.
  • أبقِ مكونات UI العامة خارج الميزة فقط عندما يُعاد استخدامها عبر عدة مناطق.
  • وثّق التصديرات العامة من خلال ملف فهرس الميزة.

التدقيق الأمني

آمن
v9 • ٢٣‏/٧‏/٢٠٢٦ فتح التقرير المرتبط بالإصدار

All 151 static findings are false positives in instructional Markdown and TypeScript examples. Dynamic imports use fixed paths, backticks are documentation syntax, and relative imports do not access the filesystem. Network examples use application clients or a same-origin endpoint, and no prompt injection or malicious intent was found.

11
الملفات التي تم فحصها
5,553
الأسطر التي تم تحليلها
0
عناصر المراجعة
0
تم تجاهل الإيجابيات الكاذبة

عوامل الخطر

⚡ يحتوي على سكربتات (19)
resources/complete-examples.md:301 resources/complete-examples.md:504 resources/complete-examples.md:505 resources/complete-examples.md:506 resources/complete-examples.md:613 resources/component-patterns.md:65 resources/component-patterns.md:70 resources/component-patterns.md:86 resources/component-patterns.md:134 resources/component-patterns.md:370 resources/component-patterns.md:491 resources/loading-and-error-states.md:38 resources/performance.md:377 resources/performance.md:383 resources/routing-guide.md:56 resources/routing-guide.md:99 resources/routing-guide.md:111 resources/routing-guide.md:323 resources/routing-guide.md:354
⚙️ الأوامر الخارجية (44)
resources/complete-examples.md:85-146 resources/complete-examples.md:192-207 resources/complete-examples.md:207-212 resources/complete-examples.md:212-215 resources/complete-examples.md:309-327 resources/data-fetching.md:227-237 resources/data-fetching.md:237-252 resources/data-fetching.md:252-262 resources/data-fetching.md:262-265 resources/data-fetching.md:406-408 resources/file-organization.md:137-145 resources/typescript-standards.md:72-81 resources/typescript-standards.md:81-83 SKILL.md:44 SKILL.md:47 SKILL.md:48 SKILL.md:55 SKILL.md:59 SKILL.md:67-76 SKILL.md:76-80 SKILL.md:80-91 SKILL.md:91-95 SKILL.md:95-120 SKILL.md:120-124 SKILL.md:124-142 SKILL.md:142-146 SKILL.md:146-160 SKILL.md:160-164 SKILL.md:164-193 SKILL.md:193-197 SKILL.md:197-217 SKILL.md:217-223 SKILL.md:223-258 SKILL.md:258-285 SKILL.md:285-333 SKILL.md:333-341 SKILL.md:341-350 SKILL.md:350-353 SKILL.md:353-357 SKILL.md:357-362 SKILL.md:362-366 SKILL.md:366-384 SKILL.md:384-388 SKILL.md:388-402
📁 الوصول إلى نظام الملفات (28)
resources/complete-examples.md:20 resources/complete-examples.md:188 resources/complete-examples.md:221 resources/complete-examples.md:222 resources/complete-examples.md:338 resources/complete-examples.md:392 resources/complete-examples.md:548 resources/complete-examples.md:549 resources/complete-examples.md:753 resources/complete-examples.md:754 resources/complete-examples.md:755 resources/complete-examples.md:816 resources/component-patterns.md:199 resources/data-fetching.md:24 resources/data-fetching.md:70 resources/data-fetching.md:219 resources/data-fetching.md:308 resources/data-fetching.md:513 resources/data-fetching.md:544 resources/data-fetching.md:545 resources/data-fetching.md:631 resources/file-organization.md:237 resources/file-organization.md:238 resources/file-organization.md:395 resources/file-organization.md:396 resources/loading-and-error-states.md:300 resources/loading-and-error-states.md:339 resources/loading-and-error-states.md:365
🌐 الوصول إلى الشبكة (4)
resources/data-fetching.md:269 resources/data-fetching.md:453 resources/data-fetching.md:461 resources/performance.md:224
لم يكتشف أحدث تدقيق ثابت ودلالي مكتمل أي نتائج أمنية مؤكدة. ولا يثبت ذلك أن المهارة خالية من الآثار الجانبية.
دقّقه: codex عرض سجل التدقيق →
شارك واستشهد بهذا التقرير

شارك تقرير التقييم المرتبط بالإصدار والشارة المحايدة وبطاقة التضمين والاستشهادات. تعرض Skillstore الأدلة من دون أن تقرر ما إذا كانت هذه المهارة آمنة.

فتح التقرير المرتبط بالإصدار
تقييم الأمان

نسخ رابط التقرير

https://skillstore.io/skills/bom-98-frontend-dev-guidelines/audits/9?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

شارة Markdown

[![Skillstore security assessment](https://skillstore.io/badges/skills/bom-98-frontend-dev-guidelines/security.svg)](https://skillstore.io/skills/bom-98-frontend-dev-guidelines?utm_source=security_passport_badge)

شارة HTML

<a href="https://skillstore.io/skills/bom-98-frontend-dev-guidelines?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/bom-98-frontend-dev-guidelines/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

بطاقة قابلة للتضمين

<iframe src="https://skillstore.io/embed/skills/bom-98-frontend-dev-guidelines.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>
الاستشهادات الأكاديمية (APA · BibTeX · CFF)

اقتباس APA

BOM-98. (2026). frontend-dev-guidelines security audit report (audit version 9) [Author version unspecified]. Skillstore. https://skillstore.io/skills/bom-98-frontend-dev-guidelines/audits/9

اقتباس BibTeX

@techreport{bom-98-bom-98-frontend-dev-guidelines-2026, author = {BOM-98}, title = {frontend-dev-guidelines security audit report (audit version 9)}, institution = {Skillstore}, year = {2026}, number = {9}, url = {https://skillstore.io/skills/bom-98-frontend-dev-guidelines/audits/9}, note = {Author version unspecified} }

CITATION.cff

cff-version: 1.2.0 message: "If you use this Skill, cite its author and this versioned security audit report." title: "frontend-dev-guidelines security audit report (audit version 9)" version: "unspecified" type: report authors: - name: "BOM-98" date-released: "2026-07-23" url: "https://skillstore.io/skills/bom-98-frontend-dev-guidelines/audits/9" identifiers: - type: other value: "skillstore:bom-98-frontend-dev-guidelines:audit:9" description: "Skillstore immutable audit report identifier"

مقارنة المتغيرات

7 متغيرات قابلة للتثبيت

تبقى مهارة كل مؤلف عنصراً مستقلاً قابلاً للتثبيت. يُرتب المتغير الموصى به وفق أدلة Skillstore.

سبب تصدر هذا المتغير

أعلى تقييم في Skillstore
BrianDai22 موصى به

briandai22-frontend-dev-guidelines

تقييم Skillstore 79
موثوقية الأدلة مرتفع
استخدام Skillstore 15
تم التحديث

2026-09-09

0Chan-smc

0chan-smc-frontend-dev-guidelines

تقييم Skillstore 78
موثوقية الأدلة مرتفع
استخدام Skillstore 194
تم التحديث

2026-09-09

BOM-98 الحالي

bom-98-frontend-dev-guidelines

تقييم Skillstore 78
موثوقية الأدلة مرتفع
استخدام Skillstore 12
تم التحديث

2026-09-09

sickn33

sickn33-frontend-dev-guidelines

تقييم Skillstore 78
موثوقية الأدلة مرتفع
استخدام Skillstore 11
تم التحديث

2026-09-09

DojoCodingLabs

dojocodinglabs-frontend-dev-guidelines

تقييم Skillstore 78
موثوقية الأدلة مرتفع
استخدام Skillstore 11
تم التحديث

2026-09-09

Dimon94

dimon94-frontend-dev-guidelines

تقييم Skillstore 78
موثوقية الأدلة مرتفع
استخدام Skillstore 9
تم التحديث

2026-09-09

diet103

diet103-frontend-dev-guidelines

تقييم Skillstore 78
موثوقية الأدلة مرتفع
استخدام Skillstore 9
تم التحديث

2026-09-09

تقييم Skillstore

سبب هذا التقييم موثوقية الأدلة: مرتفع
55
الهندسة المعمارية
85
قابلية الصيانة
87
المحتوى
77
المجتمع
83
الامتثال للمواصفات

ما الذي يمكنك بناؤه

توحيد ميزة جديدة

خطط للتوجيه، وحدود المكونات، وخدمات API، وhooks، وحالات التحميل، والأنماط قبل بناء ميزة.

مراجعة بنية الواجهات الأمامية

تحقق مما إذا كان pull request يتبع الأنماط المشتركة لـ Suspense، وجلب البيانات، وTypeScript، وتخطيط الملفات.

الانضمام إلى قاعدة شيفرة React

تعلم الاصطلاحات المتوقعة للمكونات، والتنسيق، والتوجيه، وسلوك التخزين المؤقت، ومعالجة الأخطاء.

جرّب هذه الموجّهات

تخطيط صفحة 
استخدم frontend-dev-guidelines لتخطيط صفحة جديدة لـ [route]. ضمّن نوع المكون، وجلب البيانات، وحالة التحميل، وحالة الخطأ، وخيارات التنسيق.
تصميم مكون 
استخدم frontend-dev-guidelines لتصميم [component] قابل لإعادة الاستخدام. عرّف props، وحدود الحالة، واستخدام مكتبة UI، واحتياجات إمكانية الوصول، وموضع الملف.
إعادة هيكلة جلب البيانات 
استخدم frontend-dev-guidelines لإعادة هيكلة [screen] إلى TanStack Query مع Suspense. ضمّن مفاتيح التخزين المؤقت، والإبطال، وسلوك التحميل، ومعالجة الأخطاء.
تدقيق بنية الميزة 
استخدم frontend-dev-guidelines لمراجعة [feature folder]. حدد الانحرافات في التوجيه، والمكونات، وخدمات API، وhooks، وTypeScript، والتنسيق، وأنماط الأداء.

أفضل الممارسات

  • استخدم Server Components أو تدفقات بيانات قائمة على Suspense ما لم يتطلب التفاعل حالة عميل.
  • نظّم شيفرة الميزة حسب خدمات API، وhooks، والمكونات، والمساعدات، والأنواع المشتركة.
  • أضف فحوصات التحميل، والأخطاء، وTypeScript، والتنسيق، والأداء قبل اعتبار عمل الواجهة الأمامية مكتملاً.

تجنب

  • لا تضف مكونات client-only عندما يمكن للتصيير على الخادم أو Suspense التعامل مع سير العمل.
  • لا تنثر استدعاءات API عبر المكونات عندما توجد طبقة خدمة للميزة.
  • لا تستخدم إرجاعات تحميل مبكرة تسبب تغيّر التخطيط أو تخفي بنية الصفحة.

الأسئلة المتكررة

ما المشاريع الأنسب لهذه المهارة؟
تناسب مشاريع الواجهات الأمامية بـ React وTypeScript التي تستخدم أنماط توجيه ومكونات وجلب بيانات وUI حديثة.
هل تنشئ شيفرة تطبيق عاملة؟
توفر أنماطاً وأمثلة يمكن لمساعد AI تطبيقها عند كتابة شيفرة المشروع أو مراجعتها.
هل يمكن استخدامها مع Claude وCodex وClaude Code؟
نعم. يشير التقرير إلى دعم سير عمل Claude وCodex وClaude Code.
هل تتطلب Next.js؟
لا. أنماط Next.js محورية، لكن عدة موارد تغطي أيضاً TanStack Router وبنية React العامة.
هل تتضمن إرشادات أمنية؟
تتضمن فقط إرشادات محدودة لسلامة الواجهة الأمامية. استخدم مراجعة أمنية منفصلة للمصادقة، والتفويض، وكشف البيانات.
كيف ينبغي للفرق استخدامها أثناء مراجعة الشيفرة؟
اطلب من المساعد مقارنة الملفات المتغيرة بالأنماط الموثقة لجلب البيانات، والتحميل، وتخطيط الملفات، وTypeScript، والتنسيق.

تفاصيل المطور

المؤلف

BOM-98

الترخيص

MIT

مراجعة Skillstore

r2

تنبيه الإصدار

لم يعلن المؤلف عن إصدار.

المستودع

https://github.com/BOM-98/FinTracker/tree/main/.claude/skills/frontend-dev-guidelines

مرجع

a39a91716eadede5f4cdefd78178fed4e837a128

حداثة الصيانة

٢٦‏/٧‏/٢٠٢٦

الاستخدام

9 تنزيلات · 670 مشاهدات

بنية الملفات

📁 resources/

📄 common-patterns.md

📄 complete-examples.md

📄 component-patterns.md

📄 data-fetching.md

📄 file-organization.md

📄 loading-and-error-states.md

📄 performance.md

📄 routing-guide.md

📄 styling-guide.md

📄 typescript-standards.md

📄 SKILL.md

المزيد من BOM-98

عرض الكل

مهارات ذات صلة

عرض الكل