adapt
Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility.
Best for responsive design tasksWorks with GitHubLow risk
⌘source
- author
@pbakaus- language
- JavaScript
★21kstars
1kforks
Apr 22, 2026
✦overview.md
Key Features
- ·Adapt designs across screen sizes
- ·Implements breakpoints and fluid layouts
- ·Optimizes for input methods
- ·Handles multiple devices and contexts
Use Cases
- →Making a desktop site work on mobile
- →Adapting a mobile app for tablet use
- →Ensuring print-friendly layout from a web design
Best for
- ✓responsive design tasks
- ✓cross-device projects
FAQs
name
adapt
description
Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility.
version:2.1.1
user-invocable:true
argument-hint:[target] [context (mobile, tablet, print...)]
Adapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases.
MANDATORY PREPARATION
Invoke /impeccable — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: target platforms/devices and usage contexts.
Assess Adaptation Challenge
Understand what needs adaptation and why:
-
Identify the source context:
- What was it designed for originally? (Desktop web? Mobile app?)
- What assumptions were made? (Large screen? Mouse input? Fast connection?)
- What works well in current context?
-
Understand target context:
- Device: Mobile, tablet, desktop, TV, watch, print?
- Input method: Touch, mouse, keyboard, voice, gamepad?
- Screen constraints: Size, resolution, orientation?
- Connection: Fast wifi, slow 3G, offline?
- Usage context: On-the-go vs desk, quick glance vs focused reading?
- User expectations: What do users expect on this platform?
-
Identify adaptation challenges:
$install
1-click copynpx skills add pbakaus/impeccable --skill adaptSafety assessment
★
Clarity score
How clear and easy to understand the SKILL.md instructions are, rated from 1 to 5.
3/ 5
goodMostly clear, but there are still a few confusing or poorly structured parts.
◎
Actionability score
How directly an agent can act on the SKILL.md instructions, rated from 1 to 5.
3/ 5
mediumPartially actionable with several concrete steps, but still missing important details.