Habilidades react-zustand-patterns

📦

react-zustand-patterns

Name: react-zustand-patterns
Author: CJHarmath

Revisão do conteúdo r1 Seguro ⚙️ Comandos externos🌐 Acesso à rede

Melhore padrões de stores React Zustand

Equipes React podem enfrentar bugs de estado obsoleto, temporização de renderização e ações assíncronas ao usar Zustand. Esta skill fornece padrões diretos para stores, seletores, estado derivado, testes, depuração e persistência.

Suporta: Claude Codex Code(CC)

🥉 78 Bronze

Instalar com meu Agente

Copie esta solicitação para o seu Agente. Ela inclui a página canônica do Skill e o manifesto.

Solicitação do agente

Review the Skillstore skill "react-zustand-patterns" from https://skillstore.io/skills/cjharmath-react-zustand-patterns.md and its manifest at https://skillstore.io/api/skills/cjharmath-react-zustand-patterns/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

Seu Agente ainda deve apresentar o plano e solicitar qualquer confirmação exigida pela política de segurança.

Recursos legíveis por agentes

Use estes links quando um agente de IA, crawler ou script precisar de contexto limpo em vez de ler a página completa.

Detalhe em Markdown GET /skills/cjharmath-react-zustand-patterns.md manifest assinado GET /api/skills/cjharmath-react-zustand-patterns/manifest lockfile assinado GET /api/skills/cjharmath-react-zustand-patterns/lockfile

Testar

Usando "react-zustand-patterns". Um componente lê um valor de count imediatamente após uma ação de incremento.

Resultado esperado:

A resposta explica que o estado da store é atualizado imediatamente, enquanto a visualização do componente muda depois que o React conclui sua próxima renderização.

Usando "react-zustand-patterns". Uma ação assíncrona lê dados capturados após uma operação de salvamento atrasada.

Resultado esperado:

A resposta recomenda ler os dados atuais da store após o atraso e então atualizar o estado a partir desse valor atual.

Usando "react-zustand-patterns". Um selector retorna um novo objeto em cada renderização.

Resultado esperado:

A resposta explica por que isso pode causar renderizações extras e sugere padrões de seletores estáveis para a versão instalada do Zustand.

Auditoria de segurança

Seguro

v7 • 06/07/2026 Abrir o relatório versionado

All static findings are false positives caused by Markdown code fences, inline code, and illustrative Zustand examples. The skill contains guidance text only; no executable shell commands or live network behavior were found in SKILL.md. No prompt injection language or suspicious intent was identified.

Arquivos analisados

357

Linhas analisadas

Itens de revisão

Falsos positivos ignorados

A auditoria estática e semântica concluída mais recente não detectou achados de segurança confirmados. Isso não comprova que a skill não tenha efeitos colaterais.

Auditado por: codex Ver histórico de auditoria →

Compartilhar e citar este relatório

Compartilhe o relatório de avaliação versionado, o badge neutro, o cartão incorporável e as citações. A Skillstore apresenta evidências sem decidir se este Skill é seguro.

Abrir o relatório versionado

Copiar link do relatório

https://skillstore.io/skills/cjharmath-react-zustand-patterns/audits/7?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Badge Markdown

[![Skillstore security assessment](https://skillstore.io/badges/skills/cjharmath-react-zustand-patterns/security.svg)](https://skillstore.io/skills/cjharmath-react-zustand-patterns?utm_source=security_passport_badge)

Badge HTML

<a href="https://skillstore.io/skills/cjharmath-react-zustand-patterns?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/cjharmath-react-zustand-patterns/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

Cartão incorporável

<iframe src="https://skillstore.io/embed/skills/cjharmath-react-zustand-patterns.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>

Citações acadêmicas (APA · BibTeX · CFF)

Citação APA

CJHarmath. (2026). react-zustand-patterns security audit report (audit version 7) [Author version unspecified]. Skillstore. https://skillstore.io/skills/cjharmath-react-zustand-patterns/audits/7

Citação BibTeX

@techreport{cjharmath-cjharmath-react-zustand-patterns-2026,
  author = {CJHarmath},
  title = {react-zustand-patterns security audit report (audit version 7)},
  institution = {Skillstore},
  year = {2026},
  number = {7},
  url = {https://skillstore.io/skills/cjharmath-react-zustand-patterns/audits/7},
  note = {Author version unspecified}
}

CITATION.cff

cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "react-zustand-patterns security audit report (audit version 7)"
version: "unspecified"
type: report
authors:
  - name: "CJHarmath"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/cjharmath-react-zustand-patterns/audits/7"
identifiers:
  - type: other
    value: "skillstore:cjharmath-react-zustand-patterns:audit:7"
    description: "Skillstore immutable audit report identifier"

Pontuação do Skillstore

Por que esta pontuação Confiança das evidências: Alto

Arquitetura

Manutenibilidade

Conteúdo

Comunidade

Conformidade com a especificação

O que você pode criar

Depurar estado React obsoleto

Use os padrões de temporização para explicar por que os valores da store são atualizados antes que os componentes sejam re-renderizados.

Projetar ações assíncronas de store

Use a orientação sobre ações assíncronas para tornar estados de loading, dados e erro mais fáceis de raciocinar.

Revisar migrações Zustand

Use as notas sobre seletores e migração ao mover stores do Zustand 4.x para 5.x.

Teste estes prompts

Explicar temporização da store

Explique por que meu componente React ainda mostra o estado antigo do Zustand depois que eu chamo set. Mantenha a explicação prática.

Corrigir closures obsoletas

Revise esta ação Zustand em busca de problemas de closure obsoleta após await. Sugira onde get ou getState deve ser usado.

Melhorar seletores

Revise meus seletores Zustand em busca de re-renderizações desnecessárias. Recomende múltiplos seletores, comparação shallow ou useShallow quando apropriado.

Auditar arquitetura da store

Audite este design de store Zustand em busca de corridas assíncronas, estado derivado, estabilidade de seletores, limites de persistência e estratégia de reset em testes.

Boas práticas

Leia o estado atual da store após await quando a correção depender de valores recentes.
Mantenha valores derivados em seletores, a menos que armazená-los evite trabalho repetido real.
Redefina explicitamente o estado da store em testes antes de cada caso.

Evitar

Não presuma que um componente React foi re-renderizado imediatamente após uma atualização da store.
Não retorne novos objetos de selector sem comparação shallow ou useShallow.
Não persista uma store inteira quando apenas uma pequena fatia de estado é necessária.

Perguntas frequentes

Esta skill executa código?

Não. Ela fornece orientação e exemplos para uso do Zustand.

Ela oferece suporte a React Native?

Sim. Os padrões centrais do Zustand se aplicam ao React web e ao React Native.

Ela pode ajudar com Zustand 5.x?

Sim. Ela inclui notas sobre mudanças em seletores shallow no Zustand 5.x.

Ela pode depurar bugs de estado obsoleto?

Sim. Ela explica temporização de renderização, closures e leituras do estado atual.

Ela substitui a documentação do Zustand?

Não. Ela se concentra em padrões e armadilhas comuns, não em todos os detalhes da API.

Ela é útil para testes?

Sim. Ela descreve padrões de reset e assertions de stores assíncronas.

Detalhes do desenvolvedor

Autor

CJHarmath

Licença

MIT

Revisão da Skillstore

Aviso de versão

O autor não declarou uma versão.

Repositório

https://github.com/CJHarmath/claude-agents-skills/tree/main/skills/react-zustand-patterns

Referência

dd4a3ef9f20ddf38830950b4bb713df96b431fd6

Atualidade da manutenção

23/07/2026

Uso

9 downloads · 249 visualizações

Estrutura de arquivos

📄 SKILL.md

react-zustand-patterns

Instalar com meu Agente

Recursos legíveis por agentes

Testar

Auditoria de segurança

Fatores de risco

Copiar link do relatório

Badge Markdown

Badge HTML

Cartão incorporável

Citação APA

Citação BibTeX

CITATION.cff

Pontuação do Skillstore

O que você pode criar

Depurar estado React obsoleto

Projetar ações assíncronas de store

Revisar migrações Zustand

Teste estes prompts

Boas práticas

Evitar

Perguntas frequentes

Detalhes do desenvolvedor