Adapt

{
  "schema_version": "2.0",
  "meta": {
    "generated_at": "2026-03-15T08:17:59.188Z",
    "slug": "pbakaus-adapt",
    "source_url": "https://github.com/pbakaus/impeccable/tree/main/source/skills/adapt/",
    "source_ref": "main",
    "model": "claude",
    "analysis_version": "3.0.0",
    "source_type": "community",
    "content_hash": "0fdd9d3fff5e16f30599862c003b50cdf93ff55743b68a1ad6bc8952085452a0",
    "tree_hash": "288be82af6b558187fb70f8b5bce290bc64df1137744d61d2ed1df346038455e"
  },
  "skill": {
    "name": "adapt",
    "description": "Adapt designs to work across different screen sizes, devices, contexts, or platforms. Ensures consistent experience across varied environments.",
    "summary": "Adapt designs to work across different screen sizes, devices, contexts, or platforms. Ensures consistent experience across varied environments.",
    "icon": "📦",
    "version": "1.0.0",
    "author": "pbakaus",
    "license": "MIT",
    "tags": [
      "responsive design",
      "mobile first",
      "cross-platform",
      "UI adaptation",
      "responsive breakpoints"
    ],
    "category": "design",
    "supported_tools": [
      "claude",
      "codex",
      "claude-code"
    ],
    "risk_factors": []
  },
  "security_audit": {
    "risk_level": "safe",
    "is_blocked": false,
    "safe_to_publish": true,
    "summary": "Static scanner flagged 31 potential issues, all evaluated as false positives. The 'external_commands' detections are CSS/HTML code examples (clamp(), display:none, srcset) incorrectly flagged. 'Weak cryptographic algorithm' and 'system reconnaissance' are common English words (desktop, mobile, context) wrongly matched. This is a pure design guidance skill with no executable code, network calls, or file operations.",
    "risk_factor_evidence": [
      {
        "factor": "external_commands",
        "evidence": [
          {
            "file": "SKILL.md",
            "line_start": 149,
            "line_end": 149,
            "context": "CSS clamp() function - FALSE POSITIVE",
            "verdict": "false_positive"
          },
          {
            "file": "SKILL.md",
            "line_start": 163,
            "line_end": 163,
            "context": "CSS display:none property - FALSE POSITIVE",
            "verdict": "false_positive"
          },
          {
            "file": "SKILL.md",
            "line_start": 166,
            "line_end": 166,
            "context": "HTML srcset/picture elements - FALSE POSITIVE",
            "verdict": "false_positive"
          }
        ]
      }
    ],
    "critical_findings": [],
    "high_findings": [],
    "medium_findings": [],
    "low_findings": [],
    "dangerous_patterns": [],
    "files_scanned": 1,
    "total_lines": 200,
    "audit_model": "claude",
    "audited_at": "2026-03-15T08:17:59.188Z",
    "risk_factors": []
  },
  "content": {
    "user_title": "Adapt Designs for Any Screen or Platform",
    "value_statement": "Struggling to make your design work across mobile, tablet, desktop, print, or email? This skill provides expert guidance on adapting designs for different contexts while maintaining consistency and usability.",
    "seo_keywords": [
      "responsive design",
      "mobile first design",
      "cross platform design",
      "adaptive layout",
      "responsive breakpoints",
      "device adaptation",
      "claude code",
      "claude",
      "codex",
      "claude-code"
    ],
    "actual_capabilities": [
      "Analyze source design context and identify adaptation challenges",
      "Plan mobile, tablet, desktop, print, and email adaptation strategies",
      "Recommend layout, interaction, and content adaptation techniques",
      "Guide responsive implementation using CSS Grid, Flexbox, container queries",
      "Suggest touch optimization and accessibility considerations",
      "Provide verification and testing strategies across devices"
    ],
    "limitations": [
      "Does not write actual code - provides guidance and recommendations only",
      "Cannot preview or test designs on real devices",
      "Does not have access to your specific design files or codebase",
      "Does not generate complete implementation code"
    ],
    "use_cases": [
      {
        "title": "Mobile Website Redesign",
        "description": "Adapt an existing desktop website for mobile users with touch-friendly interactions and optimized layouts",
        "target_user": "Web designers and front-end developers"
      },
      {
        "title": "Cross-Platform App UI",
        "description": "Ensure a web app works seamlessly across desktop browsers and mobile tablets with consistent UX",
        "target_user": "UI/UX designers working on responsive applications"
      },
      {
        "title": "Email Newsletter Design",
        "description": "Convert a web-based announcement into a mobile-friendly email compatible with all major email clients",
        "target_user": "Marketing designers and email developers"
      }
    ],
    "prompt_templates": [
      {
        "title": "Basic Mobile Adaptation",
        "prompt": "Help me adapt this [component/page/design] for mobile devices. It was originally designed for [desktop/tablet]. What changes should I make to layout, navigation, and interactions?",
        "scenario": "Beginner user needing mobile design guidance"
      },
      {
        "title": "Tablet and Desktop Strategy",
        "prompt": "I have a mobile-first design and need to adapt it for tablet and desktop. Create an adaptation strategy that uses horizontal space effectively while maintaining consistency.",
        "scenario": "Designer expanding from mobile to larger screens"
      },
      {
        "title": "Print and Email Adaptation",
        "prompt": "How do I adapt a web page design for [print/email]? What are the key differences in layout, content, and technical constraints I need to consider?",
        "scenario": "Marketing team needing multi-channel content"
      },
      {
        "title": "Responsive Implementation Guide",
        "prompt": "Provide specific CSS techniques for implementing responsive design including breakpoints, container queries, fluid typography with clamp(), and touch target sizing.",
        "scenario": "Developer implementing responsive styles"
      }
    ],
    "output_examples": [
      {
        "input": "Help me adapt a complex data dashboard for mobile",
        "output": "For mobile dashboards, prioritize: single-column layout, collapsible sections for secondary data, larger touch targets (44px minimum), sticky headers with key metrics, bottom navigation for quick access, progressive disclosure for complex charts. Consider hiding low-priority widgets entirely on mobile rather than stacking everything."
      },
      {
        "input": "What are best practices for tablet landscape orientation?",
        "output": "Tablet landscape excels at master-detail patterns, side-by-side content panels, multi-column forms, and inline editing. Use two-column layouts rather than single or three-column. Support both touch and pointer input. Allow orientation-specific layouts while maintaining information architecture consistency."
      }
    ],
    "best_practices": [
      "Start with mobile-first approach when possible, then progressively enhance for larger screens",
      "Use content-driven breakpoints instead of arbitrary device widths",
      "Test on real devices rather than relying solely on browser DevTools emulation",
      "Maintain consistent information architecture across all breakpoints and platforms"
    ],
    "anti_patterns": [
      "Hiding core functionality on mobile instead of making it work",
      "Using different information architecture on mobile vs desktop",
      "Breaking user expectations for each platform (e.g., hamburger menus on desktop)",
      "Using generic breakpoints blindly without considering where the design actually breaks"
    ],
    "faq": [
      {
        "question": "What is the difference between responsive and adaptive design?",
        "answer": "Responsive design uses fluid layouts and CSS to adapt to any screen size. Adaptive design uses predefined layouts for specific device categories. Most modern sites use responsive techniques."
      },
      {
        "question": "What are the standard responsive breakpoints?",
        "answer": "Common breakpoints are: mobile (320-767px), tablet (768-1023px), desktop (1024px+). However, content-driven breakpoints that match where your design breaks are more effective than device-based ones."
      },
      {
        "question": "How do I handle images for different screen sizes?",
        "answer": "Use srcset and the picture element to serve different image sizes based on viewport. Also consider the format property for modern formats like WebP with fallbacks, and lazy loading for off-screen images."
      },
      {
        "question": "What touch target size should I use?",
        "answer": "Use minimum 44x44px touch targets for all interactive elements. Increase spacing between targets to prevent accidental taps. Remove hover-dependent interactions since hover does not work on touch devices."
      },
      {
        "question": "How do I adapt navigation for mobile?",
        "answer": "Use hamburger menus or bottom navigation bars on mobile. Keep navigation simple with fewer items. Ensure back buttons are available in the navigation flow. Consider sticky headers for context."
      },
      {
        "question": "Should I use a mobile-specific domain or subdomain?",
        "answer": "No, responsive design with a single URL is preferred for SEO and user experience. Separate mobile sites (m.example.com) create maintenance overhead and can hurt search rankings."
      }
    ]
  },
  "file_structure": [
    {
      "name": "SKILL.md",
      "type": "file",
      "path": "SKILL.md",
      "lines": 200
    }
  ]
}