humanmade/claude-code-standards/css-scss-standards

Claude Code and agent skill by humanmade/claude-code-standards

Trust tier 3
  • community
Source check pending

Checking that the SKILL.md file is still in the repository.

Human Made CSS and SCSS conventions — BEM class naming, custom properties, theme.json integration, Stylelint config. Use when writing or reviewing styles, adding a stylesheet or SCSS partial, naming classes, wiring theme.json tokens, or when asked whether some CSS follows HM standards.

Install

npx vskill@latest install humanmade/claude-code-standards/css-scss-standards

SKILL.md

Human Made CSS/SCSS Standards

Naming Conventions

Use BEM-like naming:

  • Block: .user-card
  • Element: .user-card__title
  • Modifier: .user-card--featured
scss
.user-card {
    padding: 1rem;
 
    &__title {
        font-size: 1.25rem;
    }
 
    &__content {
        margin-top: 0.5rem;
    }
 
    &--featured {
        border: 2px solid var(--wp--preset--color--primary);
    }
}

CSS Custom Properties

  • Use CSS custom properties via theme.json tokens where possible
  • Reference WordPress preset values: var(--wp--preset--color--primary)
  • Define component-specific properties at the component level
scss
.component {
    --component-spacing: 1rem;
    padding: var(--component-spacing);
}

theme.json Integration

For WordPress themes, prefer theme.json for:

  • Color palettes
  • Typography scales
  • Spacing presets
  • Layout settings

Reference in CSS:

css
.element {
    color: var(--wp--preset--color--contrast);
    font-size: var(--wp--preset--font-size--medium);
    padding: var(--wp--preset--spacing--40);
}

SCSS Guidelines

  • Use nesting sparingly (max 3 levels deep)
  • Extract repeated values into variables
  • Use mixins for repeated patterns
  • Prefer @use over @import for module loading

Class Naming

  • Use kebab-case: .my-component-name
  • Avoid IDs for styling
  • Avoid overly generic names: prefer .article-card over .card
  • Prefix utility classes if used: .u-visually-hidden

Linting

Projects use Stylelint:

  • Config file: .stylelintrc.js or .stylelintrc.json
  • Run with: npm run lint:css or npx stylelint "**/*.scss"

Security

  • Security scanPassed, 100 of 100Pattern checks on the skill's files.
  • Model reviewPassed

See the full security report

Quality evaluation

  • Task evaluationNot runNo evaluation yet. Run one in Skill Studio.

See evaluation results

Source

Popularity

7-day trend score
5

Not refreshed yet.

Works with

Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.

  • Claude Code
  • Cursor
  • GitHub Copilot
  • Windsurf
  • Codex
  • Gemini CLI
  • Cline
  • Amp
  • Roo Code
  • Goose
  • Continue
  • Kilo Code
  • Junie
  • Trae
  • OpenHands
  • Qwen Code
  • AI Agent
  • Tabnine Chat
  • Sourcegraph Cody
  • Amazon Q
  • Firebase Genkit
  • Sweep
  • Devin
  • Phind
  • Mentat
  • Claude Desktop
  • Aider
  • GPT Pilot
  • Plandex
  • bolt.new
  • v0
  • Replit Agent
  • Anse
  • TypingMind
  • BetterChatGPT
  • LibreChat
  • Warp AI
  • Pieces
  • Fig AI
Embed badge
vskill VERIFIED badge
[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/humanmade/claude-code-standards/css-scss-standards/badge)](https://verified-skill.com/skills/humanmade/claude-code-standards/css-scss-standards)

Something wrong with this skill or its page? Tell us.