Frontend Responsive Design Standards

Rule: Mobile-first development with consistent breakpoints, fluid layouts, relative units, and touch-friendly targets. This Skill provides Codex with specific guidance on how to adhere to coding standards as they relate to how it should handle frontend responsive. Always start with mobile layout, then enhance for larger screens. Bad (desktop-first): Good (mobile-first): Why mobile-first: Identify and use project breakpoints consistently: Common breakpoint systems: Tailwind: Bootstrap: Check existing codebase for breakpoint definitions before creating new ones. Usage (Tailwind): Usage (CSS): Never use arbitrary breakpoints like 850px or 1150px unless explicitly required. Use flexible containers that adapt to screen size: Bad (fixed widths): Good (fluid): Patterns for fluid layouts: Use rem/em for scalability and accessibility: Bad: Good: When to use each unit: Framework utilities handle this automatically: Minimum touch target size: 44x44px (iOS) / 48x48px (Android) Bad: Good: Touch target checklist: Maintain readable font sizes without zoom: Bad: Good: Typography guidelines: Responsive typography: Or with clamp (fluid): Show most important content first, hide or collapse secondary content: Bad: Good: Strategies: Serve appropriate images for device size: Bad: Good: Or with modern formats: Framework-specific: Verify layouts at key breakpoints before completing work: Test...