mobile-first-design_skill

This skill helps design mobile-first responsive interfaces by guiding breakpoints, touch targets, and progressive enhancement for performance and accessibility.

TypeScript

52

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill secondsky/claude-skills --skill mobile-first-design

SKILL.md1.9 KB

Overview

This skill designs responsive interfaces starting from mobile screens and progressively enhances layouts for larger devices. It provides practical rules, breakpoints, touch guidance, and performance targets to build fast, usable, mobile-first web experiences. Use it to create production-ready responsive UIs with clear mobile priorities.

How this skill works

The skill defines a mobile-first workflow: establish base styles for small screens, then layer media queries for tablet and desktop breakpoints. It inspects layout choices, touch target sizing, and asset strategies to keep initial loads small and interaction-friendly. It recommends semantic HTML as the baseline, then adds CSS and JavaScript enhancements progressively.

When to use it

Building a responsive website that must prioritize mobile users
Optimizing an existing site for faster mobile load times and touch ergonomics
Designing adaptive layouts with clear breakpoints and progressive enhancement
Setting performance budgets for initial page load and JS bundle size
Creating UI components that work without JavaScript and improve with progressive enhancement

Best practices

Start designs at 320px and design up rather than down
Use relative units (rem, %, vw) for scalable, accessible layouts
Define clear breakpoints: mobile, tablet (~481–768px), desktop (~769–1024px), large (1025px+)
Make touch targets at least 48x48px and provide adequate spacing between controls
Optimize images and use responsive sources to reduce mobile payload
Keep initial JavaScript minimal; aim for small gzipped bundles and fast First Contentful Paint

Example use cases

Create a responsive landing page that loads quickly on 3G and scales cleanly to desktop
Implement a navigation that shows a hamburger on mobile and a flex nav on tablet/desktop via media queries
Build a product list with touch-friendly cards and progressive image loading for mobile
Audit an app to reduce initial JS, enforce a <100KB gzipped bundle target, and meet FCP <3s on 3G
Design UI components using semantic HTML first, then enhance visuals and interactivity with CSS and JS

FAQ

Use a simple set: mobile (~320–480px), tablet (~481–768px), desktop (~769–1024px), and large (1025px+). Adjust to your audience as needed.

How do I balance visuals and performance?

Start with minimal CSS and assets on mobile, use responsive images, defer noncritical JS, and set performance budgets (FCP <3s on 3G, JS bundle <100KB gzipped).