Why does it mandate a mobile-first approach?

Mobile-first design ensures better performance, forces content prioritization, and provides a cleaner path for progressive enhancement on larger screens.

How does it handle accessibility?

It enforces minimum touch target sizes (44x44px) and readable typography (16px base) to ensure interfaces are usable for all users on all devices.

Does this skill support Tailwind CSS?

Yes, it includes built-in support for Tailwind and Bootstrap breakpoint systems, as well as custom CSS implementations.

Can it help with image optimization?

Yes, it provides specific patterns for using srcset, picture tags, and modern image formats to serve the most efficient assets for the user's specific device.

Frontend Responsive UI Standards

Name: Frontend Responsive UI Standards
Author: sarfraznawaz2005

bysarfraznawaz2005

•

디자인 도구

Builds fluid, mobile-first user interfaces using modern CSS standards, responsive breakpoints, and accessible touch-friendly design patterns.

This skill empowers Claude to architect and implement production-ready responsive layouts that adapt seamlessly across mobile, tablet, and desktop devices. It enforces a strict mobile-first development methodology, utilizing flexible grids, relative units like rem and em, and standardized breakpoints to ensure consistency and performance. By prioritizing content hierarchy and touch-target accessibility, it helps developers build professional interfaces that meet modern web standards and pass core web vitals for mobile usability.

주요 기능

01Standardized breakpoint integration for Tailwind, Bootstrap, and custom CSS

02Accessibility-focused touch target sizing and typography scaling

03Mandatory mobile-first development workflow for progressive enhancement

04Responsive image optimization using srcset and modern media patterns

05Fluid layout implementation using Flexbox, CSS Grid, and relative units

061 GitHub stars

사용 사례

01Refactoring fixed-pixel legacy CSS into scalable, accessible relative units

02Building complex dashboard grids that reflow logically across different device sizes

03Converting a desktop-only layout into a fully responsive, mobile-friendly design

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add sarfraznawaz2005/agent-skills-collection frontend-responsive-ui

For use in Claude.ai and ChatGPT

Download Skill