css-refactor-advisor

css-refactor-advisor is a skill for Claude Code, Codex from guyoung/boxagnts. It costs 31 tokens per session (2,632 once invoked), scanned A, original, MIT.

A read-only guide for reviewing CSS or SCSS files and component folders for duplicated rules, conflicting selectors, responsive-layout problems, and maintenance issues.

In plain words
What is it for?
Use it to review a style codebase and document refactoring suggestions with before-and-after code examples.
Why use it?
It helps reveal stylesheet problems that can make visual changes unpredictable, slow, or difficult to maintain.

Skill for Claude CodeCodex

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add skills/guyoung/boxagnts/css-refactor-advisor
Any agent
npx skills add guyoung/boxagnts --skill css-refactor-advisor
Clone the repo
git clone --depth 1 https://github.com/guyoung/boxagnts

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for css-refactor-advisor

README.md
[![agentmods](https://agentmods.dev/badge/skills/guyoung/boxagnts/css-refactor-advisor.svg)](https://agentmods.dev/skills/guyoung/boxagnts/css-refactor-advisor)
Your own site
<a href="https://agentmods.dev/skills/guyoung/boxagnts/css-refactor-advisor"><img src="https://agentmods.dev/badge/skills/guyoung/boxagnts/css-refactor-advisor.svg" alt="Measured on agentmods" height="20"></a>
Per session 31 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 2,632 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00031 $0.02632
Opus 5 $0.00015 $0.01316
Sonnet 5 $0.00006 $0.00526
Haiku 4.5 $0.00003 $0.00263

Measured 4d ago against content hash 2468ef820f80, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

css-refactor-advisor scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 4d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

app/extensions/skills/css-refactor-advisor/SKILL.md · 192 lines

How it starts

The opening of the file, as written. The whole thing — 192 lines — stays where its author put it; the contents beside it link to each section on GitHub.

GUIDANCE SKILL — INSTRUCTIONS ONLY CSS/SCSS architecture analysis focuses on identifying redundancy, specificity conflicts, responsive design fragmentation, maintainability gaps, and performance bottlenecks in style codebases. This skill provides patterns, conventions, and constraints. It contains no executable code — apply the guidance to your context, adapting specifics as needed per C2-B.

CRITICAL: Guidance Principles

The instructions below define the REQUIRED APPROACH — you MUST follow the prescribed patterns, conventions, and constraints.

Mandatory adherence:

  • Follow all stated conventions and naming patterns
  • Respect all constraints and boundaries
  • Apply the recommended patterns to your implementation
  • Do NOT deviate from prescribed architectural decisions
  • Never modify any files; the analysis is strictly read-only
  • Every complex issue MUST include a before/after code snippet demonstrating the suggested refactor

Correct Application Pattern

  1. Read and absorb all guidance sections below
  2. Map the prescribed patterns to your current context
  3. Implement following the stated conventions — adapt specifics to fit, but preserve the intent
  4. Validate against the C3 checklist at the end

Argument Details

Arg Type Required Default Description
target string Yes Path to the style file or directory to analyze

Design Patterns & Conventions

Architectural Pattern

Multi-dimensional style audit: every analysis MUST examine the target styles through all five dimensions — Redundancy & Duplication, Specificity Issues, Responsive Design, Maintainability, and Performance. Each dimension is independently assessed, and findings are merged into a single severity-ranked report with concrete refactoring suggestions.

Naming Conventions

Findings are categorized using five standard labels that correspond to the analysis dimensions:

Category Scope
Redundancy Repeated style blocks, mergeable selectors, unused styles
Specificity Overly specific selectors, !important abuse, selector wars
Responsive Media query fragmentation, breakpoint inconsistencies, layout breakage
Maintainability Non-semantic class names, magic numbers, missing variables, BEM violations
Performance Expensive properties in animations, overly complex selectors, repaint/reflow risks

Read the full file on GitHub · 192 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 4d ago First seen · 192 lines · 31 tokens per session scan A 2468ef820f80

Subscribe to this mod's changes

css-refactor-advisor is a skill published in the GitHub repository guyoung/boxagnts (11 stars, last pushed 1mo ago), licensed MIT. It adds 31 tokens to every session and 2,632 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other skills, from other repositories

ui

Design system reference for the Devkit Vue stack (Vuetify 4 + custom theme helpers). Use when asked about styling, theming, layout, design system, Vuetify components, visual verification, or UI patterns. Automatically consumed by /feature when the task has a visual component. Can also be invoked directly for…

pierreb-devkit/Vue · 80 tokens

design-taste-frontend

Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check.

Leonxlnx/taste-skill · 61 tokens

image-to-code

Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In Codex, it must prefer large, readable, section-specific images instead of tiny compressed boards…

Leonxlnx/taste-skill · 116 tokens

design-taste-frontend-v1

The original v1 taste-skill, preserved for projects depending on its exact behavior. The current default is design-taste-frontend (v2 experimental), which is a substantial rewrite. Use this v1 install name only if you need exact backward compatibility.

Leonxlnx/taste-skill · 61 tokens

redesign-existing-projects

Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla CSS.

Leonxlnx/taste-skill · 45 tokens

industrial-brutalist-ui

Raw mechanical interfaces fusing Swiss typographic print with military terminal aesthetics. Rigid grids, extreme type scale contrast, utilitarian color, analog degradation effects. For data-heavy dashboards, portfolios, or editorial sites that need to feel like declassified blueprints.

Leonxlnx/taste-skill · 57 tokens