react-patterns
Build Better React Components
React teams need consistent patterns for components, hooks, state, performance, and testing. This skill gives Claude, Codex, and Claude Code concise guidance for production React decisions.
Install with my Agent
Copy this request to your Agent. It includes the canonical Skill page and manifest.
Review the Skillstore skill "react-patterns" from https://skillstore.io/skills/sickn33-react-patterns.md and its manifest at https://skillstore.io/api/skills/sickn33-react-patterns/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Your Agent should still show its plan and request any confirmation required by the security policy.
Agent-readable resources
Use these links when an AI agent, crawler, or script needs clean context instead of reading the full page.
Test it
Using "react-patterns". A developer asks where to store filter state for a product list.
Expected outcome:
- Keep filter state in the list feature when only that route uses it.
- Lift it to a parent when sibling controls need the same value.
- Use URL state when filters must be shareable or restorable.
Using "react-patterns". A team wants to optimize a slow React table.
Expected outcome:
The skill recommends profiling first, then virtualizing large rows, memoizing expensive derived values, and avoiding broad context updates.
Using "react-patterns". A form needs modern React 19 behavior.
Expected outcome:
- Use action state for submission feedback.
- Use optimistic updates when the user should see immediate progress.
- Add error recovery that protects entered user data.
Security Audit
SafeStatic analysis found no suspicious patterns in this prompt-only skill. I found no prompt injection, data exfiltration intent, or instructions to bypass security review in SKILL.md. No remediation is required.
Share & cite this report
Share the versioned assessment report, neutral badge, embed card, and citations. Skillstore reports evidence without deciding whether this Skill is safe.
Copy report link
https://skillstore.io/skills/sickn33-react-patterns/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown badge
[](https://skillstore.io/skills/sickn33-react-patterns?utm_source=security_passport_badge)HTML badge
<a href="https://skillstore.io/skills/sickn33-react-patterns?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/sickn33-react-patterns/security.svg" alt="Skillstore security assessment" loading="lazy"></a>Embed card
<iframe src="https://skillstore.io/embed/skills/sickn33-react-patterns.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>Academic citations (APA · BibTeX · CFF)
APA citation
sickn33. (2026). react-patterns security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/sickn33-react-patterns/audits/4BibTeX citation
@techreport{sickn33-sickn33-react-patterns-2026,
author = {sickn33},
title = {react-patterns security audit report (audit version 4)},
institution = {Skillstore},
year = {2026},
number = {4},
url = {https://skillstore.io/skills/sickn33-react-patterns/audits/4},
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-patterns security audit report (audit version 4)"
version: "unspecified"
type: report
authors:
- name: "sickn33"
date-released: "2026-07-07"
url: "https://skillstore.io/skills/sickn33-react-patterns/audits/4"
identifiers:
- type: other
value: "skillstore:sickn33-react-patterns:audit:4"
description: "Skillstore immutable audit report identifier"
Skillstore Score
Why this score Evidence Confidence: HighWhat You Can Build
Plan Component Boundaries
Choose component responsibilities, prop flow, and composition patterns before implementation.
Standardize Team Decisions
Create shared guidance for state placement, hooks, error boundaries, and testing priorities.
Guide AI Pair Programming
Give an AI coding assistant React-specific rules when reviewing or planning UI work.
Try These Prompts
Help me design a React component for [feature]. Recommend component boundaries, state placement, and props.
Review this repeated React logic and suggest whether it should become a custom hook. Explain the hook API and cleanup needs.
Analyze this React view for avoidable re-renders. Prioritize profiling steps, virtualization, memoization, and callback stability.
Design a React 19 approach for [app area]. Include server and client boundaries, form actions, optimistic updates, TypeScript types, tests, and error recovery.
Best Practices
- Start with small components that have one responsibility.
- Place state at the narrowest scope that still supports the user flow.
- Profile before adding memoization or callback stabilization.
Avoid
- Using useEffect for derived values that belong in render or server data.
- Introducing global state before local or feature-level state is insufficient.
- Optimizing every component before measuring user-visible slowdowns.