ss-dial

Name: ss-dial
Author: bitjaru

810stars73forks

How to install ss-dial?

bitjaru/styleseed/ss-dial

$npx -y skills add bitjaru/styleseed --skill ss-dial

Installs into the current project.

Summary

Turn ONE design axis up or down as a coordinated, deterministic transform — "denser", "sharper corners", "more muted", "bolder", "flatter", "livelier". Not a vibe the model reinterprets each time; a defined ramp that moves many tokens together, respects the guardrails (8px grid,

Files · 1

View on GitHub

SKILL.md

1	# Dial an axis
2
3	"Make it more minimal" is something you can just say — the model already reads plain
4	language. A skill only earns its place where **one word must move many tokens at once, in a
5	coordinated way, without breaking a rule** — and where doing it by hand gives an inconsistent
6	result (some tokens changed, the grid broken, a second accent introduced). That's what
7	`/ss-dial` is: not interpretation, but a deterministic ramp + guardrails + re-gate.
8
9	If the request is a mood word ("more premium", "more editorial", "more playful"), that's not
10	one axis — it's a combination of positions across several axes. Use **`/ss-restyle
11	<preset>`** for those. `/ss-dial` moves exactly one axis.
12
13	## When NOT to use
14
15	- A vague vibe the model can just apply from words ("cleaner", "nicer") → don't wrap it in a
16	skill; say it.
17	- A named aesthetic (Swiss / editorial / brutalist) → `/ss-restyle` (a preset of dial positions).
18	- Changing the accent hue itself (rebrand) → edit the lock's Key color directly, then re-derive.
19	- No `STYLESEED.md` lock yet → run `/ss-build` or `/ss-setup` first; there's nothing to dial from.
20
21	## The mechanic (every axis)
22
23	1. Read `STYLESEED.md` — find the axis's current position (Mood/Density/Radius/Elevation/
24	Type scale/Font weight/Motion fields). If the lock doesn't record it, infer it from the code.
25	2. Move ONE position in the requested direction on that axis's ramp (below). "more X" = one
26	step; an explicit target ("density: dense") jumps straight there. Clamp at the ends — you
27	cannot dial past `dense` or below `airy`. If already at the end, say so and stop (this is why
28	"each use makes it more" is bounded, not runaway).
29	3. Apply the whole coordinated token set for the new position across every file that uses
30	those tokens — not just the one component in view. This is the point: system-wide, consistent.
31	4. Respect the guardrails (each axis lists its own). Never break a Golden Rule to satisfy a
32	dial — if "denser" would push a touch control below 44px, stop at the floor and note it.
33	5. Update `STYLESEED.md` with the new position (so it persists and the next prompt obeys it).
34	6. Re-run the Quality Gate (`/ss-score`, loop to ≥ 80). A dial that drops the score below 80
35	is reverted or fixed, not shipped. Report: axis, old → new position, score.
36
37	---
38
39	## The axes
40
41	### 1. Density — spacing rhythm + internal padding + type/line-height, together
42
43	Ramp: `airy → comfortable → compact → dense`. The page gutter stays `px-6`/`mx-6` always
44	(fixed rule); density moves the vertical rhythm, card interior, and reading scale.
45
46	\| Position \| Section `space-y` \| Card padding \| Grid `gap` \| Body line-height \| Type scale \|
47	\|---\|---\|---\|---\|---\|---\|
48	\| airy \| `space-y-10` \| `p-8` \| `gap-8` \| `leading-relaxed` \| one step up (desktop-larger) \|
49	\| comfortable \| `space-y-6` \| `p-6` \| `gap-6` \| `leading-normal` \| surface default \|
50	\| compact \| `space-y-4` \| `p-4` \| `gap-4` \| `leading-normal` \| surface default, tighter headings \|
51	\| dense \| `space-y-4` \| `p-4` \| `gap-3` (12px half-step) \| `leading-snug` on data \| data-table scale \|
52
53	Guardrails: stay on the 8px grid (only `p-2/4/6/8`, `gap-*` on grid or the 4px half-step —
54	never invent `p-5`/`gap-2.5`); touch controls stay ≥ 44px even at `dense` (shrink padding,
55	not tap targets); body never drops below the surface floor (desktop 16px). Dense is for
56	data-heavy surfaces; don't dense-ify a marketing landing.
57
58	### 2. Hierarchy contrast — the size/weight gap between levels
59
60	Ramp: `subtle → balanced → strong → dramatic`. Moves the ratio between the hero and the body,
61	plus display tracking.
62
63	\| Position \| Hero : body size ratio \| Display weight \| Display tracking \|
64	\|---\|---\|---\|---\|
65	\| subtle \| ~2:1 \| 600 \| `-0.01em` \|
66	\| balanced \| ~2.5:1 \| 700 \| `-0.02em` \|
67	\| strong \| ~3.2:1 \| 700–800 \| `-0.02em` \|
68	\| dramatic \| ~4:1 \| 800 \| `-0.03em` \|
69
70	Guardrails: pick sizes from the Font Size table only (don't invent); body stays at the
71	surface floor regardless; keep the number-to-unit 2:1 pairing intact; one focal element still
72	dominates (dialing contrast up must not create two competing heroes).
73
74	### 3. Radius — the corner personality (categorical swap, not a slider)
75
76	Ramp: `sharp ↔ soft ↔ pill`. Swaps the whole mapping table as one set, never one c

People who liked this also viewed

6 picks

Type

ss-dial

810stars73forks

View on GitHub

How to install ss-dial?

bitjaru/styleseed/ss-dial

$npx -y skills add bitjaru/styleseed --skill ss-dial

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Dial an axis
2
3	"Make it more minimal" is something you can just say — the model already reads plain
4	language. A skill only earns its place where **one word must move many tokens at once, in a
5	coordinated way, without breaking a rule** — and where doing it by hand gives an inconsistent
6	result (some tokens changed, the grid broken, a second accent introduced). That's what
7	`/ss-dial` is: not interpretation, but a deterministic ramp + guardrails + re-gate.
8
9	If the request is a mood word ("more premium", "more editorial", "more playful"), that's not
10	one axis — it's a combination of positions across several axes. Use **`/ss-restyle
11	<preset>`** for those. `/ss-dial` moves exactly one axis.
12
13	## When NOT to use
14
15	- A vague vibe the model can just apply from words ("cleaner", "nicer") → don't wrap it in a
16	skill; say it.
17	- A named aesthetic (Swiss / editorial / brutalist) → `/ss-restyle` (a preset of dial positions).
18	- Changing the accent hue itself (rebrand) → edit the lock's Key color directly, then re-derive.
19	- No `STYLESEED.md` lock yet → run `/ss-build` or `/ss-setup` first; there's nothing to dial from.
20
21	## The mechanic (every axis)
22
23	1. Read `STYLESEED.md` — find the axis's current position (Mood/Density/Radius/Elevation/
24	Type scale/Font weight/Motion fields). If the lock doesn't record it, infer it from the code.
25	2. Move ONE position in the requested direction on that axis's ramp (below). "more X" = one
26	step; an explicit target ("density: dense") jumps straight there. Clamp at the ends — you
27	cannot dial past `dense` or below `airy`. If already at the end, say so and stop (this is why
28	"each use makes it more" is bounded, not runaway).
29	3. Apply the whole coordinated token set for the new position across every file that uses
30	those tokens — not just the one component in view. This is the point: system-wide, consistent.
31	4. Respect the guardrails (each axis lists its own). Never break a Golden Rule to satisfy a
32	dial — if "denser" would push a touch control below 44px, stop at the floor and note it.
33	5. Update `STYLESEED.md` with the new position (so it persists and the next prompt obeys it).
34	6. Re-run the Quality Gate (`/ss-score`, loop to ≥ 80). A dial that drops the score below 80
35	is reverted or fixed, not shipped. Report: axis, old → new position, score.
36
37	---
38
39	## The axes
40
41	### 1. Density — spacing rhythm + internal padding + type/line-height, together
42
43	Ramp: `airy → comfortable → compact → dense`. The page gutter stays `px-6`/`mx-6` always
44	(fixed rule); density moves the vertical rhythm, card interior, and reading scale.
45
46	\| Position \| Section `space-y` \| Card padding \| Grid `gap` \| Body line-height \| Type scale \|
47	\|---\|---\|---\|---\|---\|---\|
48	\| airy \| `space-y-10` \| `p-8` \| `gap-8` \| `leading-relaxed` \| one step up (desktop-larger) \|
49	\| comfortable \| `space-y-6` \| `p-6` \| `gap-6` \| `leading-normal` \| surface default \|
50	\| compact \| `space-y-4` \| `p-4` \| `gap-4` \| `leading-normal` \| surface default, tighter headings \|
51	\| dense \| `space-y-4` \| `p-4` \| `gap-3` (12px half-step) \| `leading-snug` on data \| data-table scale \|
52
53	Guardrails: stay on the 8px grid (only `p-2/4/6/8`, `gap-*` on grid or the 4px half-step —
54	never invent `p-5`/`gap-2.5`); touch controls stay ≥ 44px even at `dense` (shrink padding,
55	not tap targets); body never drops below the surface floor (desktop 16px). Dense is for
56	data-heavy surfaces; don't dense-ify a marketing landing.
57
58	### 2. Hierarchy contrast — the size/weight gap between levels
59
60	Ramp: `subtle → balanced → strong → dramatic`. Moves the ratio between the hero and the body,
61	plus display tracking.
62
63	\| Position \| Hero : body size ratio \| Display weight \| Display tracking \|
64	\|---\|---\|---\|---\|
65	\| subtle \| ~2:1 \| 600 \| `-0.01em` \|
66	\| balanced \| ~2.5:1 \| 700 \| `-0.02em` \|
67	\| strong \| ~3.2:1 \| 700–800 \| `-0.02em` \|
68	\| dramatic \| ~4:1 \| 800 \| `-0.03em` \|
69
70	Guardrails: pick sizes from the Font Size table only (don't invent); body stays at the
71	surface floor regardless; keep the number-to-unit 2:1 pairing intact; one focal element still
72	dominates (dialing contrast up must not create two competing heroes).
73
74	### 3. Radius — the corner personality (categorical swap, not a slider)
75
76	Ramp: `sharp ↔ soft ↔ pill`. Swaps the whole mapping table as one set, never one c

People who liked this also viewed

6 picks

Type