# Minimal Ui Design

> Use when designing or refining UIs that must be visually minimal, low-noise, and icon-forward while staying understandable for new users, especially when reducing text, consolidating controls, or streamlining dialogs, toolbars, search panels, or list results.

- **Type:** Skill
- **Install:** `agentstack add skill-castle-x-skills-x-minimal-ui-design`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [castle-x](https://agentstack.voostack.com/s/castle-x)
- **Installs:** 0
- **Category:** [Search](https://agentstack.voostack.com/c/search)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [castle-x](https://github.com/castle-x)
- **Source:** https://github.com/castle-x/skills-x/tree/main/skills/minimal-ui-design

## Install

```sh
agentstack add skill-castle-x-skills-x-minimal-ui-design
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Minimal UI Design

## Overview

Create UIs that feel calm and minimal without sacrificing clarity. Prioritize reduced copy, icon-led actions, and subtle guidance that keeps new users oriented.

## When to Use

- The user asks for minimal, clean, or low-noise UI.
- You are removing redundant text or simplifying dense layouts.
- You are switching text buttons to icon-only controls.
- You need to keep a UI beginner-friendly after simplification.
- You are redesigning search dialogs, toolbars, or action bars.

Do NOT use when the goal is a marketing/brand-heavy or storytelling UI.

## Core Principles

1. **Reduce, don’t hide**
   - Remove duplicates and verbose labels first.
   - Keep one minimal cue per area (placeholder, tooltip, or keycap row).

2. **Icon-first, never icon-only without labels**
   - Use icons for primary actions.
   - Always include `aria-label`/`title` for meaning and onboarding.
   - Prefer icon-only + tooltip; use visible text only when confusion remains.

3. **Guidance must be low-noise**
   - Use subtle keycap rows or tiny tooltips over large help panels.
   - Keep hint text to 1–4 words.

4. **Density with breathing**
   - Compact spacing, but avoid reducing font size to “fake minimal”.
   - Use consistent spacing scale; keep touch targets ≥ 44×44.

5. **Keep the editing flow keyboard-first**
   - Shortcut hints belong in a single, quiet strip.
   - Show only shortcuts that are usable in the current surface.
   - Avoid showing the same shortcut in multiple places.

## Workflow (Minimal UI Pass)

1. **Delete redundancy**
   - Remove repeated labels, “empty state” descriptions, and duplicate headers.
2. **Collapse controls**
   - Merge similar actions into a single toggle or icon button.
3. **Replace text with icons**
   - Convert button text to icons, keep labels via `aria-label`/`title`.
4. **Re-add minimal guidance**
   - Choose ONE: placeholder, tooltip, or keycap row.
   - If you add a keycap row, remove other shortcut hints nearby.
5. **Check clarity**
   - Can a new user pass a 10-second scan test?

## Quick Reference

**Do**
- Use a single shortcut bar (keycaps) when helpful.
- Keep labels in accessibility attributes.
- Use small, consistent icon sizes.
- Use subtle active states (theme-tinted, low opacity).

**Don’t**
- Add a settings toggle just to show labels.
- Show multi-line help blocks inside minimal dialogs.
- Shrink font size to “look clean”.
- Duplicate hints in multiple locations.
- Reintroduce visible labels everywhere by default.

## Common Mistakes

- **Over-hiding**: icon-only without labels or tooltips.
- **Help bloat**: adding a help panel defeats minimalism.
- **False minimal**: tiny fonts and tight line-height reduce readability.
- **Conflicting cues**: shortcut hints shown in both header and footer.
- **Global hints**: showing shortcuts that don’t apply in the current UI.

## Example (Condensed)

User: “搜索框要极简、图标化，但新手也要能用。”  
Response: “移除冗余文案，保留 1 个引导（占位符或 keycap 条），按钮改图标并补 `aria-label`，减少信息密度但保留清晰路径。”

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [castle-x](https://github.com/castle-x)
- **Source:** [castle-x/skills-x](https://github.com/castle-x/skills-x)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-castle-x-skills-x-minimal-ui-design
- Seller: https://agentstack.voostack.com/s/castle-x
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.