/style-tune
/style-tune is the explicit slash-command form of the style-tune skill. The skill also auto-triggers on natural-language phrases (“warmer button”, “more elevated cards”), so you rarely need to type the slash command — but it’s available when you want to be explicit about scope.
Syntax
Section titled “Syntax”/style-tune <subject> <modifier(s)>Examples
Section titled “Examples”/style-tune button softer warmer/style-tune primary "tone down"/style-tune card "more elevated"/style-tune input sharperOr, equivalently, just write the intent in chat:
Make the button feel softer and warmer. Tone down the primary color a touch. More elevated cards.
The skill edits one of two layers:
| Layer | Targets |
|---|---|
| Theme roles | primary, accent, danger, warning, info, success, brand |
| Component tokens | button, card, alert, dialog, input, nav |
Modifier vocabulary
Section titled “Modifier vocabulary”These match the canonical mappings in the style-tune skill:
| Modifier | Target tokens | Effect |
|---|---|---|
| warmer | --*-bg, --color-* | Hue shift toward amber (≈ +15–30°) |
| cooler | --*-bg, --color-* | Hue shift toward blue (≈ −15–30°) |
| softer | --*-radius | Radius × 1.5 (min 4px) |
| sharper | --*-radius | Radius × 0.5 (min 0) |
| larger / bigger | --*-font-size, --*-padding-* | × 1.125 |
| smaller | --*-font-size, --*-padding-* | × 0.875 |
| bolder | --*-bg / --color-* chroma | Chroma × 1.2 |
| subtler / muted / tone down | --*-bg / --color-* chroma | Chroma × 0.8 |
| more elevated | --*-shadow | Next shadow step up |
| flatter | --*-shadow | Next shadow step down (or removed) |
Workflow
Section titled “Workflow”- Identify the subject and modifiers, then route to the theme or component layer.
- Locate the relevant theme files or component SCSS.
- Compute adjustments — colours via
oklch_shift.py, spatial tokens via canonical multipliers. - Apply edits with validation:
- Theme changes are pre-validated for WCAG contrast in a temp directory; failures roll back the entire batch.
- Component edits also run a WCAG pre-check on the affected token against its typical background role, and preserve
var()wrappers and fallbacks.
- Re-validate the file structure and surface drift hints.
- Print a summary table — modifier, token, old value, new value, status.