arrange

Assess and improve layout spacing, rhythm, and visual hierarchy in Puree YAML/SCSS.

20|2|Updated Oct 5, 2025

Search Tags:#layout #ui-design #design-system #spacing #scss #visual rhythm

Ready to run

npx skills add https://github.com/nicolaiprodromov/puree --skill arrange-nicolaiprodromov

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: arrange
Source: https://github.com/nicolaiprodromov/puree/tree/main/.agents/skills/arrange
Command: npx skills add https://github.com/nicolaiprodromov/puree --skill arrange-nicolaiprodromov

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Assess and improve layout spacing, rhythm, and visual hierarchy in Puree YAML/SCSS to transform generic arrangements into intentional, readable compositions.

Core Features & Use Cases

Systematic spacing plan: defines a scalable spacing scale and applies consistent gaps across panels, grids, and cards.
Rhythm-aware redesign: introduces varied spacing and asymmetric layouts to create hierarchy and flow.
Guided implementation: provides steps to plan, prototype, and apply changes in YAML/SCSS contexts.

Quick Start

Describe the panel or layout you want to improve and request a spacing and rhythm optimization plan.

Frequently Asked Questions about arrange

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

FAQPage Schema

How do I fix monotonous spacing and weak visual hierarchy in a YAML layout?▼

Fix monotonous spacing in a YAML layout by defining a scalable spacing scale and applying consistent gaps across panels. Introduce asymmetric layouts and varied spacing to establish visual hierarchy and improve overall content flow.

What is visual rhythm in UI design and how does it affect card patterns?▼

Visual rhythm in UI design is the consistent pattern of whitespace and spacing that guides the eye through content. In card patterns, establishing a clear rhythm prevents generic arrangements and transforms them into readable compositions.

How do I create a systematic spacing plan for SCSS design systems?▼

Create a systematic spacing plan for SCSS design systems by defining a scalable spacing scale and responsive breakpoints. Apply consistent gaps across grids and panels to ensure visual hierarchy rules are maintained without disrupting existing content.

Can I optimize panel layouts and whitespace distribution without breaking existing content?▼

Yes, you can optimize panel layouts and whitespace distribution without breaking existing content by following actionable guidelines. Define responsive breakpoints and apply a spacing scale to implement changes systematically within your current YAML or SCSS structure.

What's the best way to plan and prototype rhythm-aware redesigns in Puree layouts?▼

The best way to plan rhythm-aware redesigns in Puree layouts is to follow a guided implementation process. Assess current spacing, prototype asymmetric layouts, and apply the changes directly within YAML and SCSS contexts.

Why does inconsistent spacing ruin grid patterns and how do I resolve it?▼

Inconsistent spacing ruins grid patterns by breaking visual rhythm and weakening hierarchy. Resolve it by identifying weak visual hierarchy in your layout and applying a systematic spacing scale to ensure consistent gaps across all grid and card elements.