css-build

A command for compiling CSS into usable output while checking errors and applying optimizations. It can process preprocessors such as Sass, Less, and Stylus.

In plain words
What is it for?
Use it for normal or production CSS builds, watch mode, bundle analysis, source maps, and PostCSS processing.
Why use it?
It turns source styles into build files and reports configuration, dependency, syntax, and other problems before release.

Command

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 commands/andronics/claude-plugin-css-pro/css-build
Clone the repo
git clone --depth 1 https://github.com/andronics/claude-plugin-css-pro
Per session 10 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.
When invoked 2,121 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.00010 $0.02121
Opus 5 $0.00005 $0.01060
Sonnet 5 $0.00002 $0.00424
Haiku 4.5 $0.00001 $0.00212

Measured yesterday against content hash 27aaf1f9de83, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

css-build 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 yesterday.

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.

commands/css-build.md · 407 lines

How it starts

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

CSS Build & Compile

I'll build and compile your CSS with error analysis, optimization, and detailed reporting.

Arguments

/css-build [--options]

options:

  • --watch - Watch mode for development
  • --production - Production build with optimization
  • --analyze - Generate bundle analysis report
  • --sourcemaps - Generate source maps
  • (omit for standard build)

Build Process

Phase 1: Pre-Build Validation

Checks Before Building:

  1. ✓ Validate CSS syntax
  2. ✓ Check for missing dependencies
  3. ✓ Verify configuration files
  4. ✓ Lint CSS files (if configured)
  5. ✓ Check for breaking changes

Phase 2: Compilation

What Gets Compiled:

Preprocessors
# Sass/SCSS
sass src/styles/main.scss dist/styles.css

# Less
lessc src/styles/main.less dist/styles.css

# Stylus
stylus src/styles/main.styl -o dist/
PostCSS Pipeline
// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-import'),           // Combine @import files
    require('postcss-nested'),           // Unwrap nested rules
    require('autoprefixer'),             // Add vendor prefixes
    require('postcss-preset-env')({      // Use future CSS
      stage: 3,
      features: {
        'nesting-rules': true,
        'custom-properties': true
      }
    }),
    require('cssnano')({                 // Minify
      preset: ['advanced', {
        discardComments: { removeAll: true }
      }]
    })
  ]
}

Phase 3: Optimization

Development Build:

  • Source maps enabled
  • No minification
  • Fast rebuild times
  • Readable output

Production Build:

  • Minification
  • Vendor prefixes
  • Dead code elimination
  • Compression (gzip/brotli)
  • Cache busting
  • Bundle splitting

Phase 4: Validation & Reporting

Post-Build Checks:

  • ✓ CSS validity
  • ✓ File size analysis
  • ✓ Compression ratios
  • ✓ Build time metrics
  • ✓ Error summary

Build Output

Development Build

Building CSS...

✓ Compiled: src/styles/main.scss → dist/styles.css
✓ Generated source maps
✓ Build completed in 324ms

Output:
  dist/styles.css         85KB
  dist/styles.css.map     42KB

Watching for changes...

Read the full file on GitHub · 407 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. yesterday First seen · 407 lines · 10 tokens per session scan A 27aaf1f9de83

Subscribe to this mod's changes

css-build is a command published in the GitHub repository andronics/claude-plugin-css-pro (2 stars, last pushed 10mo ago), licensed MIT. It adds 10 tokens to every session and 2,121 once invoked, about $0.0001 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-31.