Does it support accessibility standards for mobile?

Yes, it enforces a minimum touch target size of 48x48px and ensures text is readable without zooming to meet mobile accessibility best practices.

What are the primary breakpoints used by this skill?

The skill utilizes standard breakpoints starting at 320px for Mobile, 481px for Tablets, 769px for Laptops/Desktops, and 1025px for Large monitors.

How does this skill improve mobile performance?

It establishes strict performance targets including a First Contentful Paint of under 3 seconds on 3G and keeping gzipped JavaScript bundles under 100KB.

How does it handle progressive enhancement?

It follows a three-layer approach: starting with semantic HTML, enhancing with CSS for appearance, and adding JavaScript for interactivity only when supported.

Mobile-First Design

Name: Mobile-First Design
Author: secondsky

bysecondsky

•

Design Tools

Implements responsive, performance-focused web interfaces starting from mobile screens with progressive enhancement for larger devices.

The Mobile-First Design skill provides Claude Code with a standardized framework for building modern, responsive web applications by prioritizing the small-screen experience. It enforces industry-standard breakpoints, touch-friendly UI patterns, and strict performance metrics to ensure websites are lightweight and accessible on low-bandwidth mobile connections before scaling up for desktop users. This skill is ideal for frontend developers who need to implement production-ready CSS architectures that emphasize relative units, accessibility, and progressive enhancement across all device types.

Key Features

01Mobile-first CSS architecture with min-width media queries

02Progressive enhancement strategies using semantic HTML layers

03Touch-friendly interface patterns with 48px minimum targets

04Standardized breakpoints for mobile, tablet, and desktop

05Performance benchmarking for 3G networks and bundle sizes

0621 GitHub stars

Use Cases

01Optimizing an existing desktop-only interface for mobile and tablet responsiveness

02Implementing accessible, touch-friendly navigation and interactive components

03Building a new responsive web application from scratch with a mobile-centric approach

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add secondsky/claude-skills mobile-first-design

For use in Claude.ai and ChatGPT

Download Skill