Agent skill · design visual · aiskillstore
adapt
Adapt designs to work across different screen sizes, devices, contexts, or platforms. Ensures consistent experience across varied environments.
Why this skill is useful
Provides detailed strategies for adapting designs across multiple contexts that the AI wouldn't reliably generate on its own.
What it needs
About 4k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Adapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases. Assess Adaptation Challenge Understand what needs adaptation and why: 1. Identify the source context: What was it designed for originally? (Desktop web? Mobile app?) What assumptions were made? (Large screen? Mouse input? Fast connection?) What works well in current context? 2. Understand target context: Device: Mobile, tablet, desktop, TV, watch, print? Input method: Touch, mouse, keyboard, voice, gamepad? Screen constraints: Size, resolution, orientation? Connection: Fast wifi, slow 3G, offline? Usage context: On-the-go vs desk, quick glance vs focused reading? User expectations: What do users expect on this platform? 3. Identify adaptation challenges: What won't fit? (Content, navigation, features) What won't work? (Hover states on touch, tiny touch targets) What's inappropriate? (Desktop patterns on mobile, mobile patterns on desktop) CRITICAL: Adaptation is not just scaling - it's rethinking the experience for the new context. Plan Adaptation Strategy Create context-appropriate strategy: Mobile Adaptation (Desktop → Mobile) Layout Strategy: Single column instead of multi-column Vertical stacking instead of side-by-side Full-width components instead of fixed widths Bottom navigation instead of top/side navigation Interaction Strategy: Touch targets 44x44px minimum (not hover-dependent) Swipe gestures where appropriate (lists, carousels) Bottom sheets instead of dropdowns Thumbs-first design (controls within thumb reach) Larger tap areas with more spacing Content Strategy: Progressive disclosure (don't show everything at once) Prioritize primary content (secondary content in tabs/accordions) Shorter text (more concise) Larger text (16px minimum) Navigation Strategy: Hamburger menu or bottom navigation Reduce navigation complexity Sticky headers for context Back button in navigation flow Tablet Adaptation (Hybrid Approach) Layout Strateg …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/adapt