Quieter

Name: Quieter
Author: educlopez

educlopez/ui-craft

1 installs
247 repo stars
Updated August 4, 2026
educlopez/ui-craft

A ui-craft lens that tones down visual weight by cutting accents, softening type, reducing shadows, and removing decorative motion.

About

Reduces a noisy UI to 1-3 accents, compressed type range, subtle depth, and state-only motion. A developer uses it when an interface is shouting from too many accents, heavy type, or decorative animation.

Cuts accents per viewport and mutes decorative color
Softens type weight/size and strips non-state motion

Quieter by the numbers

1 all-time installs (skills.sh)
Ranked #1,609 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
Data as of Aug 5, 2026 (Skillselion catalog sync)

npx skills add https://github.com/educlopez/ui-craft --skill quieter

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/educlopez/ui-craft/quieter.svg)](https://skillselion.com/skills/educlopez/ui-craft/quieter)

Installs	1
repo stars	★ 247
Last updated	August 4, 2026
Repository	educlopez/ui-craft ↗

What it does

A ui-craft lens that tones down visual weight by cutting accents, softening type, reducing shadows, and removing decorative motion.

Files

SKILL.mdMarkdownGitHub ↗

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.

Knob awareness (MOTION_INTENSITY):

MOTION_INTENSITY 8+ → the user explicitly picked high motion. Warn: "user picked high motion; /quieter will conflict with intent." Ask before stripping motion.
MOTION_INTENSITY ≤ 3 → motion is already minimal; focus on type and color.

References to read: references/color.md (accent discipline), references/typography.md (weight + tracking), references/animation.md (Decision Ladder — remove what fails it).

Output: edit code directly. Print the Review Format table. Flag anything you left loud on purpose and why.