adapt

Plan responsive layouts and touch targets for mobile, tablet, and desktop contexts.

5|1|Updated May 31, 2026
One-click install
npx skills add https://github.com/waynesutton/teleprompter --skill adapt-waynesutton
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: adapt
Source: https://github.com/waynesutton/teleprompter/tree/main/.cursor/skills/adapt
Command: npx skills add https://github.com/waynesutton/teleprompter --skill adapt-waynesutton

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Help designers adapt interfaces for multiple contexts (mobile, tablet, desktop) by planning breakpoints, fluid layouts, and accessible touch targets.

Core Features & Use Cases

  • Flexible adaptation planning for mobile, tablet, and desktop
  • Context-driven breakpoints and responsive layouts
  • Accessibility-focused touch targets and interactions
  • Use Case: Design an app that gracefully reflows from phone to large desktop displays.

Quick Start

Begin by running the Context Gathering Protocol to gather target devices and contexts, then draft a responsive adaptation plan for the chosen context.

Frequently Asked Questions about adapt

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

FAQPage Schema
How do I plan responsive design breakpoints for multiple screen sizes?▼

Responsive design breakpoints are planned by gathering target device contexts and drafting a fluid adaptation plan that dictates how layouts reflow across mobile, tablet, and desktop screens.

What is the best way to adapt a layout from mobile to large desktop displays?▼

Adapting a layout to large desktop displays requires context-driven breakpoint strategies and flexible layout planning to ensure the interface gracefully reflows across all screen sizes.

How do I ensure touch targets remain accessible during responsive adaptation?▼

Accessible touch targets are maintained during responsive adaptation by integrating accessibility-focused interaction guidelines directly into the layout planning workflow.

Does this responsive design approach support print and tablet contexts?▼

Yes, the responsive adaptation approach explicitly supports mobile, tablet, desktop, and print contexts by applying context-aware layout decisions and breakpoint strategies.

What are the steps to create a responsive adaptation plan for an app?▼

Creating a responsive adaptation plan involves running a context gathering protocol for target devices, drafting fluid layout decisions, and validating touch targets through step-by-step protocols.

Why does my design system layout break when reflowing across different screen sizes?▼

Layouts break during reflowing when design systems lack context-aware breakpoint strategies and fluid layout planning to properly adapt interface elements across varying screen sizes.