skills.rest
rattamnoon
rattamnoonCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

adapt

Plan and implement cross-context design adaptations for UI consistency across devices and platforms.

Updated Apr 18, 2026
Search Tags:#mobile#ux#design-system#desktop#adaptation#responsive-design#tablet
One-click install
npx skills add https://github.com/rattamnoon/our-third-story --skill adapt-rattamnoon
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: adapt
Source: https://github.com/rattamnoon/our-third-story/tree/main/.agents/skills/adapt
Command: npx skills add https://github.com/rattamnoon/our-third-story --skill adapt-rattamnoon

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams often struggle to maintain usable experiences when target contexts shift; this skill provides structured methods to adapt layouts, interactions, and content across devices and platforms.

Core Features & Use Cases

  • Mobile Adaptation: convert desktop patterns into thumb-friendly mobile layouts with touch targets and simplified navigation.
  • Tablet/Desktop Strategy: define two-column or master-detail patterns that preserve context while using larger real estate.
  • Content & Accessibility: ensure readability, accessible contrast, and logical content prioritization across contexts.

Quick Start

Provide a responsive design plan for a given UI adapting to a specified target context.

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 and tablet screens?▼

Responsive design adaptation ensures UI consistency across devices by applying context-aware strategies, layout rules, and accessibility considerations to maintain usable experiences when target contexts shift from desktop to mobile or tablet.

What is the best way to plan responsive design adaptations across multiple devices?▼

Planning responsive design adaptations requires defining context-aware layout rules and interaction patterns, ensuring content prioritization and accessibility considerations maintain UI consistency across mobile, tablet, and desktop platforms.

Can I convert desktop navigation patterns into touch-friendly mobile layouts?▼

Yes, converting desktop patterns into mobile layouts involves implementing simplified navigation and touch targets to create thumb-friendly interactions, ensuring the adapted mobile interface remains usable and accessible.

Does responsive design adaptation handle content prioritization and accessibility across contexts?▼

Yes, responsive design adaptation handles content and accessibility by ensuring logical content prioritization, maintaining readable layouts, and verifying accessible contrast across mobile, tablet, desktop, and print-like contexts.

What layout strategy should I use when adapting designs for tablet screens?▼

When adapting designs for tablet screens, define two-column or master-detail patterns that preserve user context while effectively utilizing the larger screen real estate available compared to mobile devices.

When should I not use a single layout for cross-context design adaptation?▼

A single layout should not be used when target contexts shift significantly, as maintaining usable experiences across mobile, tablet, and desktop requires distinct context-aware strategies for layout, interaction, and content.

Related Skills

Explore More Design & Creative Skills→
kaishinkaishin
10

adapt

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

Community
Advanced
deangilmoreremixdeangilmoreremix

figma-implement-design

Translate Figma nodes into React components using design system tokens.

Community
Advanced
PostalocityPostalocity
1

adapt

Adapt designs across mobile, tablet, and desktop screen sizes.

Official
Advanced
delorenjdelorenj
14

tauri

Build cross-platform desktop and mobile apps with the Tauri framework.

Community
Advanced