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

Ready to run

npx skills add https://github.com/luyangliuable/claude-setup --skill adapt-luyangliuable

💬 Prompt for ChatGPT / Claude Chat▼

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.