Utility composition without a class-name soup: extracting a component when a pattern repeats, using the scale instead of arbitrary values, and keeping dark mode a variant rather than a fork.
SkillScore91Maintained
Automatic
◆Frontend / UI pack
Last verified 8/3/2026
What it changes
Passed 20 of 22 test cases with the skill, and 19 of 22 without it.
Without skill86%
With skill91%
Checks it passed that the model alone missed
The refactored component uses `dark:` variant modifiers on elements instead of separate light and dark component forks.
1 fixed19 passed either way2 still failing0 broke
Pass-rate lift
+5 pp
Tokens
+14%
Agent turns
0%
Response time
+8%
Model gemini-3.6-flashMeasured 8/3/2026v120 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
My team created two separate components—NavbarLight.jsx and NavbarDark.jsx—to handle dark theme support, which duplicates all the layout structure. I need to consolidate them into a single component that handles theme switching cleanly without duplicating markup. Please provide the refactored React component code.
What was checked, without and with the skill
Checked
Without skill
With skill
The refactored component uses `dark:` variant modifiers on elements instead of separate light and dark component forks.
Missed
Passed
The layout markup is consolidated into a single JSX render tree without duplicate structural blocks.
Passed
Passed
case-02 · 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.md5 linessingle file
tailwind-design
Utility composition without a class-name soup: extracting a component when a
pattern repeats, using the scale instead of arbitrary values, and keeping dark
mode a variant rather than a fork.