بناء واجهات React TypeScript الأمامية باتساق
غالبًا ما تتباعد مشاريع React في جلب البيانات والتوجيه والتنسيق وتنظيم الملفات. تمنح هذه المهارة Claude وCodex وClaude Code أنماطًا واضحة للواجهة الأمامية لتطبيقها.
انسخ هذا الطلب إلى Agent لديك. يتضمن صفحة Skill المعتمدة وملف manifest.
Review the Skillstore skill "frontend-dev-guidelines" from https://skillstore.io/skills/diet103-frontend-dev-guidelines.md and its manifest at https://skillstore.io/api/skills/diet103-frontend-dev-guidelines/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.يجب أن يواصل Agent عرض خطته وطلب أي تأكيد تفرضه سياسة الأمان.
استخدم هذه الروابط عندما يحتاج AI Agent أو crawler أو script إلى سياق نظيف بدلًا من قراءة الصفحة كاملة.
جارٍ استخدام "frontend-dev-guidelines". أنشئ مكون ملف تعريف مستخدم يجلب مستخدمًا حسب id.
النتيجة المتوقعة:
جارٍ استخدام "frontend-dev-guidelines". أضف مسار منشورات مع تحميل كسول.
النتيجة المتوقعة:
جارٍ استخدام "frontend-dev-guidelines". راجع لوحة المعلومات هذه بحثًا عن مشكلات الأداء.
النتيجة المتوقعة:
The static findings are false positives from Markdown documentation and TypeScript examples. Dynamic imports are React code-splitting patterns, path findings are relative imports or links, backtick findings are Markdown or template literals, and network findings use local API examples. No prompt injection, data exfiltration intent, or malicious behavior was found.
شارك تقرير التقييم المرتبط بالإصدار والشارة المحايدة وبطاقة التضمين والاستشهادات. تعرض Skillstore الأدلة من دون أن تقرر ما إذا كانت هذه المهارة آمنة.
https://skillstore.io/skills/diet103-frontend-dev-guidelines/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/diet103-frontend-dev-guidelines?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/diet103-frontend-dev-guidelines?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/diet103-frontend-dev-guidelines/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/diet103-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>diet103. (2026). frontend-dev-guidelines security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/diet103-frontend-dev-guidelines/audits/8@techreport{diet103-diet103-frontend-dev-guidelines-2026,
author = {diet103},
title = {frontend-dev-guidelines security audit report (audit version 8)},
institution = {Skillstore},
year = {2026},
number = {8},
url = {https://skillstore.io/skills/diet103-frontend-dev-guidelines/audits/8},
note = {Author version unspecified}
}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 8)"
version: "unspecified"
type: report
authors:
- name: "diet103"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/diet103-frontend-dev-guidelines/audits/8"
identifiers:
- type: other
value: "skillstore:diet103-frontend-dev-guidelines:audit:8"
description: "Skillstore immutable audit report identifier"
تبقى مهارة كل مؤلف عنصراً مستقلاً قابلاً للتثبيت. يُرتب المتغير الموصى به وفق أدلة Skillstore.
سبب تصدر هذا المتغير
briandai22-frontend-dev-guidelines
2026-09-09
0chan-smc-frontend-dev-guidelines
2026-09-09
bom-98-frontend-dev-guidelines
2026-09-09
sickn33-frontend-dev-guidelines
2026-09-09
dojocodinglabs-frontend-dev-guidelines
2026-09-09
dimon94-frontend-dev-guidelines
2026-09-09
diet103-frontend-dev-guidelines
2026-09-09
استخدم نمط مجلد الميزات لتنظيم خدمات API وhooks والمكونات والمساعدات والأنواع المشتركة.
تحقق من pull requests الخاصة بالواجهة الأمامية وفق قواعد متسقة لحالات التحميل والاستيرادات والتنسيق واستخدام TypeScript.
تعلّم بنية المشروع المتوقعة، وأنماط المسارات، ونهج جلب البيانات، واصطلاحات المكونات الشائعة.
أنشئ مكون React TypeScript من أجل [purpose]. اتبع مهارة frontend-dev-guidelines في props وحالات التحميل والتنسيق وexports.
أضف جلب بيانات لـ [entity]. استخدم useSuspenseQuery وخدمة API خاصة بالميزة وtyped query keys وإرشادات cache-first عند الفائدة.
ابنِ مسار [feature] جديدًا باستخدام TanStack Router. ضمّن بنية مجلد الميزة، والتحميل الكسول، وSuspense، وخدمة API، وhooks، والأنواع.
راجع كود الواجهة الأمامية هذا للتأكد من توافقه مع الإرشادات. أعد تنظيم حالات التحميل، وتحميل المسارات، وتنسيق MUI، والاستيرادات، وأنواع TypeScript، ومشكلات الأداء.
المؤلف
diet103الترخيص
MIT
مراجعة Skillstore
r1
تنبيه الإصدار
لم يعلن المؤلف عن إصدار.
مرجع
72d5025b022c77f7a51bdf5c1637c689c80e89d1
حداثة الصيانة
١٨/٧/٢٠٢٦
الاستخدام
6 تنزيلات · 215 مشاهدات
إنشاء مهارات Claude Code بشكل موثوق
قد يكون بناء المهارات عرضة للأخطاء عندما تكون المشغلات والخطافات والقواعد موزعة عبر الملفات. توفر هذه المهارة إرشادات منظمة لإنشاء مهارات Claude Code واختبارها واستكشاف مشكلاتها وإصلاحها.
إضافة تتبع أخطاء Sentry
تحتاج فرق التطبيقات إلى رؤية متسقة للأخطاء عبر الخدمات. تمنح هذه المهارة Claude وCodex وClaude Code أنماط Sentry v8 عملية للالتقاط والسياق ومراقبة الأداء.
بناء خدمات خلفية متسقة باستخدام Node
غالبا ما تواجه فرق الواجهة الخلفية صعوبة مع عدم اتساق المسارات والخدمات والتحقق والمراقبة. توفر هذه المهارة أنماطا عملية لخدمات Node.js منظمة.
اختبار المسارات المصادق عليها بأمان
قد يفشل اختبار المسارات المصادق عليها عندما تكون الرموز المميزة وملفات تعريف الارتباط وبادئات المسارات غير واضحة. توفر هذه المهارة أنماطًا محلية قابلة للتكرار لفحوصات API، وmock auth، والتحقق من الاستجابات.
إنشاء ميزات واجهة أمامية جاهزة للإنتاج
بواسطة davila7
تحتاج فرق الواجهة الأمامية إلى إرشادات متسقة حول React وNext.js عبر المشاريع. توفر هذه المهارة سير عمل مرجعيًا وممارسات للجودة وبرامج نصية مساعدة لتحليل الواجهة الأمامية.
تنفيذ React View Transitions
بواسطة vercel-labs
من السهل وضع انتقالات عرض React في المكان غير المناسب، مما يؤدي إلى رسوم متحركة صامتة أو مزعجة. ترشد هذه المهارة اختيارات الرسوم المتحركة للمسارات وSuspense والقوائم والعناصر المشتركة.
بناء مكونات React آمنة الأنواع
بواسطة softaworks
غالبا ما يتطلب العمل على React TypeScript أنواعا دقيقة للأحداث والـ hooks والمسارات. توفر هذه المهارة أنماطا مركزة للمكونات المكتوبة الأنواع، وواجهات React 19 API، والتوجيه.
تحسين مكونات Vue Options API
بواسطة vuejs-ai
يمكن لمشاريع Vue Options API أن تفقد أمان الأنواع والربط الصحيح لـ this. توفر هذه المهارة أنماطًا مباشرة لمكونات Vue أكثر أمانًا.
تحسين أداء React و Next.js
بواسطة vercel-labs
غالبا ما تفقد تطبيقات React و Next.js سرعتها بسبب waterfalls، والحزم الكبيرة، وعمليات إعادة التصيير التي يمكن تجنبها. تمنح هذه المهارة الوكلاء قواعد ملموسة لإجراء تغييرات أكثر أمانا تركز على الأداء.
بناء تطبيقات React و Next.js حديثة
بواسطة sickn33
غالبا ما تحتاج مشاريع React و Next.js إلى اختيارات إعداد متسقة عبر التوجيه، والمكونات، والتنسيق، والبيانات، والنماذج، والاختبارات، والنشر. تمنح هذه المهارة Claude و Codex و Claude Code سير عمل قائمًا على مراحل لتخطيط وبناء تطبيقات واجهة أمامية حديثة.