adapt

adapt is a skill for Claude Code from HK-hub/AgentSkills. It costs 51 tokens per session (1,525 once invoked), scanned A, a copy of adapt, MIT.

A design adaptation guide for making interfaces work across screen sizes, devices, input methods, and usage situations. It covers breakpoints, flexible layouts, and touch-friendly controls.

In plain words
What is it for?
Use it to adapt desktop designs to phones and tablets, plan responsive layouts, choose breakpoints, and improve cross-device interaction.
Why use it?
It helps uncover assumptions that only work on one screen or with a mouse and desktop keyboard.

Skill for Claude Code

Written for Claude Code: user-invocable in frontmatter.

Good fit Use it to adapt desktop designs to phones and tablets, plan responsive layouts, choose breakpoints, and improve cross-device interaction.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/hk-hub/agentskills/adapt
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add HK-hub/AgentSkills --skill adapt
Clone the repo
git clone --depth 1 https://github.com/HK-hub/AgentSkills

Made for: Claude Code.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for adapt

README.md
[![agentmods](https://agentmods.dev/badge/skills/hk-hub/agentskills/adapt/github.svg)](https://agentmods.dev/skills/hk-hub/agentskills/adapt)
Your own site
<a href="https://agentmods.dev/skills/hk-hub/agentskills/adapt"><img src="https://agentmods.dev/badge/skills/hk-hub/agentskills/adapt/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for adapt

Your own site · 80×15
<a href="https://agentmods.dev/skills/hk-hub/agentskills/adapt"><img src="https://agentmods.dev/badge/skills/hk-hub/agentskills/adapt.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 51 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 1,525 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin 95% copy Near-identical to another mod in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00051 $0.01525
Opus 5.5 $0.00020 $0.00610
Sonnet 5.5 $0.00010 $0.00305
Haiku 4.5 $0.00005 $0.00153

Measured 1mo ago against content hash a960b3dec6b0, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

adapt scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 1mo ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

Origin

This is a copy

95% identical to adapt — 6 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.

adapt/SKILL.md · 198 lines

How it starts

The opening of the file, as written. The whole thing — 198 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Adapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases.

MANDATORY PREPARATION

Invoke /frontend-design — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow the protocol before proceeding — if no design context exists yet, you MUST run /teach-impeccable first. Additionally gather: target platforms/devices and usage contexts.


Assess Adaptation Challenge

Understand what needs adaptation and why:

  1. 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?
  2. 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?
  3. 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

Read the full file on GitHub · 198 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 1mo ago First seen · 198 lines · 51 tokens per session scan A a960b3dec6b0

Subscribe to this mod's changes

adapt is a skill published in the GitHub repository HK-hub/AgentSkills (6 stars, last pushed 2mo ago), licensed MIT. It adds 51 tokens to every session and 1,525 once invoked, about $0.0002 per session on Opus 5.5. A static security scan graded it A with 0 findings. It is 95% identical to adapt, differing in 6 lines, and is treated as a copy.

Related

Other skills, from other repositories

visual-verdict

Structured visual QA verdict for screenshot-to-reference comparisons.

Yeachan-Heo/oh-my-claudecode · 13 tokens

interaction-skill

Layer A interaction-mechanics reference anchored to the beui.dev catalog. Stacks on any style skill whenever work adds or changes motion or interaction — micro-interactions, animated components, transitions, gestures, hover/press/state feedback, loading/success/error morphs, 'make it feel alive'. Mandates reading the…

code-yeongyu/oh-my-openagent · 104 tokens

layout-skill

Layer A layout-mechanics reference. Stacks on any style skill when the screen is an app shell, dashboard, settings, list-detail, mail/inbox, or any layout with fixed regions plus a scrolling body — or when a layout breaks under long, empty, or unbroken content. Owns spatial structure and scroll ownership; owns zero…

code-yeongyu/oh-my-openagent · 88 tokens

ui-design

Unify product UI design, frontend implementation, and verification. Use when asked to design, redesign, build, or fix a web, desktop, or mobile interface; a page, dashboard, form, component, design system, responsive layout, accessibility, interface animation, or editable hero/banner/infographic within a product…

AnastasiyaW/codex-claude-code-config · 97 tokens

frontend-design

A design guide for building polished web interfaces such as pages, dashboards, forms, navigation, and reusable UI components. It covers HTML, CSS, JavaScript, and common frontend frameworks.

AnastasiyaW/codex-claude-code-config · 264 tokens

frontend-philosophy

Visual & UI philosophy (The 5 Pillars of Intentional UI). Understand deeply to avoid "AI slop" and create distinctive, memorable interfaces.

kdcokenny/ocx · 36 tokens