React-specific component, hook, and rendering patterns. Use when writing React components, hooks, JSX, or optimizing React performance.
74
Quality
62%
Does it follow best practices?
Impact
97%
1.18xAverage score across 3 eval scenarios
Optimize this skill with Tessl
npx tessl skill review --optimize ./skills/framework/tech-react/SKILL.mdTanStack Query mutation call-site handling
No onSuccess callback
0%
100%
No onError callback
100%
100%
No onSettled callback
100%
100%
Uses mutateAsync
0%
100%
Awaited post-mutation actions
0%
100%
No useEffect for form submission
100%
100%
Try/catch at call site
0%
100%
Hooks at top level
100%
100%
No premature memoization
100%
100%
Without context: $0.2739 · 1m 10s · 18 turns · 25 in / 3,710 out tokens
With context: $0.2788 · 59s · 17 turns · 419 in / 3,259 out tokens
Effect cleanup and avoiding effect misuse
Event listener cleanup
100%
85%
Timer cleanup
100%
100%
No derived state in effect
100%
100%
No effect chain
100%
58%
No useEffect for user event response
100%
100%
AbortController for fetch
100%
100%
Hooks at top level
100%
100%
Cleanup returns function
100%
88%
No premature memoization
100%
100%
Without context: $0.1631 · 39s · 10 turns · 15 in / 2,296 out tokens
With context: $0.2577 · 58s · 16 turns · 21 in / 2,868 out tokens
List rendering, key prop reset, and semantic HTML
Stable unique list keys
100%
100%
No index as key
100%
100%
Separate child component for per-item hooks
100%
100%
Key prop for state reset
100%
100%
No useEffect state reset
0%
100%
Semantic interactive elements
100%
100%
Semantic page structure
100%
100%
Hooks at top level
100%
100%
No premature memoization
100%
100%
Without context: $0.4219 · 1m 33s · 20 turns · 27 in / 6,659 out tokens
With context: $0.5920 · 2m 3s · 30 turns · 276 in / 7,111 out tokens
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.