Engineer resilient responsive layouts using CSS Grid, container queries, fluid typography (clamp()), and adaptive bento layouts. Use when building responsive viewport architectures.
Installs into .claude/skills of the current project.
Sponsors
SSkills DirectorySkills Directory
Know which skills are safe — weekly.
SSkills DirectorySkills Directory
Is that skill safe to install?
Are you the author of Orthotect Responsive?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/seotarek-orthotect-responsive)
---
name: orthotect-responsive
description: Engineer resilient responsive layouts using CSS Grid, container queries, fluid typography (clamp()), and adaptive bento layouts. Use when building responsive viewport architectures.
---
# Skill: Orthotect Responsive & Adaptive Layouts
Use this skill to design responsive layouts that adapt seamlessly from mobile viewports (360px) to ultrawide displays (2560px) without horizontal scrolling or cumulative layout shift.
## Architectural Guidelines
1. **Container Queries Over Media Queries:** Use `@container` for component-level reflow based on container width rather than whole viewport width.
2. **Fluid Typography:** Use `clamp()` for scalable headings:
`font-size: clamp(1.5rem, 1rem + 2vw, 3rem);`
3. **Intrinsic Grid Sizing:** Avoid fixed pixel widths in grid columns:
`grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));`
4. **Aspect Ratio Bounding:** Bound all media with `aspect-ratio` to eliminate Cumulative Layout Shift (CLS = 0).
## Anti-Patterns
- Fixed `width: 1200px` causing mobile horizontal scrolling.
- Cluttered navigation menus that overflow viewport boundaries on tablet portrait screens.
- Hiding critical action buttons on mobile instead of adapting their presentation.
