skills.rest
nokusukun
nokusukunCOMMUNITY
Explore all skills by this author →
GitHub

adapt

Create responsive adaptation plans for designs across screen sizes and devices.

Updated Apr 27, 2026
Search Tags:#cross-device#mobile#ux#breakpoints#adaptation#responsive-design#design-systems
One-click install
npx skills add https://github.com/nokusukun/sublime --skill adapt-nokusukun
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: adapt
Source: https://github.com/nokusukun/sublime/tree/main/.impeccable/source/skills/adapt
Command: npx skills add https://github.com/nokusukun/sublime --skill adapt-nokusukun

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designs must render consistently across multiple screen sizes, devices, and contexts, reducing rework and UX gaps.

Core Features & Use Cases

  • Layout Adaptation: Strategy for fluid, responsive layouts from mobile to desktop with orientation changes.
  • Interaction & Accessibility: Guidance on touch targets, gestures, and accessible controls per context.
  • Content Prioritization: Context-aware content prioritization and progressive disclosure.
  • Use Case: Apply to product pages, dashboards, and forms to maintain usability across devices without duplicating work.

Quick Start

Provide a responsive adaptation plan that makes the design work across mobile, tablet, and desktop.

Frequently Asked Questions about adapt

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

FAQPage Schema
How do I adapt designs for different screen sizes across mobile and desktop?▼

To adapt designs across screen sizes, you need a responsive adaptation plan that specifies breakpoints and fluid layouts. This ensures consistent rendering and usability across mobile, tablet, and desktop devices without duplicating work.

What is the best way to handle touch targets and gestures for mobile UX?▼

Handling touch targets for mobile UX requires context-aware interaction and accessibility guidance. This approach specifies appropriate touch target sizes and accessible controls per device context to maintain usability.

How do I prioritize content for responsive design across different devices?▼

Prioritizing content for responsive design involves context-aware content prioritization and progressive disclosure. This strategy ensures the most critical information is presented effectively based on the specific device and screen constraints.

Can I apply responsive design strategies to complex dashboards and forms?▼

Yes, you can apply responsive adaptation strategies to complex dashboards and forms. The plan maintains cross-device UX consistency by handling orientation changes and fluid layout adjustments for these interfaces.

When do I need to specify breakpoints for cross-device UX adaptation?▼

You need to specify breakpoints for cross-device UX adaptation when a design must render consistently across multiple devices. Defining breakpoints prevents UX gaps by ensuring fluid layouts respond correctly to orientation changes and screen size variations.

Related Skills

Explore More Design & Creative Skills→
Imad-OuteImad-Oute
2

mh-cto-sdlc-component-spec

Write UI component specifications with design system tokens and wireframe behavior.

Community
Advanced
imkdwimkdw
1

Frontend Responsive

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

Community
Intermediate
aditya30103aditya30103

ui

Audit UI components for accessibility, mobile parity, and theme compliance.

Community
Advanced
kyamsSRLkyamsSRL

responsive-design

Implement responsive layouts with container queries, fluid typography, and CSS Grid.

Community
Intermediate