skills.rest
WeWake1
WeWake1COMMUNITY
Explore all skills by this author →
GitHub

adapt

Adapt designs across screen sizes, devices, platforms, and usage contexts.

Updated Mar 15, 2026
Search Tags:#layout#responsive design#cross-platform#ux#breakpoints#touch targets#mobile adaptation
One-click install
npx skills add https://github.com/WeWake1/BSOMS --skill adapt-wewake1
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: adapt
Source: https://github.com/WeWake1/BSOMS/tree/main/.agents/skills/adapt
Command: npx skills add https://github.com/WeWake1/BSOMS --skill adapt-wewake1

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designs built for one context often break or feel wrong on other devices, input methods, or platforms, requiring systematic rethinking rather than simple scaling. ## Core Features & Use Cases - Context Assessment: Identifies source assumptions and target constraints across device, input method, screen size, connection speed, and usage context. - Platform-Specific Strategies: Provides concrete layout, interaction, content, and navigation strategies for mobile, tablet, desktop, print, and email adaptations. - Implementation Guidance: Covers responsive breakpoints, CSS Grid/Flexbox reflow, container queries, touch target sizing, and progressive enhancement. - Use Case: A desktop web dashboard needs a mobile version. The skill guides converting multi-column layouts to single-column stacking, replacing hover interactions with 44x44px touch targets, and moving navigation to a bottom bar. ## Quick Start Adapt the checkout flow design for mobile devices with touch input and slow network conditions.

Frequently Asked Questions about adapt

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I adapt a desktop design for mobile devices?▼

Convert multi-column layouts to single-column vertical stacking, replace hover interactions with touch targets of at least 44x44px, move navigation to a hamburger menu or bottom bar, and use progressive disclosure to prioritize primary content.

What is the minimum touch target size for mobile design?▼

Touch targets should be at least 44x44px with adequate spacing between interactive elements. Remove hover-dependent interactions and add touch feedback such as ripples or highlights.

How do I adapt a web page for print?▼

Remove navigation and interactive elements, add page breaks at logical points, expand hidden content like full URLs, include page numbers and headers, and convert charts to print-friendly versions with proper margins.

Should I use device breakpoints or content-driven breakpoints?▼

Prefer content-driven breakpoints where the design actually breaks rather than generic device widths. Standard ranges like 320-767px for mobile and 1024px+ for desktop work as starting points, but test where your specific layout fails.

Why does my responsive design fail on real devices but work in DevTools?▼

Device emulation does not perfectly replicate real hardware behavior, touch input, or network conditions. Test on actual phones and tablets across orientations, browsers, operating systems, and throttled connections.

Related Skills

Explore More Design & Creative Skills→
Bloodrey41Bloodrey41

adapt

Guide cross-device design adaptation across mobile, tablet, desktop, and print contexts.

Community
Advanced
TorbenMerraldTorbenMerrald
1

Frontend Responsive

Create responsive frontend layouts using mobile-first CSS media queries and grid systems.

Community
Intermediate
zinohomezinohome

accessibility-auditor

Audits and implements web accessibility following WCAG 2.1 guidelines with ARIA patterns.

Community
Intermediate
ps-carvalhops-carvalho

electron-patterns

Guide Electron desktop app development with main/renderer process architecture and security patterns.

Community
Advanced