quieter · educlopez — Claude Code skill: tone down visual noise in UI
An AI-coding skill that lowers visual noise in an interface: less motion, simpler layout, calmer color. Useful when a UI feels loud or over-designed.
npx skills add educlopez/ui-craft --skill quieter -a claude-codeWhat quieter does
This is one lens of the ui-craft skill set. It takes the UI at the given path and edits the code directly: DESIGN_VARIANCE and MOTION_INTENSITY drop by 1–2 (floor 2), scroll reveals and stagger go away, hover and focus stay. Display sizes compress one step, shadows shrink to hairline or ambient, and fewer containers keep borders. Accent placements pull toward the 3 minimum, decorative tints get neutralized, and no new hues appear.
Primary hierarchy, one CTA level, accessibility and states are preserved. If the ui-craft skill is installed too, its SKILL.md is read first for Discovery, Anti-Slop and Craft Test, then this lens applies. For structural cuts across sections and copy, the /distill logic is worth running as well; for color strategy, see /colorize.
Output is edited code, a Review Format table and an updated Craft Read line. The author then suggests /critique to confirm restraint did not flatten the hierarchy. Note that the skill writes to your project files, so run it on a branch you can throw away.
What it helps with
- strip scroll reveals and stagger from an interface
- pull accent color down to three placements
- simplify an experimental asymmetric grid
- reduce shadow depth and the number of bordered containers
- check that hierarchy survived the simplification
Example prompts for the agent
- make the UI in
src/pages/Dashboard.tsxquieter - this page feels loud and busy — tone it down
- remove decorative motion and heavy shadows on this screen
How to install quieter
1Skills CLI (Vercel)
npx skills add educlopez/ui-craft --skill quieter -a claude-code2Manually: put the files in place
~/.claude/skills/quieter/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/quieter/
1Skills CLI (Vercel)
npx skills add educlopez/ui-craft --skill quieter -a codex2Manually: put the files in place
.agents/skills/quieter/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add educlopez/ui-craft --skill quieter -a cursor2Manually: put the files in place
.cursor/skills/quieter/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install educlopez/ui-craft quieter2Manually: put the files in place
.github/skills/quieter/SKILL.md1Skills CLI (Vercel)
npx skills add educlopez/ui-craft --skill quieter -a gemini-cli2Platform CLI
gemini skills install https://github.com/educlopez/ui-craft --path cli/assets/codex/skills/quieterManually: put the files in place
.devin/skills/quieter/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add educlopez/ui-craft --skill quieter -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about quieter
How do I install quieter in Claude?
Run npx skills add educlopez/ui-craft --skill quieter -a claude-code. The skill lands in ~/.claude/skills/quieter/SKILL.md.
What does quieter do?
It tones down visual noise: lowers layout variance and motion intensity, simplifies color and shadow weight, and keeps hierarchy and states intact.
What do I need before running it?
It edits code directly, so start on a branch where changes are easy to revert. If ui-craft is installed, its SKILL.md is read first.
Source text
SKILL.md · MIT
--- name: quieter 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\". Invoke when the user asks for quieter on their UI, or mentions 'quieter' alongside design / UI / frontend work." --- <!-- HARNESS MIRROR — do not edit here. Canonical source: commands/quieter.md. After editing source, copy into cli/assets/<harness>/ and repo-root harness mirrors. --> **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. 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. **Next step:** `/critique` — confirm restraint did not flatten the hierarchy (rung 1).
© educlopez · MIT · educlopez/ui-craft
Similar skills
Everything for Design →quieter by other authors comes first.
