Slash Command

Css Utility Generator

Generate utility CSS classes for spacing, colors, typography, and layout

Type: Slash Command
Repository: jeremylongshore/tons-of-skills-marketplace
GitHub stars: 2.8k
License: MIT
Repo last updated: Sep 27, 2026
Source file: plugins/packages/fullstack-starter-pack/commands/css-utility-generator.md

What Css Utility Generator is

Css Utility Generator is a slash command published in the jeremylongshore/tons-of-skills-marketplace repository on GitHub, which has about 2.8k stars. The repository describes itself as: “Model-agnostic agent-skills platform with a harness-free canonical layer, verified adapters, and the ccpi package manager. Explore at tonsofskills.com.”

A slash command is a reusable prompt saved as a markdown file and run by typing its name after a slash. In Claude Code, custom commands have been merged into skills: a file in .claude/commands/ and a skill folder in .claude/skills/ both create the same kind of command, and existing command files keep working.

Css Utility Generator gives you a repeatable way to run the same instructions without retyping them, optionally with arguments.

How to install Css Utility Generator

Claude Code

Download css-utility-generator.md from the repository.
Save it to ~/.claude/commands/ (all projects) or .claude/commands/ (one project). As a skill, you can instead save it as ~/.claude/skills/<name>/SKILL.md.
Run it by typing / followed by its name.

Claude Cowork

Turn the command into a skill: create a folder with the file saved as SKILL.md and zip it.
In Customize → Skills, click +, then upload the ZIP.
Run it from any task with / and the skill name.

New to extending Cowork? Our plugins guide and Customize guide explain how skills, plugins, and connectors fit together.

Inside the source file

An excerpt from plugins/packages/fullstack-starter-pack/commands/css-utility-generator.md, shared under the repository's MIT license. Read the full file on GitHub.

Generates utility CSS classes similar to Tailwind CSS for common styling needs, creating a custom utility-first CSS framework.

What This Command Does

Utility Class Generation:

Spacing utilities (margin, padding)
Color utilities (background, text, border)
Typography utilities (font size, weight, line height)
Layout utilities (flexbox, grid, display)
Responsive breakpoints
Custom design tokens

Output: Complete utility CSS file with organized sections

Time: 2-5 minutes

Usage

# Generate full utility class system
/css-utility-generator

# Shortcut
/cug

# Generate specific categories
/cug --categories spacing,colors,typography

# Custom design tokens
/cug --config design-tokens.json

# With custom breakpoints
/cug --breakpoints mobile:640px,tablet:768px,desktop:1024px

Example Output

Input:

/cug --categories spacing,colors,flex

Generated utilities.css:

/* ==========================================================================
   Utility CSS Classes
   Generated by CSS Utility Generator
   ========================================================================== */

/* Spacing Utilities
   ========================================================================== */

/* Margin */
.m-0 { margin: 0; }
.m-1 { margin: 0.25rem; }   /* 4px */
.m-2 { margin: 0.5rem; }    /* 8px */
.m-3 { margin: 0.75rem; }   /* 12px */
.m-4 { margin: 1rem; }      /* 16px */
.m-5 { margin: 1.25rem; }   /* 20px */
.m-6 { margin: 1.5rem; }    /* 24px */
.m-8 { margin: 2rem; }      /* 32px */
.m-10 { margin: 2.5rem; }   /* 40px */
…

Complete Utility Categories

1. Spacing (Margin & Padding)

/* Scale: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24 */
/* Directions: all, t, r, b, l, x, y */
.m-4    /* margin: 1rem */
.mt-2   /* margin-top: 0.5rem */
.px-4   /* padding-left/right: 1rem */
.my-8   /* margin-top/bottom: 2rem */

2. Typography

/* Font Size */
.text-xs    { font-size: 0.75rem; }
.text-sm    { font-size: 0.875rem; }
.text-base  { font-size: 1rem; }
.text-lg    { font-size: 1.125rem; }
.text-xl    { font-size: 1.25rem; }
.text-2xl   { font-size: 1.5rem; }
.text-3xl   { font-size: 1.875rem; }
.text-4xl   { font-size: 2.25rem; }

/* Font Weight */
.font-thin       { font-weight: 100; }
.font-light      { font-weight: 300; }
.font-normal     { font-weight: 400; }
.font-medium     { font-weight: 500; }
.font-semibold   { font-weight: 600; }
.font-bold       { font-weight: 700; }
.font-extrabold  { font-weight: 800; }
…

3. Layout

/* Display */
.block        { display: block; }
.inline       { display: inline; }
.inline-block { display: inline-block; }
.flex         { display: flex; }
.inline-flex  { display: inline-flex; }
.grid         { display: grid; }
.hidden       { display: none; }

/* Position */
.static    { position: static; }
.relative  { position: relative; }
.absolute  { position: absolute; }
.fixed     { position: fixed; }
.sticky    { position: sticky; }

/* Width */
.w-auto    { width: auto; }
…

4. Grid System

/* Grid Template Columns */
.grid-cols-1  { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-6  { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

/* Grid Gap */
.gap-0  { gap: 0; }
.gap-2  { gap: 0.5rem; }
.gap-4  { gap: 1rem; }
.gap-6  { gap: 1.5rem; }
.gap-8  { gap: 2rem; }

5. Borders & Radius

/* Border Width */
.border-0 { border-width: 0; }
.border   { border-width: 1px; }
.border-2 { border-width: 2px; }
.border-4 { border-width: 4px; }

/* Border Radius */
.rounded-none { border-radius: 0; }
.rounded-sm   { border-radius: 0.125rem; }
.rounded      { border-radius: 0.25rem; }
.rounded-md   { border-radius: 0.375rem; }
.rounded-lg   { border-radius: 0.5rem; }
.rounded-xl   { border-radius: 0.75rem; }
.rounded-full { border-radius: 9999px; }

/* Border Color */
.border-gray-200 { border-color: #e5e7eb; }
.border-gray-300 { border-color: #d1d5db; }
…

6. Effects

/* Shadow */
.shadow-none { box-shadow: none; }
.shadow-sm   { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.shadow      { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); }
.shadow-md   { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
.shadow-lg   { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
.shadow-xl   { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }

/* Opacity */
.opacity-0   { opacity: 0; }
.opacity-25  { opacity: 0.25; }
.opacity-50  { opacity: 0.5; }
.opacity-75  { opacity: 0.75; }
.opacity-100 { opacity: 1; }

Before you install

Read the whole file first. Skills, commands, and subagents are instructions Claude will follow, so make sure they match what you want.
Check which tools, scripts, or MCP servers it uses. Local servers and scripts run with your permissions.
Try it in a test project or a copy of your files before pointing it at real work.
Pin the version you tested, and review changes before updating.
Watch for instructions that fetch web content or run shell commands; those are where prompt injection risks start. See our prompt injection guide.

FAQ

What is Css Utility Generator?

Css Utility Generator is a slash command for Claude Code and Claude Cowork from the jeremylongshore/tons-of-skills-marketplace repository on GitHub. Generate utility CSS classes for spacing, colors, typography, and layout

How do I install Css Utility Generator in Claude Code?

Download css-utility-generator.md from the repository. Save it to ~/.claude/commands/ (all projects) or .claude/commands/ (one project). As a skill, you can instead save it as ~/.claude/skills/<name>/SKILL.md. Run it by typing / followed by its name.

Can I use Css Utility Generator in Claude Cowork?

Turn the command into a skill: create a folder with the file saved as SKILL.md and zip it. In Customize → Skills, click +, then upload the ZIP. Run it from any task with / and the skill name.

Is Css Utility Generator safe to install?

It is a third-party community resource, not reviewed by Anthropic or this site. Read the source file first, check which tools and connectors it uses, and install only from sources you trust.

Similar resources

Browse all skills, subagents, and plugins →

Listing data comes from the public GitHub repository and was last checked in September 2026. Excerpts are © their authors and shared under MIT. This directory is independent and not affiliated with Anthropic or the resource's authors.