المهارات frontend-nextjs-app-router

📦

frontend-nextjs-app-router

Name: frontend-nextjs-app-router
Author: Awais68

مخاطر متوسطة

بناء ميزات Next.js App Router

غالبا ما يتطلب العمل على Next.js App Router ضبطا صحيحا للتوجيه والتخطيطات وحدود المكونات. توفر هذه المهارة إرشادات موجهة لبناء الصفحات والمسارات الديناميكية ولوحات المعلومات والبيانات الوصفية وحالات التحميل ومعالجات المسارات.

يدعم: Claude Codex Code(CC)

⚠️ 50 ضعيف

تنزيل ZIP المهارة

رفع في Claude

اذهب إلى Settings → Capabilities → Skills → Upload skill

فعّل وابدأ الاستخدام

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

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

تفاصيل Markdown GET /skills/awais68-frontend-nextjs-app-router.md manifest موقَّع GET /api/skills/awais68-frontend-nextjs-app-router/manifest lockfile موقَّع GET /api/skills/awais68-frontend-nextjs-app-router/lockfile

اختبرها

جارٍ استخدام "frontend-nextjs-app-router". أنشئ مسار تفاصيل دورة لـ /courses/[courseId].

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

ستصف النتيجة بنية app/courses/[courseId]/page.tsx وتوليد البيانات الوصفية ومعالجة المعاملات وسلوك not-found ومسؤوليات تحميل البيانات.

جارٍ استخدام "frontend-nextjs-app-router". أضف رسوم analytics البيانية إلى لوحة معلومات المسؤول.

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

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

جارٍ استخدام "frontend-nextjs-app-router". راجع بنية مجلد لوحة المعلومات الخاصة بي.

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

ستحدد النتيجة مشكلات التوجيه والتخطيطات المفقودة وحدود العميل غير الصحيحة وفحوصات الإنتاج مثل auth والتحقق وإمكانية الوصول.

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

مخاطر متوسطة

v7 • 6/28/2026

Static analysis reported many severe patterns, but review found they are almost entirely Markdown and TypeScript documentation false positives. No malicious intent, prompt injection, executable scripts, credential collection, or data exfiltration was found. The skill has medium risk because several examples can encourage under-validated server actions, route handlers, and route protection patterns.

الملفات التي تم فحصها

649

الأسطر التي تم تحليلها

النتائج

إجمالي عمليات التدقيق

مشكلات متوسطة المخاطر (2)

references/app-router-patterns.md:14-17 SKILL.md:382-385

Examples Omit Input Validation For Server-Side Mutations

TRUE POSITIVE semantic concern. Server Action and route handler examples read form or request body data and pass it to database helpers without showing validation, authorization, or error handling. The snippets are documentation, not active code, but they may lead generated applications to accept unsafe input.

references/app-router-patterns.md:117-123 SKILL.md:205-210

Simplified Route Protection Examples May Encourage Weak Auth

TRUE POSITIVE semantic concern. The middleware example only checks whether a token cookie exists before allowing protected routes. The admin page example checks a session role but does not show session integrity validation, creating a risk that users copy incomplete authorization patterns.

مشكلات منخفضة المخاطر (4)

SKILL.md:15-25 SKILL.md:391-401 references/app-router-patterns.md:7-34 references/app-router-patterns.md:170-184

External Command Findings Are Markdown False Positives

FALSE POSITIVE. The many reported Ruby or shell backtick findings come from Markdown code fences, inline route paths, JSX template literals, and TypeScript examples. I found no instruction that executes shell commands or asks the assistant to run untrusted commands.

SKILL.md:3-4 SKILL.md:31-34 SKILL.md:116-119 SKILL.md:338-341 references/app-router-patterns.md:206-209

Weak Cryptography Findings Are Text-Match False Positives

FALSE POSITIVE. The reported weak cryptographic algorithm locations contain ordinary words such as description or design-related prose, not MD5, SHA-1, DES, or cryptographic API usage. No evidence found of weak cryptography instructions.

SKILL.md:15-19 SKILL.md:173-176

Network, Storage, And Path Traversal Findings Are Benign Documentation

FALSE POSITIVE. The fetch, localStorage, and /app/.../page.tsx references describe normal Next.js and browser concepts. They do not collect credentials, access files, traverse paths, or make external network requests from the skill itself.

SKILL.md:15-22 SKILL.md:173-176 references/app-router-patterns.md:117-123

Critical Heuristic Combinations Are Not Confirmed

FALSE POSITIVE. The static heuristic combined unrelated documentation terms and examples into a dangerous pattern. Review found no credential access, exfiltration endpoint, obfuscation, executable script, or prompt injection attempt.

دقّقه: codex عرض سجل التدقيق →

درجة الجودة

الهندسة المعمارية

100

قابلية الصيانة

المحتوى

المجتمع

الأمان

الامتثال للمواصفات

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

إنشاء صفحات المنتجات

بناء صفحات App Router مع البيانات الوصفية وحالات التحميل ومعاملات المسار الديناميكية.

تنظيم مسارات لوحة المعلومات

تصميم تخطيطات متداخلة ومجموعات مسارات وشاشات لوحة معلومات مخصصة للأدوار لتطبيق تعليمي أو تطبيق ERP.

مراجعة حدود المكونات

تحديد وقت استخدام Server Components وClient Components وSuspense ومكتبات الرسوم البيانية من جهة العميل.

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

إنشاء صفحة أساسية

أنشئ صفحة Next.js App Router للوحة معلومات. استخدم Server Component افتراضيا، وأضف البيانات الوصفية، وضمّن حالة تحميل إذا تم جلب البيانات.

إضافة مسار ديناميكي

ابن مسار App Router ديناميكيا لملفات الطلاب الشخصية. ضمّن معالجة params وgenerateMetadata وحالة not-found وبنية مجلدات واضحة.

تصميم لوحات معلومات حسب الأدوار

صمم مسارات لوحة معلومات للمسؤول والمعلم والطالب باستخدام التخطيطات ومجموعات المسارات وServer Components وClient Components عند الحاجة.

تدقيق ميزة App Router

راجع تنفيذ App Router هذا من حيث صحة التوجيه وحدود المكونات والبيانات الوصفية وحالات التحميل وإمكانية الوصول والتحقق أو التفويض المفقود.

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

استخدم Server Components افتراضيا وأضف Client Components فقط من أجل browser APIs أو hooks أو التفاعل.
اربط المسارات الديناميكية بالبيانات الوصفية ومعالجة not-found والتحقق الصريح من المعاملات.
عامل أمثلة auth ومقتطفات التعديل كنقاط بداية تحتاج إلى فحوصات أمان إنتاجية.

تجنب

وضع use client في أعلى أشجار مسارات كبيرة دون حاجة محددة للتفاعل.
نسخ route handlers أو Server Actions دون التحقق من المدخلات وفحص التفويض.
استخدام تخطيطات أو قوالب أو مسارات متوازية متداخلة عندما تكون بنية صفحة بسيطة كافية.