skills.rest
Davie521
Davie521COMMUNITY
Explore all skills by this author →
GitHub

adapt

Plan responsive adaptations for designs across mobile, tablet, and desktop contexts.

7|Updated Mar 4, 2026
Search Tags:#design#accessibility#mobile#responsive#breakpoints#desktop
One-click install
npx skills add https://github.com/Davie521/claude-skills --skill adapt-davie521
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: adapt
Source: https://github.com/Davie521/claude-skills/tree/main/plugins/design/skills/adapt
Command: npx skills add https://github.com/Davie521/claude-skills --skill adapt-davie521

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designs often fail to render effectively across devices and contexts; this skill provides a structured approach to adapt layouts, interactions, and content for mobile, tablet, desktop, and beyond.

Core Features & Use Cases

  • Responsive breakpoints planning across mobile, tablet, and desktop
  • Touch-target sizing, accessible interactions, and progressive enhancement
  • Context-specific patterns for navigation, content prioritization, and typography
  • Use Case: Prepare a single design system that can adapt to smartphone portrait, tablet landscape, and desktop workflows.

Quick Start

Provide a responsive adaptation plan for a given design across a specified target context.

Frequently Asked Questions about adapt

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

FAQPage Schema
How do I make my design responsive across mobile, tablet, and desktop?▼

A responsive adaptation plan specifies breakpoint strategies, touch-target sizing, and progressive enhancement for target contexts. It guides applying layout and interaction patterns from mobile to desktop with clear accessibility considerations.

What's the best way to plan responsive breakpoints for a design system?▼

Planning responsive breakpoints involves defining adaptive layout strategies for smartphone portrait, tablet landscape, and desktop workflows. You specify context-specific patterns for typography, content prioritization, and navigation across each breakpoint.

How do I ensure accessible interactions and touch-target sizing on mobile devices?▼

Accessible interactions on mobile require proper touch-target sizing and progressive enhancement. You specify adaptive interaction strategies that maintain clear accessibility considerations across smartphone, tablet, and desktop contexts.

Does this approach work for adapting a single design system to multiple device contexts?▼

Yes, adapting a single design system to multiple device contexts involves specifying responsive layouts and content strategies for smartphone portrait, tablet landscape, and desktop workflows. It provides a structured approach to ensure effective rendering across all contexts.

When do I need to specify adaptive content and layout strategies for different screen sizes?▼

You need adaptive content and layout strategies when designs fail to render effectively across varying screen sizes and contexts. It involves applying context-specific patterns for navigation, content prioritization, and typography from mobile to desktop and beyond.

Related Skills

Explore More Design & Creative Skills→
claude-office-skillsclaude-office-skills
368

infographic

Design infographic layouts with content structures, color palettes, and typography.

Official
Intermediate
webdriveriowebdriverio
11

Frontend Components

Enforce frontend component coding standards across web UI projects.

Official
Basic
shynlee04shynlee04

Frontend Responsive

Implement responsive, mobile-first designs with fluid layouts and standard breakpoints.

Community
Basic
toddmoytoddmoy
1

responsive layout

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

Community
Advanced