Frontend Responsive Design Standards

This codifies mobile-first responsive design practices into a skill that keeps your layouts consistent across breakpoints. It enforces the fundamentals: starting with mobile, using relative units instead of fixed pixels, maintaining 44x44px minimum touch targets, and structuring media queries properly. Useful when you're working with any component that needs to scale from phone to desktop, especially if you find yourself repeatedly explaining the same responsive patterns in code reviews. It won't teach you responsive design from scratch, but it will keep Claude from generating desktop-only layouts or using arbitrary breakpoints. Think of it as guardrails for the basics so you're not fixing viewport issues after the fact.

install copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.: 5
GitHub stars: 1K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add am-will/codex-skills --skill 'Frontend Responsive Design Standards' --agent claude-code

Installs into .claude/skills of the current project.

Files

Frontend Responsive Design Standards

Rule: Mobile-first development with consistent breakpoints, fluid layouts, relative units, and touch-friendly targets.

When to use this skill

When creating or modifying layouts that need to work on mobile, tablet, and desktop
When implementing mobile-first design patterns starting with mobile layout
When writing media queries or breakpoint-specific styles
When using flexible units (rem, em, %) instead of fixed pixels for scalability
When implementing fluid layouts with percentage-based widths or flexbox/grid
When ensuring touch targets meet minimum size requirements (44x44px) for mobile
When optimizing images and assets for different screen sizes and mobile networks
When testing UI across multiple device sizes and breakpoints
When maintaining readable typography across all screen sizes
When prioritizing content display on smaller screens through layout decisions
When using responsive design utilities in CSS frameworks (Tailwind, Bootstrap responsive classes)