skills.rest
jayteealao
jayteealaoCOMMUNITY
Explore all skills by this author →
GitHub

design-adapt

Propose adaptive strategies for responsive layouts across mobile, tablet, desktop, and print contexts.

2|Updated Jan 12, 2026
Search Tags:#cross-device#breakpoints#responsive-design#touch-targets#design-adaptation#contextual-design
One-click install
npx skills add https://github.com/jayteealao/agent-skills --skill design-adapt
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-adapt
Source: https://github.com/jayteealao/agent-skills/tree/main/plugins/sdlc-workflow/skills/design-adapt
Command: npx skills add https://github.com/jayteealao/agent-skills --skill design-adapt

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams struggle to maintain usable, coherent layouts across multiple screen sizes, devices, and contexts. This Skill provides a structured approach to rethinking experiences for different platforms and input methods.

Core Features & Use Cases

  • Responsive breakpoints, fluid layouts, and scalable components for cross-device compatibility
  • Context-aware interaction patterns, accessible touch targets, and adaptive navigation
  • Use Case: align brand and usability when delivering products that must work on mobile, tablet, and desktop without sacrificing consistency.

Quick Start

Provide an adaptive design plan that makes the project responsive and accessible for the specified target device.

Frequently Asked Questions about design-adapt

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

FAQPage Schema
How do I design responsive layouts that adapt across mobile, tablet, and desktop?▼

To design responsive layouts, you apply fluid grids, strategic breakpoints, and scalable components to maintain usability and brand consistency across mobile, tablet, and desktop contexts.

What are the guidelines for accessible touch targets in cross-device design?▼

Accessible touch targets in cross-device design require enforcing specific size guidelines to ensure mobile interactions remain usable, alongside implementing context-aware navigation patterns that adapt to varying input methods.

Can this approach handle design adaptation for print contexts as well as digital screens?▼

Yes, design adaptation for print contexts is supported alongside digital screens, resolving cross-context challenges by proposing adaptive strategies that cover layout, interaction, and content strategy decisions for physical media.

What is the best way to validate adaptive design decisions for multiple screen sizes?▼

The best way to validate adaptive design decisions is through iterative design validation, continuously testing and resolving cross-context challenges to ensure layout, interaction, and content strategies function properly across multiple screen sizes.

How do context-aware navigation patterns improve responsive design?▼

Context-aware navigation improves responsive design by adapting interaction patterns based on the user's device and environment, ensuring accessible touch targets and fluid layouts align with the specific mobile, tablet, or desktop context.

Related Skills

Explore More Design & Creative Skills→
vKenjovKenjo

tlc-spec-driven

Guide projects through Specify, Design, Tasks, and Execute phases.

Community
Advanced
imkdwimkdw
1

Frontend Responsive

Implement Tailwind CSS v3 breakpoint-driven responsive UI layouts for Next.js applications.

Community
Intermediate
NymfariousNymfarious
1

optimizing-mobile-experience

Optimize StickerNest for mobile touch interactions and responsive layouts.

Community
Advanced
rodhrodh

prototype

Convert wireframe designs into executable prompts for prototyping tools.

Community
Intermediate