bolder · educlopez — Claude Code skill: bolder UI without the slop
A skill that gives an interface more character: wider layout variance, more motion, one signature detail. Useful when the UI works but reads flat.
npx skills add educlopez/ui-craft --skill bolder -a claude-codeWhat bolder does
bolder is one lens of the ui-craft skill set. It takes a finished interface and amplifies it: DESIGN_VARIANCE goes up by 1–2 (cap 10), MOTION_INTENSITY by 1 if it sits below 8. On product surfaces that means an asymmetric offset, a stronger metric hierarchy or a display moment in the shell; on marketing pages, a stronger hero and a break in section rhythm.
Typography follows. Display weight or size moves up one step, headline tracking tightens, numbers stay tabular-nums. The focal accent gets stronger within a 3–5 viewport budget, and no second accent hue is added. If the interface has no signature bet, the skill adds or strengthens one.
There is a guard rail: at variance ≥9 or MOTION ≥9 it stops pushing numbers and works on signature and type instead. It explicitly rules out purple-cyan gradients, bounce easing, glassmorphism stacks, emoji, ALL CAPS headings and three equal icon-card grids. When ui-craft itself is installed, its SKILL.md is read first for Discovery, Anti-Slop and Craft Test, because bolder is only one lens of that set.
What it helps with
- pull a working interface out of its template look
- add motion to the focal element while honoring
prefers-reduced-motion - strengthen metric hierarchy on a product screen
- raise headline weight and tracking without a second accent hue
- introduce one memorable detail instead of scattered ornament
Example prompts for the agent
- make this screen bolder —
$ARGUMENTSpoints at the dashboard component - bolder on the landing page, more personality but keep it professional
- this UI feels template-y, give it more character
How to install bolder
1Skills CLI (Vercel)
npx skills add educlopez/ui-craft --skill bolder -a claude-code2Manually: put the files in place
~/.claude/skills/bolder/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/bolder/
1Skills CLI (Vercel)
npx skills add educlopez/ui-craft --skill bolder -a codex2Manually: put the files in place
.agents/skills/bolder/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add educlopez/ui-craft --skill bolder -a cursor2Manually: put the files in place
.cursor/skills/bolder/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install educlopez/ui-craft bolder2Manually: put the files in place
.github/skills/bolder/SKILL.md1Skills CLI (Vercel)
npx skills add educlopez/ui-craft --skill bolder -a gemini-cli2Platform CLI
gemini skills install https://github.com/educlopez/ui-craft --path cli/assets/codex/skills/bolderManually: put the files in place
.devin/skills/bolder/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add educlopez/ui-craft --skill bolder -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 bolder
How do I install bolder in Claude?
Run npx skills add educlopez/ui-craft --skill bolder -a claude-code. The skill then lives at ~/.claude/skills/bolder/SKILL.md.
What does bolder do?
It raises layout variance and motion intensity, strengthens typography and one signature detail. It edits code directly and prints a Review Format table.
What will bolder never add?
Purple-cyan gradients, bounce easing, glassmorphism stacks, emoji, ALL CAPS headings, three equal icon-card grids or confetti. At variance ≥9 or MOTION ≥9 it strengthens signature and typography instead of pushing further.
Source text
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
Similar skills
Everything for Frontend and UI →bolder by other authors comes first.
