skills.rest
cshyang
cshyangCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

adapt

Adapt responsive layouts, touch targets, and device-specific interactions across mobile, tablet, desktop, and print workflows.

Updated Mar 15, 2026
Search Tags:#cross-device#mobile#design-principles#desktop#adaptation#responsive-design#tablet
One-click install
npx skills add https://github.com/cshyang/nochore --skill adapt-cshyang
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: adapt
Source: https://github.com/cshyang/nochore/tree/main/capabilities/incubator/skills/adapt
Command: npx skills add https://github.com/cshyang/nochore --skill adapt-cshyang

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Adapt designs to work across different screen sizes, devices, contexts, or platforms.

Core Features & Use Cases

  • Guidance for mobile-first to desktop transitions, including layout and content priority
  • Interaction strategies for touch and pointer inputs across contexts
  • Progressive disclosure and content reflow to maintain clarity on small screens
  • Cross-platform consistency with contextual navigation and visual language
  • Example: adapt a shopping UI from mobile to tablet and desktop without breaking flow

Quick Start

Apply the context-aware adaptation plan to your current project by selecting the target context and implementing the corresponding mobile, tablet, desktop, or print strategy.

Frequently Asked Questions about adapt

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

FAQPage Schema
How do I adapt a UI design for different screen sizes and devices?▼

Cross-context design adaptation handles responsive layouts by guiding mobile-first to desktop transitions, adjusting touch targets, and applying progressive disclosure to maintain clarity across mobile, tablet, and desktop screens.

What is the best way to handle touch target and interaction changes for mobile and tablet designs?▼

Interaction strategies for touch and pointer inputs adjust touch targets and device-specific interactions across contexts, ensuring cross-platform consistency while maintaining contextual navigation and visual language for mobile and tablet workflows.

How does responsive design handle content reflow and prioritization on small screens?▼

Responsive design uses progressive disclosure and content reflow to prioritize layout decisions, maintaining clarity on small screens by systematically managing content priority and visual hierarchy across different device contexts.

Can I use cross-context adaptation strategies for print workflows as well as digital screens?▼

Cross-context adaptation strategies apply to mobile, tablet, desktop, and print workflows, providing documented adaptation protocols and actionable implementation steps that translate digital interaction patterns into static print layouts.

What are the limitations of adapting a shopping UI flow from mobile to desktop without breaking navigation?▼

Adapting shopping UI flows requires careful layout decisions and content prioritization to prevent breaking navigation, as failure to implement contextual adaptation strategies disrupts cross-platform consistency and user flow continuity.

Related Skills

Explore More Design & Creative Skills→
kaishinkaishin
10

adapt

Adapt design patterns across screen sizes, devices, and contexts.

Community
Advanced
xcrrrxcrrr
4

frontend-design

Generate frontend design specifications with CSS custom properties and component states.

Community
Advanced
jcdiv47jcdiv47

adapt

Adapt UI designs across screen sizes using breakpoints, Grid/Flexbox, and container queries.

Community
Intermediate
Owl-ListenerOwl-Listener
234

responsive-patterns

Guide designers in crafting cross-breakpoint layouts with breakpoint strategy and container queries.

Community
Intermediate