skills.rest
shawn-sandy
shawn-sandyCOMMUNITY
Explore all skills by this author →
Website𝕏@shawnsandyGitHub

style-tune

Convert natural-language aesthetic modifiers into OKLCH theme and SCSS token edits.

Updated Apr 21, 2026
Search Tags:#oklch#component styling#intent parsing#scss tokens#theme tuning#a11y design system
One-click install
npx skills add https://github.com/shawn-sandy/agentic-acss-plugins --skill style-tune
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: style-tune
Source: https://github.com/shawn-sandy/agentic-acss-plugins/tree/main/plugins/acss-kit/skills/style-tune
Command: npx skills add https://github.com/shawn-sandy/agentic-acss-plugins --skill style-tune

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

style-tune helps you translate natural-language aesthetic intent into safe, targeted edits to theme OKLCH roles or component SCSS tokens (for example, making a button warmer, a card softer, or an alert calmer).

Core Features & Use Cases

  • Intent-to-token routing: Parses modifiers like “warmer”, “softer”, “bolder”, and dispatches the change to either theme-layer OKLCH variables or component-layer SCSS tokens.
  • Theme + component editing: Supports tuning theme roles (including paired hover behavior) and component token families such as radius, spacing, elevation, and sizing.
  • Guardrails and idempotency: Enforces clamp ranges and reports when values are already at the target to avoid unnecessary churn.
  • Preview/plan mode workflow: Lets you see resolved deltas before applying edits when you ask for previews.

Quick Start

Ask the assistant to apply a “warmer button” look to your project using style-tune.

Frequently Asked Questions about style-tune

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert natural language design intent into OKLCH theme token edits?▼

Natural language design intent is parsed into deterministic edits by mapping aesthetic modifiers like "warmer" or "softer" to targeted OKLCH theme roles and component SCSS tokens. This routing translates descriptive vocabulary into clamped, idempotent variable updates.

How does intent parsing work for component SCSS tokens like radius and spacing?▼

Intent parsing for component SCSS tokens works by resolving the target layer and token families from the modifier used. It translates terms like "rounder" or "calmer" into clamped, idempotent updates for component radius, spacing, elevation, and sizing variables.

Can I preview theme tuning changes before applying SCSS token updates?▼

You can preview theme tuning changes by requesting a preview during the session. The system honors exit-plan mode to generate resolved deltas for OKLCH roles and SCSS tokens, letting you review the exact aesthetic modifications before any files are applied.

What is the best way to safely adjust OKLCH color roles for hover states?▼

The best way to safely adjust OKLCH color roles for hover states is to use an intent-to-token routing system that enforces clamp ranges. This ensures paired hover behavior receives deterministic, guarded edits without unnecessary value churn.

Do I need an existing a11y design system to use natural language theme tuning?▼

You do not need a fully built a11y design system, but you must have existing OKLCH theme roles and component SCSS tokens defined. The tuning process modifies these declared variables to match your aesthetic intent while maintaining accessibility guardrails.

Why does my component styling not change when requesting softer elevation tokens?▼

Your component styling may not change because the guardrails enforce idempotency and clamp ranges. If the system reports that your elevation or spacing values are already at the target limit, it will block unnecessary churn and decline the token update.

Related Skills

Explore More Design & Creative Skills→
TheBushidoCollectiveTheBushidoCollective
187

helm-values

Manage Helm values files and configuration overrides for Kubernetes deployments.

Official
Intermediate
baloisebaloise
111

ds-create-token

Analyze SCSS files to create design tokens in Base.tokens.json.

Official
Intermediate
The-Vibe-CompanyThe-Vibe-Company
2.4k

normalize

Align UI features to design system tokens, typography, color, and spacing.

Official
Advanced
jiaiyanjiaiyan
21

element-plus-dark-mode

Implement and customize dark mode in Element Plus applications with CSS variables or SCSS overrides.

Community
Intermediate