xoai/react
tools/sage-claude-plugin/skills/react/SKILL.md
React 18/19 patterns and anti-patterns — hooks discipline, component architecture, state management
$ install --global
skillsauthnpx skillsauth add xoai/sage reactInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 26, 2026, 2:08 AM304.0s1 file scanned
SKILL.md
- name:
- react
- description:
- React 18/19 patterns and anti-patterns — hooks discipline, component architecture, state management
- version:
- 1.0.0
- type:
- knowledge
- layer:
- framework
- sage:
- >=1.0.0
- detected:
- [react, react-dom]
- tags:
- [react,react-dom]
react
Layer 2 — Framework Pack
React-specific patterns and anti-patterns for React 18/19. Hooks discipline, component architecture, state management, and the mistakes agents make from stale training data.
Philosophy
React is the framework where LLM training data is most polluted. Fifteen years of blog posts, Stack Overflow answers, and tutorials mix class components with hooks, lifecycle methods with effects, Redux boilerplate with context, and pre-React-19 patterns with post-React-19 patterns. An agent trained on all of this produces code that "works" but uses outdated idioms.
This pack corrects the most common stale-training-data mistakes and establishes the modern React mental model as the baseline for all React code in the project.
What's Included
| Type | Files | Coverage | |------|-------|----------| | Patterns | 7 | Component composition, hooks discipline, state management, data fetching, error boundaries, forms, testing | | Anti-patterns | 6 | useEffect abuse, derived state in useState, prop drilling, index keys, class components, inline object props | | Constitution | 1 | 5 React-specific principles |
Key Corrections
- useEffect is not a lifecycle method. It synchronizes with external systems. If you're using it to derive state, transform data, or respond to props — stop.
- Not everything needs to be in state. Values computed from existing state/props should be calculated during render, not stored in separate useState calls.
- React.memo / useMemo / useCallback are optimization tools, not defaults. Profile first, then memoize the bottleneck. Premature memoization adds complexity and can mask architectural problems.
Overridden by nextjs
When nextjs is also installed, it overrides the data-fetching and
routing patterns from this pack, since Next.js handles those differently
(server components, App Router).
Related Skills
xoai/sage-self-learning
tools
VerifiedTrustedCommunity
Captures agent mistakes, corrections, and discovered gotchas so they are not repeated. Use when: (1) a command or operation fails unexpectedly, (2) the user corrects the agent, (3) the agent discovers non-obvious behavior through debugging, (4) an API or tool behaves differently than expected, (5) a better approach is found for a recurring task. Also searches past learnings before starting tasks to avoid known pitfalls. Activate alongside the sage-memory skill — they share the same MCP backend but serve different purposes (sage-memory = codebase knowledge, sage-self-learning = agent mistakes and gotchas).
17SKILL.mdUpdated May 20, 2026
xoai/sage-ontology
development
VerifiedTrustedCommunity
Typed knowledge graph stored in sage-memory. Use when creating or querying structured entities (Person, Project, Task, Event, Document), linking related objects, checking dependencies, planning multi-step actions as graph transformations, or when skills need to share structured state. Trigger on "remember that X is Y", "what do I know about", "link X to Y", "show dependencies", "what blocks X", entity CRUD, cross-skill data access, or any request involving structured relationships between things.
17SKILL.mdUpdated May 20, 2026
xoai/sage-memory
tools
VerifiedTrustedCommunity
Integrates sage-memory into Sage workflows. Teaches the agent when to remember (store findings during work), when to recall (search memory at session start and task start), and how to learn (structured knowledge capture via sage learn). Use when the user mentions memory, remember, recall, learn, capture knowledge, onboard to codebase, or when starting any session where sage-memory MCP tools are available.
17SKILL.mdUpdated May 20, 2026
xoai/sage-self-learning
tools
VerifiedTrustedCommunity
Captures agent mistakes, corrections, and discovered gotchas so they are not repeated. Use when: (1) a command or operation fails unexpectedly, (2) the user corrects the agent, (3) the agent discovers non-obvious behavior through debugging, (4) an API or tool behaves differently than expected, (5) a better approach is found for a recurring task. Also searches past learnings before starting tasks to avoid known pitfalls. Activate alongside the sage-memory skill — they share the same MCP backend but serve different purposes (sage-memory = codebase knowledge, sage-self-learning = agent mistakes and gotchas).
17SKILL.mdUpdated May 20, 2026