Skills react-19-patterns

📦

react-19-patterns

Name: react-19-patterns
Author: Barnhardt-Enterprises-Inc

Content revision r1 Medium Risk ⚡ Contains scripts🌐 Network access📁 Filesystem access⚙️ External commands🔑 Env variables

Build React 19 Patterns Correctly

React 19 changes how teams use components, hooks, Server Actions, Suspense, and streaming. This skill gives Claude, Codex, and Claude Code practical patterns for correct TypeScript implementations.

Supports: Claude Codex Code(CC)

📊 70 Adequate

Install with my Agent

Copy this request to your Agent. It includes the canonical Skill page and manifest.

Agent request

Review the Skillstore skill "react-19-patterns" from https://skillstore.io/skills/barnhardt-enterprises-inc-react-19-patterns.md and its manifest at https://skillstore.io/api/skills/barnhardt-enterprises-inc-react-19-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.

Markdown detail GET /skills/barnhardt-enterprises-inc-react-19-patterns.md Signed manifest GET /api/skills/barnhardt-enterprises-inc-react-19-patterns/manifest Signed lockfile GET /api/skills/barnhardt-enterprises-inc-react-19-patterns/lockfile

Test it

Using "react-19-patterns". A product page fetches data, filters results, and opens a cart drawer.

Expected outcome:

The response separates product data into a Server Component and moves filter state and the cart drawer into small Client Components.

Using "react-19-patterns". A form needs optimistic updates and server-side persistence.

Expected outcome:

The response recommends useOptimistic for immediate feedback, useActionState for server result state, and useFormStatus for pending submit controls.

Using "react-19-patterns". A React 18 app still uses legacy rendering and string refs.

Expected outcome:

The response lists migration steps for root rendering, ref replacement, hook checks, and validation with the included React pattern validator.

Security Audit

Medium Risk

v8 • 7/6/2026 Open versioned report

Static analysis reported many command, script, network, environment, and sensitive-file patterns, but review found almost all are Markdown React examples or benign validator text. No prompt injection, obfuscation, credential exfiltration, or malicious runtime behavior was found. One documentation example should be fixed because it reads a route-derived file path without showing path traversal defenses.

Files scanned

8,098

Lines analyzed

Review items

False positives ignored

Confirmed security concerns (1)

Medium

server-vs-client.md:179-180

Path Traversal-Prone File Read Example

The documentation builds a Markdown file path from params.slug and reads it without demonstrating normalization, allowlisting, or directory containment.

The file path is directly composed from a route parameter before fs.readFile. The risk is in copyable guidance, not in current skill execution, so confidence is high but not absolute.

Capability review items (1)

These are real local capabilities that may be expected for this skill, so they require review but are not counted as confirmed malicious behavior.

Medium

server-vs-client.md:180

Node.js fs operations

const content = await fs.readFile(filePath, 'utf-8')

The example reads a file path built from params.slug without showing normalization or directory containment. If copied directly, a crafted slug could lead to path traversal or unintended file disclosure.

Risk Factors

⚡ Contains scripts (4)

client-components-complete.md:850 client-components-complete.md:871 client-components-complete.md:916 suspense-patterns.md:412

🌐 Network access (46)

📁 Filesystem access (2)

client-components-complete.md:501 server-vs-client.md:180

⚙️ External commands (50)

hooks-complete.md:477-508 hooks-complete.md:811-815 hooks-complete.md:1038-1054 hooks-complete.md:1074-1104 hooks-complete.md:1284-1294 server-components-complete.md:135-156 server-components-complete.md:358-360 server-components-complete.md:360-383 server-components-complete.md:415-426 server-vs-client.md:156-167 server-vs-client.md:179-190 server-vs-client.md:374-385 server-vs-client.md:385-390 server-vs-client.md:546-562 SKILL.md:33 SKILL.md:34 SKILL.md:35 SKILL.md:36 SKILL.md:37 SKILL.md:44-50 SKILL.md:50-53 SKILL.md:53-63 SKILL.md:63-66 SKILL.md:66-87 SKILL.md:87-105 SKILL.md:105-136 SKILL.md:136-141 SKILL.md:141-144 SKILL.md:144-147 SKILL.md:147-158 SKILL.md:158-161 SKILL.md:161-165 SKILL.md:165-168 SKILL.md:168-173 SKILL.md:173-176 SKILL.md:176-181 SKILL.md:181-184 SKILL.md:184-192 SKILL.md:192-196 SKILL.md:196-198 SKILL.md:198-207 SKILL.md:207-235 SKILL.md:235-236 SKILL.md:236-237 SKILL.md:237-238 streaming-patterns.md:265-282 streaming-patterns.md:333-346 streaming-patterns.md:630-642 transitions.md:75-78 transitions.md:288-311

🔑 Env variables (14)

server-components-complete.md:237 server-components-complete.md:360 server-components-complete.md:391 server-components-complete.md:415 server-components-complete.md:237 server-components-complete.md:360 server-components-complete.md:391 server-components-complete.md:415 server-components-complete.md:360 server-components-complete.md:237 server-components-complete.md:391 server-vs-client.md:152 server-vs-client.md:152 server-vs-client.md:152

Audited by: codex View Audit History →

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.

Open versioned report

Copy report link

https://skillstore.io/skills/barnhardt-enterprises-inc-react-19-patterns/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown badge

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

HTML badge

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

Embed card

<iframe src="https://skillstore.io/embed/skills/barnhardt-enterprises-inc-react-19-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

Barnhardt-Enterprises-Inc. (2026). react-19-patterns security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/barnhardt-enterprises-inc-react-19-patterns/audits/8

BibTeX citation

@techreport{barnhardt-enterprises-inc-barnhardt-enterprises-inc-react-19-patterns-2026,
  author = {Barnhardt-Enterprises-Inc},
  title = {react-19-patterns security audit report (audit version 8)},
  institution = {Skillstore},
  year = {2026},
  number = {8},
  url = {https://skillstore.io/skills/barnhardt-enterprises-inc-react-19-patterns/audits/8},
  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-19-patterns security audit report (audit version 8)"
version: "unspecified"
type: report
authors:
  - name: "Barnhardt-Enterprises-Inc"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/barnhardt-enterprises-inc-react-19-patterns/audits/8"
identifiers:
  - type: other
    value: "skillstore:barnhardt-enterprises-inc-react-19-patterns:audit:8"
    description: "Skillstore immutable audit report identifier"

Skillstore Score

Why this score Evidence Confidence: High

Architecture

Maintainability

Content

Community

Spec Compliance

What You Can Build

Plan a New React 19 Feature

Choose the right component type, hook pattern, Suspense boundary, and data-loading approach before implementation.

Review Component Architecture

Check whether a React codebase separates server data work from client interactivity and state management.

Migrate From React 18

Identify legacy APIs, update rendering patterns, and introduce React 19 features in controlled steps.

Try These Prompts

Choose Component Type

Using the React 19 patterns skill, decide whether this component should be a Server Component or Client Component. Explain the reason and list required changes.

Fix Hook Usage

Review this React component for Rules of Hooks issues, missing dependency arrays, and invalid React 19 patterns. Give a concise fix plan.

Design Suspense Flow

Design a React 19 Suspense and streaming structure for this page. Include boundary placement, fallback behavior, and data-loading order.

Migrate Complex App

Create a React 18 to React 19 migration plan for this application. Cover removed APIs, Server Components, Server Actions, transitions, and validation steps.

Best Practices

Default to Server Components unless the component needs browser APIs, state, effects, or event handlers.
Keep Client Components small and pass serializable props from server-rendered parents.
Place Suspense boundaries around meaningful loading units and avoid unnecessary nested boundaries.

Avoid

Do not make Client Components async for data fetching.
Do not call hooks inside conditions, loops, or regular helper functions.
Do not copy example secret names or API calls without reviewing your security model.