What core capabilities does this skill provide?

It equips Claude with rules for mobile-first development, standard breakpoints, fluid layouts using relative units (rem, em), touch-friendly target sizes (min 44x44px), responsive typography, and image optimization using `srcset`.

What does the Frontend Responsive Design Standards skill do?

This skill guides Claude to build responsive, mobile-first web layouts. It enforces standards for fluid containers, flexible units, standard breakpoints, and touch-friendly interfaces to ensure your UI looks great on all screen sizes.

When should I use this skill?

Use this skill when creating or modifying a UI that needs to adapt to different devices, like mobile phones, tablets, and desktops. It is essential for tasks involving responsive CSS, media queries, flexbox/grid layouts, and mobile-first styling.

How does this skill improve my AI coding workflow?

It automates the enforcement of responsive design best practices, saving you time on manual code reviews. By providing Claude with clear standards, you get more consistent, scalable, and high-quality CSS for multi-device layouts from the start.

Frontend Responsive Design Standards

Name: Frontend Responsive Design Standards
Author: maxritter

bymaxritter

•

213

•

Developer Tools

Builds responsive, mobile-first layouts using fluid containers, flexible units, and media queries that adapt to all screen sizes.

Guides the creation of adaptive user interfaces by enforcing mobile-first development principles. This skill ensures layouts are built with fluid containers, relative units like `rem` for scalability, and consistent breakpoints for predictable behavior across devices. It covers essential practices such as creating touch-friendly targets, optimizing images for performance, and maintaining readable typography, making it invaluable for any task involving responsive UI development, from creating new layouts to refactoring existing ones for multi-device support.

Key Features

01Promotes the use of fluid layouts, flexible grids, and relative units (rem, em, %) for scalable and adaptive designs.

02Includes standards for readable, responsive typography and optimizing images with `srcset` and modern formats.

03213 GitHub stars

04Provides guidelines for creating touch-friendly interfaces with minimum target sizes (44x44px) and adequate spacing.

05Defines a structured approach to using standard breakpoints and provides a verification checklist for testing across devices.

06Enforces a mobile-first development workflow, starting with base styles for small screens and progressively enhancing for larger ones.

Use Cases

01Refactoring a legacy, desktop-first CSS codebase to a modern, mobile-first methodology.

02Ensuring UI components like navigation bars, product grids, and forms are fully responsive and accessible on touch devices.

03Developing a new website or application layout that must work seamlessly on mobile, tablet, and desktop.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add maxritter/claude-codepro frontend-responsive-design-standards

For use in Claude.ai and ChatGPT

Download Skill