Command
/quieter
Tone down visual noise — lowers variance and motion, simplifies layout and color weight, keeps hierarchy clear. Use when the UI feels loud, busy, or over-designed, or when the user says "quieter", "more restrained", "simpler", or "tone it down".
One command from ui-craft.
shell
$ npx -y skills add educlopez/ui-craft --agent claude-codeShips with ui-craft. Installing the plugin gets this command.
How it fires
How this command gets triggered: by you, by Claude, or both.
- Fires itselfClaude auto-loads it when your prompt matches the work.
- You can call itInvoke it directly when you want it.
- Slash command
/quieter
Context preview
What this command does when you run it.
Tone down visual noise — lowers variance and motion, simplifies layout and color weight, keeps hierarchy clear. Use when the UI feels loud, busy, or over-designed, or when the user says "quieter", "more restrained", "simpler", or "tone it down".
Stats
Stars209
Forks9
LanguageGo
LicenseMIT
Ships with ui-craft
Command definition
quieter.md
--- description: Tone down visual noise — lowers variance and motion, simplifies layout and color weight, keeps hierarchy clear. Use when the UI feels loud, busy, or over-designed, or when the user says "quieter", "more restrained", "simpler", or "tone it down". argument-hint: "[file or component path]" --- Make the UI at `$ARGUMENTS` quieter. Load the `ui-craft` skill and read `references/craft-intent.md`. **Reduce amplitude without gutting hierarchy.** Calm ≠ boring. **Apply in order (edit code directly):** 1. **Declare an updated Craft Read** — one line: what softened. 2. **Lower DESIGN_VARIANCE** by −1–2 (floor 2). Simplify asymmetric breaks; return to clearer grid rhythm where layout was experimental. 3. **Lower MOTION_INTENSITY** by −1–2 (floor 2). Remove scroll reveals and stagger; keep hover/focus only. 4. **Visual weight** — compress display sizes one step (e.g. 56→48px); reduce shadow depth to hairline or ambient-only; fewer bordered containers. 5. **Color** — pull accent placements toward the 3 minimum; neutralize decorative tints; no new hues. 6. **Cut decorative motion** — idle animations, parallax, floating elements with no job. **Preserve:** primary hierarchy, one CTA level, accessibility, states, signature detail only if it carries meaning (else simplify it). **Overlap:** for structural cuts (sections, copy), also apply `/distill` logic. For color strategy, see `/colorize`. **Output:** edit code. Print Review Format table. End with the updated Craft Read line.
