skills.rest
LinCie
LinCieCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

adapt

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

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

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 experiences feel native to each context. ## Core Features & Use Cases - Context Assessment: Identifies source assumptions and target constraints including input methods, screen sizes, connection speeds, and usage contexts. - Platform-Specific Strategies: Provides layout, interaction, content, and navigation strategies for mobile, tablet, desktop, print, and email adaptations. - Implementation Guidance: Covers responsive breakpoints, CSS Grid/Flexbox, container queries, touch target sizing, and responsive images. - Use Case: You have a desktop web dashboard that customers want to use on phones. Use this Skill to plan the mobile adaptation with single-column layouts, 44px touch targets, bottom navigation, and progressive disclosure. ## Quick Start Ask the AI to adapt your desktop dashboard design for mobile devices with touch-friendly interactions.

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?▼

Start by identifying desktop assumptions like large screens and mouse input, then apply mobile strategies: single-column layouts, 44x44px touch targets, bottom navigation, and progressive disclosure. Test on real devices rather than only browser DevTools.

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

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

How do I adapt a web page for print?▼

Remove navigation and interactive elements, add page breaks at logical points, expand shortened content like full URLs, and include page numbers and headers. Use black and white or limited color with proper margins for binding.

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

Content-driven breakpoints are preferred over generic device breakpoints. Add breakpoints where the design actually breaks rather than blindly using standard widths like 768px or 1024px.

What are common mistakes when adapting designs across platforms?▼

Common mistakes include hiding core functionality on mobile, using different information architecture across contexts, ignoring landscape orientation, and forgetting that many desktop devices support touch input.

Related Skills

Explore More Design & Creative Skills→
AskTinNguyenAskTinNguyen

adapt

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

Community
Advanced
TheCardGoatTheCardGoat
14

adapt

Adapt existing designs across devices, platforms, and output formats.

Official
Intermediate
DrLuggelsDrLuggels
3

accessibility-compliance

Implement WCAG 2.2 compliant interfaces with ARIA and keyboard navigation.

Community
Advanced
GGEduGGEdu

crosspost

Adapt a single content piece for X, LinkedIn, Threads, and Bluesky.

Community
Intermediate