zustand-store-ts
Construye Stores Zustand Type-Safe para React
Gestionar el estado de React con tipos de TypeScript y middleware adecuados es complejo. Esta skill proporciona patrones probados para crear stores Zustand mantenibles con subscribeWithSelector y clara separación de estado/acciones.
Descargar el ZIP de la skill
Subir en Claude
Ve a Configuración → Capacidades → Skills → Subir skill
Activa y empieza a usar
Pruébalo
Usando "zustand-store-ts". Create a counter store with increment, decrement, and reset actions
Resultado esperado:
Una interfaz de store TypeScript con estado count y tres métodos de acción, más la implementación create() con middleware subscribeWithSelector envuelto alrededor de la definición del store.
Usando "zustand-store-ts". How do I subscribe to only the userId change?
Resultado esperado:
Usa store.subscribe((state) => state.userId, (id) => console.log(id)) para recibir callbacks solo cuando userId cambia, evitando ejecuciones innecesarias para otras actualizaciones de estado.
Auditoría de seguridad
SeguroStatic analysis flagged 19 patterns (14 external_commands, 5 blocker/crypto), but all are false positives. The backticks detected are markdown code fence delimiters for TypeScript examples, not shell execution. The cryptographic warnings reference 'subscribeWithSelector' text patterns, not actual crypto algorithms. This is a documentation-only skill with code examples for Zustand state management.
Puntuación de calidad
Lo que puedes crear
Desarrollador React Construyendo Estado Global
Crea un nuevo store Zustand para gestionar el estado a nivel de aplicación como sesiones de usuario, temas o feature flags con completo soporte TypeScript.
Equipo Estandarizando Patrones de Estado
Establece patrones de store consistentes en toda la codebase con escritura adecuada, uso de middleware y mejores prácticas de suscripción.
Migrando de Redux a Zustand
Convierte stores Redux existentes a stores Zustand ligeros manteniendo los tipos TypeScript y optimizando los re-renders.
Prueba estos prompts
Crea una plantilla de store Zustand para un carrito de compras con array de items y cálculo de precio total. Usa TypeScript e incluye el middleware subscribeWithSelector.
Genera un store de usuario con acciones de login y logout asíncronas. Incluye interfaces TypeScript adecuadas para estado y acciones, con estados de loading y error.
Crea un store de gestión de proyectos con tareas, filtros y selectores computados. Muestra cómo usar selectores individuales para prevenir re-renders innecesarios.
Muestra cómo suscribirse a cambios del store fuera de componentes React para logging o integración con sistemas externos como analytics.
Mejores prácticas
- Siempre envuelve stores con middleware subscribeWithSelector para suscripciones granulares
- Define interfaces separadas para estado y acciones, luego combínalas para el tipo del store
- Usa funciones selector en componentes para suscribirte solo a las porciones de estado necesarias
Evitar
- Destructurar todo el store en componentes causa re-renders en cualquier cambio de estado
- Crear stores sin interfaces TypeScript pierde los beneficios de type safety
- Suscribirse a todo el objeto de estado cuando solo se necesita una propiedad