building-responsive-layouts
CommunityAdaptive UIs for every screen.
Authordoanchienthangdev
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill addresses the challenge of creating web interfaces that adapt seamlessly to various screen sizes and devices, ensuring a consistent and optimal user experience across desktops, tablets, and mobile phones.
Core Features & Use Cases
- Mobile-First Breakpoints: Utilizes standard breakpoints (sm, md, lg, xl, 2xl) for progressive enhancement.
- Fluid Typography: Employs CSS
clamp()for font sizes that scale smoothly with the viewport. - Container Queries: Enables component-level responsiveness independent of global breakpoints.
- Responsive Images: Implements
srcsetandsizesfor efficient image loading. - Touch-Friendly Design: Ensures adequate touch target sizes and handles hover vs. touch interactions.
- Safe Area Handling: Accounts for notches and dynamic viewports on modern devices.
Quick Start
Use the building-responsive-layouts skill to create a responsive grid with a minimum item width of 300 pixels.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 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: building-responsive-layouts Download link: https://github.com/doanchienthangdev/omgkit/archive/main.zip#building-responsive-layouts Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.