Real-time detection of layout failures before production

Box Model Sentinel monitors your CSS in real-time, catching the fixed pixels, rigid flex containers, and overflow traps that silently break your UI on smaller screens.

Install on VS Code See what it catches →
12 Specialized Detectors
500ms Analysis Latency
3 Severity Levels

// Catch issues before they ship

styles.css
1 .hero {
2   width: 100vw; ⚠ Medium — use 100% instead
3   height: 600px; 🚫 Critical — fixed height breaks small screens
4 }
6 .cards {
7   display: flex;
8   flex-wrap: nowrap;
9   flex-basis: 200px; 🚫 Critical — nowrap + fixed basis = guaranteed overflow
10 }
12 body { overflow-x: hidden; } ⚠ Medium — masking structural overflow
14 /* ↑ All of this, caught while you type */
// What you get

Static analysis.
Real-time feedback.

Real-Time as You Type icon
Real-Time as You Type

500ms debounce — analysis runs continuously while you code. Squiggles appear instantly. No save, no build, no deploy required.

Actionable Diagnostics icon
Actionable Diagnostics

Every underlined issue includes hover context: what broke, why it's risky, and a concrete suggestion to fix it.

Stats Panel icon
Stats Panel

Dedicated panel with severity filtering, click-to-navigate, and auto-refresh. See your layout health at a glance.

3-Level Severity icon
3-Level Severity

Critical, Medium, Info. Triage issues by actual impact, not by file order. Focus on what breaks first.

Two Modes icon
Two Modes

Strict for new projects. Pragmatic with configurable thresholds for legacy codebases. Switch without restarting VS Code.

Ready-Only icon
Ready-Only

Sentinel never touches your code. No auto-fixes, no rewrites. Pure structural analysis — your changes, your call.

// Visual diff inside VS Code

Not just a warning.
A fix direction.

Every issue in the Stats Panel comes with a BEFORE/AFTER visual comparison — rendered directly in VS Code, no browser needed.

FLEX FRAGILITY — CRITICAL
BEFORE
✕ flex-wrap: nowrap
AFTER
✓ flex-wrap: wrap
GRID RIGIDITY — MEDIUM
BEFORE
✕ 200px 200px 200px
AFTER
✓ repeat(3, 1fr)
!IMPORTANT ON LAYOUT — LOW
BEFORE
✕ width: 100% !important
AFTER
✓ width: 100%
// 12 specialized detectors

Every pattern
that breaks layouts.

01
Fixed Dimensions
width: 400px · height: 600px → Critical
02
Box-Sizing Inconsistency
Mixed border-box / content-box
03
Horizontal Overflow Risk
Fixed width + overflow-x: visible
04
Fixed Spacing
padding / margin / gap without breakpoints
05
100vw Overflow
width: 100vw ignores scrollbar width
06
Flex Fragility
nowrap + fixed flex-basis → Critical
07
Grid Rigidity
grid-template-columns: 250px 250px
08
Absolute Positioning Rigidity
Fixed left/top/width on position: absolute
09
Media Query Instability
Same property changing across breakpoints
10
Overflow Masking
body { overflow-x: hidden } hides problems
11
!important on Layout
width: 100% !important — rigidity signal
12
Breakpoint Width Exceeded
@media (max-width: 768px) { width: 800px }
// Analysis modes

Works on new projects.
Works on legacy code.

Strict
Zero tolerance.

Every fixed pixel, every rigid track, every non-fluid pattern gets flagged. 100% structural detection, no exceptions.

New projects Design systems Learning responsive Zero fixed dimensions
Pragmatic
Signal over noise.

Configurable thresholds suppress small, safe values. Focus on the issues that actually break layouts — not padding: 8px.

Legacy codebases Large teams Alert fatigue Established design systems

// Get started in 30 seconds

Stop shipping broken layouts.

Free. No account. No telemetry. Just better CSS.

code --install-extension mikaelmc.box-model-sentinel
Open in VS Code Marketplace View on GitHub