Create or extend design tokens, primitives, shared components, patterns, and layout building blocks.
SkillScore100Maintained
Automatic
◆Frontend / UI pack
Last verified 8/3/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
The response emphasizes making an additive change that preserves existing size defaults and component usages.
1 fixed21 passed either way0 still failing0 broke
Pass-rate lift
+5 pp
Tokens
+16%
Agent turns
0%
Response time
-25%
Model gemini-3.6-flashMeasured 8/3/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
The design team introduces a compact table layout requiring a smaller button size (`xs`). The existing `Button.tsx` currently supports `sm`, `md`, and `lg` via a `size` prop. How should this new requirement be implemented?
What was checked, without and with the skill
Checked
Without skill
With skill
The response recommends adding `xs` as an additional option to the existing `size` prop in `Button.tsx`.
Passed
Passed
The response emphasizes making an additive change that preserves existing size defaults and component usages.
Missed
Passed
case-14 · 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.md64 linessingle file
Design System Skill
Purpose
Build and maintain the shared visual foundation (tokens and primitives) so UI across the app stays consistent, reusable, and easy to update.
When to Use
No design tokens/primitives exist yet and the project needs a foundation.
A new pattern (e.g. a new button variant, a new spacing value) is needed in more than one place.
An existing primitive is missing a state, variant, or accessibility feature needed by multiple features.
When Not to Use
The UI is page-specific and unlikely to be reused — use Create or Extend Component Skill instead.
A suitable token or primitive already exists — reuse it rather than creating a new one.
Existing primitive components and their props/variants.
The specific gap or new need driving this task.
Assumptions
Existing tokens and primitives take precedence over new ones — extend, don't duplicate.
If starting fresh, prefer raw CSS with CSS custom properties (variables) for tokens, organized in global styles, with CSS Modules for component-level styles where appropriate — unless the project already uses another approach.
Step-by-Step Workflow
Inventory existing tokens: look in global styles (/styles, globals.css, theme files) for color, spacing, typography, radius, shadow, and breakpoint values already defined.
Inventory existing primitives: look in /components (or project equivalent) for Button, Input, Card, Modal, Badge, Tabs, etc., and note their props/variants/states.
Identify the gap: a missing token value, a missing variant, a missing state (loading/disabled/error), or a missing primitive entirely.
For new tokens: add to the existing token location using the existing naming convention (e.g. --color-primary-500, --spacing-md). Don't introduce a second token system.