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

Ready to run

npx skills add https://github.com/OmOc3/physica --skill adapt-omoc3

💬 Prompt for ChatGPT / Claude Chat▼

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.