Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →fengshao1227/adapt
Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets.
Passed 14 of 21 test cases with the skill, and 10 of 21 without it.
and 2 more in the full report
5 fixed10 passed either way7 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 5 test cases the skill fixed. Same model, same prompt, with and without the skill.
An email client application needs to adapt its single-screen mobile inbox list to fit tablet devices in landscape orientation. What structural layout pattern fits best?
| Checked | Without skill | With skill |
|---|---|---|
| Recommends a master-detail split layout showing the message list alongside the active message content | Passed | Passed |
| Suggests adjusting layout views based on device orientation | Missed | Passed |
The instructions your model reads when the skill loads.
Adapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases.
Invoke /frontend-design — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow the protocol before proceeding — if no design context exists yet, you MUST run /teach-impeccable first. Additionally gather: target platforms/devices and usage contexts.
Understand what needs adaptation and why:
Identify the source context:
Understand target context:
Identify adaptation challenges:
CRITICAL: Adaptation is not just scaling - it's rethinking the experience for the new context.
Create context-appropriate strategy:
Layout Strategy:
test cases passed, vs 10 / 21 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.