Component composition, hooks discipline and render-cost review for React 19: when to reach for a server component, why a context provider re-renders more than you expect, and how to read a Profiler flame chart before reaching for memo.
SkillScore95Maintained
Automatic
◆Frontend / UI pack
Last verified 8/3/2026
What it changes
Passed 21 of 22 test cases with the skill, and 20 of 22 without it.
Without skill91%
With skill95%
Checks it passed that the model alone missed
Recommends placing the 'use client' boundary solely on interactive leaf input components.
1 fixed20 passed either way1 still failing0 broke
Pass-rate lift
+5 pp
Tokens
+5%
Agent turns
0%
Response time
+1%
Model gemini-3.6-flashMeasured 8/3/2026v121 of 22 cases passed with skill
Tokens, turns and time describe resource use, not a dollar price.
See it in action
A test case the skill fixed. Same model, same prompt, with and without the skill.
Prompt
I have a multi-step checkout page in React 19 with static product summaries, shipping terms, and an interactive payment input step. Where should the 'use client' boundary be placed?
What was checked, without and with the skill
Checked
Without skill
With skill
Recommends placing the 'use client' boundary solely on interactive leaf input components.
Missed
Passed
case-19 · gemini-3.6-flash · 8/3/2026 · answers are capped and redacted
What's inside
The instructions your model reads when the skill loads.
SKILL.md6 linessingle file
react-patterns
Component composition, hooks discipline and render-cost review for React 19:
when to reach for a server component, why a context provider re-renders more
than you expect, and how to read a Profiler flame chart before reaching for
memo.