skills.rest
IkeaNorweegway
IkeaNorweegwayCOMMUNITY
Explore all skills by this author →
GitHub

adapt

Adapt designs across screen sizes, devices, and platforms using breakpoints and fluid layouts.

Updated Apr 16, 2026
Search Tags:#responsive design#cross-device#breakpoints#adaptation#fluid layout#touch targets#mobile layout
One-click install
npx skills add https://github.com/IkeaNorweegway/Classroom-Tools --skill adapt-ikeanorweegway
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: adapt
Source: https://github.com/IkeaNorweegway/Classroom-Tools/tree/main/.claude/skills/adapt
Command: npx skills add https://github.com/IkeaNorweegway/Classroom-Tools --skill adapt-ikeanorweegway

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. This Skill guides the systematic adaptation of existing designs for mobile, tablet, desktop, print, and email contexts. ## Core Features & Use Cases - Context Assessment: Identifies source assumptions and target constraints including device, input method, screen size, connection speed, and usage context. - Platform-Specific Strategies: Provides layout, interaction, content, and navigation strategies for mobile, tablet, desktop, print, and email adaptations. - Implementation Techniques: Covers responsive breakpoints, CSS Grid/Flexbox, container queries, clamp(), touch target sizing, and responsive images. - 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 touch targets of at least 44x44px, and restructuring navigation into a bottom bar or hamburger menu. ## Quick Start Adapt this desktop dashboard design for mobile devices with touch-friendly targets and a single-column layout.

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, and move navigation to a hamburger menu or bottom bar. Prioritize primary content with progressive disclosure for secondary sections.

What breakpoints should I use for responsive design?▼

Common breakpoints are 320-767px for mobile, 768-1023px for tablet, and 1024px and above for desktop. Prefer content-driven breakpoints where the design actually breaks rather than generic device widths.

What is the minimum touch target size for mobile?▼

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, and include page numbers and headers. Use black and white or limited color with proper margins for binding.

Why should I test responsive designs on real devices?▼

Browser DevTools device emulation is helpful but not perfect for touch behavior, performance, and rendering differences. Test on actual phones, tablets, and desktops across orientations, browsers, operating systems, and throttled network connections.

Related Skills

Explore More Design & Creative Skills→
AskTinNguyenAskTinNguyen

adapt

Adapt designs across screen sizes and contexts with platform-specific guidelines.

Community
Advanced
fauzanazzfauzanazz

adapt

Adapts designs across screen sizes, devices, and platforms using breakpoints and fluid layouts.

Community
Intermediate
lexicalninjalexicalninja
2

accessibility-design-checker

Identify accessibility issues in UI designs, wireframes, and prototypes.

Community
Intermediate
belokonmbelokonm
8

mobile-developer

Develop native iOS and Android apps using Swift and Kotlin.

Community
Advanced