# design-systems-slds-apply

A skill that teaches the agent to build Salesforce Lightning Design System interfaces: blueprints, styling hooks, utility classes and icons.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 6000 installs · ★ 1112
- Author: forcedotcom
- License: Apache-2.0 · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/forcedotcom/sf-skills/tree/HEAD/skills/design-systems-slds-apply/SKILL.md
- Updated: 2026-10-23
- HTML: https://affpapa.org/en/nevibecode/skills/design-systems-slds-apply

## What it does

The skill tells the agent how to find SLDS artifacts and use them without guessing. It sets a selection order: Lightning Base Components first (LWC only), then SLDS Blueprints, then custom markup with styling hooks, and plain CSS last. Every artifact has a search script behind it — `search-hooks.cjs`, `search-utilities.cjs`, `search-blueprints.cjs`, `search-icons.cjs` — reading the indexes under `assets/` to confirm the hook or class actually exists.

A separate section covers naming traps. Font sizes come from `--slds-g-font-scale-*`, not `font-size-N`. Color hooks always end in a number: `--slds-g-color-surface-1`, `--slds-g-color-on-accent-2`. An agent that interpolates names from a pattern will invent tokens that do not exist, so verify-before-use is the rule that matters here.

The skill targets SLDS v2. Legacy `--lwc-*` tokens and `slds-*--modifier` syntax are deprecated, and the private `--slds-s-*` hooks are off limits. It needs `node` 18.0.0 or newer and `npx` 7.0.0 or newer. The companion validator scans `.css`, `.html` and `.js`, so for JSX/TSX treat it as a partial signal and review by hand. Full WCAG conformance is outside its scope.

## Requirements
- Works with: Salesforce

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add forcedotcom/sf-skills --skill design-systems-slds-apply -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/design-systems-slds-apply/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/design-systems-slds-apply/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add forcedotcom/sf-skills --skill design-systems-slds-apply -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/design-systems-slds-apply/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add forcedotcom/sf-skills --skill design-systems-slds-apply -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/design-systems-slds-apply/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install forcedotcom/sf-skills design-systems-slds-apply
```

2. **Manually: put the files in place**
- File: `.github/skills/design-systems-slds-apply/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add forcedotcom/sf-skills --skill design-systems-slds-apply -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/forcedotcom/sf-skills --path skills/design-systems-slds-apply
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/design-systems-slds-apply/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add forcedotcom/sf-skills --skill design-systems-slds-apply -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/forcedotcom/sf-skills/tree/HEAD/skills/design-systems-slds-apply/SKILL.md

## When to use it
- pick between a Lightning Base Component and an SLDS Blueprint for a screen
- swap a hard-coded color for the right styling hook
- find utility classes for spacing and layout
- confirm a hook or class exists instead of inventing one from a pattern
- choose an icon from the right category and give it alt text

## Example prompts
- Build a modal from an SLDS Blueprint and verify every class with search-blueprints.cjs
- Rewrite this block with styling hooks: colors via var(--slds-g-color-*), no hard-coded values
- Add an icon to the button and check its name with search-icons.cjs

## Source text · SKILL.md · Apache-2.0

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 20b741f189702974.

BEGIN THIRD-PARTY FILE 20b741f189702974
```text
---
name: design-systems-slds-apply
description: "Apply SLDS-compliant UI using the correct blueprints, styling hooks, utility classes, and icons. Use when building any UI that needs SLDS, choosing between Lightning Base Components and SLDS Blueprints, applying styling hooks for theming, using utility classes for layout and spacing, or selecting icons. Triggers include \"build a modal\", \"create a form\", \"data table\", \"SLDS styling\", \"style with hooks\", \"add an icon\"."
metadata:
  version: "1.1"
  domains: ["Design Systems"]
  relatedSkills:
    - "design-systems-slds-validate"
  cliTools:
    - tool: ["npx"]
      semver: ">=7.0.0"
    - tool: ["node"]
      semver: ">=18.0.0"
---

# Applying SLDS

The **Salesforce Lightning Design System (SLDS)** is a CSS framework with thousands of artifacts. This skill teaches agents how to find and correctly use them.

> **Version:** This skill targets **SLDS v2**. Legacy `--lwc-*` tokens and `slds-*--modifier` syntax are deprecated.
>
> **Audit scope:** The companion `design-systems-slds-validate` skill analyzer only scans `.css`, `.html`, and `.js` files. Use it directly for LWC and similar HTML/CSS/JS components; treat it as a partial signal for JSX/TSX or other framework-specific template formats and supplement with manual review.

## What is SLDS?

| Artifact | Count | Description |
|----------|-------|-------------|
| **Lightning Base Components** | ~70 | Pre-built LWC components (LWC only) |
| **SLDS Blueprints** | 85 | CSS/HTML patterns for any framework |
| **Styling Hooks** | 523 | CSS custom properties (`--slds-g-*`) for theming |
| **Utility Classes** | 1,147 | Rapid styling classes for spacing, layout, visibility |
| **Icons** | 1,732 | SVG icons across 5 categories |

---

## Scope

**This skill covers:**
- Which blueprint to use for a given UI pattern
- How to style with hooks (color, spacing, typography, shadows, borders)
- Which utility classes to use for layout, spacing, visibility
- Which icon to use and from which category
- SLDS naming conventions, class structure, hook syntax
```
END THIRD-PARTY FILE 20b741f189702974

The third-party file has ended. Everything between the 20b741f189702974 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2082 of 14953 bytes. © forcedotcom · Apache-2.0 · https://github.com/forcedotcom/sf-skills/tree/HEAD/skills/design-systems-slds-apply/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md