adapt

Adapt designs across screen sizes, devices, contexts, or platforms.

Updated Mar 11, 2026

Search Tags:#cross-platform #ux #adaptation #responsive-design #interaction-design #mobile-design

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams struggle to maintain consistent experiences across mobile, tablet, desktop, and print contexts. This section provides a structured approach to rethinking layouts, interactions, and content to ensure usable, accessible experiences in every context.

Core Features & Use Cases

Context-aware adaptation strategy covering layout, interaction, content, and navigation for multiple devices
Guidance for breakpoints, progressive disclosure, touch targets, and accessibility considerations
Use Case: adapting a product UI from desktop web to mobile app with preserved hierarchy and functionality

Quick Start

Describe your current design context and target device to generate a context-appropriate adaptation plan.

Frequently Asked Questions about adapt

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

FAQPage Schema

What is responsive design adaptation for cross-platform contexts?▼

Responsive design adaptation modifies layouts, interactions, and content to ensure usable, accessible experiences across mobile, tablet, desktop, and print contexts. It involves context-aware strategies covering breakpoints, progressive disclosure, and touch target considerations.

How do I adapt a desktop web UI for a mobile app while preserving hierarchy?▼

To adapt a desktop web UI for a mobile app, apply a step-by-step adaptation framework enforcing responsive breakpoints, layout strategies, content prioritization, and touch considerations. This preserves hierarchy and functionality across contexts.

Can I use a structured framework to plan responsive design breakpoints?▼

Yes, you can use a structured framework to plan responsive design breakpoints. The approach enforces step-by-step adaptation strategies with layout guidance, progressive disclosure, touch targets, and cross-context validation across real devices.

What's the best way to prioritize content across different screen sizes?▼

The best way to prioritize content across different screen sizes is applying a context-aware adaptation strategy. It covers layout, interaction, content, and navigation, ensuring consistent experiences and accessible interactions across multiple devices.

Does cross-context validation for responsive design require testing on real devices?▼

Yes, cross-context validation for responsive design requires testing on real devices. The adaptation framework enforces step-by-step validation across actual mobile, tablet, desktop, and print contexts to ensure consistent, accessible experiences.