adapt

Reframe existing designs for different screen sizes, devices, and contexts.

1|Updated Mar 12, 2026

Search Tags:#design #cross-platform #usability #adaptation #responsive-design #context-aware

Ready to run

npx skills add https://github.com/mahou-labs/shiru --skill adapt-mahou-labs

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: adapt
Source: https://github.com/mahou-labs/shiru/tree/main/.agents/skills/adapt
Command: npx skills add https://github.com/mahou-labs/shiru --skill adapt-mahou-labs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Adapt designs to work effectively across different contexts - different screen sizes, devices, or usage scenarios, while maintaining usability and brand consistency.

Core Features & Use Cases

Mobile-first layout strategies to ensure core content remains accessible on small screens
Tablet and desktop adaptation with responsive two-column and master-detail patterns
Content, navigation, and interaction adjustments to preserve usability across contexts
Context-aware testing and iteration guidance for across-device validation

Quick Start

Describe your target context and run the Context Gathering Protocol to produce an adaptation plan

Frequently Asked Questions about adapt

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

FAQPage Schema

How do I adapt designs for different screen sizes and devices?▼

To adapt designs for different screen sizes, you reframe existing layouts using mobile-first strategies and responsive breakpoints. This ensures core content remains accessible on small screens while scaling up to tablet and desktop with master-detail patterns.

What is the best way to maintain usability when adapting layouts for mobile?▼

Maintaining usability during layout adaptation requires adjusting content, navigation, and interaction patterns for small screens. Applying a mobile-first strategy ensures core content stays accessible and functional across different device contexts.

Can I use responsive design to reframe an existing layout for print scenarios?▼

Yes, responsive design can reframe existing layouts for print scenarios. The adaptation process handles layout, interaction, and content decisions to ensure the design translates effectively across physical print contexts.

How does context-aware testing work for cross-platform design adaptation?▼

Context-aware testing validates cross-platform design adaptations by checking layouts across different devices and usage scenarios. This testing guidance ensures the final output remains accessible and brand-consistent across all target contexts.

Do I need a context-gathering protocol before starting responsive design adaptation?▼

Yes, you need a context-gathering protocol to start responsive design adaptation. Describing your target context and running this protocol produces a structured adaptation plan that guides subsequent layout and interaction decisions.