Less Is More UI

This skill helps AI agents design clean, functional and calm web interfaces by applying universal design axioms.

The goal is to create interfaces where reduction is the primary value. Every element must be justified, or it must be removed.

Pillars of the Essential

1. Foundations (Origins)

Understand the philosophical roots of minimalist design.

• Miesian Clarity: Remove all decorative elements. Let the content speak.
• Sullivan's Logic: Form follows function. Every element must reflect its purpose.
• Rams' Systemic Simplicity: Good design is understandable and unobtrusive.

2. Methodology (The Axioms)

Apply these universal laws (detailed in references/axioms.md) as your reasoning engine:

1. Justification: Every pixel must earn its right to exist.
2. Typographic Dominance: Typography is the interface. Use size and weight, not boxes.
3. Material Honesty: No fake depth, shadows, or skeuomorphism.
4. Proximity and Void: Whitespace is your most powerful structural tool.
5. The Silent Grid: Alignment creates order without visible borders.
6. Paradox of Choice: Limit options to increase clarity and intent.

3. Interface (Implementation)

Execute the "Sustractive Pass" on every output:

1. Identify Noise: Look for shadows, gradients, redundant icons, and decorative borders.
2. Remove & Re-evaluate: Delete the noise. If the interface still functions, leave it out.
3. Refine Typography: Compensate by improving typographic hierarchy and whitespace.

Bundled Resources

• assets/css/reset.css: The mandatory modernist base for all CSS.
• references/tokens.css: The Essential Design System tokens. Always use these semantic variables instead of hardcoded hex values or generic units.
• references/axioms.md: The logical foundation for design decisions.
• references/case-studies.md: Examples of noisy vs. essential patterns.
• references/components.md: Minimalist code snippets using Essential tokens.
• docs/animations.md: Standards for subtle, functional micro-interactions.
• docs/responsive.md: How to handle smaller screens via reduction, not stacking.

When to Use This Skill

TRIGGER this skill for ANY task involving UI, frontend, or web design. You MUST use it even if the user doesn't explicitly ask for "minimalism." It is particularly effective for:

• Building dashboards, internal tools, or data-heavy views.
• Creating landing pages that need to feel professional, high-intent, and calm.
• Simplifying complex user flows or refactoring "noisy" existing codebases.
• Designing any layout where clarity and speed are prioritized over visual decoration.