Habilidades react-patterns
📦

react-patterns

Seguro

Master React development patterns and best practices

Build production-ready React applications with confidence. Learn proven patterns for hooks, state management, and component design.

Soporta: Claude Codex Code(CC)
🥉 74 Bronce
1

Descargar el ZIP de la skill

2

Subir en Claude

Ve a Configuración → Capacidades → Skills → Subir skill

3

Activa y empieza a usar

Pruébalo

Usando "react-patterns". When should I use Context versus a global store like Zustand?

Resultado esperado:

Use Context for local shared state within a component subtree like theme or locale. Use Zustand for app-wide state that needs devtools, persistence, or is accessed across many unrelated components. Context is built-in but can cause re-renders; Zustand offers better performance for frequent updates.

Usando "react-patterns". Is this useEffect necessary for fetching data on mount?

Resultado esperado:

In React 19, prefer server components or data-fetching libraries like React Query over useEffect for data fetching. useEffect is appropriate for subscriptions or non-data side effects. For data, use libraries that handle caching, deduplication, and error states automatically.

Auditoría de seguridad

Seguro
v1 • 2/24/2026

All 6 static analyzer findings are false positives. The SKILL.md file is educational documentation about React patterns, not executable code. Pattern matches on words like 'useLocalStorage' and section headings triggered false alarms. No actual security risks detected.

1
Archivos escaneados
204
Líneas analizadas
0
hallazgos
1
Auditorías totales
No se encontraron problemas de seguridad
Auditado por: claude

Puntuación de calidad

38
Arquitectura
100
Mantenibilidad
87
Contenido
50
Comunidad
100
Seguridad
91
Cumplimiento de la especificación

Lo que puedes crear

React Developer Onboarding

Help new team members learn your React architecture patterns and coding standards quickly.

Component Refactoring Guidance

Get recommendations for breaking down large components and applying proper hook patterns.

State Management Decisions

Determine the right state solution from useState to global stores based on your needs.

Prueba estos prompts

Basic Hook Pattern 
Explain when to extract a custom hook in React. Show the useLocalStorage pattern with example code.
Component Design Review 
Review this React component and suggest improvements based on component design principles. Identify if it should be split into smaller components.
State Management Selection 
I have an app with user auth, theme preferences, and real-time notifications. Recommend a state management approach and explain why.
React 19 Migration 
Explain how React 19 compiler affects memoization patterns. Show which useMemo and useCallback calls can be removed.

Mejores prácticas

  • Profile performance before optimizing - measure actual bottlenecks first
  • Prefer composition over inheritance - build small, focused components
  • Use stable unique keys instead of array indices for list rendering

Evitar

  • Deep prop drilling - use Context or component composition instead
  • Giant components with multiple responsibilities - split into smaller units
  • Using useEffect for everything - leverage server components where appropriate

Preguntas frecuentes

When should I extract a custom hook?
Extract a custom hook when the same logic pattern appears in multiple components, when you need to reuse stateful logic, or when component code becomes hard to read due to hook complexity.
Should I use Redux or Context for my app?
Start with Context for simple shared state. Use Redux or Zustand when you need devtools, middleware, time-travel debugging, or have complex state interactions across many components.
Are React 19 compiler features backward compatible?
React 19 requires React 19+. The compiler automates memoization but your existing useMemo and useCallback calls remain valid. You can remove unnecessary ones after upgrading.
How do I choose between useState and useReducer?
Use useState for simple values and independent state. Use useReducer when state has complex transitions, when multiple values update together, or when state logic benefits from explicit action types.
What is the compound component pattern?
Compound components work together through shared context. A parent component provides state via Context, and child components consume it. Examples include Tabs with TabList/Tab/TabPanel or Select with Option components.
When should I use error boundaries?
Place error boundaries around features that should fail independently. Use app-wide boundaries for graceful degradation, feature-level for isolated failures, and component-level for risky third-party integrations.

Detalles del desarrollador

Autor

sickn33

Licencia

MIT

Repositorio

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/react-patterns

Ref.

main

Estructura de archivos

📄 SKILL.md