adapt

Develop responsive design strategies with breakpoints, fluid grids, and touch targets.

Updated Aug 27, 2026

Search Tags:#cross-device #mobile #breakpoints #responsive-design #ux-patterns #adapt #tablet

Ready to run

npx skills add https://github.com/yinshucheng/vibeflow --skill adapt-yinshucheng

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Adapts designs to work across different screen sizes, devices, contexts, or platforms by defining breakpoints, fluid layouts, and accessible touch targets.

Core Features & Use Cases

Responsive breakpoints: Create context-aware breakpoints that ensure content remains legible and actionable across mobile, tablet, and desktop.
Fluid layout & touch targets: Implement fluid grids and adequately sized touch targets to improve usability on touch devices.
Cross-device patterns: Apply design patterns that translate well from mobile to desktop, preserving hierarchy and interaction.

Quick Start

Provide a concise responsive design plan for a product page with breakpoints and touch-friendly targets.

Frequently Asked Questions about adapt

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

FAQPage Schema

How do I create a responsive design strategy that adapts interfaces across mobile, tablet, and desktop?▼

Responsive design strategies adapt interfaces by defining context-aware breakpoints, fluid layouts, and adequately sized touch targets to maintain hierarchy and usability across mobile, tablet, and desktop contexts.

What are context-aware breakpoints and when do I need them for cross-device layouts?▼

Context-aware breakpoints are layout thresholds ensuring content remains legible and actionable across devices. They are needed when designing cross-device interfaces that require fluid grids and accessible touch targets.

How do I implement fluid grids and touch-friendly targets for mobile UX patterns?▼

Implement fluid grids and touch-friendly targets by applying cross-device UX patterns that preserve interaction hierarchy, ensuring touch targets are adequately sized to improve usability on mobile and tablet devices.

Does this approach provide testing protocols and accessibility considerations for responsive design?▼

Yes, this approach specifies requirements for implementation guidance, including accessibility considerations for touch targets and testing protocols to validate cross-device responsive behavior.

What is the best way to translate design patterns from mobile to desktop without losing hierarchy?▼

The best way to translate cross-device patterns is by applying responsive design strategies that preserve visual hierarchy and interaction consistency, ensuring layouts adapt fluidly from mobile to desktop contexts.