adapt

Adapt UI layouts and interactions across mobile, tablet, desktop, and print contexts.

Updated Apr 11, 2026

Search Tags:#accessibility #layout #mobile #breakpoints #desktop #responsive-design #adapt

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: adapt
Source: https://github.com/wukangcheng2944/claude-skills/tree/main/adapt
Command: npx skills add https://github.com/wukangcheng2944/claude-skills --skill adapt-wukangcheng2944

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Adaptations across devices to ensure consistent experiences across screen sizes, contexts, and platforms, reducing design debt and rework.

Core Features & Use Cases

Mobile-first layout strategies (single-column stacking, 44x44 touch targets, accessible typography)
Tablet/desktop adaptations (multi-column layouts, side navigation, master-detail patterns)
Context-driven content and navigation adjustments, print/email-ready guidance

Quick Start

Begin auditing current UI for breakpoints and implement responsive rules to adapt layouts and interactions across targets.

Frequently Asked Questions about adapt

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I make my UI design responsive across mobile, tablet, and desktop devices?▼

Responsive design adapts your UI across mobile, tablet, and desktop devices by applying adaptive breakpoints, multi-column layouts, and touch-target sizing to ensure consistent user experiences across screen sizes.

What's the best way to handle layout and navigation changes for different screen sizes?▼

Handle layout and navigation changes by applying context-driven adjustments like single-column stacking for mobile, master-detail patterns for tablet, and side navigation for desktop to maintain content hierarchy across screen sizes.

When do I need to use adaptive breakpoints in my UX project?▼

Adaptive breakpoints are needed when adapting UI and UX projects across multiple screen sizes, allowing layouts to shift from single-column mobile views to multi-column desktop grids while maintaining accessibility considerations.

Does responsive design work for print and email contexts or just digital screens?▼

Responsive design extends beyond digital screens to print and email-ready contexts, applying context-driven content adjustments and layout rules to ensure consistent experiences across mobile, desktop, and print outputs.

How do I audit my current UI for responsive layout and accessibility issues?▼

Audit current UI by checking for adaptive breakpoints, verifying 44x44 touch targets on mobile, assessing accessible typography scaling, and testing interaction patterns across multiple device targets to identify design debt.