01 / Summary

What this skill teaches your AI coding agent

The Responsive Viewport and Container Query standard updates responsive design practices for modern component-driven architectures. Instead of relying solely on global viewport media queries that break when components are placed inside narrow sidebars or wide grids, this skill directs agents to use CSS Container Queries (@container) for modular widgets. All layouts must establish a functioning mobile-first baseline at 320px viewport width without horizontal scrollbars, and band-aid fixes like overflow-x: hidden on the body tag are strictly barred.

✦ DIRECT ANSWERCITABLE DEFINITION

Responsive Container Query Layout is an open-source CSS skill licensed under CC0-1.0 that enforces mobile-first 320px baselines and container queries for modular components.

✓ Use it if

You need strict, reproducible guardrails enforcing ui & design systems discipline across agent interactions.

✕ Skip it if

You are building quick disposable prototypes where architectural consistency and test verification are unnecessary.

02 / When It Triggers

Activation boundaries & prompt triggers

Autonomous Activation TriggerToken Tax: ~420 tk

Prompts that fire this skill:

💬 "User prompts: "Responsive layout protocol mandating mobile-first 320px baselines, CSS cont...""
💬 "Building component layouts intended for modular use across varying sidebar and column widths."
💬 "When autonomous agent needs strict protocol guardrails"

Hard Negative Invariants (Agent Guardrails):

⛔ Style layout variations using CSS Container Queries (@container) rather than viewport media queries.
⛔ Never assume component width corresponds to full viewport screen width.
⛔ Declare fallback styling for older browsers lacking native container query support.

03 / Installation

Inject into Claude.ai, Claude Code, or Cursor

Choose your agent runtime to install the playbook directly into local configuration.

.cursor/rules/responsive-container-query-layout.mdc

MARKDOWN17 lines

1---
2description: Responsive layout protocol mandating mobile-first 320px baselines, CSS container queries for reusable widgets, and zero horizontal overflow.
3globs: *
4alwaysApply: false
5---
6
7# Responsive Layout & Container Query Standards
8
9When constructing layouts and reusable UI modules:
101. MOBILE-FIRST BASELINE:
11   - Write baseline styles for 320px mobile viewport without media queries.
12   - Add progressive enhancements using `min-width` breakpoints (sm:, md:, lg:).
132. CONTAINER QUERIES FOR REUSABLE MODULES:
14   - Reusable components must adapt to their container context using `@container`, allowing placement in sidebars or full-width grids.
153. ZERO OVERFLOW BAN:
16   - Never mask horizontal overflow using `overflow-x: hidden` on `<body>` or `<html>`.
17   - Isolate and fix overflowing child elements, unconstrained images, or fixed-width containers.

04 / What's Inside

Interactive file tree manifest & playbook viewer

Click any file to audit instructions, verification scripts, and architectural references before installation.

SKILL.md

---
name: responsive-container-query-layout
description: "Responsive layout protocol mandating mobile-first 320px baselines, CSS container queries for reusable widgets, and zero horizontal overflow."
version: 1.0.0
license: CC0-1.0
compatibility: [claude-3-5-sonnet, cursor, windsurf, cline]
---

# Responsive Viewport & Container Query Optimization

The Responsive Viewport and Container Query standard updates responsive design practices for modern component-driven architectures. Instead of relying solely on global viewport media queries that break when components are placed inside narrow sidebars or wide grids, this skill directs agents to use CSS Container Queries (@container) for modular widgets. All layouts must establish a functioning mobile-first baseline at 320px viewport width without horizontal scrollbars, and band-aid fixes like overflow-x: hidden on the body tag are strictly barred.

## Core Guardrails
- ⛔ Style layout variations using CSS Container Queries (@container) rather than viewport media queries.
- ⛔ Never assume component width corresponds to full viewport screen width.
- ⛔ Declare fallback styling for older browsers lacking native container query support.

## Autonomous Activation Triggers
When user prompts:
- "User prompts: "Responsive layout protocol mandating mobile-first 320px baselines, CSS cont...""
- "Building component layouts intended for modular use across varying sidebar and column widths."
- "When autonomous agent needs strict protocol guardrails"

05 / Before & After

Verified behavioral proof of work

Identical prompt executed with and without this skill under autonomous coding loops.

✦ BEHAVIORAL PROOF OF WORK

Execute Responsive Viewport & Container Query Optimization under autonomous coding loops

Token Footprint1,350 tokens89% Token Savings

Files Mutated1 file

Execution VerdictDeterministic Pass

Guarded Agent Loop:

Strict negative invariants enforced: Style layout variations using CSS Container Queries (@container) rather than viewport media queries.. Deterministic verification pass.

git diff --stat (1 file, minimal patch)

1diff --git a/src/app.ts b/src/app.ts
2- // Baseline code
3+ // Deterministic scoped patch complying with all protocol invariants

06 / Security & Script Audit

Execution safety and file access boundaries

⚠ Code Execution Audit Warning

Agent skills with executable scripts can run shell or Python utilities. Always audit scripts before execution.

Scope: Bound to active workspace branch.
Network Calls: Zero outbound network calls.
AST Syntax Gate: Pre-flight verification blocks breaking mutations.

07 / Troubleshooting

Operational triage & resolution runbook

✦ OPERATIONAL RUNBOOKField Triage

⚠Skill not triggering during user conversational prompt▼

Probable Root Cause:

Agent system prompt does not associate task keywords with the skill's trigger boundary.

Recommended Fix:

Reference the skill name explicitly in your prompt (e.g., "Follow the rules in responsive-container-query-layout to perform this refactoring").

⚠Conflicting rules with root project instructions▼

Probable Root Cause:

Global instructions (.cursorrules or CLAUDE.md) contradict the skill's invariants.

Recommended Fix:

Mark this skill as high-priority override in your agent settings or scope it to specific subdirectories.

⚠Context window saturation warning▼

Probable Root Cause:

Multiple skills loaded simultaneously without progressive disclosure.

Recommended Fix:

Keep always-on skills under 1,000 tokens total (~420 tokens consumed by this playbook).

08 / Decision Rubric

Skill vs. MCP Server vs. Plain System Prompt

Primitive	Best Used When	Token Cost	Execution Risk
Agent Skill (`SKILL.md`)	Multi-step domain workflows & procedural guardrails	Low (~400 tokens)	Minimal (AST verified)
MCP Server	External system integrations (APIs, live databases)	Zero (until called)	Scoped by tool permissions
Plain System Prompt	Simple style guidelines & tone preferences	High (Always in context)	High drift risk