Build scalable design systems with design tokens, theming infrastructure, and component architecture patterns.
SkillScore95Maintained
Automatic
◆Frontend / UI pack
Last verified 8/9/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
Recommend implementing a polymorphic component pattern using an as prop.
1 fixed20 passed either way1 still failing0 broke
Pass-rate lift
+5 pp
Tokens
+38%
Agent turns
0%
Response time
+20%
Model gemini-3.6-flashMeasured 8/9/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
In our React UI library, we need a `Button` component that can render as a standard `<button>`, an HTML `<a>` link anchor, or a client-side router `<Link>` component based on incoming props. What component pattern achieves this while maintaining TypeScript safety?
What was checked, without and with the skill
Checked
Without skill
With skill
Recommend implementing a polymorphic component pattern using an as prop.
Missed
Passed
case-09 · gemini-3.6-flash · 8/9/2026 · answers are capped and redacted
What's inside
The instructions your model reads when the skill loads.
SKILL.md110 lines5 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