AI SummaryHeuristic scoring (no AI key configured).
Install
Copy this and paste it into Claude Code, Cursor, or any AI assistant:
I want to install the "adapt" skill in my project. Please run this command in my terminal: # Install skill into your project mkdir -p .claude/skills/adapt && curl --retry 3 --retry-delay 2 --retry-all-errors -o .claude/skills/adapt/SKILL.md "https://raw.githubusercontent.com/pbakaus/impeccable/main/.claude/skills/adapt/SKILL.md" Then restart Claude Code (or reload the window in Cursor) so the skill is picked up.
Description
Adapt designs to work across different screen sizes, devices, contexts, or platforms. Ensures consistent experience across varied environments.
Assess Adaptation Challenge
Understand what needs adaptation and why: • Identify the source context: • What was it designed for originally? (Desktop web? Mobile app?) • What assumptions were made? (Large screen? Mouse input? Fast connection?) • What works well in current context? • Understand target context: • Device: Mobile, tablet, desktop, TV, watch, print? • Input method: Touch, mouse, keyboard, voice, gamepad? • Screen constraints: Size, resolution, orientation? • Connection: Fast wifi, slow 3G, offline? • Usage context: On-the-go vs desk, quick glance vs focused reading? • User expectations: What do users expect on this platform? • Identify adaptation challenges: • What won't fit? (Content, navigation, features) • What won't work? (Hover states on touch, tiny touch targets) • What's inappropriate? (Desktop patterns on mobile, mobile patterns on desktop) CRITICAL: Adaptation is not just scaling - it's rethinking the experience for the new context.
Plan Adaptation Strategy
Create context-appropriate strategy:
Mobile Adaptation (Desktop → Mobile)
Layout Strategy: • Single column instead of multi-column • Vertical stacking instead of side-by-side • Full-width components instead of fixed widths • Bottom navigation instead of top/side navigation Interaction Strategy: • Touch targets 44x44px minimum (not hover-dependent) • Swipe gestures where appropriate (lists, carousels) • Bottom sheets instead of dropdowns • Thumbs-first design (controls within thumb reach) • Larger tap areas with more spacing Content Strategy: • Progressive disclosure (don't show everything at once) • Prioritize primary content (secondary content in tabs/accordions) • Shorter text (more concise) • Larger text (16px minimum) Navigation Strategy: • Hamburger menu or bottom navigation • Reduce navigation complexity • Sticky headers for context • Back button in navigation flow
Tablet Adaptation (Hybrid Approach)
Layout Strategy: • Two-column layouts (not single or three-column) • Side panels for secondary content • Master-detail views (list + detail) • Adaptive based on orientation (portrait vs landscape) Interaction Strategy: • Support both touch and pointer • Touch targets 44x44px but allow denser layouts than phone • Side navigation drawers • Multi-column forms where appropriate
Discussion
Health Signals
My Fox Den
Community Rating
Sign in to rate this booster