Frontend Responsive Design Standards
Builds responsive, mobile-first layouts using fluid containers, flexible units, and media queries that adapt to all screen sizes.
The source repository doesn't declare a license. Check its terms before reusing the code.
Key features
- Promotes the use of fluid layouts, flexible grids, and relative units (rem, em, %) for scalable and adaptive designs.
- Includes standards for readable, responsive typography and optimizing images with `srcset` and modern formats.
- Provides guidelines for creating touch-friendly interfaces with minimum target sizes (44x44px) and adequate spacing.
- Defines a structured approach to using standard breakpoints and provides a verification checklist for testing across devices.
- Enforces a mobile-first development workflow, starting with base styles for small screens and progressively enhancing for larger ones.
Use cases
- Refactoring a legacy, desktop-first CSS codebase to a modern, mobile-first methodology.
- Ensuring UI components like navigation bars, product grids, and forms are fully responsive and accessible on touch devices.
- Developing a new website or application layout that must work seamlessly on mobile, tablet, and desktop.
FAQ
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.
Related skills
Plugin Skill Development
Provides standardized workflows and best practices for building, organizing, and optimizing specialized skills within Claude Code plugins.
Developer Tools142,11812 ptsPlugin Architecture Guide
Provides standardized patterns and directory layouts for building modular and portable Claude Code plugins.
Developer Tools142,11812 ptsPrompt Engineering
Creates, improves, and optimizes prompts for Claude using Anthropic's best practices for clarity, structure, and security.
Developer Tools5412 pts