skills.rest
raphaelmans
raphaelmansCOMMUNITY
Explore all skills by this author →
GitHub

adapt

Create context-driven UI adaptation plans with responsive layouts and interaction changes.

Updated Feb 28, 2026
Search Tags:#design#usability#interaction#adaptation#responsive-design#cross-context
One-click install
npx skills add https://github.com/raphaelmans/agent-skills --skill adapt-raphaelmans
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: adapt
Source: https://github.com/raphaelmans/agent-skills/tree/main/adapt
Command: npx skills add https://github.com/raphaelmans/agent-skills --skill adapt-raphaelmans

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Adapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases.

Core Features & Use Cases

  • Mobile Adaptation: Layout and interaction adjustments for small screens and touch-first devices.
  • Tablet/Desktop Adaptation: Multi-column layouts, side panels, and grid-based responsiveness to leverage larger displays.
  • Content & Navigation: Progressive disclosure, accessible targets, and context-appropriate navigation patterns.

Quick Start

Provide a context-driven adaptation plan for a given UI by outlining responsive layouts, interaction changes, and content adjustments.

Frequently Asked Questions about adapt

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

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

To adapt your UI design, apply responsive breakpoints, multi-column layouts for larger displays, and progressive disclosure for small screens to ensure effective cross-context usability.

What is cross-context UI adaptation?▼

Cross-context UI adaptation is adjusting layouts, interactions, and navigation so a single design functions effectively across mobile, tablet, desktop, print, and email environments.

How do I implement responsive design for mobile and tablet interfaces?▼

Implement responsive design by defining breakpoints, optimizing touch targets for mobile, and utilizing grid-based multi-column layouts to leverage the larger display space of tablets.

Does this adaptation approach work for print and email contexts?▼

Yes, cross-context adaptation applies to print and email by generating concrete layout adjustments and content strategies tailored for those specific output formats.

What's the best way to adjust navigation patterns for touch-first devices?▼

The best way to adjust navigation for touch devices is implementing context-appropriate patterns with accessible touch targets and progressive disclosure to manage content visibility.

When do I need progressive disclosure in responsive design?▼

You need progressive disclosure when adapting content for small screens, allowing users to access complex information sequentially without overwhelming the limited display area.

Related Skills

Explore More Design & Creative Skills→
Imad-OuteImad-Oute
2

mh-cto-sdlc-design-system

Generate design systems from wireframes and UX briefs with component inventories.

Community
Advanced
remiconnessonremiconnesson

tailwind-responsive-ui

Transform desktop-oriented Tailwind interfaces into responsive layouts with mobile-first breakpoints.

Community
Advanced
tsuji-tomonoritsuji-tomonori

a11y-testing-manual

Standardize manual accessibility testing for WCAG 2.2 AA compliance.

Community
Intermediate
WdanielBWdanielB

responsive-design

Implement responsive layouts with container queries, fluid typography, CSS Grid, and mobile-first breakpoints.

Community
Intermediate