frontend-dev-guidelines
Créez des applications React en production avec des patterns modernes
متاح أيضًا من: 0Chan-smc,0Chan-smc,BrianDai22,diet103,Dimon94,DojoCodingLabs,BOM-98
Les développeurs frontend rencontrent des difficultés avec des patterns incohérents et la dette technique dans les codebases React. Cette compétence fournit des standards opinonnés pour le data fetching Suspense-first, l'architecture basée sur les features, et la discipline TypeScript.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "frontend-dev-guidelines". Créer un composant de liste de produits avec Suspense
النتيجة المتوقعة:
- Composant ProductList créé avec le hook useSuspenseQuery
- Encapsulé dans une boundary SuspenseLoader pour les états de chargement automatiques
- Interface TypeScript définie pour le type de données Product
- Layout MUI Grid avec sizing responsive utilisant la syntaxe v7
- Configuration de requête cache-first pour des performances optimales
استخدام "frontend-dev-guidelines". Comment devrais-je organiser le code de la feature d'authentification
النتيجة المتوقعة:
- Créer la structure de directory features/authentication
- Placer les appels API d'authentification dans api/authApi.ts avec des réponses typées
- Implémenter le hook useAuth dans hooks/useAuth.ts
- Exporter les interfaces publiques via les barrel exports index.ts
- Garder les composants d'authentification dans le sous-directory components/
التدقيق الأمني
آمنAll 649 static analysis findings are false positives. The skill consists entirely of Markdown documentation files containing code examples for educational purposes. Patterns like external_commands, scripts, filesystem, and network references are illustrative code snippets teaching React TypeScript development, not executable code. No actual security risks detected.
درجة الجودة
ماذا يمكنك بناءه
Développement de Nouveaux Composants React
Générer des composants React prêts pour la production suivant les patterns Suspense-first avec des types TypeScript appropriés, du lazy loading, et du styling MUI
Standardisation de Codebase
Établir des patterns architecturaux cohérents entre les équipes avec une organisation basée sur les features, TypeScript strict, et une approche de styling unifiée
Modernisation de Code Legacy
Refactoriser des composants existants pour adopter useSuspenseQuery, supprimer les conditionnels isLoading, et implémenter des boundaries de lazy loading appropriées
جرّب هذه الموجهات
Create a React component that displays user profile data. Use useSuspenseQuery for fetching, wrap with SuspenseLoader, and style with MUI sx prop. Include TypeScript types for the user data.
Set up a feature-based folder structure for a dashboard application with features: analytics, user management, and settings. Show the api, components, hooks, helpers, and types subdirectories for each feature with index.ts exports.
Implement a TanStack Router configuration for a dashboard route with lazy loading. Include a loader function that returns breadcrumb metadata and uses cache-first query strategy for initial data fetch.
Refactor this legacy component that uses useQuery with isLoading checks to use useSuspenseQuery instead. Remove all early returns and conditional loading states. Show the before and after code with explanations.
أفضل الممارسات
- Toujours utiliser useSuspenseQuery comme pattern de data fetching par défaut au lieu de useQuery avec des vérifications isLoading
- Organiser le code par domaine de feature dans le directory features plutôt que par type technique
- Lazyloder tout composant de route ou élément UI lourd comme les data grids et charts pour optimiser la taille du bundle
تجنب
- Les patterns de early return pour les états de chargement comme if isLoading return null qui cassent les boundaries Suspense
- Placer la logique métier spécifique aux features dans le directory générique components au lieu de features
- Effectuer des appels API directs dans les composants au lieu d'utiliser des couches de service API feature centralisées
الأسئلة المتكررة
Pourquoi utiliser useSuspenseQuery au lieu de useQuery ?
Quand devrais-je utiliser les styles inline versus des fichiers .styles.ts séparés ?
Puis-je utiliser cette compétence avec des codebases React 17 existantes ?
Quelles dépendances sont requises pour suivre ces guidelines ?
Comment gérer les états d'erreur avec les patterns Suspense ?
L'organisation basée sur les features est-elle adaptée aux petits projets ?
تفاصيل المطور
المؤلف
sickn33الترخيص
MIT
المستودع
https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/frontend-dev-guidelinesمرجع
main