skills.rest
wukangcheng2944
wukangcheng2944COMMUNITY
Explore all skills by this author →
GitHub

adapt

Adapt UI layouts and interactions across mobile, tablet, desktop, and print contexts.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Adaptations across devices to ensure consistent experiences across screen sizes, contexts, and platforms, reducing design debt and rework.

Core Features & Use Cases

  • Mobile-first layout strategies (single-column stacking, 44x44 touch targets, accessible typography)
  • Tablet/desktop adaptations (multi-column layouts, side navigation, master-detail patterns)
  • Context-driven content and navigation adjustments, print/email-ready guidance

Quick Start

Begin auditing current UI for breakpoints and implement responsive rules to adapt layouts and interactions across targets.

Frequently Asked Questions about adapt

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

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

Responsive design adapts your UI across mobile, tablet, and desktop devices by applying adaptive breakpoints, multi-column layouts, and touch-target sizing to ensure consistent user experiences across screen sizes.

What's the best way to handle layout and navigation changes for different screen sizes?▼

Handle layout and navigation changes by applying context-driven adjustments like single-column stacking for mobile, master-detail patterns for tablet, and side navigation for desktop to maintain content hierarchy across screen sizes.

When do I need to use adaptive breakpoints in my UX project?▼

Adaptive breakpoints are needed when adapting UI and UX projects across multiple screen sizes, allowing layouts to shift from single-column mobile views to multi-column desktop grids while maintaining accessibility considerations.

Does responsive design work for print and email contexts or just digital screens?▼

Responsive design extends beyond digital screens to print and email-ready contexts, applying context-driven content adjustments and layout rules to ensure consistent experiences across mobile, desktop, and print outputs.

How do I audit my current UI for responsive layout and accessibility issues?▼

Audit current UI by checking for adaptive breakpoints, verifying 44x44 touch targets on mobile, assessing accessible typography scaling, and testing interaction patterns across multiple device targets to identify design debt.

Related Skills

Explore More Design & Creative Skills→
openharmonyinsightopenharmonyinsight
31

hmos-multidevice-screen-window-window-size

Classify and fix HarmonyOS layout problems from screen and window size changes.

Official
Advanced
HieubkavHieubkav

Frontend Responsive

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

Community
Basic
AngelP17AngelP17
1

tailwind-design-system

Standardize UI design with Tailwind-based design tokens and component patterns.

Community
Advanced
syncfusionsyncfusion
4

syncfusion-blazor-media-query

Detects screen size changes and binds ActiveBreakPoint for responsive Blazor UI.

Official
Intermediate