uygnoey Responsive Layout Refactor
Instructions
Use this skill when a UI breaks across viewport sizes (overflow, collisions, unreadable grids, or navigation that doesn’t collapse).
- Audit for rigid constraints
- Search for fixed widths/heights that don’t scale (e.g.,
width: 1200px, large fixed paddings, fixed column counts). - Note layout systems in use (Flexbox, Grid, utility framework classes).
- Refactor to flexible patterns
- Prefer
max-widthand fluid containers over fixed widths. - For grids, prefer adaptive column definitions (e.g.,
auto-fit+minmax). - For flex layouts, consider
flex-wrapand fluidflex-basis.
- Add targeted breakpoint rules
- Add media queries for tablet/desktop breakpoints where layout meaningfully changes.
- Keep base styles mobile-friendly by default.
- Validate at small viewports
- Check at least 320px and 512px for horizontal overflow and readability.
- Add automated coverage tests
- Generate a Playwright test plan covering representative device sizes (e.g., iPhone SE, iPhone 12, iPad, iPad Pro, Desktop).
Examples
- See prompts: templates/prompts.md
- See snippet examples: examples/snippets.md
- See responsive checklist: references/checklist.md