المهارات frontend-developer
📦

frontend-developer

مراجعة المحتوى r2 آمن

بناء واجهات React أمامية حديثة

يتطلب عمل الواجهات الأمامية الحديثة واجهات سريعة، ومكونات قابلة للوصول، وأنماط حالة موثوقة. ترشد هذه المهارة تنفيذ React وNext.js مع فحوصات الأداء والاختبار وتجربة المستخدم.

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

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

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

طلب الوكيل
Review the Skillstore skill "frontend-developer" from https://skillstore.io/skills/sickn33-frontend-developer.md and its manifest at https://skillstore.io/api/skills/sickn33-frontend-developer/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/sickn33-frontend-developer.md manifest موقَّع GET /api/skills/sickn33-frontend-developer/manifest lockfile موقَّع GET /api/skills/sickn33-frontend-developer/lockfile

اختبرها

جارٍ استخدام "frontend-developer". أنشئ جدول بيانات قابلا للوصول مع الفرز والتصفية.

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

  • خطة مكون تتضمن دلالات الجدول ودعم لوحة المفاتيح ونموذج الحالة.
  • سلوك متجاوب للشاشات الكثيفة والضيقة.
  • قائمة تحقق للاختبار باستخدام axe-core واختبارات التفاعل.

جارٍ استخدام "frontend-developer". حسن صفحة لوحة معلومات Next.js بطيئة.

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

  • تشخيص أداء يغطي حجم الحزمة وجلب البيانات والصور والتصيير.
  • إصلاحات مرتبة حسب الأولوية لـ streaming والتخزين المؤقت وdynamic imports وحالات التحميل.
  • خطوات تحقق لـ Lighthouse وCore Web Vitals.

جارٍ استخدام "frontend-developer". ابن زر نظام تصميم لتطبيق TypeScript React.

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

  • نموذج variants وأحجام متوافق مع design tokens.
  • حالات تفاعل قابلة للوصول للتركيز والتعطيل والتحميل وسلوك الضغط.
  • خطة تغطية Storybook واختبارات الوحدة.

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

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

Both low-severity static alerts are false positives caused by unrelated CSS layout and browser testing text. No malicious intent or semantic security issue was found.

1
الملفات التي تم فحصها
175
الأسطر التي تم تحليلها
0
عناصر المراجعة
0
تم تجاهل الإيجابيات الكاذبة
لم يكتشف أحدث تدقيق ثابت ودلالي مكتمل أي نتائج أمنية مؤكدة. ولا يثبت ذلك أن المهارة خالية من الآثار الجانبية.
دقّقه: codex عرض سجل التدقيق →
شارك واستشهد بهذا التقرير

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

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

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

https://skillstore.io/skills/sickn33-frontend-developer/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

شارة Markdown

[![Skillstore security assessment](https://skillstore.io/badges/skills/sickn33-frontend-developer/security.svg)](https://skillstore.io/skills/sickn33-frontend-developer?utm_source=security_passport_badge)

شارة HTML

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

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

<iframe src="https://skillstore.io/embed/skills/sickn33-frontend-developer.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

sickn33. (2026). frontend-developer security audit report (audit version 5) [Author version unspecified]. Skillstore. https://skillstore.io/skills/sickn33-frontend-developer/audits/5

اقتباس BibTeX

@techreport{sickn33-sickn33-frontend-developer-2026, author = {sickn33}, title = {frontend-developer security audit report (audit version 5)}, institution = {Skillstore}, year = {2026}, number = {5}, url = {https://skillstore.io/skills/sickn33-frontend-developer/audits/5}, 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-developer security audit report (audit version 5)" version: "unspecified" type: report authors: - name: "sickn33" date-released: "2026-07-23" url: "https://skillstore.io/skills/sickn33-frontend-developer/audits/5" identifiers: - type: other value: "skillstore:sickn33-frontend-developer:audit:5" description: "Skillstore immutable audit report identifier"

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

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

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

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

أعلى تقييم في Skillstore
sickn33 موصى به الحالي

sickn33-frontend-developer

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

2026-09-09

zl2023github

zl2023github-frontend-developer

تقييم Skillstore 69
موثوقية الأدلة متوسط
استخدام Skillstore 5
تم التحديث

2026-09-09

تقييم Skillstore

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

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

إطلاق ميزة Next.js

خطط ونفذ صفحات App Router مع server components وتفاعلات العميل وحالات التحميل وبنية المسارات.

تحسين أداء واجهة المستخدم

حدد مشكلات التصيير والحزم والصور والتخزين المؤقت وCore Web Vitals، ثم رتب الإصلاحات العملية حسب الأولوية.

تعزيز إمكانية الوصول للمكونات

راجع المكونات من حيث semantic HTML وتدفق لوحة المفاتيح واستخدام ARIA وإدارة التركيز ومتطلبات التباين.

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

إنشاء مكون متجاوب 
ابن مكون React متجاوبا لـ [feature]. ضمّن props والحالات وملاحظات إمكانية الوصول ونهج التنسيق للجوال وسطح المكتب.
إعادة هيكلة واجهة مستخدم موجودة 
راجع مكون React هذا من حيث قابلية القراءة ومعالجة الحالة وإمكانية الوصول. اقترح تغييرات مركزة قبل التحرير: [paste component].
تحسين صفحة Next.js 
حلل صفحة Next.js App Router هذه من حيث Core Web Vitals وجلب البيانات وstreaming والتخزين المؤقت. قدم إصلاحات مرتبة حسب الأولوية: [page context].
تصميم بنية الواجهة الأمامية 
خطط بنية الواجهة الأمامية لـ [product area] باستخدام React 19 وNext.js 15. ضمّن استراتيجية التوجيه والحالة والاختبار والأداء.

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

  • قدم أهداف المنتج والمتصفحات المستهدفة وأولويات الأجهزة قبل طلب التنفيذ.
  • شارك اصطلاحات المكونات الحالية وdesign tokens حتى تطابق المخرجات المشروع.
  • اطلب خطوات تحقق تغطي إمكانية الوصول والأداء والاختبارات.

تجنب

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

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

ما أطر العمل التي تستهدفها هذه المهارة؟
تركز على React 19 وNext.js 15 وTypeScript وأدوات الواجهة الأمامية الشائعة.
هل يمكنها بناء مكونات React كاملة؟
نعم. قدم المتطلبات والحالات المتوقعة وشكل البيانات وقيود التصميم للحصول على أفضل النتائج.
هل تغطي إمكانية الوصول؟
نعم. تشمل semantic HTML وأنماط ARIA والتنقل بلوحة المفاتيح وإدارة التركيز وفحوصات التباين.
هل تحل محل اختبار المتصفح اليدوي؟
لا. يمكنها اقتراح اختبارات وفحوصات، لكن التحقق على الأجهزة والمتصفحات الحقيقية لا يزال مطلوبا.
هل يمكنها العمل مع نظام تصميم موجود؟
نعم. شارك tokens واصطلاحات المكونات والأمثلة حتى تتبع المخرجات الأنماط الحالية.
هل هي مخصصة لمشاريع Next.js فقط؟
لا. تدعم أيضا عمل تطبيقات React، لكنها تقدم تغطية قوية لأنماط Next.js App Router.

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

المؤلف

sickn33

الترخيص

MIT

مراجعة Skillstore

r2

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

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

المستودع

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/frontend-developer

مرجع

88a8e9a07f4c54ab105c1c41b6267c287146b07b

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

٢٦‏/٧‏/٢٠٢٦

الاستخدام

10 تنزيلات · 100 مشاهدات

بنية الملفات

📄 SKILL.md

المزيد من sickn33

عرض الكل

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

عرض الكل
📦

playwright-testing

86

تحسين تغطية اختبارات Playwright

بواسطة C0ntr0lledCha0s

يمكن أن تصبح مجموعات اختبارات Playwright غير مستقرة عندما تكون الإعدادات والمحددات وfixtures غير متسقة. تمنحك هذه المهارة أنماطًا عملية لاختبارات متصفح موثوقة، وتصحيح الأخطاء، وكائنات صفحات قابلة لإعادة الاستخدام.

البرمجة والتطوير عرض