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.
npx agentmods add skills/educlopez/ui-craft/adaptnpx skills add educlopez/ui-craft --skill adaptgit clone --depth 1 https://github.com/educlopez/ui-craftWhat 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.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5 | $0.00086 | $0.00743 |
| Opus 5 | $0.00043 | $0.00371 |
| Sonnet 5 | $0.00017 | $0.00149 |
| Haiku 4.5 | $0.00009 | $0.00074 |
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 3d 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.
What it actually says
Context: this sub-skill is one lens of the broader ui-craft skill. If the ui-craft skill is also installed, read its SKILL.md first for Discovery + Anti-Slop + Craft Test, then apply the specific lens below.
Adapt the UI at $ARGUMENTS across devices. Load the ui-craft skill and read references/responsive.md.
Work mobile-first. Don't shrink desktop; grow from mobile.
Checklist:
- Breakpoints — use project's existing system (Tailwind:
sm md lg xl; CSS: container queries preferred over media queries for components). No magic widths. - Touch — tap targets ≥ 44×44px (
min-h-11 min-w-11). Touch zones don't overlap.touch-action: manipulationon interactive elements. - Safe areas —
padding-top: env(safe-area-inset-top)etc. on fixed headers/footers/FAB. Check iOS notch and Android gesture bar. - No horizontal scroll at 320px. Test with devtools device mode.
- Fluid type —
clamp(1rem, 0.9rem + 0.5vw, 1.125rem)for body where scale matters; fixed px for small UI text (labels, captions). - Container queries — prefer
@containerover viewport media queries for component-level responsiveness. Components that live in sidebars and main content behave differently at the same viewport width. - Hover-less devices — every hover affordance has a non-hover equivalent.
@media (hover: hover)to scope desktop-only effects. - Density shifts with viewport — honor
VISUAL_DENSITYdifferently per breakpoint:VISUAL_DENSITY ≤ 3→ fewer columns and wider spacing even at desktop widths.VISUAL_DENSITY 8+→ honor dashboard density, but still respect touch/hover distinctions (touch targets stay ≥ 44px on mobile, hover affordances gated behind@media (hover: hover)).- Mobile always trends toward 1 column and wider spacing regardless of the knob value.
- Images —
aspect-ratioset;srcset+sizesfor different viewports;loading="lazy"below the fold;fetchpriority="high"on hero. - Nav pattern — desktop horizontal → mobile collapses (sheet, drawer, or bottom tabs). Never a hamburger on desktop unless the nav has > 7 top-level items.
Output: edit code directly. Print the Review Format table of changes. Flag any responsive bugs you can't fix without more info (missing design for a breakpoint, unclear nav pattern).
Next step: /audit — verify the responsive pass against a11y, performance and touch targets (rung 1).
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.
- 3d ago First seen · 33 lines · 86 tokens per session scan A 5861243d8b0c
adapt is a skill published in the GitHub repository educlopez/ui-craft (298 stars, last pushed 14d ago), licensed MIT. It adds 86 tokens to every session and 743 once invoked, about $0.0004 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
flutter-adaptive-ui
Build, fix, review, and validate adaptive or responsive Flutter UIs for mobile, tablet, desktop, web, large screens, foldables, and mixed input devices. Use when creating breakpoint-driven layouts, responsive navigation, adaptive dialogs/lists/grids, keyboard/mouse/touch behavior, window-size decisions with MediaQuery…
Jetpack Compose Conventions
State hoisting, remember/derivedStateOf patterns, modifier ordering, and preview annotations.
cocos-creator-adaptation
做 Cocos Creator 多机型/多分辨率适配时使用。Canvas、Widget、安全区。.
safe-area-handling
Complete guide to handling safe areas in Capacitor apps for iPhone notch, Dynamic Island, home indicator, and Android cutouts. Covers CSS, JavaScript, and native solutions. Use this skill when users have layout issues on modern devices.
tailwind-capacitor
Guide to using Tailwind CSS in Capacitor mobile apps. Covers mobile-first design, touch targets, safe areas, dark mode, and performance optimization. Use this skill when users want to style Capacitor apps with Tailwind.
react-native-unistyles-conventions
Opinionated production conventions for react-native-unistyles v3 (React Native / Expo): Tailwind-style theme scales, dynamic-function styling over conditional arrays, gap-over-margin, theme-only values. Use when styling or theming React Native / Expo components, writing or refactoring StyleSheet.create, converting RN…