adapt
SkillDev toolsadapt gives your AI design guidance so the interfaces and visuals it creates look better. It works as a design language your AI follows whenever it builds something visual. Once added, your agent makes stronger design choices on its own.
Available today. Use it from your connected AI after setup.
No other account needed.
Add adapt to your AI, then ask it to build an interface or visual. It will draw on the design guidance as it works.
Then ask your AI: use the adapt skill
What your AI can do with it
- Follow a consistent design language when building interfaces
- Improve the look of the visuals it creates
- Apply design guidance without being walked through each choice
- Make the interfaces it builds look better
What this skill tells your AI
The instructions your AI receives, as published by educlopez/ui-craft in .codex/skills/adapt/SKILL.md and read by ahel’s review.
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).
Signals
- GitHub stars
- 326
- Forks
- 17
- Last commit
- Sep 2026
- Hacker News mentions
- 20
Advanced
- Catalog kind
- skill
- Gateway key
adapt- Source
- github.com/educlopez/ui-craft