adapt

Overview of adapt skill

What adapt skill does

The adapt skill helps you turn an existing interface or design concept into a version that works in a different context: mobile, tablet, desktop, print, TV, watch, or another platform with different constraints. In practice, adapt is for UI/UX design work where the core problem is not “design this from scratch,” but “make this design work somewhere else without breaking usability.”

Who should use adapt

adapt is best for designers, PMs, frontend teams, and AI users who already have a source design or product flow and need a structured adaptation pass. It is especially useful for adapt for UI/UX Design tasks such as desktop-to-mobile redesigns, touch-target adjustments, navigation simplification, and context-aware layout changes.

Real job-to-be-done

Most users want more than responsive advice. They need the model to examine:

• the original design assumptions
• the target device and usage context
• what will fail when moved across contexts
• the tradeoffs needed to preserve task success

That is the real value of adapt: it frames adaptation as a context shift, not just a breakpoint exercise.

What makes adapt different from a generic prompt

A normal prompt often jumps straight to layout suggestions. The adapt skill is stronger when you need a deliberate workflow: assess source context, define target constraints, identify failure points, and then propose adaptation strategies. It also explicitly requires upstream design context from $frontend-design, which makes it more grounded than a freeform “make this responsive” request.

Biggest adoption caveat

adapt is not a one-shot generator for polished final screens. It depends on good context. If you do not provide the original design’s goals, current structure, and target environment, output quality drops fast. The skill is best used as a design decision framework plus adaptation prompt scaffold.

How to Use adapt skill

Install context for adapt skill

If you use the GitHub skills workflow, install adapt from the repository that contains it:

npx skills add pbakaus/impeccable --skill adapt

Then open .codex/skills/adapt/SKILL.md locally or inspect the GitHub source:
https://github.com/pbakaus/impeccable/tree/main/.codex/skills/adapt

Read this file first

Start with:

• SKILL.md

This skill is self-contained. There are no extra repo resources, scripts, or references doing hidden work, so your adoption decision should focus on whether the workflow in SKILL.md matches your design process.

Mandatory dependency many users miss

Before using adapt, the skill explicitly tells you to invoke $frontend-design. That dependency matters because it contains the broader design principles and the Context Gathering Protocol. If no design context exists yet, the skill says to run $teach-impeccable first.

That means adapt install is easy, but adapt usage is only strong if you also bring in the prerequisite design context.

What input adapt needs

The minimum useful input is:

• source context: what the current design was made for
• target context: mobile, tablet, print, TV, etc.
• device and input method: touch, mouse, keyboard, voice
• constraints: viewport, orientation, bandwidth, environment
• task priorities: what users must still be able to do quickly
• known weak spots: dense tables, long forms, multi-column layouts, hover interactions

If you only say “adapt this for mobile,” expect generic output.

Turn a rough goal into a strong adapt prompt

Weak prompt:

• “Use adapt on this dashboard for mobile.”

Stronger prompt:

• “Use adapt to convert this desktop analytics dashboard to a mobile web experience. Source context: 1440px desktop, mouse, long-session analysis. Target context: phone, touch, portrait-first, intermittent usage, quick KPI checks. Critical tasks: scan metrics, filter date ranges, compare top campaigns, export summary. Current issues: 5-column table, hover tooltips, sidebar nav, dense controls. Preserve information hierarchy but reduce interaction cost.”

The second prompt gives adapt enough context to reason about tradeoffs instead of inventing them.

Best workflow for adapt usage

A practical adapt guide looks like this:

1. Gather source design context.
2. Define the target environment in concrete terms.
3. List what assumptions break across contexts.
4. Ask adapt for strategy before asking for screens.
5. Review the proposed hierarchy, navigation, and interaction changes.
6. Run a second pass for component-level fixes: spacing, controls, touch targets, truncation, overflow, and progressive disclosure.

This works better than asking for a full redesign immediately.

What adapt is especially good at

adapt is strongest when the design challenge includes:

• desktop-to-mobile conversion
• adapting mouse/hover patterns to touch
• reducing cognitive load in constrained spaces
• reflowing content-heavy layouts
• changing navigation models by context
• preserving core tasks while dropping nonessential UI

It is less about visual styling and more about structural adaptation.

What to ask adapt to produce

For better outputs, ask for explicit deliverables such as:

• adaptation risks
• changed assumptions from source to target
• information hierarchy shifts
• layout strategy by breakpoint or device class
• navigation changes
• interaction changes by input method
• component-level recommendations
• tradeoff summary

That gives you something actionable for product and design review.

Common misuses that hurt output quality

Avoid using adapt as if it were:

• a pure CSS responsiveness tool
• a full visual design system generator
• a substitute for source design documentation
• a generic UI critique skill

If your main need is component polish, design principles, or broad UX review, start with the prerequisite design skill first and use adapt only for the cross-context step.

Practical prompt pattern for adapt for UI/UX Design

A reliable structure is:

• Source: what exists today
• Target: where it needs to work
• Constraints: screen, input, connection, environment
• Priority tasks: what must remain fast and easy
• Breakage risks: what likely fails
• Output requested: strategy, layout, components, tradeoffs

This pattern improves adapt usage because it mirrors the skill’s own internal workflow.

adapt skill FAQ

Is adapt skill only for responsive web design?

No. adapt covers any context shift where interaction assumptions change, including device type, platform, input method, and usage environment. Responsive web is a common case, but not the only one.

Is adapt beginner-friendly?

Yes, with a caveat. The structure is simple, but beginners may under-specify the source and target contexts. If you are new, spend extra time describing the original design and the target environment before invoking adapt.

How is adapt better than an ordinary prompt?

The main advantage is decision structure. adapt pushes you to identify source assumptions, target constraints, and adaptation challenges first. That reduces shallow answers like “stack cards vertically” and increases useful tradeoff reasoning.

When should I not use adapt?

Do not use adapt when:

• there is no existing design or flow to adapt
• you mainly want visual styling ideas
• you need code implementation details more than design reasoning
• the problem is generic UX critique rather than cross-context adaptation

Does adapt require other skills?

Yes. The skill explicitly depends on $frontend-design, and may require $teach-impeccable first if design context has not been established yet. This is one of the most important pre-install realities.

Can adapt handle mobile-first and desktop-first cases?

Yes. The skill is not locked to desktop-to-mobile. It works in either direction as long as you explain the original context and the target one clearly.

How to Improve adapt skill

Give better context, not longer prompts

The fastest way to improve adapt results is to increase specificity, not word count. Replace vague labels like “mobile users” with operational constraints such as:

• one-handed use
• portrait orientation
• touch only
• short sessions
• low bandwidth
• bright outdoor viewing

These details directly affect adaptation choices.

Name the assumptions that break

Strong adapt prompts explicitly identify what stops working in the new context:

• hover-only interactions
• wide tables
• multi-panel dashboards
• drag-and-drop patterns
• long checkout forms
• tiny hit areas
• deeply nested navigation

This helps the skill focus on real adaptation work instead of generic layout advice.

Ask for tradeoffs, not just recommendations

If you want install-worthy output quality from adapt, ask it to explain:

• what to keep
• what to compress
• what to hide behind progressive disclosure
• what to remove entirely
• what must change for accessibility or input-method reasons

That turns the response into a usable design rationale.

Iterate in two passes

A good improvement loop is:

1. First pass: adaptation strategy and hierarchy.
2. Second pass: component-level details and edge cases.

Users often ask for both at once and get blurry output. adapt performs better when the first pass defines the structural direction.

Provide success criteria before review

Tell adapt how you will judge the adaptation. For example:

• primary task completed in under 3 taps
• no horizontal scrolling on key screens
• chart insights visible without hover
• top actions reachable by thumb
• print version preserves summary and totals

Success criteria make the recommendations more concrete and easier to compare.

Common failure modes to watch for

The most common weak outputs happen when:

• target context is underspecified
• source design assumptions are missing
• the prompt asks for visuals without workflow context
• too many tasks are treated as equally important
• users confuse responsive resizing with full interaction redesign

Most of these are input-quality problems, not skill-quality problems.

How to get better second-round outputs

After the first adapt response, follow up with one of these:

• “Revise for thumb-first navigation.”
• “Prioritize scanability over feature parity.”
• “Keep analytics depth, but optimize for quick-glance use.”
• “Adapt this flow for offline or poor connection.”
• “Show what changes if the target is tablet instead of phone.”

These refinements are better than asking the skill to “improve” the result in general terms.

Best way to evaluate adapt before wider adoption

Before rolling adapt into your team workflow, test it on one real interface with obvious context mismatch, such as a dense desktop tool moving to mobile. Check whether it:

• identifies the right broken assumptions
• proposes sensible priority shifts
• changes interactions, not just layout
• preserves the main job users came to do

If it does, the skill is a good fit for recurring adaptation work.