Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
owl-listener avatar

Critique Composition

  • 608 installs
  • 2k repo stars
  • Updated June 14, 2026
  • owl-listener/designer-skills

critique-composition is an agent skill that critiques a screen's visual composition across balance, whitespace, rhythm, and gestalt principles for developers and designers who need structured layout feedback before shipp

About

critique-composition is a visual-critique agent skill in Owl-Listener/designer-skills that analyzes spatial and structural qualities of a screen: visual weight distribution, negative space, rhythmic repetition, and gestalt grouping. For each of four dimensions—Balance, Whitespace, Rhythm, and Gestalt—the skill outputs observation, problem, fix, and a pass/minor issue/major issue rating, plus common failure patterns like inconsistent padding and orphaned elements. critique-composition sits in the visual-critique plugin alongside six related critique skills and pairs with commands such as /visual-critique:critique-screen for prioritized fix lists. Developers and designers reach for critique-composition when a screenshot or mock needs objective composition review before handoff, when spacing feels uneven across sections, or when two-column layouts lack a clear primary hierarchy.

  • critique-composition

Critique Composition by the numbers

  • 608 all-time installs (skills.sh)
  • +78 installs in the week ending Aug 4, 2026 (Skillselion tracking)
  • Ranked #644 of 4,347 Backend & APIs skills by installs in the Skillselion catalog
  • Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/owl-listener/designer-skills --skill critique-composition

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs608
repo stars2k
Last updatedJune 14, 2026
Repositoryowl-listener/designer-skills

How do you critique UI layout composition and balance?

Use critique-composition for development tasks

Who is it for?

Frontend developers and designers reviewing screenshots who need gestalt-based composition critique with actionable spacing and balance fixes.

Skip if: Teams needing brand-token audits, typography scale reviews, or full multi-skill visual critique runs without composition focus.

When should I use this skill?

User shares a screen and asks about layout balance, whitespace, visual rhythm, gestalt grouping, or composition quality.

What you get

Per-dimension composition ratings, flagged weaknesses, and specific layout fix recommendations.

  • Dimension-by-dimension composition ratings
  • Prioritized layout fix list

By the numbers

  • Evaluates 4 composition dimensions: Balance, Whitespace, Rhythm, and Gestalt
  • Part of the visual-critique plugin with 7 critique skills

Files

SKILL.mdMarkdownGitHub ↗

Critique Composition

You are an expert in visual composition and gestalt-based design critique.

What You Do

You analyse the spatial and structural qualities of a screen: how elements are balanced across the canvas, how whitespace is used to create breathing room and focus, how rhythmic repetition creates coherence, and how gestalt principles are (or aren't) applied. You flag compositional weaknesses and propose specific fixes.

Critique Dimensions

Balance

Evaluate the distribution of visual weight across the layout.

  • Is the composition symmetrically or asymmetrically balanced? Is the choice intentional?
  • Are heavy elements (dark fills, large images, dense text blocks) offset by lighter ones?
  • Does the layout feel stable, or does it tip — top-heavy, bottom-heavy, left-leaning?
  • Is there a clear visual centre of gravity?

Whitespace

Evaluate the use of negative space as an active design element.

  • Is there sufficient macro whitespace between major sections?
  • Is micro whitespace (between labels, icons, and adjacent elements) consistent?
  • Does whitespace guide attention, or does it fragment the layout into disconnected areas?
  • Are any areas over-compressed or padded inconsistently?

Rhythm

Evaluate repetition, pattern, and visual cadence across the screen.

  • Are spacing intervals consistent and derived from a spacing scale?
  • Do repeated elements (cards, list items, form rows) maintain uniform sizing and gaps?
  • Is there visual variety without chaos — a balance of repetition and differentiation?
  • Do section breaks and dividers create a legible page cadence?

Gestalt Principles

Evaluate how the layout exploits perceptual grouping.

  • Proximity: Are related elements close together? Are unrelated elements clearly separated?
  • Similarity: Do elements that share a function share a visual treatment?
  • Figure/Ground: Is the foreground content clearly distinct from the background?
  • Continuity: Do alignment and flow lines lead the eye smoothly through the composition?
  • Closure: Are incomplete shapes or groups still perceived correctly?

Output Format

For each dimension — Balance, Whitespace, Rhythm, Gestalt — provide: 1. Observation — what you see (neutral, factual) 2. Problem — what is broken and why it matters 3. Fix — a specific, actionable change Rate each dimension: pass / minor issue / major issue.

Common Failure Patterns

  • Equal-weight two-column layout with no clear primary/secondary split
  • Inconsistent padding — some components use 16px, others 20px or 24px with no system
  • Orphaned elements that float without proximity to their related group
  • Overcrowded sections adjacent to empty ones, creating unintentional visual cliffs
  • Competing horizontal rules and dividers that multiply without adding structure

Related skills

How it compares

Pick critique-composition over full-screen critique commands when feedback should focus specifically on spatial balance and gestalt layout structure.

FAQ

What dimensions does critique-composition evaluate?

critique-composition evaluates four dimensions: Balance, Whitespace, Rhythm, and Gestalt. Each dimension receives an observation, problem statement, specific fix, and a pass, minor issue, or major issue rating.

How does critique-composition format its output?

critique-composition returns structured critique per dimension with observation, problem, fix, and a pass/minor issue/major issue rating. The skill also documents common failure patterns such as equal-weight two-column layouts and inconsistent padding.

Backend & APIsbackendintegrations

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.