Responsive Units
Developmentresponsive-unitsResponsive Units is an Agent Skill for development published in the thedaviddias/Front-End-Checklist repository on GitHub: a SKILL.md instruction file an AI agent can load to do this task.
Use when reviewing stylesheets, component styles, and responsive behavior related to Use relative units for responsive layouts. Check the rendered layout across breakpoints and interaction states before proposing a fix.
How to use this skill
Bring this guide into your coding agent with a prompt tailored to the tool you use.
- Open your project in Codex.
- Copy and paste the prompt below.
- Review files and risks before approving any action.
Inspect the Agent Skill at https://github.com/thedaviddias/Front-End-Checklist/blob/HEAD/skills/responsive-units/SKILL.md and all supporting files. Report provenance, permissions, scripts, dependencies, and security risks. Propose an exact installation into .agents/skills/responsive-units, but wait for my approval before writing files or running scripts.
Copying this prompt does not install or run the skill. Review third-party files before use.
Use relative units for responsive layouts
Fixed pixel values override user browser preferences, making your site inaccessible to users who increase their default font size (a common accommodation for low vision). Relative units also reduce the number of breakpoints needed — elements naturally adapt to available space rather than requiring explicit overrides at every viewport width.
Quick Reference
- Use rem for font sizes — it respects user browser font size preferences
- Use % or flex/grid for widths — they adapt to the parent container
- Use em for component-relative spacing (padding, border-radius)
- Use clamp() for fluid typography that scales smoothly between breakpoints
Check
Find all px-based font-size, width, and padding values in this CSS file that should use relative units instead.
Fix
Convert fixed px font sizes to rem equivalents and replace fixed widths with percentage or relative alternatives.
Explain
Explain the difference between rem, em, %, vw, and vh, and when to use each one.
Code Review
Review stylesheets, component styles, and responsive states related to Use relative units for responsive layouts. Flag exact selectors, declarations, or breakpoints that violate the rule in the rendered UI.
For full implementation details, code examples, and framework-specific guidance,
see references/rule.md.
Rule page: https://frontendchecklist.io/en/rules/css/responsive-units