frontend-responsive-design-standards

SKILL.md

Mobile-first responsive layouts with fluid containers, relative units, and touch-friendly design across all screen sizes.

Start with mobile layout, then enhance for larger screens using min-width media queries; use project-standard breakpoints (e.g., Tailwind's 640px, 768px, 1024px) consistently

Build fluid layouts with percentage widths, flexbox, and CSS Grid instead of fixed pixel dimensions; use max-width containers and 1fr grid columns

Apply relative units (rem/em) for typography and spacing to scale with root font size; maintain minimum 16px body text and 44x44px touch targets for mobile accessibility

Optimize images with srcset and modern formats (WebP, AVIF); prioritize content on mobile by hiding secondary elements and reordering with flexbox/Grid order property

Test layouts at key breakpoints (375px, 768px, 1024px, 1440px) to catch horizontal scrolling, overlapping elements, and readability issues

Frontend Responsive Design Standards

Rule: Mobile-first development with consistent breakpoints, fluid layouts, relative units, and touch-friendly targets.

When to use this skill

When creating or modifying layouts that need to work on mobile, tablet, and desktop

When implementing mobile-first design patterns starting with mobile layout

When writing media queries or breakpoint-specific styles

When using flexible units (rem, em, %) instead of fixed pixels for scalability

When implementing fluid layouts with percentage-based widths or flexbox/grid

When ensuring touch targets meet minimum size requirements (44x44px) for mobile

When optimizing images and assets for different screen sizes and mobile networks

When testing UI across multiple device sizes and breakpoints

When maintaining readable typography across all screen sizes

When prioritizing content display on smaller screens through layout decisions

When using responsive design utilities in CSS frameworks (Tailwind, Bootstrap responsive classes)

This Skill provides Codex with specific guidance on how to adhere to coding standards as they relate to how it should handle frontend responsive.