skills.rest
nielpattin
nielpattinCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

adapt

Plan responsive UI adaptations across mobile, tablet, desktop, and print contexts.

Updated Apr 21, 2026
Search Tags:#cross-device#usability#design-principles#adaptation#responsive-design#mobile-design#context-gathering
One-click install
npx skills add https://github.com/nielpattin/.pi-tnega --skill adapt-nielpattin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: adapt
Source: https://github.com/nielpattin/.pi-tnega/tree/main/skills/adapt
Command: npx skills add https://github.com/nielpattin/.pi-tnega --skill adapt-nielpattin

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Adapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases.

Core Features & Use Cases

  • Context Gathering Protocol: Invoke /frontend-design — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow the protocol before proceeding — if no design context exists yet, you MUST run /teach-impeccable first. Additionally gather: target platforms/devices and usage contexts.
  • Assessment & Strategy: Identify source and target contexts, adaptation challenges, and usage scenarios to inform responsive decisions.
  • Plan Adaptation Strategy: Create mobile, tablet, and desktop adaptation strategies with layout, interaction, content, and navigation considerations.

Quick Start

Provide a mobile-to-desktop adaptation plan for a dashboard, covering layout changes, interaction targets, and navigation patterns.

Frequently Asked Questions about adapt

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

FAQPage Schema
How do I adapt an existing UI design for responsive cross-device layouts?▼

Adapt an existing UI for responsive cross-device layouts by identifying source and target contexts, then structuring a strategy that addresses layout grids, interaction targets, content, and navigation patterns.

What is the best way to plan a mobile-to-desktop adaptation strategy for a dashboard?▼

Plan a mobile-to-desktop adaptation strategy by mapping layout changes, touch accessibility targets, and navigation patterns to create a structured framework for each specific screen size.

How do responsive design breakpoints affect content and navigation adaptation across tablet and desktop contexts?▼

Responsive design breakpoints drive content and navigation adaptation by triggering distinct layout grids and interaction patterns tailored for tablet and desktop contexts, ensuring cross-device usability.

Can I use a structured adaptation framework for print contexts as well as digital screens?▼

Yes, a structured adaptation framework can be applied to print contexts alongside mobile, tablet, and desktop, extending responsive design principles to static layouts.

Do I need to run a context gathering protocol before planning a responsive design strategy?▼

Yes, you must run a context gathering protocol first to establish design principles and anti-patterns, ensuring the adaptation strategy addresses the correct target platforms and usage scenarios.

What testing considerations should I account for when designing cross-device usability?▼

Cross-device usability testing considerations involve validating touch accessibility targets, responsive breakpoints, and navigation patterns across mobile, tablet, and desktop contexts within the adaptation framework.

Related Skills

Explore More Design & Creative Skills→
PatkikPatkik

i-adapt

Generate structured adaptation plans for designs across devices and platforms.

Community
Intermediate
HieubkavHieubkav

Frontend Responsive

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

Community
Basic
whyashthakkerwhyashthakker

frontend-design

Create production-ready frontend interfaces with design systems in React, Vue, or Angular.

Community
Advanced
bradtaylorsfbradtaylorsf
8

responsive-design

Implement mobile-first CSS grid layouts with media queries and breakpoints.

Community
Intermediate