layout-reviewing
Skill299 starsChanged 11 days agoMITView on GitHub
Layout review criteria: fidelity to a source such as Figma or a screenshot, consistency with the project where no source exists, required viewport and state evidence, and visual defects in spacing, typography, color, assets, and responsive reflow. Use whenever an implemented web layout is reviewed or checked against its design or across screen widths. Implementing or fixing a layout uses layout-writing.
Files
Layout Reviewing
Judge the supplied implementation and prepared evidence. You may challenge the visual approach, responsive behavior, or treatment of states and propose a stronger alternative within the supplied scope. Do not 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, and1440coverage, 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.
Ground every mismatch, coverage gap, critique, or alternative in a precise code or image-region location, observed evidence, the applicable source or project requirement, relevant width and state, and visible impact. Explain why a proposed alternative is stronger for the reviewed layout. Raster noise, taste, unsupported inference, and unrelated pre-existing layout issues are not findings.
In this repository28 other files it gives its agents.
- AGENTS.mdAGENTS.md
- skills/skill-master/references/agents.mdAGENTS.md
- CLAUDE.mdCLAUDE.md
- code-reviewingSkill
- code-writingSkill
- documentation-writingSkill
- infrastructure-setupSkill
- layout-reviewingSkill
- layout-writingSkill
- methodologySkill
- project-initializationSkill
- prompt-masterSkill
- security-auditorSkill
- skill-masterSkill
- test-masterSkill
- user-spec-planningSkill
- code-reviewingSkill
- code-writingSkill
- documentation-writingSkill
- infrastructure-setupSkill
- layout-writingSkill
- methodologySkill
- project-initializationSkill
- prompt-masterSkill
- security-auditorSkill
- skill-masterSkill
- test-masterSkill
- user-spec-planningSkill
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

