Frontend Responsive Design Standards

What problem does it solve?

This Skill addresses the challenge of user interfaces that break or look suboptimal across different devices and screen sizes. It ensures your applications provide a consistent, high-quality user experience on mobile, tablet, and desktop, expanding your audience reach.

Core Features & Use Cases

• Mobile-First Development: Mandates starting with mobile layouts and progressively enhancing for larger screens, ensuring content prioritization and better performance on smaller devices.
• Fluid Layouts & Relative Units: Guides on implementing flexible containers, using CSS Flexbox/Grid, and employing relative units (rem, em, %) for adaptive scaling across various viewports.
• Touch-Friendly & Readable: Ensures interactive elements are adequately sized for touch input (min 44x44px) and typography remains legible without zooming across all screen sizes.
• Use Case: When designing a new landing page, use this skill to ensure the layout stacks vertically on mobile, transitions to a two-column grid on tablets, and a three-column layout on desktops, all while maintaining readable text and touch-friendly buttons.

Quick Start

Apply the Frontend Responsive Design Standards skill to create a responsive navigation bar that collapses into a hamburger menu on mobile and expands to a horizontal menu on desktop, using standard breakpoints.