friction-log
File contributor or agent papercuts as GitHub issues labeled friction, or investigate those issues as the daily friction-log…
@educlopezInstall SkillDevelopment
Skill
/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\". Invoke when the user asks
Claude Code
$ npx -y skills add educlopez/ui-craft --skill quieter --agent claude-code
Codex
$ npx skills add educlopez/ui-craft --skill quieter -a codex -y
Cursor
$ npx skills add educlopez/ui-craft --skill quieter -a cursor -y
Gemini CLI
$ npx skills add educlopez/ui-craft --skill quieter -a gemini-cli -y
GitHub Copilot
$ npx skills add educlopez/ui-craft --skill quieter -a github-copilot -y
OpenCode
$ npx skills add educlopez/ui-craft --skill quieter -a opencode -y
Windsurf
$ npx skills add educlopez/ui-craft --skill quieter -a windsurf -y
SKILL.md
quieter.SKILL.mdname: 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).
Read more
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).
Ships withui-craft
Ship designer-grade UI by default. A design engineering system for AI coding agents — install it as a skill or as the ui-craft CLI, and your agent starts designing like it has taste. Ask for a dashboard, get one you'd put in production.
45930 skills2 agents1 MCP
Stars on GitHub
Momentum
- stars in total
- 459
Other skills on ui-craft.
@educlopezInstall Skillui-craft-dense-dashboa…
Dense dashboard / admin / Bloomberg / Retool / data-heavy internal tools. Locked knobs: CRAFT=7, MOTION=3, DENSITY=9. IBM Plex +…
@educlopezInstall Skillui-craft-editorial
Editorial / magazine / long-form / Medium / Substack / content-heavy UIs. Locked knobs: CRAFT=9, MOTION=4, DENSITY=3. Serif…
@educlopezInstall Skillui-craft-minimal
Minimal / clean / Linear / Notion / Vercel / whitespace-heavy UIs. Locked knobs: CRAFT=8, MOTION=3, DENSITY=2. Monochrome + one…
@educlopezInstall Skillui-craft
Use for UI design and implementation work to avoid generic AI-looking interfaces. Provides anti-slop rules, a required discovery…
@educlopezInstall Skilladapt
Responsive layout pass covering breakpoints, touch targets, safe areas, and fluid type. Use when the UI has layout or touch…
@educlopezInstall SkillMore skills from other plugins.
Auto-invoked
brainstorming
You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or…
@obraInstall Skillask-matt
Ask which skill or flow fits your situation. A router over the skills in this repo.
@mattpocockInstall SkillAuto-invoked
Questions about quieter.
- Which coding agents can use quieter?
- quieter installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.