skills.rest
luyangliuable
luyangliuableCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

adapt

Rework existing designs for different devices, screen sizes, and input methods.

Updated Mar 23, 2026
Search Tags:#responsive design#cross-platform#ui design#mobile adaptation#layout strategy#print adaptation
One-click install
npx skills add https://github.com/luyangliuable/claude-setup --skill adapt-luyangliuable
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: adapt
Source: https://github.com/luyangliuable/claude-setup/tree/main/.agents/skills/adapt
Command: npx skills add https://github.com/luyangliuable/claude-setup --skill adapt-luyangliuable

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you rework existing designs so they feel natural and usable across mobile, tablet, desktop, print, and email contexts instead of simply shrinking or stretching the same interface.

Core Features & Use Cases

  • Cross-Context Adaptation: Adjust layouts, navigation, and interactions for different screen sizes, input methods, and usage environments.
  • Platform-Appropriate Patterns: Translate desktop experiences to mobile, mobile experiences to desktop, and screen-based content to print or email-friendly formats.
  • Practical Example: Use this Skill when a desktop dashboard needs a mobile version with single-column layout, larger touch targets, and simplified navigation.

Quick Start

Adapt the attached design for mobile while preserving the core information hierarchy and making all interactions touch-friendly.

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 UI design for mobile without losing core functionality?▼

To adapt a desktop UI for mobile, you rework the layout into a single-column format, enlarge touch targets, and simplify navigation while preserving the core information hierarchy and functionality.

What's the best way to convert screen-based designs for print and email contexts?▼

Converting screen-based designs for print and email requires applying context-specific layout and content strategies that adjust content density and interactions to fit static publishing formats.

Does responsive design mean simply scaling the same layout across different screen sizes?▼

Responsive design goes beyond scaling by applying platform-appropriate interaction patterns and context-specific layout strategies so the interface feels natural and usable on each device.

How do I adjust navigation and content density for a tablet adaptation?▼

Tablet adaptation adjusts navigation and content density by applying responsive design decisions that fit the intermediate screen size and touch-based input method without losing core features.

Can I use a single layout strategy for cross-platform UI design across mobile, tablet, and desktop?▼

Cross-platform UI design requires distinct layout strategies for each context, translating interactions and navigation patterns appropriately rather than stretching one unified interface across all platforms.

When should I not use a single layout for multi-device design adaptation?▼

You should avoid a single layout for multi-device design adaptation when usage environments demand different input methods, such as translating mouse-based desktop interactions to touch-friendly mobile targets.

Related Skills

Explore More Design & Creative Skills→
Integrum-GlobalIntegrum-Global
12

uiux-design-principles

Apply framework-agnostic UI/UX design principles to frontend layouts and audits.

Official
Advanced
1toe1toe

adapt

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

Community
Intermediate
yckkkkyckkkk
1

adapt

Coordinate cross-context design adaptations for mobile, tablet, and desktop layouts.

Community
Advanced
pbakauspbakaus
57.3k

adapt

Adapt designs across screen sizes, devices, and platforms.

Community
Advanced