@salesforce/afv-skills 1.5.2 → 1.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -6
- package/package.json +3 -3
- package/skills/generating-apex/SKILL.md +16 -9
- package/skills/generating-apex/assets/abstract.cls +0 -1
- package/skills/generating-apex/assets/batch.cls +0 -1
- package/skills/generating-apex/assets/domain.cls +0 -1
- package/skills/generating-apex/assets/dto.cls +0 -1
- package/skills/generating-apex/assets/exception.cls +0 -1
- package/skills/generating-apex/assets/interface.cls +0 -1
- package/skills/generating-apex/assets/invocable.cls +0 -1
- package/skills/generating-apex/assets/queueable.cls +0 -1
- package/skills/generating-apex/assets/schedulable.cls +0 -1
- package/skills/generating-apex/assets/selector.cls +0 -1
- package/skills/generating-apex/assets/service.cls +0 -1
- package/skills/generating-apex/assets/trigger.cls +1 -1
- package/skills/generating-apex/assets/utility.cls +0 -1
- package/skills/generating-apex/references/AccountDeduplicationBatch.cls +0 -1
- package/skills/generating-apex/references/AccountSelector.cls +0 -1
- package/skills/generating-apex/references/AccountService.cls +0 -1
- package/skills/generating-apex-test/assets/test-class-template.cls +3 -3
- package/skills/generating-apex-test/references/assertion-patterns.md +1 -1
- package/skills/generating-apex-test/references/async-testing.md +1 -1
- package/skills/generating-experience-lwr-site/SKILL.md +1 -2
- package/skills/generating-experience-lwr-site/docs/configure-content-themeLayout.md +8 -5
- package/skills/uplifting-components-to-slds2/SKILL.md +236 -0
- package/skills/uplifting-components-to-slds2/references/color-hooks-decision-guide.md +438 -0
- package/skills/uplifting-components-to-slds2/references/common-patterns.md +87 -0
- package/skills/uplifting-components-to-slds2/references/examples.md +443 -0
- package/skills/uplifting-components-to-slds2/references/migration-checklist.md +67 -0
- package/skills/uplifting-components-to-slds2/references/non-color-hooks-decision-guide.md +333 -0
- package/skills/uplifting-components-to-slds2/references/rule-lwc-token-to-slds-hook.md +135 -0
- package/skills/uplifting-components-to-slds2/references/rule-no-deprecated-tokens-slds1.md +211 -0
- package/skills/uplifting-components-to-slds2/references/rule-no-hardcoded-values.md +160 -0
- package/skills/uplifting-components-to-slds2/references/rule-no-slds-class-overrides.md +126 -0
package/README.md
CHANGED
|
@@ -1,16 +1,15 @@
|
|
|
1
1
|
# Agentforce Vibes Library
|
|
2
2
|
|
|
3
|
-
AI skills
|
|
3
|
+
AI skills library for Agentforce Vibes development of Salesforce metadata.
|
|
4
4
|
|
|
5
5
|
## 📚 About
|
|
6
6
|
|
|
7
|
-
This repository curates Salesforce-focused skills
|
|
7
|
+
This repository curates Salesforce-focused skills from the wider developer community to accelerate Agentforce Vibes agentic workflows.
|
|
8
8
|
|
|
9
9
|
## 🗂️ Structure
|
|
10
10
|
|
|
11
11
|
```
|
|
12
12
|
afv-library/
|
|
13
|
-
├── rules/ # Single-file guardrails and standards
|
|
14
13
|
├── skills/ # Directory-based executable workflows
|
|
15
14
|
│ ├── generating-apex/
|
|
16
15
|
│ ├── generating-custom-object/
|
|
@@ -19,14 +18,14 @@ afv-library/
|
|
|
19
18
|
├── samples/ # Synced sample apps (e.g. from npm)
|
|
20
19
|
│ └── ui-bundle-template-app-react-sample-b2e/
|
|
21
20
|
│ └── ...
|
|
22
|
-
├── scripts/
|
|
21
|
+
├── scripts/
|
|
23
22
|
│ └── ...
|
|
24
23
|
└── README.md
|
|
25
24
|
```
|
|
26
25
|
|
|
27
26
|
## Manual Usage
|
|
28
27
|
|
|
29
|
-
Browse the repository and copy/paste any
|
|
28
|
+
Browse the repository and copy/paste any skill directly into Agentforce Vibes or your preferred AI tool.
|
|
30
29
|
|
|
31
30
|
## Samples
|
|
32
31
|
|
|
@@ -42,7 +41,7 @@ The GitHub Action runs these same commands and opens a PR only when the npm pack
|
|
|
42
41
|
|
|
43
42
|
## 🛠️ Agent Skills
|
|
44
43
|
|
|
45
|
-
Agent Skills
|
|
44
|
+
Agent Skills are modular capabilities that bundle executable workflows, scripts, and reference materials into self-contained directories. Skills follow the open [Agent Skills specification](https://agentskills.io/) and are portable across many agent tools (Agentforce Vibes, Cursor, Claude Code, etc).
|
|
46
45
|
|
|
47
46
|
### Directory Structure
|
|
48
47
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salesforce/afv-skills",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.6.0",
|
|
4
4
|
"description": "Salesforce skills for Agentforce Vibes",
|
|
5
5
|
"license": "CC-BY-NC-4.0",
|
|
6
6
|
"files": [
|
|
@@ -11,8 +11,8 @@
|
|
|
11
11
|
"registry": "https://registry.npmjs.org"
|
|
12
12
|
},
|
|
13
13
|
"devDependencies": {
|
|
14
|
-
"@salesforce/ui-bundle-template-app-react-sample-b2e": "^1.
|
|
15
|
-
"@salesforce/ui-bundle-template-app-react-sample-b2x": "^1.
|
|
14
|
+
"@salesforce/ui-bundle-template-app-react-sample-b2e": "^1.118.1",
|
|
15
|
+
"@salesforce/ui-bundle-template-app-react-sample-b2x": "^1.118.1",
|
|
16
16
|
"@salesforce/webapp-template-app-react-sample-b2e-experimental": "^1.117.1",
|
|
17
17
|
"@salesforce/webapp-template-app-react-sample-b2x-experimental": "^1.117.1",
|
|
18
18
|
"@types/js-yaml": "^4.0.9",
|
|
@@ -6,7 +6,7 @@ description: Primary Apex authoring skill for class generation, refactoring, and
|
|
|
6
6
|
# Generating Apex
|
|
7
7
|
|
|
8
8
|
Use this skill for production-grade Apex: new classes, selectors, services, async jobs,
|
|
9
|
-
invocable methods, and triggers; and for evidence-based review of existing `.cls`.
|
|
9
|
+
invocable methods, and triggers; and for evidence-based review of existing `.cls` OR `.trigger`.
|
|
10
10
|
|
|
11
11
|
## Required Inputs
|
|
12
12
|
|
|
@@ -16,11 +16,11 @@ Gather or infer before authoring:
|
|
|
16
16
|
- Target object(s) and business goal
|
|
17
17
|
- Class name (derive using the naming table below)
|
|
18
18
|
- Net-new vs refactor/fix; any org/API constraints
|
|
19
|
-
- Deployment targets
|
|
19
|
+
- Deployment targets (default to runSpecifiedTests and use generated tests where applicable)
|
|
20
20
|
|
|
21
21
|
Defaults unless specified:
|
|
22
22
|
- Sharing: `with sharing` (see sharing rules per type below)
|
|
23
|
-
- Access: `public` (use `global` only when required by managed packages or `@
|
|
23
|
+
- Access: `public` (use `global` only when required by managed packages or `@RestResource`)
|
|
24
24
|
- API version: `66.0` (minimum version)
|
|
25
25
|
- ApexDoc comments: yes
|
|
26
26
|
|
|
@@ -48,9 +48,9 @@ All steps are sequential. Do not skip, merge, or reorder. If blocked, stop and a
|
|
|
48
48
|
|
|
49
49
|
4. **Author with guardrails** -- apply every rule in the Rules section below
|
|
50
50
|
- Generate `{ClassName}.cls` with ApexDoc
|
|
51
|
-
- Generate `{ClassName}.cls-meta.xml`
|
|
51
|
+
- Generate `{ClassName}.cls-meta.xml`
|
|
52
52
|
|
|
53
|
-
5. **Generate test classes** --
|
|
53
|
+
5. **Generate test classes** -- Load the skill `generating-apex-test` to create `{ClassName}Test.cls` and `{ClassName}Test.cls-meta.xml`. Apex tests are always required to be generated to deploy. No test file creation or edits can occur without loading the `generating-apex-test` skill to generate tests.
|
|
54
54
|
|
|
55
55
|
### Phase 2 — Validate (required before reporting)
|
|
56
56
|
|
|
@@ -64,7 +64,7 @@ Writing files is the midpoint, not the finish line. Steps 6 and 7 each require a
|
|
|
64
64
|
|
|
65
65
|
7. **Execute Apex tests**
|
|
66
66
|
- Run org tests including `{ClassName}Test` via `sf apex run test` or MCP.
|
|
67
|
-
- Delegate all test fixes/coverage work to `generating-apex-test`; iterate until
|
|
67
|
+
- Delegate all test generation/fixes/coverage work to `generating-apex-test`; iterate until the tests pass.
|
|
68
68
|
- Capture pass/fail counts and coverage percentage for the report.
|
|
69
69
|
- If unavailable, record `test_execution=unavailable: <error>` in the report.
|
|
70
70
|
|
|
@@ -93,7 +93,7 @@ If any constraint would be violated in generated code, **stop and explain the pr
|
|
|
93
93
|
| Use bind variables for all dynamic SOQL with user input | Prevent SOQL injection |
|
|
94
94
|
| Use Apex-native collections (`List`, `Map`, `Set`) rather than Java types | Prevent compile errors |
|
|
95
95
|
| Verify methods exist in Apex before use | Prevent reliance on non-existent APIs |
|
|
96
|
-
|
|
|
96
|
+
| Avoid `System.debug()` in main code paths | Debug statements evaluate even when loggign is not active and consume CPU. Use a logging framework if required on main code paths |
|
|
97
97
|
| Never use `@future` methods | Use Queueable with `System.Finalizer`; `@future` cannot chain, cannot be called from Batch, and cannot accept non-primitive types |
|
|
98
98
|
|
|
99
99
|
### Bulkification & Governor Limits
|
|
@@ -142,6 +142,8 @@ Before finalizing, verify: CRUD/FLS enforced (SOQL + DML) · explicit sharing ke
|
|
|
142
142
|
- Preserve exception cause chains: `new CustomException('message', cause)` (do not replace stack trace with concatenated messages)
|
|
143
143
|
- Provide a custom exception class per service domain when meaningful
|
|
144
144
|
- In `@AuraEnabled` methods, catch exceptions and rethrow as `AuraHandledException`
|
|
145
|
+
- Fallback option: when no meaningful domain exception exists, catch generic `Exception` and either rethrow it or wrap it in a minimal custom exception that preserves the original cause.
|
|
146
|
+
|
|
145
147
|
|
|
146
148
|
### Null Safety
|
|
147
149
|
|
|
@@ -196,8 +198,9 @@ Class-level format:
|
|
|
196
198
|
|
|
197
199
|
```apex
|
|
198
200
|
/**
|
|
199
|
-
*
|
|
201
|
+
* Provides services for geolocation and address conversion.
|
|
200
202
|
*/
|
|
203
|
+
public with sharing class GeolocationService { }
|
|
201
204
|
```
|
|
202
205
|
|
|
203
206
|
Method-level format:
|
|
@@ -357,6 +360,10 @@ Deliverables per class:
|
|
|
357
360
|
- `{ClassName}Test.cls` (generated via `generating-apex-test` skill)
|
|
358
361
|
- `{ClassName}Test.cls-meta.xml` (generated via `generating-apex-test` skill)
|
|
359
362
|
|
|
363
|
+
Deliverables per trigger:
|
|
364
|
+
- `{TriggerName}.trigger`
|
|
365
|
+
- `{TriggerName}.trigger-meta.xml` (default API version `66.0` or higher unless specified)
|
|
366
|
+
|
|
360
367
|
Meta XML template:
|
|
361
368
|
|
|
362
369
|
```xml
|
|
@@ -396,4 +403,4 @@ Deploy: <dry-run or next step>
|
|
|
396
403
|
|
|
397
404
|
## Troubleshooting Boundary
|
|
398
405
|
|
|
399
|
-
This skill handles production `.cls`/`.trigger` issues only: compile/parse failures, deployment dependency errors, runtime governor-limit failures. For test execution, assertions, coverage, or `sf apex run test` failures, delegate to `generating-apex-test`.
|
|
406
|
+
This skill handles production `.cls`/`.trigger`/`.apex` issues only: compile/parse failures, deployment dependency errors, runtime governor-limit failures. For test execution, assertions, coverage, or `sf apex run test` failures, delegate to `generating-apex-test`.
|
|
@@ -6,7 +6,6 @@
|
|
|
6
6
|
>>>>>>> Stashed changes
|
|
7
7
|
* Provides common behavior and defines extension points for subclasses.
|
|
8
8
|
* Subclasses must implement the abstract methods to provide specific behavior.
|
|
9
|
-
* @author Generated by Apex Class Writer Skill
|
|
10
9
|
*
|
|
11
10
|
* @example
|
|
12
11
|
* // Extending this abstract class:
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
* Batch Apex class for {describe the batch operation}.
|
|
3
3
|
* Processes {SObject} records in configurable batch sizes.
|
|
4
4
|
* Implements Database.Stateful to track cumulative results across chunks.
|
|
5
|
-
* @author Generated by Apex Class Writer Skill
|
|
6
5
|
*
|
|
7
6
|
* @example
|
|
8
7
|
* // Execute with default batch size
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
* Data Transfer Object for {describe the data this DTO represents}.
|
|
3
3
|
* Used to pass structured data between layers without exposing SObjects.
|
|
4
4
|
* Serialization-friendly for use with JSON.serialize/deserialize and API responses.
|
|
5
|
-
* @author Generated by Apex Class Writer Skill
|
|
6
5
|
*
|
|
7
6
|
* @example
|
|
8
7
|
* // Create from constructor
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
* Custom exception for {describe when this exception is thrown}.
|
|
3
3
|
* Use this exception to signal domain-specific errors that callers
|
|
4
4
|
* can catch and handle distinctly from system exceptions.
|
|
5
|
-
* @author Generated by Apex Class Writer Skill
|
|
6
5
|
*
|
|
7
6
|
* @example
|
|
8
7
|
* throw new {ClassName}('Account merge failed: duplicate detected.');
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Interface for {describe the capability or contract this interface defines}.
|
|
3
3
|
* Implement this interface to provide {describe what implementations do}.
|
|
4
|
-
* @author Generated by Apex Class Writer Skill
|
|
5
4
|
*
|
|
6
5
|
* @example
|
|
7
6
|
* public class EmailNotificationService implements {InterfaceName} {
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
* Queueable Apex class for {describe the async operation}.
|
|
3
3
|
* Accepts data through the constructor for stateful processing.
|
|
4
4
|
* Optionally implements Database.AllowsCallouts for external integrations.
|
|
5
|
-
* @author Generated by Apex Class Writer Skill
|
|
6
5
|
*
|
|
7
6
|
* @example
|
|
8
7
|
* // Enqueue the job
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
* Schedulable Apex class for {describe the scheduled operation}.
|
|
3
3
|
* Delegates heavy processing to a Batch or Queueable job.
|
|
4
4
|
* Keep execute() lightweight — it should only launch other jobs.
|
|
5
|
-
* @author Generated by Apex Class Writer Skill
|
|
6
5
|
*
|
|
7
6
|
* @example
|
|
8
7
|
* // Schedule to run daily at 2 AM
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
* Service class for {SObject} business logic.
|
|
3
3
|
* Follows separation of concerns: delegates queries to {SObject}Selector
|
|
4
4
|
* and SObject manipulation to {SObject}Domain where applicable.
|
|
5
|
-
* @author Generated by Apex Class Writer Skill
|
|
6
5
|
*/
|
|
7
6
|
public with sharing class {SObject}Service {
|
|
8
7
|
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
* Utility class for {describe the category of utilities: String, Date, Collection, etc.}.
|
|
3
3
|
* All methods are static and side-effect-free (no SOQL, no DML).
|
|
4
4
|
* Private constructor prevents instantiation.
|
|
5
|
-
* @author Generated by Apex Class Writer Skill
|
|
6
5
|
*/
|
|
7
6
|
public with sharing class {ClassName} {
|
|
8
7
|
|
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
* Compares Accounts by Name and BillingPostalCode to find potential duplicates.
|
|
4
4
|
* Flags duplicates by setting the Is_Potential_Duplicate__c checkbox.
|
|
5
5
|
* Implements Database.Stateful to track results across batch chunks.
|
|
6
|
-
* @author Generated by Apex Class Writer Skill
|
|
7
6
|
*
|
|
8
7
|
* @example
|
|
9
8
|
* // Run with default batch size (200)
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
* Service class for Account business logic.
|
|
3
3
|
* Provides account deduplication, enrichment, and territory assignment.
|
|
4
4
|
* Delegates queries to AccountSelector and SObject manipulation to AccountDomain.
|
|
5
|
-
* @author Generated by Apex Class Writer Skill
|
|
6
5
|
*/
|
|
7
6
|
public with sharing class AccountService {
|
|
8
7
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
|
-
*
|
|
3
|
-
*
|
|
4
|
-
*
|
|
2
|
+
* Test class for {ClassUnderTest}.
|
|
3
|
+
* Tests bulk operations (251+ records), positive/negative paths,
|
|
4
|
+
* and exception handling.
|
|
5
5
|
*/
|
|
6
6
|
@isTest
|
|
7
7
|
private class {ClassUnderTest}Test {
|
|
@@ -26,7 +26,7 @@ Assert.isTrue(accounts.size() > 0); // vague — use areEqual with exact count
|
|
|
26
26
|
### Good: Descriptive message, tests specific behavior
|
|
27
27
|
|
|
28
28
|
```apex
|
|
29
|
-
Assert.
|
|
29
|
+
Assert.isTrue(result, 'Service should return true for valid input');
|
|
30
30
|
Assert.areEqual(200, accounts.size(), 'All 200 accounts should be processed');
|
|
31
31
|
```
|
|
32
32
|
|
|
@@ -140,7 +140,7 @@ static void shouldExecuteFutureMethod() {
|
|
|
140
140
|
Test.stopTest();
|
|
141
141
|
|
|
142
142
|
Account updated = [SELECT Id, Processed__c FROM Account WHERE Id = :acc.Id];
|
|
143
|
-
Assert.
|
|
143
|
+
Assert.isTrue(updated.Processed__c, 'Future should process record');
|
|
144
144
|
}
|
|
145
145
|
```
|
|
146
146
|
|
|
@@ -145,8 +145,7 @@ Before doing anything, you **MUST ALWAYS** load them first if they match user in
|
|
|
145
145
|
|
|
146
146
|
**Steps** (Follow the steps sequentially. Do not skip any step before proceeding):
|
|
147
147
|
|
|
148
|
-
- [ ] Check with user whether this new theme layout reuses an existing theme layout component or requires a new one.
|
|
149
|
-
- [ ] MUST read [handle-ui-components.md](docs/handle-ui-components.md) if creating a new theme layout component.
|
|
148
|
+
- [ ] **CRITICAL**:Before doing anything else, MUST Check with user whether this new theme layout reuses an existing theme layout Lightning web component or requires a new one. If it requires a new one, make sure to read [handle-ui-components.md](docs/handle-ui-components.md) to create the new theme layout component before proceeding. DO NOT skip this step even if doing so would be faster or more efficient.
|
|
150
149
|
- [ ] MUST read [configure-content-themeLayout.md](docs/configure-content-themeLayout.md).
|
|
151
150
|
- [ ] MUST read [configure-content-view.md](docs/configure-content-view.md) if need to apply theme layout to pages
|
|
152
151
|
|
|
@@ -26,6 +26,9 @@
|
|
|
26
26
|
|
|
27
27
|
**IMPORTANT**: These guidelines should ONLY be applied when the user explicitly requests creating a new layout for their site. Do not apply these guidelines automatically for other tasks or when editing existing layouts.
|
|
28
28
|
|
|
29
|
+
### Order of operations
|
|
30
|
+
If the user decides to create a new LWC, create the LWC first THEN the theme layout metadata.
|
|
31
|
+
|
|
29
32
|
### _meta.json Structure
|
|
30
33
|
|
|
31
34
|
The `_meta.json` file must contain:
|
|
@@ -126,11 +129,11 @@ digitalExperiences/site/[SITE_NAME]/sfdc_cms__theme/[THEME_API_NAME]/content.jso
|
|
|
126
129
|
|
|
127
130
|
When generating a new theme layout, ensure:
|
|
128
131
|
|
|
129
|
-
- [ ] `_meta.json` created with correct `apiName`, `type`, and `path`
|
|
130
|
-
- [ ] `content.json` created with all required fields
|
|
131
|
-
- [ ] `urlName` uses lowercase with hyphens
|
|
132
|
-
- [ ] `title` is human-readable
|
|
133
|
-
- [ ] `sfdc_cms__theme/[THEME_API_NAME]/content.json` updated by appending a new `contentBody.layouts` mapping
|
|
132
|
+
- [ ] `_meta.json` created with correct `apiName`, `type`, and `path`
|
|
133
|
+
- [ ] `content.json` created with all required fields
|
|
134
|
+
- [ ] `urlName` uses lowercase with hyphens
|
|
135
|
+
- [ ] `title` is human-readable
|
|
136
|
+
- [ ] `sfdc_cms__theme/[THEME_API_NAME]/content.json` updated by appending a new `contentBody.layouts` mapping
|
|
134
137
|
- [ ] **CRITICAL**: Complete all the UUID generation steps. See [handle-component-and-region-ids.md](docs/handle-component-and-region-ids.md)
|
|
135
138
|
|
|
136
139
|
## Purpose B: Editing Existing Theme Layouts
|
|
@@ -0,0 +1,236 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: uplifting-components-to-slds2
|
|
3
|
+
description: Migrate Lightning Web Components from SLDS 1 to SLDS 2 by running the SLDS linter and fixing violations. Use this skill whenever users mention SLDS 2, SLDS uplift, linter violations, LWC token migration, class overrides, hardcoded CSS values that need SLDS hook replacement, or styling hook selection. Covers all styling hook categories — color, spacing, sizing, typography, borders, radius, and shadows. Also use when users mention no-hardcoded-values, no-slds-class-overrides, lwc-to-slds-hooks, no-deprecated-tokens-slds1, or ask about SLDS component migration — even if they don't explicitly say "uplift" or "migration".
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Goal
|
|
7
|
+
|
|
8
|
+
Systematically migrate Lightning Web Components from SLDS 1 to SLDS 2 using the SLDS linter and structured guidance for fixing violations across all styling hook categories.
|
|
9
|
+
|
|
10
|
+
## SLDS 2 Styling Hook Categories
|
|
11
|
+
|
|
12
|
+
| Category | Hook Prefix | What It Replaces |
|
|
13
|
+
|---|---|---|
|
|
14
|
+
| Color | `--slds-g-color-*` | Hardcoded colors, `--lwc-color*` tokens |
|
|
15
|
+
| Spacing | `--slds-g-spacing-*` | Hardcoded margins, padding, gaps |
|
|
16
|
+
| Sizing | `--slds-g-sizing-*` | Hardcoded widths, heights, dimensions |
|
|
17
|
+
| Typography | `--slds-g-font-*` | Hardcoded font sizes, weights, line heights |
|
|
18
|
+
| Border/Radius | `--slds-g-radius-border-*`, `--slds-g-sizing-border-*` | Hardcoded border-radius, border-width |
|
|
19
|
+
| Shadow | `--slds-g-shadow-*` | Hardcoded box-shadow values |
|
|
20
|
+
|
|
21
|
+
Color hooks require the most judgment (context-dependent selection). Non-color hooks are mostly numbered scales with straightforward mappings.
|
|
22
|
+
|
|
23
|
+
## Prerequisites
|
|
24
|
+
|
|
25
|
+
- Node.js 14.x or higher installed
|
|
26
|
+
- Access to component CSS and markup files (`.html` for LWC, `.cmp` for Aura)
|
|
27
|
+
- Terminal/command line access to run linter
|
|
28
|
+
- Git repository for backup (recommended)
|
|
29
|
+
|
|
30
|
+
---
|
|
31
|
+
|
|
32
|
+
# Workflow
|
|
33
|
+
|
|
34
|
+
```
|
|
35
|
+
1. Run SLDS linter with auto-fix -> Handles simple violations automatically
|
|
36
|
+
2. Review linter output -> Identify remaining manual fixes needed
|
|
37
|
+
3. Fix by violation type -> Use per-rule reference guides
|
|
38
|
+
4. Choose the right hook -> Context-first, inspect HTML before deciding
|
|
39
|
+
5. Validate -> Re-run linter and confirm zero errors
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
## Step 1: Run SLDS Linter
|
|
43
|
+
|
|
44
|
+
```bash
|
|
45
|
+
npx @salesforce-ux/slds-linter@latest lint --fix .
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
The linter analyzes all CSS and markup files (`.html` for LWC, `.cmp` for Aura), auto-fixes simple violations, and reports remaining issues requiring manual intervention.
|
|
49
|
+
|
|
50
|
+
## Step 2: Analyze Linter Output
|
|
51
|
+
|
|
52
|
+
The linter reports violations in this format:
|
|
53
|
+
|
|
54
|
+
```
|
|
55
|
+
componentName.css
|
|
56
|
+
15:3 warning Overriding slds-button isn't supported. To differentiate SLDS and
|
|
57
|
+
custom classes, create a CSS class in your namespace.
|
|
58
|
+
Examples: myapp-input, myapp-button. slds/no-slds-class-overrides
|
|
59
|
+
|
|
60
|
+
23:5 error The '--lwc-colorBackground' design token is deprecated. Replace it with
|
|
61
|
+
the SLDS 2 styling hook and set the fallback to '--lwc-colorBackground'.
|
|
62
|
+
1. --slds-g-color-surface-2
|
|
63
|
+
2. --slds-g-color-surface-container-2 slds/lwc-token-to-slds-hook
|
|
64
|
+
|
|
65
|
+
30:8 warning Consider replacing the #ffffff static value with an SLDS 2 styling hook
|
|
66
|
+
that has a similar value:
|
|
67
|
+
1. --slds-g-color-surface-1
|
|
68
|
+
2. --slds-g-color-surface-container-1
|
|
69
|
+
3. --slds-g-color-on-accent-1
|
|
70
|
+
4. --slds-g-color-on-accent-2
|
|
71
|
+
5. --slds-g-color-on-accent-3 slds/no-hardcoded-values-slds2
|
|
72
|
+
|
|
73
|
+
31:15 error Consider removing t(fontSizeMedium) or replacing it with
|
|
74
|
+
var(--slds-g-font-size-base, var(--lwc-fontSizeMedium, 0.8125rem)).
|
|
75
|
+
Set the fallback to t(fontSizeMedium). For more info, see
|
|
76
|
+
Styling Hooks on lightningdesignsystem.com. slds/no-deprecated-tokens-slds1
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
Four violation types, each with its own fix approach (see Step 3).
|
|
80
|
+
|
|
81
|
+
**Important:** The linter flags all hardcoded values. Fix color, spacing, sizing, typography, border, and shadow values — but **skip layout values** (`100%`, `auto`, `0`, `inherit`, `none`). See [rule-no-hardcoded-values.md](references/rule-no-hardcoded-values.md) for the full fix-vs-skip triage table.
|
|
82
|
+
|
|
83
|
+
## Step 3: Fix Violations by Type
|
|
84
|
+
|
|
85
|
+
Each rule has a dedicated reference guide with full examples and decision logic:
|
|
86
|
+
|
|
87
|
+
| Violation Rule | Quick Summary | Reference |
|
|
88
|
+
|---|---|---|
|
|
89
|
+
| `slds/no-hardcoded-values-slds2` | Replace hardcoded values with SLDS hook + original as fallback | [rule-no-hardcoded-values.md](references/rule-no-hardcoded-values.md)|
|
|
90
|
+
| `slds/lwc-token-to-slds-hook` | Replace `--lwc-*` tokens with SLDS 2 hook, keep LWC token as fallback | [rule-lwc-token-to-slds-hook.md](references/rule-lwc-token-to-slds-hook.md) |
|
|
91
|
+
| `slds/no-slds-class-overrides` | Create component-prefixed class, add to markup alongside SLDS class | [rule-no-slds-class-overrides.md](references/rule-no-slds-class-overrides.md) |
|
|
92
|
+
| `slds/no-deprecated-tokens-slds1` | Replace legacy `t()`/`token()` syntax with SLDS 2 hook + LWC fallback | [rule-no-deprecated-tokens-slds1.md](references/rule-no-deprecated-tokens-slds1.md) |
|
|
93
|
+
|
|
94
|
+
**Always include fallback values** — `var(--slds-g-hook, originalValue)` where `originalValue` is the exact original from the source CSS.
|
|
95
|
+
|
|
96
|
+
### Class Override Quick Reference
|
|
97
|
+
|
|
98
|
+
Class overrides require changes to **both CSS and markup** (`.html` or `.cmp`). This is the most commonly missed step:
|
|
99
|
+
|
|
100
|
+
1. **CSS:** Rename `.slds-*` selector → `{componentName}-{sldsElementPart}` (camelCase)
|
|
101
|
+
2. **Markup:** Add the new class **alongside** the SLDS class — never remove the SLDS class
|
|
102
|
+
|
|
103
|
+
```css
|
|
104
|
+
/* Before */ .slds-button { border-radius: 8px; }
|
|
105
|
+
/* After */ .myComponent-button { border-radius: 8px; }
|
|
106
|
+
```
|
|
107
|
+
```html
|
|
108
|
+
<!-- Markup: both classes --> <button class="slds-button myComponent-button">Click</button>
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
See [rule-no-slds-class-overrides.md](references/rule-no-slds-class-overrides.md) for descendant selectors, multi-class selectors, and naming conventions.
|
|
112
|
+
|
|
113
|
+
## Step 4: Choose the Right Hook
|
|
114
|
+
|
|
115
|
+
**Color hooks** require context-based selection — inspect the HTML to determine the element's role before choosing a hook family. See **[color-hooks-decision-guide.md](references/color-hooks-decision-guide.md)** for decision trees, all 5 hook families, and background-foreground pairing rules.
|
|
116
|
+
|
|
117
|
+
**Non-color hooks** are simpler — match the CSS value to the numbered scale. See **[non-color-hooks-decision-guide.md](references/non-color-hooks-decision-guide.md)** for value-to-hook lookup tables covering spacing, sizing, typography, borders, radius, and shadows.
|
|
118
|
+
|
|
119
|
+
## Step 5: Validate and Verify
|
|
120
|
+
|
|
121
|
+
**Linter feedback loop — repeat until zero errors:**
|
|
122
|
+
|
|
123
|
+
```
|
|
124
|
+
1. npx @salesforce-ux/slds-linter@latest lint .
|
|
125
|
+
2. Review errors -> fix by type (Step 3)
|
|
126
|
+
3. Re-run linter
|
|
127
|
+
4. Repeat until output shows: 0 errors
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
---
|
|
131
|
+
|
|
132
|
+
# Validation
|
|
133
|
+
|
|
134
|
+
- [ ] No `.slds-*` classes in CSS selectors
|
|
135
|
+
- [ ] No `var(--lwc-*)` tokens without SLDS 2 replacements
|
|
136
|
+
- [ ] All hooks include fallback values
|
|
137
|
+
- [ ] Background/foreground color hooks from same family
|
|
138
|
+
- [ ] Original SLDS classes preserved in HTML
|
|
139
|
+
- [ ] Spacing uses numbered hooks (not named like `spacing-medium`)
|
|
140
|
+
- [ ] Typography uses numbered hooks (not named like `font-weight-bold`)
|
|
141
|
+
- [ ] Component renders correctly in light/dark mode and density settings
|
|
142
|
+
|
|
143
|
+
See **[migration-checklist.md](references/migration-checklist.md)** for the full validation checklist.
|
|
144
|
+
|
|
145
|
+
---
|
|
146
|
+
|
|
147
|
+
# Output
|
|
148
|
+
|
|
149
|
+
Return the fully migrated CSS (and updated HTML markup where class overrides were fixed) with zero SLDS linter violations. All styling hooks must include fallback values preserving the original CSS values.
|
|
150
|
+
|
|
151
|
+
---
|
|
152
|
+
|
|
153
|
+
# Advanced Patterns
|
|
154
|
+
|
|
155
|
+
## Color-Mix for Transparency
|
|
156
|
+
|
|
157
|
+
When a hardcoded value uses `rgba()` or transparency, use `color-mix()` with the SLDS hook to preserve opacity:
|
|
158
|
+
|
|
159
|
+
```css
|
|
160
|
+
/* Before */
|
|
161
|
+
border-color: rgba(186, 5, 23, 0.7);
|
|
162
|
+
|
|
163
|
+
/* After — use oklab color space for perceptual consistency */
|
|
164
|
+
border-color: color-mix(in oklab, var(--slds-g-color-palette-red-40, rgb(181,54,45)), transparent 30%);
|
|
165
|
+
```
|
|
166
|
+
|
|
167
|
+
**Formula:** To achieve X% opacity, use `(100 - X)%` transparent in `color-mix`.
|
|
168
|
+
- 70% opacity → `transparent 30%`
|
|
169
|
+
- 50% opacity → `transparent 50%`
|
|
170
|
+
|
|
171
|
+
Use opaque `rgb()` as fallback (not `rgba()`) — `color-mix` handles the transparency.
|
|
172
|
+
|
|
173
|
+
## calc() Expressions with Tokens
|
|
174
|
+
|
|
175
|
+
When migrating `t('calc(...)')` or `calc()` with deprecated tokens:
|
|
176
|
+
|
|
177
|
+
```css
|
|
178
|
+
/* Before — Aura t() with calc */
|
|
179
|
+
height: t('calc(' + lineHeightButton + ' + 2px)');
|
|
180
|
+
|
|
181
|
+
/* After — if calc is still needed */
|
|
182
|
+
height: calc(var(--lwc-lineHeightButton) + 2px);
|
|
183
|
+
|
|
184
|
+
/* After — if calc was unnecessary, simplify */
|
|
185
|
+
height: var(--lwc-lineHeightButton);
|
|
186
|
+
```
|
|
187
|
+
|
|
188
|
+
For `calc()` with `--lwc-*` tokens being replaced:
|
|
189
|
+
|
|
190
|
+
```css
|
|
191
|
+
/* Before */
|
|
192
|
+
padding: calc(var(--lwc-spacingMedium) + 4px);
|
|
193
|
+
|
|
194
|
+
/* After */
|
|
195
|
+
padding: calc(var(--slds-g-spacing-4, var(--lwc-spacingMedium)) + 4px);
|
|
196
|
+
```
|
|
197
|
+
|
|
198
|
+
**Tip:** Often the `calc()` is unnecessary and can be simplified. Check if the result matches an existing hook value.
|
|
199
|
+
|
|
200
|
+
---
|
|
201
|
+
|
|
202
|
+
# Key Constraints
|
|
203
|
+
|
|
204
|
+
- **Never invent hook names** — only use hooks documented in the SLDS design system
|
|
205
|
+
- **Always include fallback values** — the fallback must be the exact original value from the source CSS
|
|
206
|
+
- **Never change hardcoded numerical values** — values like `100%`, `50%`, `200px`, `1.5`, `auto`, `0`, `inherit`, `none`, `flex: 1` are structural/layout values. Do not replace them with hooks and do not remove them — they are not styling hook candidates
|
|
207
|
+
- **No exact match? Leave as-is** — if a hardcoded value doesn't closely correspond to any hook's rendered value, leave it unchanged rather than force-fitting
|
|
208
|
+
- **Match hook number to original value intensity** — don't default to `-1`. Pick the variant closest to the original. See [color-hooks-decision-guide.md](references/color-hooks-decision-guide.md)
|
|
209
|
+
- **Only numbered scales** — named hooks like `spacing-medium`, `font-weight-bold`, `radius-large` do NOT exist
|
|
210
|
+
|
|
211
|
+
# Troubleshooting
|
|
212
|
+
|
|
213
|
+
| Issue | Solution |
|
|
214
|
+
|---|---|
|
|
215
|
+
| Linter suggests 2+ color hook options | Inspect HTML context to determine element's semantic role — see color-hooks-decision-guide.md |
|
|
216
|
+
| Visual appearance changed after migration | Verify fallback values match originals; check surface vs container family |
|
|
217
|
+
| No hook available for hardcoded value | Leave unchanged; do not invent custom hook names |
|
|
218
|
+
| Linter says "Remove the static value" for `100%`, `auto`, etc. | Leave unchanged — these are layout values. Removing them breaks rendering. |
|
|
219
|
+
| CSS class naming errors | Use exact camelCase component name: `myComponent-button`, not `MyComponent-button` |
|
|
220
|
+
| Spacing/sizing doesn't match | Check value-to-hook mapping in non-color-hooks-decision-guide.md; verify spacing vs sizing usage |
|
|
221
|
+
| Named hook not working (e.g., `spacing-medium`) | Named hooks don't exist — use numbered scale: `spacing-4` for 16px, `font-weight-7` for inline bold emphasis (not headings) |
|
|
222
|
+
| Component looks different in compact density | Use density-aware hooks (`--slds-g-spacing-var-*`) for components that adapt to density |
|
|
223
|
+
|
|
224
|
+
---
|
|
225
|
+
|
|
226
|
+
# References
|
|
227
|
+
|
|
228
|
+
- **[Color Hooks Decision Guide](references/color-hooks-decision-guide.md)** — All 5 color hook families, decision trees, background-foreground pairing, palette accessibility
|
|
229
|
+
- **[Non-Color Hooks Decision Guide](references/non-color-hooks-decision-guide.md)** — Spacing, sizing, typography, borders, radius, and shadow hooks with lookup tables
|
|
230
|
+
- **[Rule: No Hardcoded Values](references/rule-no-hardcoded-values.md)** — Linter behavior, fix-vs-skip triage, replacement pattern, utility class workflow
|
|
231
|
+
- **[Rule: LWC Token to SLDS Hook](references/rule-lwc-token-to-slds-hook.md)** — Deprecated `--lwc-*` token replacement patterns
|
|
232
|
+
- **[Rule: No Deprecated Tokens SLDS1](references/rule-no-deprecated-tokens-slds1.md)** — Legacy `t()`/`token()` Aura syntax replacement patterns
|
|
233
|
+
- **[Rule: No SLDS Class Overrides](references/rule-no-slds-class-overrides.md)** — Class renaming and HTML updates
|
|
234
|
+
- **[Migration Examples](references/examples.md)** — Before/after examples by scenario and complexity
|
|
235
|
+
- **[Common Patterns](references/common-patterns.md)** — Classes never to override, deprecated SLDS 2 classes, palette fallbacks, tokens with no SLDS 2 equivalent
|
|
236
|
+
- **[Migration Checklist](references/migration-checklist.md)** — Full validation checklist
|