style-agent Overview

style-agent is a framework-agnostic CSS authoring plugin for Claude Code. It provides commands for extracting multi-class utility soup into single semantic CSS classes and converting inline styles to reusable stylesheet rules — with no external processor or framework assumption.

Works with plain CSS, compiled SCSS output, Tailwind, or any utility-first workflow. Declaration lookup reads .css files in your project, so SCSS source files are supported via their compiled output.

Install

/plugin marketplace add shawn-sandy/agentic-acss-plugins
/plugin install style-agent@shawn-sandy-agentic-acss-plugins

Commands

/css-to-class

Extract a list of CSS utility classes from an HTML element or class string into a single, semantically named CSS class. Resolves declarations by grepping your project’s own CSS files.

/inline-style-to-class

Convert an inline style attribute, JSX style object, or <style> block into a single named CSS class and append it to the project stylesheet.

/create-utilities

Generate a utility class string from a plain-language visual description. Detects acss-kit, Tailwind, Bootstrap, or falls back to Tailwind-compatible naming.

Command	What it does
/css-to-class [name]	Collapse a multi-class element or class string into one semantic class
/inline-style-to-class [name]	Migrate inline styles to a named class in your stylesheet
/create-utilities [description]	Generate a utility class string from a plain-language visual description

Skills

Each command delegates all its behavior to a corresponding skill file. The skill owns argument handling, name generation, CSS discovery, and output formatting.

Skill	Driven by
css-to-class	/css-to-class
inline-style-to-class	/inline-style-to-class
create-utilities	/create-utilities

Design principles

No external processor. All commands work by grepping .css files already present in your project. There is no dependency on PostCSS, Tailwind CLI, or any build tool.

Framework-agnostic. Whether your project uses plain CSS, compiled SCSS, Tailwind, or another utility-first system, the plugin reads what is already on disk.

Name rules are consistent. /css-to-class and /inline-style-to-class apply the same kebab-case sanitisation pipeline (max 20 characters) to any supplied name, and offer the same auto-generation algorithm when no name is given.

The commands complement each other. /css-to-class collapses many classes into one. /inline-style-to-class lifts inline declarations out into a class. /create-utilities generates a class string from intent. Together they cover the most common style-authoring and migration tasks.

Version history

Version	Changes
0.3.0	Added /create-utilities
0.2.0	Added /inline-style-to-class
0.1.0	Initial release with /css-to-class