adapt

Adapt UI designs across screen sizes using responsive and fluid layout techniques.

Updated Jul 18, 2026

Search Tags:#design #ui #layout #mobile #responsive #breakpoints #stitch

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill solves the challenge of maintaining design integrity and usability when content must be adapted across diverse screen sizes, devices, and input methods.

Core Features & Use Cases

Context-Aware Adaptation: Automatically applies responsive strategies for mobile, tablet, desktop, and print contexts.
Stitch-First Workflow: Integrates with Google's Stitch AI to ground design proposals in a curated, high-taste design system.
Use Case: When transitioning a complex desktop dashboard to a mobile-first experience, this skill enforces touch-target sizing, vertical stacking, and progressive disclosure to ensure the interface feels native to the device.

Quick Start

Use the adapt skill to refactor the current desktop layout for mobile devices following the Stitch-first mandate.

Frequently Asked Questions about adapt

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

FAQPage Schema

How do I adapt a desktop UI layout for mobile devices?▼

Responsive design adaptation automatically adjusts UI layouts across varying screen sizes and input contexts using fluid layout techniques and context-specific breakpoints to maintain cross-platform consistency.

What is the best way to transition a complex dashboard to a mobile-first experience?▼

Transitioning a complex dashboard to a mobile-first experience requires enforcing touch-target sizing, vertical stacking, and progressive disclosure to ensure the interface remains usable and feels native to the device context.

How does responsive design maintain design system standards across different breakpoints?▼

Responsive design maintains design system standards across breakpoints by enforcing strict adherence to a curated design system, ensuring visual integrity and usability remain consistent from desktop to mobile environments.

Do I need a specific design system to adapt layouts across tablet and desktop contexts?▼

Yes, adapting layouts across tablet and desktop contexts requires adherence to a Stitch-first mandate, grounding design proposals in a curated design system to ensure strict cross-platform consistency.

Can I use fluid layout techniques for print contexts or only digital screens?▼

Fluid layout techniques support both digital screens and print contexts, automatically applying responsive layout strategies to maintain design integrity regardless of the output medium.