From style-agent
Use when the developer wants to convert an inline style attribute, JSX style object, or <style> block into a named CSS class appended to the project stylesheet.
How this skill is triggered — by the user, by Claude, or both
Slash command
/style-agent:inline-style-to-classThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Convert an inline `style` attribute, JSX `style` object, or `<style>` block into a single, semantically named CSS class. Appends the result to a stylesheet detected from the project's own file conventions — works with plain CSS, SCSS, or Sass-indented syntax. The inverse operation of `/css-to-class`.
Convert an inline style attribute, JSX style object, or <style> block into a single, semantically named CSS class. Appends the result to a stylesheet detected from the project's own file conventions — works with plain CSS, SCSS, or Sass-indented syntax. The inverse operation of /css-to-class.
| Form | Example |
|---|---|
| HTML inline attribute | <div style="background: var(--surface-1); padding: 1rem"> |
| JSX style object | <Button style={{ backgroundColor: theme.primary, padding: 8 }}> |
<style> block | <style>.hero { color: red; padding: 2rem; }</style> |
[a-z][a-z0-9-]*).name is supplied, apply this sanitisation pipeline in order:
-.[a-z0-9-].[a-z].AskUserQuestion for a valid name instead of emitting an invalid identifier. Warn the user whenever any coercion occurred.name is omitted: auto-generate via the algorithm below. When the result is ambiguous or ≤ 3 chars, ask via AskUserQuestion with the generated name pre-filled as the suggestion.button → btn, section → section, header → header, nav → nav, ul/li → list, input → input, img → img, a → link. All other tags use the tag name verbatim (e.g. div → div).background / background-color / color → bgpadding / padding-* → padmargin / margin-* → gapfont-size / font-weight / font-* → typedisplay / flex / grid → layoutborder / border-* → borderwidth / height / min-* / max-* → sizeposition / top / left / z-index → pos-: <tag-abbrev>-<role>, e.g. div-bg, btn-pad. If no tag is available, use the role hint alone.-. Strip leading/trailing -.custom-class and warn. If the result is 1–3 chars, ask via AskUserQuestion with the suggestion pre-filled.**/node_modules/**, **/.git/**, **/dist/**, **/build/**:
src/**/*.{css,scss,sass}styles/**/*.{css,scss,sass}app/**/*.{css,scss,sass}*.{css,scss,sass} (repo root).css, .scss, .sass).\n.globals, main, index, styles, app, or base), use that one. Otherwise prompt with AskUserQuestion to pick.Parse input. Detect the form of the input:
style="..." or style='...'; split on ;; trim; parse property: value pairs. Extract the surrounding element tag if present.style={{...}}; extract the object literal body; split key/value pairs. Convert each camelCase key to kebab-case (insert - before each uppercase letter, then lowercase the whole key). For numeric literal values, emit a coercion warning: "numeric value — verify unit". For any value that is a JS expression (not a string or number literal), emit a /* unresolved: <expr> */ placeholder.<style> block — extract content between <style> and </style>; parse rules. If one rule, use its declarations. If multiple rules, ask via AskUserQuestion: merge all declarations or pick a specific rule.Determine the class name. Apply the Name rules above. Use the [name] argument if provided. Otherwise apply the auto-name algorithm. If the generated name is ambiguous or ≤ 3 chars, ask via AskUserQuestion with the suggestion pre-filled.
Discover the target stylesheet. Follow the Stylesheet discovery section. Confirm the chosen file with the user only when the choice is ambiguous.
Build the CSS class block. Emit using the detected syntax flavor and indentation:
/* from: <source summary — e.g. "style attr on <div>", "JSX style object", or "<style> block" */./* <property>: unresolved — was JS expression */./* verify unit */ inline comment..sass) syntax, omit braces and use the detected indentation.Append to the target stylesheet. Use Edit to append the class block, preceded by one blank line. Preserve any trailing newline the file already had.
Emit refactored source. Produce a clean version of the original input with the inline style removed:
style="..." attribute entirely if all declarations migrated; if some were unresolved, keep only unmigrated declarations in the attribute. Add the new class to any existing class attribute (append to the list); if none exists, add class="<name>". Preserve all other attributes unchanged (data-*, id, aria-*).className. For partially-migrated objects, preserve remaining key/value pairs in the style prop.<style> block — emit a comment noting the rule was extracted: /* rule moved to .<name> in <stylesheet path> */; do not rewrite the <style> block automatically.Print a summary:
Guides creation, editing, and verification of skills for AI coding agents using test-driven development with subagent scenarios. Use when authoring or debugging skills.
npx claudepluginhub shawn-sandy/agentic-acss-plugins --plugin style-agent