bolder · educlopez — скилл для Claude Code: смелее в UI без шаблонности
Скилл добавляет интерфейсу характер: больше разброса в раскладке, движения и один акцентный приём. Пригодится, когда вёрстка работает, но выглядит пресно.
npx skills add educlopez/ui-craft --skill bolder -a claude-codeЧто делает bolder
bolder — один из скиллов набора ui-craft. Он берёт готовый интерфейс и усиливает его: поднимает DESIGN_VARIANCE на 1–2 пункта (потолок 10), MOTION_INTENSITY на 1, если она ниже 8. Для продуктовых экранов это асимметричный сдвиг, более сильная иерархия метрик или выразительный момент в оболочке; для маркетинговых — плотнее герой-блок и слом ритма секций.
Типографика идёт следом: вес или размер дисплейного шрифта на шаг выше, плотнее трекинг в заголовках, числа остаются tabular-nums. Акцент усиливается в пределах бюджета 3–5 вьюпортов, второй цвет не добавляется. Если у интерфейса нет подписи-приёма, скилл её вводит или дорабатывает.
Есть предохранитель: при variance ≥9 или MOTION ≥9 скилл не давит дальше, а работает над подписью и шрифтом. Он прямо запрещает фиолетово-голубые градиенты, bounce-анимации, стопки glassmorphism, эмодзи, заголовки капсом и сетки из трёх одинаковых иконок. Если установлен сам ui-craft, сначала читается его SKILL.md с Discovery, Anti-Slop и Craft Test, потому что bolder — только одна линза этого набора.
Какие задачи решает
- вытащить интерфейс из шаблонного вида, когда он уже работает
- добавить движение на фокусный элемент, не ломая
prefers-reduced-motion - усилить иерархию метрик на продуктовом экране
- поднять вес и плотность заголовков без второго акцентного цвета
- ввести один запоминающийся приём вместо россыпи украшений
Примеры запросов агенту
- сделай этот экран смелее:
$ARGUMENTS— путь к компоненту дашборда - bolder для лендинга — нужен характер, но без слопа
- добавь больше личности в UI, сейчас выглядит как шаблон
Как установить bolder
1Через Skills CLI (Vercel)
npx skills add educlopez/ui-craft --skill bolder -a claude-code2Вручную: положить файлы
~/.claude/skills/bolder/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/bolder/
1Через Skills CLI (Vercel)
npx skills add educlopez/ui-craft --skill bolder -a codex2Вручную: положить файлы
.agents/skills/bolder/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add educlopez/ui-craft --skill bolder -a cursor2Вручную: положить файлы
.cursor/skills/bolder/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install educlopez/ui-craft bolder2Вручную: положить файлы
.github/skills/bolder/SKILL.md1Через Skills CLI (Vercel)
npx skills add educlopez/ui-craft --skill bolder -a gemini-cli2Командой платформы
gemini skills install https://github.com/educlopez/ui-craft --path cli/assets/codex/skills/bolderВручную: положить файлы
.devin/skills/bolder/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add educlopez/ui-craft --skill bolder -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о bolder
Как установить bolder в Claude?
Выполните npx skills add educlopez/ui-craft --skill bolder -a claude-code. После этого файл скилла лежит в ~/.claude/skills/bolder/SKILL.md.
Что делает bolder?
Повышает разброс раскладки и интенсивность движения, усиливает типографику и один подписной приём. Правит код напрямую и печатает таблицу Review Format.
Что bolder не станет добавлять?
Фиолетово-голубые градиенты, bounce-анимации, стопки glassmorphism, эмодзи, заголовки капсом, сетки из трёх равных иконок и конфетти. При variance ≥9 или MOTION ≥9 он не поднимает значения дальше, а дорабатывает подпись и шрифт.
Исходный текст
SKILL.md · MIT
--- name: bolder description: "Amplify personality — raises layout variance and motion, strengthens typography and one signature detail, without slop. Use when the UI works but feels safe, flat, or \"template-y\", or when the user says \"bolder\", \"more personality\", \"more creative\", or \"make it pop\" (still professional). Invoke when the user asks for bolder on their UI, or mentions 'bolder' alongside design / UI / frontend work." --- <!-- HARNESS MIRROR — do not edit here. Canonical source: commands/bolder.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` bolder. Load the `ui-craft` skill and read `references/craft-intent.md`. **This is amplitude, not decoration.** Increase editorial confidence while staying anti-slop clean. **Apply in order (edit code directly):** 1. **Declare an updated Craft Read** — one line: what changed (variance, motion, signature). 2. **Raise DESIGN_VARIANCE** by +1–2 (cap 10). Product surfaces: asymmetric offset, stronger metric hierarchy, or display moment in shell. Marketing: stronger hero composition, section rhythm break, or typographic scale — per `references/craft-intent.md` variance table. 3. **Raise MOTION_INTENSITY** by +1 (cap 10) if below 8 — add one purposeful entrance or hover choreography on the focal element only. Honor `prefers-reduced-motion`. 4. **Typography** — increase display weight or size one step; tighten tracking on headlines; ensure numbers stay `tabular-nums`. 5. **Accent** — strengthen focal accent placement (within 3–5 viewport budget); tint primary card or CTA — never add a second accent hue. 6. **Signature** — add or strengthen the one signature bet if missing or weak (see craft-intent §3). **Never add:** purple-cyan gradients, bounce easing, glassmorphism stacks, emoji, ALL CAPS headings, three equal icon-card grids, confetti. **Knob gating:** if already at variance ≥9 or MOTION ≥9, strengthen signature and typography instead of pushing further. **Output:** edit code. Print Review Format table. End with the updated Craft Read line. **Next step:** `/critique` — confirm the added personality did not cost hierarchy or become slop (rung 1).
© educlopez · MIT · educlopez/ui-craft
Похожие скиллы
Всё по теме «Фронтенд и UI» →Сначала — bolder от других авторов.