skills.rest
OmOc3
OmOc3COMMUNITY
Explore all skills by this author →
GitHub

adapt

Coordinate responsive design workflows with breakpoints, fluid layouts, and touch targets.

Updated Aug 23, 2026
Search Tags:#design#accessibility#responsive#breakpoints#touch-targets#fluid-layouts
One-click install
npx skills add https://github.com/OmOc3/physica --skill adapt-omoc3
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: adapt
Source: https://github.com/OmOc3/physica/tree/main/.codex/skills/adapt
Command: npx skills add https://github.com/OmOc3/physica --skill adapt-omoc3

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designs often fail to provide a consistent experience across devices, contexts, and platforms. This skill guides teams to implement breakpoints, fluid layouts, and accessible touch targets to ensure a native feel on mobile, tablet, desktop, and print.

Core Features & Use Cases

  • Breakpoints and fluid layouts that adapt layouts across mobile, tablet, and desktop.
  • Accessible touch targets and scalable typography for readability and usability.
  • Use cases include mobile-first dashboards, cross-device storefronts, and print-ready layouts.

Quick Start

Start by auditing target devices and applying a mobile-first, breakpoint-driven adaptation plan.

Frequently Asked Questions about adapt

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

FAQPage Schema
How do I implement responsive design breakpoints for fluid layouts across mobile and desktop?▼

Responsive design breakpoints structure fluid layouts by applying a mobile-first adaptation plan and CSS design tokens to adapt interfaces across mobile, tablet, desktop, and print contexts.

What's the best way to ensure accessible touch targets and scalable typography in cross-device interfaces?▼

Accessible touch targets and scalable typography are implemented using device-agnostic layout strategies and CSS design tokens to ensure readability and native usability across varying screen sizes.

Does this responsive design workflow support print-ready layouts and cross-device storefronts?▼

Responsive design workflows support print-ready layouts and cross-device storefronts by applying breakpoint-driven adaptation plans that ensure a consistent experience across web, mobile, and print platforms.

How do I audit target devices for a mobile-first breakpoint adaptation plan?▼

Auditing target devices starts by analyzing screen contexts, then applying a mobile-first, breakpoint-driven adaptation plan using fluid layouts and design tokens to coordinate responsive workflows.

When should I use fluid typography and design tokens for device-agnostic layout strategies?▼

Fluid typography and design tokens are used when interfaces require device-agnostic layout strategies, ensuring consistent readability and accessible touch targets across mobile, tablet, and desktop breakpoints.

Related Skills

Explore More Design & Creative Skills→
pierregueroultpierregueroult

responsive-design

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

Community
Intermediate
oborchersoborchers
28

responsive-design

Implement responsive web design with CSS Grid, container queries, and responsive images.

Community
Intermediate
fusenginefusengine
22

responsive-system

Implement mobile-first responsive layouts with Tailwind CSS breakpoints and container queries.

Community
Intermediate
marnecmarnec
1

responsive-design

Apply container queries, fluid typography, and grid/flex layouts for responsive UI.

Community
Intermediate