quieter

Installation
SKILL.md

Context: this sub-skill is one lens of the broader ui-craft skill. If the ui-craft skill is also installed, read its SKILL.md first for Discovery + Anti-Slop + Craft Test, then apply the specific lens below.

Quiet the UI at the target the user described. Load the ui-craft skill.

Overlap flag: /quieter is about visual weight (accents, type, shadows, motion). /distill is about content and structure (cutting sections, words, props). If the UI is shouting because there's too much of it, run /distill first.

Pass in order:

  1. Count accents per viewport. Cut to 1-3. The primary CTA keeps its accent; everything else goes neutral unless it's a true semantic state (success/warning/danger on a real status).
  2. Soften type. Headings: weight 800 → 600, size 72 → 56, tracking -0.04em → -0.02em. Don't remove hierarchy — compress the range.
  3. Depth. Replace hard drop shadows with subtle ambient + direct (see references/modern-css.md), or switch to 1px borders. Never both.
  4. Motion. Remove any animation that isn't communicating state or hierarchy. Decorative scroll reveals, idle float/bob, mouse-tracking glows → gone.
  5. Color. Mute any purely decorative color. Background patterns, tinted cards without meaning, colored left borders on every list item → gone.
  6. Density. If every section is full-bleed and high-contrast, let some breathe — increase section padding, reduce contrast on secondary surfaces.
Related skills
Installs
1
GitHub Stars
29
First Seen
Apr 18, 2026