responsive-design

Installation
SKILL.md

Responsive Design

Purpose

Create fluid, adaptable web experiences that work seamlessly across all devices from smartphones (320px) to large desktops (1440px+) using modern CSS techniques and mobile-first methodology.

Core Principles

  1. Mobile-First: Design for smallest screen first, progressively enhance for larger
  2. Fluid Typography: Use clamp() for scalable text across viewports
  3. Flexible Layouts: CSS Grid and Flexbox for adaptable structures
  4. Touch-Friendly: 44x44px minimum touch targets, adequate spacing
  5. Performance: Optimize for mobile networks (lazy loading, efficient CSS)
  6. Content Priority: Most important content visible without scrolling on mobile

Breakpoints

Riksdagsmonitor uses standard breakpoints aligned with common devices:

Related skills
Installs
10
GitHub Stars
7
First Seen
Mar 4, 2026