skills.rest
navikt
naviktOFFICIAL
Explore all skills by this author →
WebsiteGitHub

adapt

Translate desktop layouts to mobile, tablet, and print experiences.

1|1|Updated Feb 2, 2026
Search Tags:#design#accessibility#responsive#ux#cross-context#adapt
One-click install
npx skills add https://github.com/navikt/watson-sak-frontend --skill adapt-navikt
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: adapt
Source: https://github.com/navikt/watson-sak-frontend/tree/main/.agents/skills/adapt
Command: npx skills add https://github.com/navikt/watson-sak-frontend --skill adapt-navikt

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Adapt designs to work across different screen sizes, devices, contexts, or platforms. Ensures consistent experience across varied environments.

Core Features & Use Cases

  • Context-aware adaptation: Adjust layouts, navigation, and interactions for mobile, tablet, desktop, and print.
  • Device-agnostic strategies: Provide responsive patterns and accessibility-aware components that perform reliably on touch and pointer inputs.
  • Use Case: A marketing dashboard renders correctly on wide desktops and small mobile screens without feature loss.

Quick Start

Adapt an existing desktop layout to a mobile-friendly version.

Frequently Asked Questions about adapt

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

FAQPage Schema
How do I adapt a desktop design layout for mobile and tablet screens?▼

Adapt desktop designs for mobile by translating layout decisions, interaction patterns, and content prioritization to fit smaller screens. This process ensures contextual adaptation strategies maintain consistent user experiences and accessibility across varied touch and pointer inputs.

What is the best way to ensure responsive design patterns work across different devices?▼

Responsive design patterns work across devices by enforcing device-agnostic strategies and accessibility-aware components. This approach provides reliable performance on touch and pointer inputs while maintaining feature parity across desktop, tablet, and mobile contexts.

Can I use contextual adaptation strategies to prepare designs for print experiences?▼

Contextual adaptation strategies support print experiences by translating interactive digital patterns into static layouts. The process adjusts content prioritization and layout decisions to ensure the design renders correctly when printed alongside mobile and desktop versions.

Does adapting a marketing dashboard for small screens require sacrificing features?▼

Adapting a marketing dashboard for small screens does not require sacrificing features when using documented adaptation plans and reusable patterns. Device-agnostic strategies ensure consistent functionality and accessibility across wide desktops and small mobile screens without feature loss.

When do I need documented plans for cross-context design adaptation?▼

Documented plans for cross-context design adaptation are needed when translating desktop patterns across mobile, tablet, and print environments. They enforce reusable patterns and accessibility considerations, ensuring consistent experiences across different screen sizes, orientations, and interaction inputs.

Related Skills

Explore More Design & Creative Skills→
oriysoriys

adapt

Adapt designs across mobile, tablet, desktop, print, and email contexts.

Community
Intermediate
WdanielBWdanielB

responsive-design

Implement responsive layouts with container queries, fluid typography, CSS Grid, and mobile-first breakpoints.

Community
Intermediate
petbrainspetbrains
13

frontend-design-review

Review frontend UI/UX designs for accessibility and responsive behavior.

Official
Basic
pproencapproenca
193

tailwind-responsive-ui

Apply responsive Tailwind CSS patterns for layouts across screen sizes.

Community
Intermediate