adapt

Overview

What is the adapt Skill?

The adapt skill enables frontend developers to transform existing designs so they work seamlessly across different screen sizes, devices, and usage contexts. It focuses on implementing breakpoints, fluid layouts, and touch targets, making it essential for responsive design and cross-device compatibility.

Who Should Use adapt?

This skill is ideal for frontend developers, UI engineers, and teams who need to adapt web or app interfaces for mobile, tablet, desktop, or other platforms. If your project requires consistent usability and appearance across devices, adapt provides a structured workflow to guide your process.

Problems Solved

• Ensures designs are usable on any device or screen size
• Helps identify and address layout, input, and performance challenges
• Provides a repeatable process for responsive adaptation

How to Use

Installation Steps

1. Install the adapt skill using the following command:

   npx skills add https://github.com/pbakaus/impeccable --skill adapt

2. Begin by reviewing the SKILL.md file for the core workflow and requirements.

Initial Setup and Preparation

• Before adapting, invoke the $frontend-design skill to gather design principles and context. If no design context exists, run $teach-impeccable first.
• Collect information about target platforms, devices, and user contexts.

Workflow Overview

• Assess the Adaptation Challenge:
  • Identify the original design context (e.g., desktop web, mobile app).
  • Understand the target context: device type, input methods, screen constraints, connection quality, and user expectations.
  • Pinpoint adaptation challenges such as layout issues, input differences, or content overflow.
• Plan Your Adaptation Strategy:
  • Decide on breakpoints, fluid grids, and touch target sizes.
  • Prioritize features and content for each context.
• Implement and Test:
  • Apply responsive CSS, flexible layouts, and adaptive assets.
  • Test across devices and adjust as needed.

Key Files to Review

• SKILL.md — Main workflow and adaptation steps
• README.md, AGENTS.md, metadata.json — Additional context and references if available

FAQ

When should I use the adapt skill?

Use adapt whenever you need to make an interface work across multiple devices or screen sizes, or when users mention responsive design, mobile layouts, or cross-device compatibility.

What preparation is required before using adapt?

You must gather design context using $frontend-design and, if necessary, $teach-impeccable. Collect details about target devices, platforms, and user scenarios.

Where can I find supporting scripts or references?

Check the repository's Files tab for any additional resources, helper scripts, or nested references related to adapt.

Is adapt suitable for purely visual design tasks?

No, adapt is focused on practical frontend implementation for responsive and adaptive interfaces, not just visual design.