agentleFS
Sign inStart free
juandelossantosjuandelossantos/another-agent-skills/skills/adapt-skill/SKILL.md

adapt-skill

Skill1 starsChanged 11 days agoMITView on GitHub

Fix responsive layout issues, missing mobile behavior, touch targets, and viewport handling. Use when layouts break between breakpoints. Do NOT use for static layouts with no responsive requirements.

We split this skill into the rules it gives an agent

2 rules. About 0 are common, 2 are distinctive, and 0 are very specific to this project.

  • ≈0

    Common · estimate

    Many files like this have a rule of this kind.

  • ≈2

    Distinctive · estimate

    This author's own choices. Worth a look.

  • 0

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    After adding responsive review to a shipping pipeline

    line 28
  2. Distinctive:

    Test each major viewport width:

    line 47

≈ “Common” is an estimate: at least 1 in 5 of the 308,232 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

Adapt Skill

Fix responsive behavior so layouts work at every size.

Adapt is the responsive counterpart to polish. Where polish fixes the design system, adapt fixes the viewport.

When to Use

  • Layout breaks between defined breakpoints
  • Mobile feels like an afterthought (tabs, full-width cards, tiny targets)
  • Touch interactions don't work
  • Horizontal scroll overflow
  • User says "this doesn't work on my phone"
  • After adding responsive review to a shipping pipeline

When NOT to Use

  • Creating new responsive layouts from scratch (use build skills)
  • Animations (use delight or optimize)
  • Typography scaling (use typeset)
  • Performance (use optimize)

Output Contract

ArtifactFormatLocationQuality Criteria
Responsive CSS fixesCSSSource filesWorks at 360px, 768px, 1024px, 1440px+

Process

1. Scan at Breakpoints

Test each major viewport width:

WidthTypeCommon issues
360pxSmall mobileTouch targets, overflow, stacked tabs, cramped forms
768pxTabletSplit view breaks, sticky elements overlap
1024pxDesktopContent too wide, whitespace imbalance
1440px+WideColumns stretch too far, line-length > 80ch

2. Fix by Category

Layout

IssueFix
Overflow (horizontal scroll)Add overflow-x: hidden or min-width: 0 on flex children
Broken grid columnsAdd grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) instead of fixed cols
Stacked panelsSide-by-side → stacked below breakpoint
Sticky overlapsCheck position: sticky elements don't overlap content

Touch

IssueFix
Touch target < 44pxIncrease size or padding to minimum 44px (iOS HIG) / 48dp (Material)
Hover-only actionsAdd onClick or tap fallback
No touch feedbackAdd :active state for tap feedback
Carousel too smallMake swipe targets large enough for thumb reach

Input & Forms

IssueFix
Tiny input fieldsSet font-size: 16px on mobile (prevents iOS zoom on focus)
Cramped radio/checkboxIncrease touch area beyond visible element
Date picker too smallUse native <input type=date> on mobile

Viewport

IssueFix
100vh on mobileAdd 100dvh fallback (dynamic viewport height)
Missing viewport metaEnsure <meta name="viewport" content="width=device-width, initial-scale=1">
Element hidden on mobile without reasonVerify hidden / display: none was intentional

3. Output Format

/adapt the dashboard layout

Fix 1: Mobile overflow
  - Before: <div class="grid grid-cols-3"> on mobile
  - After: grid-cols-1 below 768px, grid-cols-3 above

Fix 2: Touch target on filter dropdown
  - Before: height 32px (too small)
  - After: min-height 44px

Fix 3: 100vh on mobile
  - Before: height: 100vh (address bar overlap)
  - After: height: 100dvh

4. Escalation Rules

FindingEscalate to
Needs complete mobile layout rethinkredesign or build
Touch gesture complexitydelight for interaction design
Responsive imagesoptimize for image loading strategy
Animation on scrolldelight for scroll-driven animations

Pitfalls

  • Only checking one breakpoint — Test at least small mobile, tablet, desktop.
  • Fixing with magic numbers — Every breakpoint should match the design system or content needs.
  • Ignoring landscape — Mobile landscape is a real viewport. Check it.
  • Breaking hover-only actions — On touch devices, there is no hover. Always provide tap fallback.

QA Gates

  • No horizontal scroll at 360px width
  • Touch targets ≥ 44px / 48dp on mobile
  • 100vh replaced with 100dvh where needed
  • Forms have font-size: 16px on mobile
  • No hover-only interaction without tap fallback
  • Mobile layout does not replicate desktop columns
  • Viewport meta tag present
  • Tablet layout works (768px-1024px)
  • Line-length ≤ 80ch on wide screens

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

Reviews can't be read right now.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free