skills.rest
yinshucheng
yinshuchengCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/yinshucheng/vibeflow --skill adapt-yinshucheng
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
SHUAXINDIARYSHUAXINDIARY
4

adapt

Generate responsive adaptation strategies for target devices and usage contexts.

Community
Advanced
HieubkavHieubkav

Frontend Responsive

Implement responsive mobile-first layouts with fluid containers, breakpoints, and touch targets.

Community
Basic
Dzakiamriz22Dzakiamriz22
1

responsive

Implement mobile-first responsive layouts with CSS Grid, Flexbox, and Tailwind breakpoints.

Community
Intermediate
FAeN399FAeN399

css-layout-builder

Create responsive CSS layouts using Grid, Flexbox, and container queries.

Community
Advanced