Frontend Responsive Design Standards

What problem does it solve?

Ensures user interfaces are functional, accessible, and visually appealing across all screen sizes and devices, preventing layout issues and improving user experience.

Core Features & Use Cases

• Mobile-First Development: Prioritizes mobile layouts and progressively enhances for larger screens.
• Consistent Breakpoints: Utilizes predefined screen size breakpoints for consistent styling.
• Fluid Layouts & Relative Units: Employs flexible containers and relative units (rem, em, %) for scalability.
• Touch-Friendly Design: Guarantees interactive elements meet minimum size requirements for touch input.
• Readable Typography: Maintains legible font sizes and line lengths across devices.
• Image Optimization: Serves appropriately sized images for different screen resolutions.
• Use Case: When developing a new e-commerce website, this skill ensures product listings, navigation, and checkout processes adapt seamlessly from a user's smartphone to a desktop monitor.

Quick Start

Apply the frontend responsive design standards skill to refactor the existing CSS to be mobile-first and use relative units.