adapt
Originally fromopen-horizon-labs/impeccable
Installation
Summary
Rethink designs for different screens, devices, and contexts while maintaining consistency.
- Assess source and target contexts (device type, input method, screen size, connection speed, usage patterns) to identify what won't fit or work across platforms
- Apply context-specific strategies: single-column layouts and touch targets for mobile, two-column hybrid layouts for tablet, multi-column and hover states for desktop, narrow widths and inline CSS for email
- Use responsive techniques including CSS Grid/Flexbox, media queries, container queries, and
clamp()for fluid sizing; increase touch targets to 44x44px minimum and remove hover dependencies on touch devices - Test on real devices across orientations, browsers, and input methods rather than relying solely on browser emulation
SKILL.md
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?