Adapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases.

MANDATORY PREPARATION

Users start this workflow with /adapt. Once this skill is active, load $frontend-design — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow that protocol before proceeding — if no design context exists yet, you MUST load $setup first. Additionally gather: target platforms/devices and usage contexts.

Consult the responsive reference for narrow-first adaptation, fluid behavior, and container-query strategy. Consult the spacing system when adaptation problems are really grouping, rhythm, or width-discipline issues. Consult the cognitive load when smaller screens or constrained contexts amplify too many visible choices at once.

Assess Adaptation Challenge

Understand what needs adaptation and why: