From acss-kit
Use when the user wants to adjust the visual feel of a component or theme role — 'warmer button', 'softer card', 'bolder primary', 'calmer alert'.
How this skill is triggered — by the user, by Claude, or both
Slash command
/acss-kit:style-tuneThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Route a natural-language aesthetic intent ("warmer button", "softer card", "deeper accent") to either a theme-role OKLCH edit or a component SCSS token edit. The full workflow for each layer lives in the parent skill; this router handles intent parsing and dispatch.
Route a natural-language aesthetic intent ("warmer button", "softer card", "deeper accent") to either a theme-role OKLCH edit or a component SCSS token edit. The full workflow for each layer lives in the parent skill; this router handles intent parsing and dispatch.
Call ExitPlanMode before parsing intent. Both downstream paths write to disk — /theme-update edits theme CSS, component-layer edits SCSS in place, and OKLCH scripts run via Bash. Plan mode blocks all of these.
Stay in plan mode only when the user explicitly asked for a preview ("show me the deltas", "don't apply yet"). In that case, narrate the resolved (modifier, token-family, layer) tuples from Step A without invoking Write/Edit/Bash, and wait for approval.
Read ${CLAUDE_PLUGIN_ROOT}/skills/style-tune/references/intent-vocabulary.md. Each row maps a modifier (and synonyms) to a token family + canonical delta + "var-only fallback" route.
Parse the prompt for vocabulary matches. Each match yields a (token-family, delta, layer-hint) tuple. Record all matches before dispatching.
| Subject in prompt | Layer | Follow |
|---|---|---|
primary, accent, danger, warning, info, success, brand, theme, app | theme | styles/SKILL.md — Style-Tune Mode |
button / btn, card, alert, dialog, input, nav, form | component | components/SKILL.md — Style-Tune Mode |
bare this / it / the component / everything | ambiguous | AskUserQuestion |
"This button" / "the button" / "buttons" always map to a global SCSS edit — never inline style={...} props.
Use AskUserQuestion (≤ 4 options) when:
For unambiguous prompts, skip A3 and dispatch immediately.
After the layer workflow completes, print:
Layer: <theme | component | both>
Files: <list>
Modifier Token / Role Old New Status
warmer --color-primary #2563eb #3265ec accepted
warmer --color-primary-hover #1e4dc7 #294fc8 accepted
softer --btn-radius 0.375rem 0.5625rem accepted
calmer --color-danger #dc2626 #d8413b reverted (contrast)
Notes:
- <any var-only fallback routing notes or drift warnings from the layer workflow>
Next:
- Try "now go a touch sharper" to dial back radius.
- Or use /theme-update for explicit hex values.
Always include the "Next" hint so users know iteration is cheap and bounded.
npx claudepluginhub shawn-sandy/agentic-acss-plugins --plugin acss-kitCreates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.