Frontend Responsive Design Standards

Installation

Summary

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

SKILL.md

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.

Related skills

Installs

–

Repository

GitHub Stars

929

First Seen

–

Security Audits