adapt

Adapt UI designs for mobile, tablet, desktop, print, and email contexts.

Updated Feb 27, 2025

Search Tags:#design #accessibility #context-awareness #ui-ux #responsive-design #cross-context #adapt

Ready to run

npx skills add https://github.com/tuanemuy/dotfiles --skill adapt-tuanemuy

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: adapt
Source: https://github.com/tuanemuy/dotfiles/tree/main/config/claude/skills/adapt
Command: npx skills add https://github.com/tuanemuy/dotfiles --skill adapt-tuanemuy

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

このスキルは、異なるデバイスやコンテキストに対して一貫したユーザー体験を実現するためのデザイン適応を支援します。画面サイズの違い、入力デバイス、プラットフォーム間の差異に対応することで、ブランドと機能の整合性を保ちながら最適なUIを提供します。

Core Features & Use Cases

コンテキスト駆動のレイアウト戦略（モバイルファースト、タブレット、デスクトップ）を定義
インタラクションとナビゲーションの適応ガイドラインを提供
コンテンツ優先順位づけと複数デバイスでのテスト指針の事例

Quick Start

モバイルファーストの設計原則から開始し、ターゲットコンテキストに合わせて徐々にデスクトップ向け要素を追加します。

Frequently Asked Questions about adapt

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

FAQPage Schema

How do I adapt UI design for multiple screen sizes like mobile and desktop?▼

Responsive design maintains a consistent user experience across mobile, tablet, and desktop contexts by applying context-driven layout strategies, adapting interactions, prioritizing content, and defining navigation guidelines for each specific screen size and input method.

What is the best way to maintain consistent UI UX across different devices and platforms?▼

Maintaining consistent UI UX across different devices requires defining context analysis requirements and adaptation strategies that address screen size differences, input devices, and platform variations while preserving brand and functional integrity throughout the responsive design.

Can I use a mobile-first design approach for tablet and desktop UI adaptation?▼

Mobile-first design works for tablet and desktop UI adaptation by starting with core mobile design principles and gradually adding desktop-oriented layout, interaction, and navigation elements tailored to each target context's specific practical requirements.

Does responsive design cover adaptation for print and email contexts beyond web browsers?▼

Responsive design adaptation covers print and email contexts alongside mobile, tablet, and desktop, providing layout, interaction, content, and navigation decisions to maintain a consistent user experience across all these distinct viewing environments.

How do I test cross-context UI adaptation for multiple device types?▼

Testing cross-context UI adaptation involves following defined testing guidelines that evaluate content prioritization, interaction patterns, and navigation decisions across multiple devices to ensure the responsive design meets practical context analysis requirements.