frontend-dev-guidelines
Aplicar directrices de frontend React TypeScript
متاح أيضًا من: BrianDai22,BOM-98,0Chan-smc,DojoCodingLabs,sickn33,Dimon94,0Chan-smc
Los proyectos de frontend a menudo carecen de patrones consistentes, lo que lleva a problemas de mantenimiento y errores. Esta skill proporciona directrices completas para aplicaciones React y TypeScript, incluyendo patrones modernos, organización de archivos y mejores prácticas.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "frontend-dev-guidelines". Crea un componente de perfil de usuario
النتيجة المتوقعة:
Crearé un componente de perfil de usuario siguiendo las directrices de frontend:
1. Estructura de archivos: features/user/profile/
2. Componente con interfaces TypeScript
3. Estados de carga y error usando Suspense y error boundaries
4. Obtención de datos con useSuspenseQuery
5. Componentes MUI para estilizado
استخدام "frontend-dev-guidelines". ¿Cómo debo organizar los archivos de mi proyecto React?
النتيجة المتوقعة:
Siguiendo las directrices de frontend, organiza tu proyecto React con un patrón de directorio de características:
- src/
- features/
- feature-name/
- components/
- hooks/
- types/
- utils/
- shared/
- components/
- hooks/
- types/
- routes/
- app/
Esto mantiene el código relacionado junto y promueve la reutilización.
التدقيق الأمني
آمنThis is a documentation skill containing frontend development guidelines for React and TypeScript applications. Static analysis detected code patterns within markdown documentation files. All findings are false positives as the patterns are code examples in documentation, not executable code. No security concerns identified.
درجة الجودة
ماذا يمكنك بناءه
Configuración de nuevo proyecto React
Establecer patrones y estructura consistentes al iniciar un nuevo proyecto React TypeScript con directrices para todo el equipo
Revisión de código y aseguramiento de calidad
Revisar código frontend existente contra directrices establecidas para identificar áreas de mejora y consistencia
Aprender patrones modernos de React
Aprender mejores prácticas actuales para desarrollo React incluyendo Suspense, obtención de datos y organización de componentes
جرّب هذه الموجهات
Crea un nuevo componente React siguiendo las directrices de frontend. El componente debe usar TypeScript, incluir tipos apropiados, manejar estados de carga y error, y seguir los patrones de organización de archivos.
Implementa la obtención de datos para una característica usando TanStack Query con manejo apropiado de errores, estados de carga y gestión de caché siguiendo las directrices.
Configura rutas para una nueva característica usando TanStack Router incluyendo rutas anidadas, parámetros y estructura de archivos apropiada siguiendo las directrices.
Revisa el siguiente código React TypeScript contra las directrices de frontend. Identifica áreas que necesitan mejora y sugiere cambios específicos para alinearse con las mejores prácticas.
أفضل الممارسات
- Usar interfaces TypeScript para todas las props de componentes y tipos de datos para garantizar seguridad de tipos en toda la aplicación
- Organizar código por característica usando el patrón de directorio de características en lugar de agrupar por tipo de archivo
- Implementar estados de carga y error usando React Suspense y error boundaries para una experiencia de usuario consistente
تجنب
- Evitar mezclar código de características no relacionadas en directorios compartidos ya que esto crea acoplamiento estrecho entre características
- No omitir definiciones de tipos TypeScript para props de componentes ya que esto lleva a errores en tiempo de ejecución
- Evitar colocar lógica de negocio directamente en componentes; extraer a hooks y utilidades para reutilización