skills.rest
l0lxl0lw
l0lxl0lwCOMMUNITY
Explore all skills by this author →
GitHub

adapt

Adapt designs across screen sizes, devices, platforms, and contexts with responsive strategies.

Updated Dec 18, 2025
Search Tags:#responsive design#css#cross-platform#ux#breakpoints#touch targets#mobile adaptation
One-click install
npx skills add https://github.com/l0lxl0lw/dotfiles --skill adapt-l0lxl0lw
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: adapt
Source: https://github.com/l0lxl0lw/dotfiles/tree/main/ai/shared/skills/impeccable/adapt
Command: npx skills add https://github.com/l0lxl0lw/dotfiles --skill adapt-l0lxl0lw

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designs built for one context often break or feel wrong on other devices and platforms. This Skill guides the systematic adaptation of existing designs for mobile, tablet, desktop, print, and email so the experience stays consistent and usable everywhere. ## Core Features & Use Cases - Context Assessment: Identifies source assumptions and target constraints such as input method, screen size, connection speed, and usage context before adapting. - 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 responsive images. - Use Case: You have a desktop web dashboard and need it to work on phones. The Skill walks you through converting multi-column layouts to single-column stacks, replacing hover interactions with touch targets of at least 44x44px, and verifying on real devices. ## Quick Start Ask the AI to adapt your desktop dashboard design for mobile and tablet using the adapt skill.

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 website design for mobile?▼

Convert multi-column layouts to single-column vertical stacks, replace hover interactions with touch targets of at least 44x44px, use bottom navigation or hamburger menus, and apply progressive disclosure for secondary content. Test on real devices in both orientations.

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 choose responsive breakpoints for a website?▼

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

Can I use the same design for print and screen?▼

No. Print adaptation requires removing navigation and interactive elements, adding page breaks at logical points, expanding hidden content, converting to black and white, and including page numbers and metadata.

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

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

Related Skills

Explore More Design & Creative Skills→
primaERPprimaERP

adapt

Plan responsive design adaptations across mobile, tablet, and desktop screens.

Official
Advanced
igot-aiigot-ai

adapt

Create responsive adaptation plans for designs across screen sizes and devices.

Official
Advanced
malinovskiy-makarmalinovskiy-makar

accessibility

Implements and audits WCAG 2.2 Level AA accessibility for Web, iOS, and Android interfaces.

Community
Intermediate
RambleRainbowRambleRainbow

crosspost

Adapt content for X, LinkedIn, Threads, and Bluesky with platform-native formatting.

Community
Intermediate