Skills
.Work. You
Rest

responsive-engine

Community

Build fluid, multi-device layouts fast.

Design & Creative#clamp#subgrid#fluid typography#container queries#responsive css#css :has()#viewport units
AuthorEliasOulkadi
Version1.0.0
Installs0

System Documentation

What problem does it solve?

It helps you create responsive CSS layouts that work reliably across mobile, tablet, and desktop without brittle breakpoint spaghetti or layout jumps (especially on iOS Safari).

Core Features & Use Cases

  • Container Queries-first responsiveness: Prefer component/container behavior using container-type and @container over viewport-only media queries.
  • Fluid typography & spacing: Use clamp() with viewport-adaptive scaling and modern CSS units for consistent readability.
  • Modern layout tooling: Apply :has() for parent-aware styling, subgrid for aligned card content, and new viewport units (dvh/svh/lvh) while avoiding h-screen/100vh pitfalls.
  • Practical guardrails: Touch target sizing (≥44×44px), hover gating, mobile collapse strategy, and :has() fallbacks via @supports.

Quick Start

Ask the agent to generate responsive layout CSS for your design using container queries, clamp-based fluid typography/spacing, correct viewport units (dvh/svh/lvh) instead of 100vh/h-screen, and mobile collapse rules—based on your provided markup and layout goals.

Dependency Matrix

Required Modules

None required

Components

referencesassets

💻 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-engine
Download link: https://github.com/EliasOulkadi/shokunin/archive/main.zip#responsive-engine

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

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.