Skills
.Work. You
Rest

responsive-ui

Community

Create responsive interfaces for any device.

Design & Creative#accessibility#mobile-first#responsive#flexbox#css-grid#srcset
Authorgahoccode
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill helps you build production-ready, responsive web interfaces that adapt gracefully from foldable phones (280px) to ultra-wide desktops (2560px+), with mobile-first CSS, fluid typography, accessible navigation, and responsive images.

Core Features & Use Cases

  • Mobile-first CSS: start at smallest viewport and layer complexity up
  • Fluid typography and spacing: scalable typography and containers
  • Layout & Accessibility: CSS Grid/Flexbox patterns with accessible hamburger menus and responsive images (srcset, lazy loading)

Quick Start

Start with semantic HTML5 and design tokens from references/design-tokens.md and copy the starter templates in assets/ to bootstrap a responsive layout.

Dependency Matrix

Required Modules

None required

Components

assetsreferences

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: responsive-ui
Download link: https://github.com/gahoccode/PRDs/archive/main.zip#responsive-ui

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository