{"id":"ss-dial","name":"ss-dial","summary":"1つのデザイン軸を上下に調整し、決定的な変換として調整します — 「より密」「より鋭い角」「より落ち着いた」「より大胆」「フラット」「より活気ある」と。","body":"# Dial an axis\n## Registry-first artifact boundary\n\nWhen `.styleseed/project.json` and `.styleseed/artifacts/index.json` exist, resolve the requested artifact ID first, then read only `.styleseed/bundles/<artifact-id>.md` and `.styleseed/manifests/<artifact-id>.json`. Never fall back to the global legacy bundle for a registry project. Legacy projects may use `.styleseed/effective-rules.md` only when no registry exists.\n\n\"Make it more minimal\" is something you can just *say* — the model already reads plain\nlanguage. A skill only earns its place where **one word must move many tokens at once, in a\ncoordinated way, without breaking a rule** — and where doing it by hand gives an inconsistent\nresult (some tokens changed, the grid broken, a second accent introduced). That's what\n`/ss-dial` is: **not interpretation, but a deterministic ramp + guardrails + re-gate.**\n\nIf the request is a *mood word* (\"more premium\", \"more editorial\", \"more playful\"), that's not\none axis — it's a *combination* of positions across several axes. Use **`/ss-restyle\n<preset>`** for those. `/ss-dial` moves exactly one axis.\n\n## When NOT to use\n\n- A vague vibe the model can just apply from words (\"cleaner\", \"nicer\") → don't wrap it in a\n  skill; say it.\n- A named aesthetic (Swiss / editorial / brutalist) → `/ss-restyle` (a preset of dial positions).\n- Changing the accent *hue itself* (rebrand) → edit the lock's Key color directly, then re-derive.\n- No `STYLESEED.md` lock yet → run `/ss-build` or `/ss-setup` first; there's nothing to dial from.\n\n## The mechanic (every axis)\n\n1. **Read `STYLESEED.md`** — find the axis's current position (Mood/Density/Radius/Elevation/\n   Type scale/Font weight/Motion fields). If the lock doesn't record it, infer it from the code.\n2. **Move ONE position** in the requested direction on that axis's ramp (below). \"more X\" = one\n   step; an explicit target (\"density: dense\") jumps straight there. **Clamp at the ends** — you\n   cannot dial past `dense` or below `airy`. If already at the end, say so and stop (this is why\n   \"each use makes it *more*\" is bounded, not runaway).\n3. **Apply the whole coordinated token set** for the new position across every file that uses\n   those tokens — not just the one component in view. This is the point: system-wide, consistent.\n4. **Respect the guardrails** (each axis lists its own). Never break a Golden Rule to satisfy a\n   dial — if \"denser\" would push a touch control below 44px, stop at the floor and note it.\n5. **Update `STYLESEED.md`** with the new position (so it persists and the next prompt obeys it).\n6. **Re-run the Quality Gate** (`/ss-score`, loop to ≥ 80). A dial that drops the score below 80\n   is reverted or fixed, not shipped. Report: axis, old → new position, score.\n\n---\n\n## The axes\n\n### 1. Density — spacing rhythm + internal padding + type/line-height, together\n\nRamp: `airy → comfortable → compact → dense`. The page gutter stays `px-6`/`mx-6` always\n(fixed rule); density moves the *vertical rhythm, card interior, and reading scale*.\n\n| Position | Section `space-y` | Card padding | Grid `gap` | Body line-height | Type scale |\n|---|---|---|---|---|---|\n| **airy** | `space-y-10` | `p-8` | `gap-8` | `leading-relaxed` | one step up (desktop-larger) |\n| **comfortable** | `space-y-6` | `p-6` | `gap-6` | `leading-normal` | surface default |\n| **compact** | `space-y-4` | `p-4` | `gap-4` | `leading-normal` | surface default, tighter headings |\n| **dense** | `space-y-4` | `p-4` | `gap-3` (12px half-step) | `leading-snug` on data | data-table scale |\n\n**Guardrails:** stay on the 8px grid (only `p-2/4/6/8`, `gap-*` on grid or the 4px half-step —\nnever invent `p-5`/`gap-2.5`); **touch controls stay ≥ 44px even at `dense`** (shrink padding,\nnot tap targets); body never drops below the surface floor (desktop 16px). Dense is for\ndata-heavy surfaces; don't dense-ify a marketing landing.\n\n### 2. Hierarchy contrast — the size/weight gap between levels\n\nRamp: `subtle → balanced → strong → dramatic`. Moves the ratio between the hero and the body,\nplus display tracking.\n\n| Position | Hero : body size ratio | Display weight | Display tracking |\n|---|---|---|---|\n| **subtle** | ~2:1 | 600 | `-0.01em` |\n| **balanced** | ~2.5:1 | 700 | `-0.02em` |\n| **strong** | ~3.2:1 | 700–800 | `-0.02em` |\n| **dramatic** | ~4:1 | 800 | `-0.03em` |\n\n**Guardrails:** pick sizes from the Font Size table only (don't invent); body stays at the\nsurface floor regardless; keep the number-to-unit 2:1 pairing intact; one focal element still\ndominates (dialing contrast up must not create two competing heroes).\n\n### 3. Radius — the corner personality (categorical swap, not a slider)\n\nRamp: `sharp ↔ soft ↔ pill`. Swaps the **whole mapping table** as one set, never one component.\n\n| Position | Controls (btn/input/chip) | Cards | Inner panels |\n|---|---|---|---|\n| **sharp** | 2–4px | 6–8px | 4–6px |\n| **soft** | 8–10px | 12–16px | 10–12px |\n| **pill** | full (9999px) | 20–24px | 14–16px |\n\n**Guardrails:** one personality *everywhere* (sharp cards + pill buttons is the exact\nmixed-personality tell we ban); nested elements still follow `inner = outer − padding`.\n\n### 4. Elevation / depth — how surfaces separate\n\nRamp: `flat → subtle → layered → lifted`. **Light and dark speak different languages** — apply\nthe one that matches the theme.\n\n| Position | Light (shadow, ≤8% opacity) | Dark (tonal + hairline) |\n|---|---|---|\n| **flat** | no shadow; 1px hairline border | page = card tone; hairline only |\n| **subtle** | `0 1px 3px /4%` | one surface step + hairline |\n| **layered** | `0 1px 3px /4%` + `0 4px 12px /8%` | two surface steps + hairline |\n| **lifted** | add `0 8px 24px /8%` on raised | three steps; brightest = highest |\n\n**Guardrails:** never exceed ~8% shadow opacity in light; **never a drop shadow in dark** (use\nthe tonal surface ramp + hairline borders); one shadow language / one light direction across\nthe whole UI.\n\n### 5. Color — saturation and temperature (two sub-dials, accent stays single)\n\n`saturation: muted ↔ balanced ↔ vivid` · `temperature: cooler ↔ neutral ↔ warmer`. Shifts the\n**one** accent in HSL and re-derives its tints; may nudge the neutral greys' chroma. Does NOT\nadd a hue.\n\n| Sub-dial | Move | Applies to |\n|---|---|---|\n| **more-muted** | accent saturation −10–15% (HSL S) | `--brand` + re-derive `bg-*-tint` at 10–14% alpha |\n| **more-vivid** | accent saturation +10–15% | same |\n| **warmer** | hue toward 20–40° (amber/terracotta) | `--brand`; optionally greys +2–4% warm chroma |\n| **cooler** | hue toward 200–220° (blue/teal) | `--brand`; greys toward cool |\n\n**Guardrails:** still **one accent** — this shifts the existing hue, never introduces a second;\ntints follow the 10–14%-alpha-over-card formula (light + dark); accent keeps ≥4.5:1 where it\ncarries text; a warm/cool grey shift must stay near-neutral (chroma ≤ ~6%), not become a tint.\n\n### 6. Font weight — the weight ramp\n\nRamp: `light → regular → bold`. Shifts the whole weight scale up/down by one notch, keeping the\n*spread* (so hierarchy survives).\n\n| Position | Body | Labels / nav | Headings / metrics |\n|---|---|---|---|\n| **light** | 400 | 400–500 | 600 |\n| **regular** | 400 | 500 | 700 |\n| **bold** | 500 | 600 | 700–800 |\n\n**Guardrails:** keep contrast between levels (don't make everything one weight — that flattens\nhierarchy); body ≤ 500 for readability at length; CJK weight does the work tracking can't.\n\n### 7. Motion energy — seed + durations\n\nRamp: `still → calm → lively → energetic`. Swaps the motion seed and scales durations globally.\n\n| Position | Seed | Durations | Character |\n|---|---|---|---|\n| **still** | none | instant / color-only | no entrance motion |\n| **calm** | Silk / Snap | 100–200ms, ease-out | smooth, restrained |\n| **lively** | Spring | 200–350ms, slight overshoot | responsive, alive |\n| **energetic** | Spring / Pulse | 250–400ms, visible spring | bouncy, playful |\n\n**Guardrails:** **numbers, balances, and money never animate** at any level; always honor\n`prefers-reduced-motion`; scroll-linked/parallax/3D is surface-scoped (§43 — forbidden on app/data\nsurfaces, allowed as the Cinematic tier on marketing/landing pages; scroll-JACKING banned everywhere);\nmotion never delays content\nor blocks an action.\n\n---\n\n## Rules\n\n- **One axis per call.** A mood word (\"premium\") is a *combination* → `/ss-restyle`, not this.\n- **System-wide, or don't.** Applying a position to one component and not the rest re-creates the\n  incoherence this skill exists to prevent. Grep the token across the project and move all of it.\n- **Clamp at the ends.** Bounded ramp, not an infinite \"more\" — if already at `dense`/`sharp`/\n  `bold`, say so and stop.\n- **Guardrails beat the dial.** Never break a Golden Rule (grid, ≥44px touch, single accent,\n  nested-radius, ≤8% shadow, no dark drop-shadow, font-size table) to satisfy a direction — stop\n  at the floor and tell the user.\n- **Persist + re-gate.** Write the new position to `STYLESEED.md`, then `/ss-score` to ≥ 80.\n  Report `axis: old → new` and the score. A dial that lowered the score is fixed, not shipped.","author":"@bitjaru","ownerProfile":null,"authorContacts":null,"sourceUrl":"https://github.com/bitjaru/styleseed/tree/main/engine/.claude/skills/ss-dial","license":"MIT","category":"design","lang":"en","tokens":2605,"stars":0,"calls30d":2,"claimed":false,"visibility":"public","origin":"crawler","version":"0.1.0","createdAt":"2026-08-22","updatedAt":"2026-08-22","files":[],"requires":{"mcp":[],"tools":["Read","Write","Edit","Grep","Glob","Bash"]},"safety":{"flags":[],"scannedAt":"2026-08-22","hasScripts":false,"networkEndpoints":[]}}