# Layout Reviewing

> Reviews implemented web layouts for source fidelity, responsive behavior, evidence coverage, and project consistency. Use when: "проверь вёрстку", "ревью вёрстки", "проверь адаптив", "review layout", "check visual fidelity" Do NOT use for implementing or changing layouts — use layout-writing instead.

- Skill: `pavel-molyanov/layout-reviewing-2` (Agent Skill)
- Install (CLI): `npx skillmds@latest add pavel-molyanov/layout-reviewing-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/pavel-molyanov/layout-reviewing-2/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: pavel-molyanov (https://skillmd.com/u/pavel-molyanov)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/pavel-molyanov/layout-reviewing-2

---

<!-- Generated by sync-to-codex v1. Do not edit directly. -->

# Layout Reviewing

Judge the supplied implementation and prepared evidence. Do not redesign the interface or replace
an intentional source value with personal taste.

## Review Basis

- Where an exact source exists, it controls defined geometry, spacing, color, typography, crop,
  effects, layering, content placement, and responsive states.
- Where no source exists, use repository rules, the same component in other states, neighboring
  UI, tokens, and established components as the review standard.
- For a partial source, keep these responsibilities separate. General design conventions do not
  override values the source defines intentionally.

## Evidence Coverage

- A selected-area review covers the changed block, its nearest positioning context, applicable
  states, and every required width.
- A whole-page review requires an ordered source- or DOM-derived inventory and evidence for every
  listed block at every required width.
- Required widths include baseline `360`, `430`, `768`, and `1440` coverage, established source
  or user-screenshot viewports, and both sides of affected breakpoints.
- Missing evidence is a defect only when the review contract requires it and its absence prevents
  a defined block, state, or width from being checked. Identify that missing coverage precisely.

## Visual Criteria

Inspect each supplied width, block, and state for:

- alignment, container bounds, spacing, density, sizing, and responsive reflow;
- font family, weight, size, line height, wrapping, truncation, and text clipping;
- colors, opacity, borders, radii, shadows, backgrounds, and layer order;
- image or icon choice, aspect ratio, crop, position, and asset quality;
- horizontal overflow, unusable compression, disappearing content, and broken interaction states;
- consistency with project components and tokens where the source leaves a decision unspecified.

For exact-source comparisons, source and site blocks must have matching native dimensions. A diff
image localizes pixel differences but does not prove a defect by itself. Attribute residual text
differences to rasterization only after typography, wrapping, baselines, and bounds align.

Report only a concrete mismatch or coverage gap with a precise code or image-region location,
observed evidence, violated source or project requirement, applicable width and state, and visible
impact. Raster noise, taste, unsupported inference, and unrelated pre-existing layout issues are
not findings.