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

🎨

frontend-dev-guidelines

Name: frontend-dev-guidelines
Author: BrianDai22

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

Appliquer les modèles de développement frontend React

متاح أيضًا من: BOM-98,0Chan-smc,DojoCodingLabs,sickn33,Dimon94,diet103,0Chan-smc

Les développeurs frontend ont besoin de modèles cohérents pour les composants React, la récupération de données et le routage. Cette compétence fournit des lignes directrices complètes pour construire des applications React modernes avec TypeScript, TanStack Query, TanStack Router et MUI v7.

يدعم: Claude Codex Code(CC)

📊 69 كافٍ

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

رفع في Claude

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

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

اختبرها

استخدام "frontend-dev-guidelines". Créer un composant de profil utilisateur avec récupération de données et fonctionnalité d'édition

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

• React.FC avec interface de props typée
• useSuspenseQuery pour la récupération de données avec stratégie cache-first
• useMutation pour les mises à jour avec invalidation du cache
• useCallback pour les gestionnaires d'événements
• useMemo pour les valeurs calculées
• Wrapper SuspenseLoader pour l'état de chargement
• useMuiSnackbar pour les notifications de succès/erreur
• Styling MUI v7 avec le prop sx

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

آمن

v5 • 1/16/2026

This is a documentation-only skill containing markdown files with frontend development guidelines. No executable code, no network calls, no filesystem access, no environment variable access, and no external command execution. All 676 static findings are FALSE POSITIVES - the patterns detected are from code examples in documentation, not actual security vulnerabilities.

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

5,727

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

النتائج

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

عوامل الخطر

⚙️ الأوامر الخارجية (520)

⚡ يحتوي على سكربتات (22)

📁 الوصول إلى نظام الملفات (36)

🌐 الوصول إلى الشبكة (6)

resources/data-fetching.md:269 resources/data-fetching.md:453 resources/data-fetching.md:461 resources/performance.md:224 skill-report.json:6 SKILL.md:130

تم تدقيقه بواسطة: claude عرض سجل التدقيق →

درجة الجودة

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

100

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

المحتوى

المجتمع

100

الأمان

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

ماذا يمكنك بناءه

Architecture des composants

Apprendre les modèles modernes de composants React avec TypeScript, les limites Suspense et le lazy loading

Modèles de récupération de données

Implémenter TanStack Query avec la stratégie cache-first pour une gestion efficace des données API

Guide de stylisation MUI

Appliquer les modèles de stylisation MUI v7 avec le prop sx type-safe et les mises en page responsives

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

Nouveau composant

Créer un composant React.FC qui récupère les données avec useSuspenseQuery, utilise useCallback pour les gestionnaires d'événements et enveloppe le contenu dans SuspenseLoader

Service API

Créer un fichier de service API pour une fonctionnalité avec des méthodes centralisées utilisant apiClient, des types TypeScript appropriés et des commentaires JSDoc

Configuration du routeur

Créer un routeur basé sur les dossiers avec createFileRoute, composant chargé de manière paresseuse, wrapper SuspenseLoader et chargeur de fil d'Ariane

Optimisation des performances

Optimiser ce composant en ajoutant useMemo pour les calculs coûteux, useCallback pour les gestionnaires passés aux enfants, et React.memo pour le composant lui-même

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

Utiliser le modèle React.FC<Props> avec des interfaces TypeScript explicites pour tous les composants
Envelopper les composants chargés de manière lazy dans SuspenseLoader pour éviter le décalage de mise en page
Appliquer useSuspenseQuery pour la récupération de données et useMutation pour les mises à jour avec une invalidation appropriée du cache

تجنب

Ne jamais utiliser des retours précoces avec des indicateurs de chargement qui causent un décalage de mise en page
Éviter d'utiliser le type any - utiliser des types spécifiques ou unknown avec des garde-types
Ne pas faire d'appels API directs pour l'authentification - utiliser le hook useAuth à la place

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

Quelle version de React est prise en charge ?

React 19 avec le modèle des hooks. Utiliser React.FC pour le typage des composants et React.lazy pour le fractionnement de code.

Quelle est la taille maximale du composant pour les styles en ligne ?

Garder les styles en ligne si moins de 100 lignes. Déplacer vers un fichier .styles.ts séparé lorsque les styles dépassent 100 lignes.

Comment cela s'intègre-t-il avec le code existant ?

Les alias d'importation sont configurés : @/ pour src/, ~types pour types/, ~components pour components/, ~features pour features/.

Les données utilisateur sont-elles安全 avec l'utilisation de ces modèles ?

Oui. Les modèles se concentrent sur l'UI/gestion d'état. L'authentification utilise des hooks sécurisés, les appels API utilisent des cookies HTTP-only via apiClient.

Pourquoi mon composant se restitue-t-il trop souvent ?

Ajouter useCallback pour les fonctions passées aux enfants, useMemo pour les valeurs calculées, et React.memo pour les composants coûteux.

Comment cela se compare-t-il aux modèles create-react-app ?

Les modèles modernes remplacent les modèles CRA. Utilise TanStack Router au lieu de react-router, TanStack Query au lieu de useEffect pour la récupération, et le prop sx de MUI v7 au lieu de makeStyles.