Frontend Developer
Créez des applications React et Next.js modernes
Le développement frontend nécessise une expertise approfondie en React, en optimisation des performances et en normes d'accessibilité. Cette compétence fournit des guidages prêts pour la production pour créer des applications web évolutives avec des outils modernes et les meilleures pratiques.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "Frontend Developer". Créer un composant modal dialog accessible
النتيجة المتوقعة:
- Composant modal avec trappe de focus et navigation clavier
- Attributs ARIA pour la compatibilité avec les lecteurs d'écran
- Gestion des clics sur l'arrière-plan et fermeture avec la touche Échap
- Interface TypeScript pour les props et la configuration du modal
استخدام "Frontend Developer". Optimiser une liste de produits au rendu lent
النتيجة المتوقعة:
- Implémentation du défilement virtuel pour les grands jeux de données
- Composants de carte de produit mémoïsés avec React.memo
- Gestionnaires de recherche et de filtrage avec debounce
- Code splitting pour les composants riches en images
التدقيق الأمني
آمنThis is a prompt-only skill containing only instructional text in SKILL.md. Static analysis scanned 0 files with 0 lines of executable code and detected no security patterns. The skill provides frontend development guidance for React and Next.js without any code execution, network access, or file system operations. No malicious patterns or prompt injection attempts detected.
درجة الجودة
ماذا يمكنك بناءه
Développement de Composants React
Créez des composants React prêts pour la production avec TypeScript, une utilisation correcte des hooks et des modèles de rendu optimisés pour des applications évolutives.
Architecture d'Application Next.js
Concevez des applications full-stack Next.js avec Server Components, Server Actions et des stratégies optimales de récupération de données.
Optimisation des Performances
Analysez et améliorez les performances frontend via le code splitting, le chargement différé et les techniques d'optimisation des Core Web Vitals.
جرّب هذه الموجهات
Créez un composant bouton React réutilisable avec des props TypeScript, prenant en charge les variantes (primaire, secondaire), les tailles et l'état désactivé. Incluez les classes Tailwind CSS et les attributs d'accessibilité appropriés.
Créez un Server Component Next.js 15 qui récupère les données de produits depuis une API, implémente des limites Suspense pour le streaming, et gère gracieusement les états de chargement et d'erreur.
Implémentez un formulaire de contact utilisant Next.js Server Actions avec validation Zod, mises à jour optimistes via useOptimistic, et gestion appropriée des erreurs avec feedback utilisateur.
Analysez ce composant React pour les problèmes de performance. Identifiez les re-rendus inutiles, suggérez des stratégies de mémoïsation, et fournissez du code optimisé avec useMemo, useCallback et React.memo lorsque approprié.
أفضل الممارسات
- Incluez toujours les types TypeScript pour les props, l'état et les réponses API pour détecter les erreurs tôt
- Implémentez des états de chargement appropriés et des limites d'erreur pour toutes les opérations asynchrones
- Utilisez des éléments HTML sémantiques et des attributs ARIA pour assurer la conformité d'accessibilité
تجنب
- Évitez d'utiliser useEffect pour la récupération de données lorsque React Query ou Server Components sont disponibles
- Ne stockez pas l'état serveur dans l'état React lorsque des bibliothèques dédiées de récupération de données existent
- Ne sautez jamais les tests d'accessibilité ou ne supposez pas que le comportement HTML par défaut est suffisant