quieter · educlopez — скилл для Claude Code: убирает визуальный шум в UI
Скилл для ИИ-кодинга, который снижает визуальный шум в интерфейсе: меньше движения, проще сетка, спокойнее цвет. Пригодится, когда UI выглядит перегруженным.
npx skills add educlopez/ui-craft --skill quieter -a claude-codeЧто делает quieter
Это один из скиллов набора ui-craft. Он берёт интерфейс по указанному пути и правит код напрямую: снижает DESIGN_VARIANCE и MOTION_INTENSITY на 1–2 пункта (нижняя граница — 2), убирает scroll-анимации и stagger, оставляя только hover и focus. Дальше сжимает крупные размеры текста на шаг, уменьшает тени до тонких или ambient, убирает лишние рамки вокруг блоков. Цвет подтягивается к трём акцентным точкам, декоративные оттенки нейтрализуются, новых цветов не появляется.
Сохраняются главная иерархия, один уровень CTA, состояния и доступность. Если скилл ui-craft тоже установлен, сначала читается его SKILL.md с Discovery, Anti-Slop и Craft Test, а потом применяется эта линза. Для структурных сокращений — секций и текста — есть смысл дополнительно прогнать логику /distill, для работы с цветом — /colorize.
На выходе — отредактированный код, таблица Review Format и обновлённая строка Craft Read. Затем автор советует вызвать /critique: проверить, что сдержанность не сплющила иерархию. Учтите, что скилл меняет файлы проекта напрямую, поэтому запускать его лучше на чистой ветке.
Какие задачи решает
- убрать лишние scroll-анимации и stagger в интерфейсе
- снизить насыщенность цвета до трёх акцентов
- упростить экспериментальную асимметричную сетку
- уменьшить глубину теней и число рамок вокруг блоков
- проверить, что после упрощения иерархия не развалилась
Примеры запросов агенту
- сделай интерфейс в
src/pages/Dashboard.tsxпотише - слишком пёстро и шумно — приглуши этот UI
- убери декоративные анимации и лишние тени на этой странице
Как установить quieter
1Через Skills CLI (Vercel)
npx skills add educlopez/ui-craft --skill quieter -a claude-code2Вручную: положить файлы
~/.claude/skills/quieter/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/quieter/
1Через Skills CLI (Vercel)
npx skills add educlopez/ui-craft --skill quieter -a codex2Вручную: положить файлы
.agents/skills/quieter/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add educlopez/ui-craft --skill quieter -a cursor2Вручную: положить файлы
.cursor/skills/quieter/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install educlopez/ui-craft quieter2Вручную: положить файлы
.github/skills/quieter/SKILL.md1Через Skills CLI (Vercel)
npx skills add educlopez/ui-craft --skill quieter -a gemini-cli2Командой платформы
gemini skills install https://github.com/educlopez/ui-craft --path cli/assets/codex/skills/quieterВручную: положить файлы
.devin/skills/quieter/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add educlopez/ui-craft --skill quieter -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о quieter
Как установить quieter в Claude?
Выполните npx skills add educlopez/ui-craft --skill quieter -a claude-code. Скилл появится в ~/.claude/skills/quieter/SKILL.md.
Что делает quieter?
Снижает визуальный шум: уменьшает разброс макета и интенсивность движения, упрощает цвет и вес теней, но сохраняет иерархию и состояния.
Что нужно, чтобы скилл заработал?
Он правит код напрямую, поэтому запускать его стоит на ветке, где изменения легко откатить. Если установлен ui-craft, сначала читается его SKILL.md.
Исходный текст
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
Похожие скиллы
Всё по теме «Дизайн» →Сначала — quieter от других авторов.
