# UI Dynamic Resizing

> Apply fluid, proportional UI sizing with separate mobile and desktop tuning, readable wrapping, and accessible zoom unless the user explicitly requests static dimensions.

- Skill: `matt-bat/ui-dynamic-resizing` (Agent Skill)
- Install (CLI): `npx skillmds@latest add matt-bat/ui-dynamic-resizing`
- Raw SKILL.md: https://api.skillmd.com/api/skills/matt-bat/ui-dynamic-resizing/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: matt-bat (https://skillmd.com/u/matt-bat)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/matt-bat/ui-dynamic-resizing

---


# UI Dynamic Resizing

Apply this skill to every UI implementation or review unless the user explicitly requests static element sizes. Tune mobile and desktop as separate responsive regimes while preserving each element’s intended relative hierarchy.

- Use fluid units and bounds (`%`, `rem`, `clamp()`, grid/flex, and container or media queries) for text, spacing, controls, and containers.
- Define mobile and desktop tokens separately; do not scale desktop values blindly onto narrow screens.
- Keep text inside its container. Preserve whole words with normal wrapping, `overflow-wrap: normal`, `word-break: normal`, and `hyphens: manual`; allow breaks at explicit hyphens and whitespace only.
- Make font size, line height, control dimensions, and gaps adapt together. Preserve usability at browser zoom and with large text.
- Verify narrow, wide, zoomed, and long-content states. Use fixed dimensions only when the user explicitly asks for them or a platform contract requires them.