adapt_skill

This skill helps you adapt designs to work across mobile, tablet, and desktop, ensuring consistent experiences across contexts and devices.

JavaScript

10.4k

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

3 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill pbakaus/impeccable --skill adapt

SKILL.md7.0 KB

Overview

This skill adapts designs to work across different screen sizes, devices, contexts, and platforms while preserving brand and core functionality. It ensures the experience feels native to each environment by rethinking layout, interaction, and content rather than merely scaling. Use it to convert desktop designs to mobile, optimize for tablet or print, and prepare email-friendly layouts.

How this skill works

It follows a Context Gathering Protocol: identify the original design assumptions, collect target devices and usage contexts, and surface adaptation challenges. Then it produces a context-specific strategy (layout, interaction, content, navigation) and implementation guidance using responsive breakpoints, container queries, and adaptive techniques. Finally it prescribes verification steps and real-device testing to validate the adaptations.

When to use it

Converting desktop web designs into mobile-first experiences
Preparing an app UI for tablet and hybrid devices
Adapting a web interface for email or print delivery
Making touch-friendly versions of mouse-first interfaces
Ensuring consistent brand experience across vastly different screen sizes

Best practices

Run the Context Gathering Protocol before any changes and gather target devices and use cases
Prefer content-driven breakpoints over generic ones; test where layout breaks naturally
Design for the input method: 44x44px minimum touch targets and remove hover-dependent interactions
Use progressive disclosure to prioritize core content on small screens
Test on real devices, multiple browsers, orientations, and throttled networks

Example use cases

Transforming a three-column analytics dashboard into a mobile-friendly single-column feed with prioritized metrics
Redesigning navigation: replace desktop side nav with bottom navigation on phones
Creating print-ready versions of reports with page breaks, metadata, and simplified color
Converting marketing pages into 600px-wide email templates with inline CSS and clear CTAs
Adapting a tablet form to support master-detail views and denser layouts in landscape

FAQ

No. Keep the same information architecture where possible, but reorganize surface-level navigation and prioritization to match platform expectations.

Are browser dev tools enough for testing?

No. Dev tools are useful for iteration, but always validate on real devices, multiple OSes, and network conditions to catch interaction and performance issues.