# design-systems-slds2-migrate

Прогоняет линтер SLDS по компонентам и помогает починить нарушения при переезде Lightning Web Components с SLDS 1 на SLDS 2.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 5600 установок · ★ 1112
- Автор: forcedotcom
- Лицензия: Apache-2.0 · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/forcedotcom/sf-skills/tree/HEAD/skills/design-systems-slds2-migrate/SKILL.md
- Обновлён: 2026-10-23
- HTML: https://affpapa.org/nevibecode/skills/design-systems-slds2-migrate

## Что делает

Скилл ведёт миграцию по шагам. Сначала обязательный прогон `npx @salesforce-ux/slds-linter@latest lint --fix .` — он сам правит простые нарушения. Дальше вы разбираете отчёт линтера и добиваете то, что осталось вручную, по справочникам для каждого правила.

Внутри четыре типа нарушений: `slds/no-hardcoded-values-slds2`, `slds/lwc-token-to-slds-hook`, `slds/no-slds-class-overrides` и `slds/no-deprecated-tokens-slds1`. Для каждого есть отдельный разбор с примерами. Общее правило одно: хук SLDS 2 ставится первым, а исходное значение остаётся запасным — `var(--slds-g-hook, originalValue)`. Переопределения классов требуют правок и в CSS, и в разметке: класс с префиксом компонента добавляется рядом со `slds-*`, а не вместо него. Этот шаг пропускают чаще всего.

По цвету линтер выдаёт список вариантов без порядка. Выбирать первый нельзя: сначала читается гид по цветовым хукам, он привязан к CSS-свойству. Для остальных категорий — отступы, размеры, типографика, границы, тени — есть таблицы соответствия значений и номерных шкал. Нужен Node.js 14.x или выше и доступ к файлам `.html` и `.cmp`; перед массовой правкой стоит сделать коммит.

## Требования
- Работает с: Salesforce

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add forcedotcom/sf-skills --skill design-systems-slds2-migrate -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/design-systems-slds2-migrate/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/design-systems-slds2-migrate/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add forcedotcom/sf-skills --skill design-systems-slds2-migrate -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/design-systems-slds2-migrate/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add forcedotcom/sf-skills --skill design-systems-slds2-migrate -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/design-systems-slds2-migrate/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

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

2. **Вручную: положить файлы**
- Файл: `.github/skills/design-systems-slds2-migrate/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add forcedotcom/sf-skills --skill design-systems-slds2-migrate -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/forcedotcom/sf-skills --path skills/design-systems-slds2-migrate
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/design-systems-slds2-migrate/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add forcedotcom/sf-skills --skill design-systems-slds2-migrate -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/forcedotcom/sf-skills/tree/HEAD/skills/design-systems-slds2-migrate/SKILL.md

## Когда брать
- прогнать линтер SLDS по всем CSS и разметке компонента
- заменить устаревшие токены `--lwc-*` на хуки SLDS 2
- убрать хардкод цветов, отступов и теней из стилей LWC
- переписать переопределения `slds-*` классов в свой неймспейс
- подобрать правильный цветовой хук под конкретное CSS-свойство

## Примеры запросов агенту
- прогони линтер SLDS и почини нарушения в этом компоненте
- замени `--lwc-colorBackground` на хук SLDS 2 с fallback
- у меня переопределён `.slds-button` — переделай под класс компонента

## Похожие
- [Salesforce UI Development (Aura & LWC)](https://affpapa.org/nevibecode/agents/salesforce-ui-development-aura-lwc.md) — субагент · ★ 40418
- [salesforce-component-standards](https://affpapa.org/nevibecode/skills/salesforce-component-standards.md) — скилл · 770 установок
- [salesforce-developer](https://affpapa.org/nevibecode/skills/salesforce-developer.md) — скилл · 4300 установок
- [salesforce-dx](https://affpapa.org/nevibecode/skills/salesforce-dx.md) — скилл · 688 установок
- [salesforce-development](https://affpapa.org/nevibecode/skills/mindrally-salesforce-development.md) — скилл · 659 установок
- [tailwindcss-advanced-design-systems](https://affpapa.org/nevibecode/skills/tailwindcss-advanced-design-systems.md) — скилл · 655 установок

Из того же набора: [forcedotcom/sf-skills](https://affpapa.org/nevibecode/by/forcedotcom/sf-skills.md) — 181 карточка

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md