When the user wants to design, optimize, or audit carousel/slider layouts for content display. Also use when the user mentions "carousel," "slider," "carousel layout," "testimonial carousel," "gallery carousel," "quote carousel," "image slider," or "carousel accessibility." For hero-area patterns, use hero-generator.
SkillScore100Maintained
Automatic
◆Frontend / UI pack
Last verified 8/14/2026
What it changes
Passed 22 of 22 test cases with the skill, and 18 of 22 without it.
Without skill82%
With skill100%
Checks it passed that the model alone missed
The response advises against fetching slide content via AJAX on slide transition.
The response specifies using Enter or Space to activate focused interactive elements.
The response specifies a minimum touch target size of 44x44px for navigation controls.
and 1 more in the full report
4 fixed18 passed either way0 still failing0 broke
Pass-rate lift
+18 pp
Tokens
+18%
Agent turns
0%
Response time
-20%
Model gemini-3.6-flashMeasured 8/14/2026v1 · latest is v222 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 4 test cases the skill fixed. Same model, same prompt, with and without the skill.
1 of 4
Prompt
Our QA team flagged the mobile navigation arrows on our carousel as too difficult to tap reliably. What precise minimum dimension (in pixels) must these touch targets satisfy?
What was checked, without and with the skill
Checked
Without skill
With skill
The response specifies a minimum touch target size of 44x44px for navigation controls.
Missed
Passed
case-16 · 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
Carousel construction has moved
Carousel construction is now maintained in the Carousel reference in Bricks, the component layer for AI agents.