layout-and-composition

What problem does it solve?

This Skill addresses the challenge of creating coherent and effective layouts for any screen, ensuring visual hierarchy, structure, and user flow are optimized.

Core Features & Use Cases

• Visual Hierarchy: Define the order of importance with size, weight, color, contrast, and position.
• Gestalt Principles: Apply proximity, similarity, common region, closure, continuity, figure/ground, and common fate to group elements meaningfully.
• Alignment & Balance: Align elements to a grid, balance symmetrical and asymmetrical compositions, and use tension for emphasis.
• Whitespace & Rhythm: Utilize macro and micro whitespace to enhance grouping and rhythm in the layout.
• Scanning Patterns: Understand and leverage F-pattern, Z-pattern, layer-cake, spotted, reading direction, and above-the-fold scanning to structure content effectively.
• Responsive Layouts: Design patterns like centered column, sidebar + content, holy grail, split, master-detail, and card grid for different screen sizes and content types.
• CSS Implementation: Utilize Flexbox and Grid for layout, responsive strategies, logical properties, and container queries for modern design.

Quick Start

Run the layout-and-composition skill to analyze and optimize the layout of your web page.