Responsive Layout Math

Purpose

⚠IMPORTANT⚠This skill enforces $O(1)$ scaling constraint resolution algorithms via the CSS engine. It strictly prohibits the algorithmic generation of discrete, hardcoded media query branches that fail under unbounded viewport mutations.

When to Use This Skill

⚠NOTE⚠Use this skill whenever you are defining the layout of a page, a grid of cards, or setting typography and spacing that must scale between mobile and desktop viewports.

What This Skill Prevents

This skill prevents:

• Media Query Exhaustion: Emitting $O(N)$ discrete layout boundaries instead of $O(1)$ fluid constraints.
• Constraint Collision: Asserting static column integers that exceed the boundary limits of smaller viewport contexts.
• Axis Overflow: Breaking the bounds of 100vw by injecting absolute static vector sizing.
• Magic Number Inference: Injecting random integer variants (margin-left: 23px) to resolve specific boundary edge cases.

Core Principle

Layout engines MUST utilize constraint solvers (clamp(), minmax()) and intrinsic dimensioning algorithms rather than static boundary hardcoding. Offload calculation vectors to the client browser engine.

Research-Backed Rules

• Intrinsic Grid Interpolation: Enforce CSS engine rendering graphs via grid-template-columns: repeat(auto-fit, minmax(min(100%, [MIN_WIDTH]), 1fr)). Discrete breakpoints for lists are prohibited.
• Fluid Typography Vectors: Enforce continuous typography scaling algorithms: clamp([MIN_SIZE], [CALCULATED_VAL], [MAX_SIZE]). Exclude isolated vw units to preserve zoom invariant matrices.
• Spacing Integer Scale: Anchor all margin/padding coordinates to an $8px$ multiplier matrix (p-4 = 16px). Arbitrary pixel assignment is prohibited.
• Container Boundary Assertion: Limit $X$-axis growth constants to maximum prose readability ($\approx 65ch$) and viewport scaling limits (max-w-7xl).
• Container Query Sub-Graphs: Delegate component-level resizing logic to structural parents (@container), bypassing global @media query bounds.

Stack-Aware Guidance

Tailwind CSS Engine

Restrict custom grid CSS allocation. Delegate scaling bounds strictly through algorithmic auto-fit arrays.

• Prohibited: grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3
• Enforced: grid grid-cols-[repeat(auto-fit,minmax(min(100%,300px),1fr))]

Vanilla CSS / CSS Modules

Declare root-level scaling tokens as dynamic :root variables. Enforce clamp() interpolation directly within the CSS AST.

Mathematical / Measurable Rules

• Algorithmic Grid Baseline: Implement $O(1)$ matrix scaling (repeat(auto-fit, ...)) over sequential $O(N)$ break points.
• Modular Division Constants: Assert spacing algorithms via modulo operators where $X \bmod 8 = 0$.
• Touch Target Threshold: Enforce coordinate bounding box dimensions of minimum $H=44\text{px}, W=44\text{px}$ for interactive pointer nodes.

Quality Gates

Responsive Gate

• Validated layout matrices resolve via intrinsic constraints without emitting micro-breakpoints.
• Asserted 100vw bounded vectors execute without horizontal axis spillage on narrow parameters.

Visual Quality Gate

• Asserted bounding constants adhere to strict $8px$ scaling multipliers.
• Typography algorithm verified to interpolate seamlessly across minimum boundary parameters without reflow overflow.

Anti-Patterns to Avoid

• Static X-Axis Bounds: Emitting w-[500px] instead of bounding functions max-w-[500px] w-full.
• Media Query Thrashing: Emitting $>3$ discrete @media constraints on a singular DOM node to tweak scaling padding variables.

Agent Behavior Instructions

1. Default to auto-fit topological rendering for variable-length item arrays.
2. Inject Flex topological wrapping for sparse element matrices.
3. Validate minimum $44px$ tap target invariants on all executable nodes.
4. Bound structural layouts via global $X$-axis max-w directives.

Final Review Checklist

• No fixed axis overflow errors.
• Unbounded magic numbers nullified.
• Smooth graph scaling validated.
• Fluid algorithmic topology enforced.
• Fully agent-optimized deterministic rules.