Build scalable design systems with design tokens, theming infrastructure, and component architecture patterns.
SkillScore100Maintained
Automatic
◆Frontend / UI pack
Last verified 8/29/2026
What it changes
Passed 22 of 22 test cases with the skill, and 21 of 22 without it.
Without skill95%
With skill100%
Checks it passed that the model alone missed
Adds the active theme class to the document root element.
Removes existing theme classes from the document root element.
1 fixed21 passed either way0 still failing0 broke
Pass-rate lift
+5 pp
Tokens
+112%
Agent turns
0%
Response time
+9%
Model gemini-3.6-flashMeasured 8/29/2026v122 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
In a React theme provider supporting light and dark modes, how should active theme changes be applied to the DOM root element so global CSS variables and styling overrides function cleanly?
What was checked, without and with the skill
Checked
Without skill
With skill
Removes existing theme classes from the document root element.
Missed
Passed
Adds the active theme class to the document root element.
Missed
Passed
case-04 · gemini-3.6-flash · 8/29/2026 · answers are capped and redacted
What's inside
The instructions your model reads when the skill loads.
SKILL.md332 lines4 files
Design System Patterns
Master design system architecture to create consistent, maintainable, and scalable UI foundations across web and mobile applications.
When to Use This Skill
Creating design tokens for colors, typography, spacing, and shadows
Implementing light/dark theme switching with CSS custom properties
Building multi-brand theming systems
Architecting component libraries with consistent APIs
Establishing design-to-code workflows with Figma tokens