How do I install the Audit Less skill?

Run npx skillmds@latest add jhd3197/audit-less in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Audit Less safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Audit Less?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Audit Less free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Audit Less?

jhd3197 (@jhd3197) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Audit Less by jhd3197 — Agent Skill

Name: Audit Less
Author: jhd3197

Audit Less

Scan LESS stylesheets for variable errors — undefined variables, CSS custom properties passed to compile-time functions (fade, darken, lighten, etc.), and incorrect variable name patterns. Reports issues with file, line, and fix.

jhd3197 8787334 2.6 KB Updated Sep 17, 2026

File contents

Audit LESS stylesheets in ServerKit for recurring build-breaking patterns. Scope: ${ARGUMENTS:-frontend/src/styles/}

What to Scan For

Pattern 1: CSS custom properties in LESS compile-time functions

LESS functions like fade(), darken(), lighten(), saturate(), spin(), mix() require real color values at compile time. Variables defined as var(--something) will fail.

Search for calls to these functions and check if any argument is a variable that resolves to a CSS custom property.

Broken — these variables use var(--...) and cannot be evaluated by LESS:

@bg-body, @bg-sidebar, @bg-card, @bg-hover, @bg-elevated, @bg-secondary, @bg-tertiary
@border-default, @border-subtle, @border-active, @border-hover
@text-primary, @text-secondary, @text-tertiary
@accent-primary, @accent-hover, @accent-glow, @accent-shadow
@shadow-sm, @shadow-md, @shadow-lg
@color-primary

Fix: Use the corresponding *-raw variant instead (e.g., @bg-hover → @bg-hover-raw, @text-tertiary → @text-tertiary-raw, @accent-primary → @accent-primary-raw).

Pattern 2: Undefined or misspelled variables

Check for variables that don't exist in _variables.less. Common mistakes:

@card-bg → should be @bg-card
@accent-success → should be @success
@accent-danger → should be @danger
@accent-info → should be @info
@accent-warning → should be @warning
@primary-color → should be @accent-primary or @accent-primary-raw
@spacing-* → should be @space-*

Pattern 3: Non-raw variables in theme-sensitive contexts

For any LESS function that manipulates color values (fade, darken, lighten, contrast, saturate, desaturate, spin, mix, tint, shade), the argument MUST be a raw hex/rgb value or a *-raw variable.

Reference: Valid Variable Names

Read frontend/src/styles/_variables.less to get the authoritative list of defined variables. Any @variable used in a .less file that is not in _variables.less (and is not a local variable or LESS built-in) is a bug.

Output Format

For each issue found, report:

[FILE]:[LINE] — [ISSUE]
  Found:    [problematic code]
  Fix:      [corrected code]

At the end, provide a summary count: X issues found across Y files. If no issues are found, report: No LESS variable issues found.

---name: audit-lessdescription: Scan LESS stylesheets for variable errors — undefined variables, CSS custom properties passed to compile-time functions (fade, darken, lighten, etc.), and incorrect variable name patterns. Reports issues with file, line, and fix.---Audit LESS stylesheets in ServerKit for recurring build-breaking patterns.Scope: **${ARGUMENTS:-frontend/src/styles/}**## What to Scan For### Pattern 1: CSS custom properties in LESS compile-time functionsLESS functions like `fade()`, `darken()`, `lighten()`, `saturate()`, `spin()`, `mix()` require **real color values** at compile time. Variables defined as `var(--something)` will fail.Search for calls to these functions and check if any argument is a variable that resolves to a CSS custom property.**Broken** — these variables use `var(--...)` and cannot be evaluated by LESS:- `@bg-body`, `@bg-sidebar`, `@bg-card`, `@bg-hover`, `@bg-elevated`, `@bg-secondary`, `@bg-tertiary`- `@border-default`, `@border-subtle`, `@border-active`, `@border-hover`- `@text-primary`, `@text-secondary`, `@text-tertiary`- `@accent-primary`, `@accent-hover`, `@accent-glow`, `@accent-shadow`- `@shadow-sm`, `@shadow-md`, `@shadow-lg`- `@color-primary`**Fix**: Use the corresponding `*-raw` variant instead (e.g., `@bg-hover` → `@bg-hover-raw`, `@text-tertiary` → `@text-tertiary-raw`, `@accent-primary` → `@accent-primary-raw`).### Pattern 2: Undefined or misspelled variablesCheck for variables that don't exist in `_variables.less`. Common mistakes:- `@card-bg` → should be `@bg-card`- `@accent-success` → should be `@success`- `@accent-danger` → should be `@danger`- `@accent-info` → should be `@info`- `@accent-warning` → should be `@warning`- `@primary-color` → should be `@accent-primary` or `@accent-primary-raw`- `@spacing-*` → should be `@space-*`### Pattern 3: Non-raw variables in theme-sensitive contextsFor any LESS function that manipulates color values (fade, darken, lighten, contrast, saturate, desaturate, spin, mix, tint, shade), the argument MUST be a raw hex/rgb value or a `*-raw` variable.## Reference: Valid Variable NamesRead `frontend/src/styles/_variables.less` to get the authoritative list of defined variables. Any `@variable` used in a `.less` file that is not in `_variables.less` (and is not a local variable or LESS built-in) is a bug.## Output FormatFor each issue found, report:```[FILE]:[LINE] — [ISSUE] Found: [problematic code] Fix: [corrected code]```At the end, provide a summary count: `X issues found across Y files`.If no issues are found, report: `No LESS variable issues found.`

Frequently asked questions