Imported from lewislpz/codex-dotfile (.codex/skills/react-patterns/SKILL.md). Install upstream with npx skills add lewislpz/codex-dotfile --skill react-patterns. Copyright stays with the author.

React Patterns

Name: react-patterns
Author: lewislpz

Boundaries

Use only after React is confirmed. Use frontend guidance for broader UX and TypeScript guidance for advanced type or tooling problems.

Operating Loop

Detect React version, rendering environment, compiler use, framework conventions, state libraries, and test setup.
Identify ownership of state, effects, async data, and errors.
Prefer composition and colocated state; extract only when reuse or complexity justifies it.
Keep effects synchronized with external systems rather than using them for derived state.
Profile before performance optimization and verify user-visible behavior.

Decision Rules

Follow the Rules of Hooks and preserve stable ownership boundaries.
Choose local, lifted, contextual, server, or global state from actual scope.
Treat memoization as a targeted optimization, especially when a compiler is active.
Provide error recovery and preserve user input where practical.
Test behavior and accessibility rather than component internals.

Optional Reference

Load legacy-guide.md for a compact pattern catalog after confirming its assumptions match the repository.

# after Install: the listing is in your workspace's routing pool - a plan picks it for its slot curl -s -X POST https://api.opensmartroute.ai/api/v1/route -H 'Authorization: Bearer $OSR_API_KEY' -H 'Content-Type: application/json' -d '{"text": "...", "plan": true}'

{ "ocm": "1", "id": "lewislpz-codex-dotfile-react-patterns", "kind": "skill", "name": "react-patterns", "description": "Use when implementing or reviewing React components, hooks, composition, state placement, rendering, or React performance.", "publisher": "lewislpz", "version": "1.0.0", "capabilities": { "domains": [ "general" ], "tags": [ "skill-md", "github" ], "languages": [ "en" ] }, "quality_prior": 0.6, "examples": [ "Use when implementing or reviewing React components, hooks, composition, state placement, rendering, or React performance." ], "primary": false, "metadata": { "source": { "provider": "github", "repository": "https://github.com/lewislpz/codex-dotfile", "path": ".codex/skills/react-patterns/SKILL.md", "ref": "34dad8e0e387cc94253327ee0d4bd933c03db96b", "url": "https://github.com/lewislpz/codex-dotfile/blob/34dad8e0e387cc94253327ee0d4bd933c03db96b/.codex/skills/react-patterns/SKILL.md", "key": "lewislpz/codex-dotfile/.codex/skills/react-patterns/SKILL.md" } }, "instructions": "# React Patterns\n\n## Boundaries\n\nUse only after React is confirmed. Use frontend guidance for broader UX and\nTypeScript guidance for advanced type or tooling problems.\n\n## Operating Loop\n\n1. Detect React version, rendering environment, compiler use, framework conventions,\n state libraries, and test setup.\n2. Identify ownership of state, effects, async data, and errors.\n3. Prefer composition and colocated state; extract only when reuse or complexity\n justifies it.\n4. Keep effects synchronized with external systems rather than using them for derived\n state.\n5. Profile before performance op", "cost": { "context_tokens": 298 } }

react-patterns

About

React Patterns

Boundaries

Operating Loop

Decision Rules

Optional Reference

Use it

Manifest

Reviews