Awesome-omni-skill frontend-responsive

Implement responsive designs that work across mobile, tablet, and desktop screen sizes. Use this skill when applying mobile-first development patterns, using responsive breakpoints, creating fluid layouts with percentage-based widths, choosing relative units (rem/em) over pixels, ensuring touch-friendly tap targets, or optimizing images for mobile. Applies when working on any frontend layout code, media queries, responsive utilities, and when testing UI across different screen sizes.

install

source · Clone the upstream repo

git clone https://github.com/diegosouzapw/awesome-omni-skill

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/diegosouzapw/awesome-omni-skill "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/development/frontend-responsive-jeremyrdavis" ~/.claude/skills/diegosouzapw-awesome-omni-skill-frontend-responsive && rm -rf "$T"

manifest: skills/development/frontend-responsive-jeremyrdavis/SKILL.md

source content

When to use this skill

When implementing mobile-first CSS and layouts
When using responsive breakpoints (mobile, tablet, desktop)
When creating fluid layouts with percentage-based widths
When choosing rem/em units over fixed pixels
When ensuring tap targets are at least 44x44px
When optimizing images and assets for mobile
When maintaining readable typography across breakpoints
When prioritizing content for smaller screens
When testing layouts across different screen sizes
When using responsive utility classes (e.g., Tailwind's sm:, md:, lg:)
When writing media queries for layout changes

Frontend Responsive

This Skill provides Claude Code with specific guidance on how to adhere to coding standards as they relate to how it should handle frontend responsive.

Instructions

For details, refer to the information provided in this file: frontend responsive