When the user wants to design, optimize, or audit card layouts for content display. Also use when the user mentions "card layout," "card component," "card grid," "product cards," "template cards," "tool cards," "feature cards," "gallery cards," "integration cards," or "card design." For grids, use grid.
SkillScore95Maintained
Automatic
◆Frontend / UI pack
Last verified 8/14/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
Specifies a single column layout on mobile screens
Advises against using CSS scale transforms for card hover states
Recommends CSS Grid repeat with auto-fill and minmax for fluid columns
2 fixed19 passed either way0 still failing1 broke
Pass-rate lift
+5 pp
Tokens
+40%
Agent turns
0%
Response time
-12%
Model gemini-3.6-flashMeasured 8/14/2026v1 · latest is v221 of 22 cases passed with skill
Tokens, turns and time describe resource use, not a dollar price.
This benchmark measured an earlier version of the skill.
See it in action
One of 2 test cases the skill fixed. Same model, same prompt, with and without the skill.
1 of 2
Prompt
I'm writing the hover state CSS for card components on our product showcase page. A colleague suggested adding `transform: scale(1.05)` on hover so the card expands over neighboring elements. How should I style the hover interaction to ensure smooth visual feedback?
What was checked, without and with the skill
Checked
Without skill
With skill
Advises against using CSS scale transforms for card hover states
Missed
Passed
Recommends box shadow or translate-y for hover elevation
Passed
Passed
case-01 · gemini-3.6-flash · 8/14/2026 · answers are capped and redacted
What's inside
The instructions your model reads when the skill loads.
SKILL.md9 linessingle file
Card construction has moved
Card construction is now maintained in the Card reference in Bricks, the component layer for AI agents.