skills.rest
compozy
compozyOFFICIAL
Explore all skills by this author →
Website𝕏@compozyaiGitHub

better-layout

Reviews and structures web interface layouts for grouping, alignment, spacing, and adaptive breakpoints.

2.7k|171|Updated Mar 28, 2026
Search Tags:#CSS#alignment#rtl#frontend review#Layout#Spacing#Responsive design
One-click install
npx skills add https://github.com/compozy/compozy --skill better-layout
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: better-layout
Source: https://github.com/compozy/compozy/tree/main/.agents/skills/better-layout
Command: npx skills add https://github.com/compozy/compozy --skill better-layout

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Web interfaces often suffer from unclear visual hierarchy, inconsistent spacing, misaligned edges, and layouts that break under resizing, translation, or RTL mirroring. This Skill provides concrete layout principles and review criteria so pages and components communicate structure through position and spacing rather than decoration.

Core Features & Use Cases

  • Grouping and Alignment Guidance: Apply rules for negative space, shared alignment edges, logical CSS properties, and importance-based ordering when structuring pages or components.
  • Spacing and Adaptivity Rules: Set control clearances, layout margins, safe-area handling, progressive disclosure cues, container-query breakpoints, and i18n string-growth resilience.
  • Structured Layout Reviews: Produce severity-rated findings tables with file locations, before/after fixes, verification steps, and a Block/Needs changes/Approve verdict.
  • Use Case: When reviewing a settings page where every row has a separator line and buttons touch the viewport edge, use this Skill to replace lines with grouped spacing and inset the action bar within layout margins.

Quick Start

Review the layout of my Settings page component and report any grouping, alignment, or spacing issues with suggested fixes.

Frequently Asked Questions about better-layout

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I improve layout grouping and visual hierarchy in CSS?▼

Group related items with negative space first, keeping the gap between groups at least twice the gap within a group. Use background shapes second and separator lines only as a last resort for dense data like tables.

How much spacing should I put between buttons and controls?▼

Start with 12px between adjacent bordered or filled controls and 24px of clearance around borderless text or icon buttons when no density system exists. Compact tools may use less if hit areas remain distinct and never overlap.

Should I use margin-left or margin-inline-start for RTL layouts?▼

Use logical properties like margin-inline-start and padding-inline-end for direction-dependent layout so the design mirrors automatically under dir="rtl". Reserve physical left/right properties only for genuinely physical geometry such as device notches.

When should I use container queries instead of media queries?▼

Use container queries when a component should adapt to the column it sits in rather than the viewport, such as a card inside a narrow sidebar. Breakpoints should come from where the content actually stops fitting, not device presets like 768px.

Why does my layout break when translated into other languages?▼

Fixed widths and heights sized to English labels overflow or truncate when strings grow in other languages. Use max-width with wrapping, min-height instead of fixed heights, and let buttons size from their label padding, then test with pseudo-localization.

Related Skills

Explore More Design & Creative Skills→
s0lci700s0lci700
1

svelte-native

Convert bits-ui or shadcn-svelte components into native Svelte 5 with CSS and design tokens.

Community
Advanced
bonnguyenitcbonnguyenitc
19

i18n-localization

Plan internationalization architecture and localization strategy for applications.

Community
Intermediate
simstudioaisimstudioai
29.5k

make-interfaces-feel-better

Applies design engineering principles to polish UI components, animations, typography, and surfaces.

Official
Intermediate
MediaAskeyDOJOMediaAskeyDOJO

core-components

Provide reusable UI components and design tokens for consistent interfaces.

Community
Intermediate