@salesforce/afv-skills 1.34.0 → 1.35.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/package.json +1 -1
- package/skills/automation-sandbox-post-copy-config-generate/SKILL.md +239 -0
- package/skills/automation-sandbox-post-copy-config-generate/assets/config_template.json +21 -0
- package/skills/automation-sandbox-post-copy-config-generate/assets/json_schema.json +90 -0
- package/skills/automation-sandbox-post-copy-config-generate/examples/sample_sop_excerpt.md +31 -0
- package/skills/automation-sandbox-post-copy-config-generate/examples/sample_sop_to_config.json +50 -0
- package/skills/automation-sandbox-post-copy-config-generate/references/configuration_catalog.md +76 -0
- package/skills/automation-sandbox-post-copy-config-generate/references/sop_parsing_patterns.md +157 -0
- package/skills/automation-sandbox-post-copy-config-generate/references/source_format_handling.md +230 -0
- package/skills/dx-apexguru-scan/SKILL.md +403 -0
- package/skills/dx-apexguru-scan/examples/README.md +54 -0
- package/skills/dx-apexguru-scan/examples/sample-decoded-summary.json +176 -0
- package/skills/dx-apexguru-scan/examples/sample-full-no-runtime-response.json +26 -0
- package/skills/dx-apexguru-scan/examples/sample-succeeded-response.json +15 -0
- package/skills/dx-apexguru-scan/references/api-reference.md +81 -0
- package/skills/dx-apexguru-scan/references/authentication.md +134 -0
- package/skills/dx-apexguru-scan/references/error-handling.md +56 -0
- package/skills/dx-apexguru-scan/references/violation-catalog.md +28 -0
- package/skills/dx-apexguru-scan/scripts/build-zip.sh +87 -0
- package/skills/dx-apexguru-scan/scripts/decode-report.js +389 -0
- package/skills/dx-apexguru-scan/scripts/resolve-token.sh +151 -0
- package/skills/dx-apexguru-scan/scripts/run-scan.sh +153 -0
- package/skills/dx-apexguru-scan/scripts/scan.sh +96 -0
- package/skills/dx-apexguru-scan/scripts/validate-token.js +121 -0
- package/skills/dx-devops-pipeline-manage/SKILL.md +263 -0
- package/skills/dx-devops-pipeline-manage/examples/common-workflows.md +177 -0
- package/skills/dx-devops-pipeline-manage/references/cli-commands.md +298 -0
- package/skills/dx-devops-pipeline-manage/references/parsing-patterns.md +134 -0
- package/skills/dx-devops-pipeline-manage/scripts/check-activation-ready.sh +34 -0
- package/skills/dx-devops-pipeline-manage/scripts/validate-org-type.sh +17 -0
- package/skills/dx-devops-pipeline-manage/scripts/verify-operation.sh +82 -0
- package/skills/dx-devops-promote/SKILL.md +214 -0
- package/skills/dx-devops-promote/examples/promotion-workflows.md +212 -0
- package/skills/dx-devops-promote/references/cli-commands.md +303 -0
- package/skills/experience-lwc-base-components-integrate/SKILL.md +176 -0
- package/skills/experience-lwc-base-components-integrate/references/lbc-expert-guidance.md +127 -0
- package/skills/experience-lwc-base-components-integrate/references/lightning-component-index.md +179 -0
- package/skills/experience-lwc-base-components-integrate/references/lightning-components.md +5429 -0
- package/skills/experience-lwc-base-components-integrate/scripts/extract-component-docs.sh +61 -0
- package/skills/experience-lwc-rtl-validate/SKILL.md +149 -0
- package/skills/experience-lwc-rtl-validate/references/rtl-expert.md +892 -0
- package/skills/experience-lwc-rtl-validate/scripts/scan-rtl-css.sh +206 -0
- package/skills/experience-lwc-typescript-migrate/SKILL.md +207 -0
- package/skills/experience-lwc-typescript-migrate/assets/dts-template.ts +15 -0
- package/skills/experience-lwc-typescript-migrate/assets/type-patterns.ts +44 -0
- package/skills/experience-lwc-typescript-migrate/scripts/find-consumers.sh +128 -0
- package/skills/experience-ui-bundle-localize/SKILL.md +323 -0
- package/skills/experience-ui-bundle-localize/references/gotchas.md +249 -0
- package/skills/experience-ui-bundle-localize/references/i18n-setup.md +169 -0
- package/skills/experience-ui-bundle-localize/references/interpolation.md +311 -0
- package/skills/experience-ui-bundle-localize/references/label-xml.md +282 -0
- package/skills/experience-ui-bundle-localize/references/verifying.md +219 -0
- package/skills/experience-ui-bundle-localize/scripts/check-i18n-wired.sh +195 -0
- package/skills/experience-ui-bundle-localize/scripts/check-manifest-registered.sh +100 -0
- package/skills/experience-ui-bundle-localize/scripts/check-org-api-version.sh +40 -0
- package/skills/experience-ui-bundle-localize/scripts/detect-bundle-type.sh +57 -0
- package/skills/platform-custom-lightning-type-generate/SKILL.md +3 -0
- package/skills/platform-custom-lightning-type-generate/assets/primitive-types-and-constraints.md +1 -1
- package/skills/platform-mcp-tool-widget-coordinate/SKILL.md +250 -0
- package/skills/platform-mcp-tool-widget-coordinate/examples/action-name-source-prompt.md +74 -0
- package/skills/platform-mcp-tool-widget-coordinate/examples/apex-invocable-source-prompt.md +90 -0
- package/skills/platform-mcp-tool-widget-coordinate/examples/nested-object-source-prompt.md +191 -0
- package/skills/platform-mcp-tool-widget-coordinate/examples/pasted-tool-output-prompt.md +85 -0
- package/skills/platform-mcp-tool-widget-coordinate/references/build-plan-format.md +74 -0
- package/skills/platform-mcp-tool-widget-coordinate/references/mcp-tool-output-discovery.md +184 -0
- package/skills/platform-mcp-tool-widget-coordinate/references/two-clt-modeling.md +128 -0
- package/skills/platform-mcp-tool-widget-coordinate/references/validation-gates.md +181 -0
|
@@ -0,0 +1,303 @@
|
|
|
1
|
+
# DevOps Center Promotion CLI Commands Reference
|
|
2
|
+
|
|
3
|
+
Complete reference for the `sf devops` promotion commands with JSON output schemas and error handling. All commands support `--json` and `--target-org <alias>`. Every command is keyed on **record IDs**, not work item names.
|
|
4
|
+
|
|
5
|
+
## Command Summary
|
|
6
|
+
|
|
7
|
+
| Command | Purpose | Required Flags | Async? |
|
|
8
|
+
|---------|---------|---------------|--------|
|
|
9
|
+
| `sf devops promotion validate` | Validate work item promotion to a target stage | `--work-item-id`, `--target-stage-id` | No |
|
|
10
|
+
| `sf devops work-item prepare` | Prepare one work item for promotion | `--work-item-id`, `--target-stage-id` | No |
|
|
11
|
+
| `sf devops work-item combine` | Combine child work items into a parent | `--parent-work-item-id`, `--child-work-item-id`, `--target-stage-id` | No |
|
|
12
|
+
| `sf devops promote` | Promote work item(s) or a stage to a target stage | (`--work-item-id` XOR `--stage-id`), `--target-stage-id`; add `--skip-validation` only if Phase 1 validate passed this session | Yes |
|
|
13
|
+
| `sf devops promotion complete` | Finalize the promotion in the target stage | `--target-stage-id` | No |
|
|
14
|
+
|
|
15
|
+
**Org authentication** — verify before any command:
|
|
16
|
+
```bash
|
|
17
|
+
sf org display --json
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
---
|
|
21
|
+
|
|
22
|
+
## Validate (Mandatory First Step)
|
|
23
|
+
|
|
24
|
+
Validates whether the specified work item(s) can be promoted to the target stage — checks for VCS and object-permission errors before a promotion is attempted. Requires `--target-stage-id`; repeat `--work-item-id` to validate multiple work items in one call.
|
|
25
|
+
|
|
26
|
+
```bash
|
|
27
|
+
sf devops promotion validate \
|
|
28
|
+
--work-item-id 1fkxx0000000001AAA \
|
|
29
|
+
--target-stage-id 1QVxx0000000001AAA \
|
|
30
|
+
--target-org myorg \
|
|
31
|
+
--json
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
### Key Flags
|
|
35
|
+
|
|
36
|
+
| Flag | Description |
|
|
37
|
+
|------|-------------|
|
|
38
|
+
| `-i, --work-item-id` | Work item to validate for promotion (required, repeatable) |
|
|
39
|
+
| `-t, --target-stage-id` | Target pipeline stage to validate promotion to (required) |
|
|
40
|
+
| `-o, --target-org` | Target org alias |
|
|
41
|
+
|
|
42
|
+
### JSON Output Schema (success)
|
|
43
|
+
|
|
44
|
+
```json
|
|
45
|
+
{
|
|
46
|
+
"status": 0,
|
|
47
|
+
"result": {
|
|
48
|
+
"success": true,
|
|
49
|
+
"errorType": null,
|
|
50
|
+
"errorDetails": null,
|
|
51
|
+
"combineDetails": null,
|
|
52
|
+
"suggestions": []
|
|
53
|
+
},
|
|
54
|
+
"warnings": []
|
|
55
|
+
}
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
### JSON Output Schema (success, work items share components)
|
|
59
|
+
|
|
60
|
+
When multiple work items share metadata, validation still succeeds (`success: true`) but returns `combineDetails` and `suggestions` describing whether to combine before promoting:
|
|
61
|
+
|
|
62
|
+
```json
|
|
63
|
+
{
|
|
64
|
+
"status": 0,
|
|
65
|
+
"result": {
|
|
66
|
+
"success": true,
|
|
67
|
+
"errorType": null,
|
|
68
|
+
"errorDetails": null,
|
|
69
|
+
"combineDetails": {
|
|
70
|
+
"parentWorkitemId": "1fk000000000001",
|
|
71
|
+
"childWorkitemsId": ["1fk000000000002"],
|
|
72
|
+
"sharedComponentsList": {
|
|
73
|
+
"1fk000000000001": ["MyApexClass", "MyTrigger"],
|
|
74
|
+
"1fk000000000002": ["MyApexClass"]
|
|
75
|
+
}
|
|
76
|
+
},
|
|
77
|
+
"suggestions": [
|
|
78
|
+
"The selected work items share one or more components. Choose one of these approaches:",
|
|
79
|
+
"Option 1 - Combine the work items and promote them as a single unit: ...",
|
|
80
|
+
"Option 2 - Promote the work items as they are, without combining: ..."
|
|
81
|
+
]
|
|
82
|
+
},
|
|
83
|
+
"warnings": []
|
|
84
|
+
}
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
### Interpreting the result
|
|
88
|
+
|
|
89
|
+
- **Success:** `status == 0` and `.result.success == true`. Proceed.
|
|
90
|
+
- **Shared components:** if `.result.combineDetails` is non-null, the work items share metadata. Use `.result.combineDetails.parentWorkitemId` / `.childWorkitemsId` to drive the combine decision in Phase 2 (see Combine), then promote the parent. This is the authoritative signal for whether to combine — don't guess.
|
|
91
|
+
- **Failure:** a non-zero exit code. The command surfaces an error such as `Validation failed (VCS_ERROR): No pull request exists for the work item on the source branch.`, with `.result.errorType` / `.result.errorDetails` populated in `--json`. STOP — do not prepare/combine/promote. The `VCS_ERROR` case confirms the associated-PR requirement is enforced here.
|
|
92
|
+
|
|
93
|
+
---
|
|
94
|
+
|
|
95
|
+
## Prepare
|
|
96
|
+
|
|
97
|
+
`--target-stage-id` is required (the pipeline stage the work item is being prepared to promote to).
|
|
98
|
+
|
|
99
|
+
```bash
|
|
100
|
+
sf devops work-item prepare --work-item-id 1fkxx0000000001AAA --target-stage-id 1QVxx0000000001AAA --target-org myorg --json
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
### JSON Output Schema
|
|
104
|
+
|
|
105
|
+
```json
|
|
106
|
+
{
|
|
107
|
+
"status": 0,
|
|
108
|
+
"result": {
|
|
109
|
+
"workItemId": "1fkxx0000000001AAA",
|
|
110
|
+
"prepared": true
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
Idempotent — re-running a prepared work item is a safe no-op.
|
|
116
|
+
|
|
117
|
+
---
|
|
118
|
+
|
|
119
|
+
## Combine
|
|
120
|
+
|
|
121
|
+
Combine one or more child work items into a parent work item so they promote as a single unit. Repeat `--child-work-item-id` once per child.
|
|
122
|
+
|
|
123
|
+
```bash
|
|
124
|
+
sf devops work-item combine \
|
|
125
|
+
--parent-work-item-id 1fkxx0000000001AAA \
|
|
126
|
+
--child-work-item-id 1fkxx0000000002AAA \
|
|
127
|
+
--child-work-item-id 1fkxx0000000003AAA \
|
|
128
|
+
--target-stage-id 1QVxx0000000001AAA \
|
|
129
|
+
--target-org myorg \
|
|
130
|
+
--json
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
### Key Flags
|
|
134
|
+
|
|
135
|
+
| Flag | Description |
|
|
136
|
+
|------|-------------|
|
|
137
|
+
| `--parent-work-item-id` | The primary work item that continues through the pipeline |
|
|
138
|
+
| `--child-work-item-id` | A work item to merge into the parent (repeatable) |
|
|
139
|
+
| `--target-stage-id` | The pipeline stage to promote the combined unit to (required) |
|
|
140
|
+
| `-o, --target-org` | Target org alias |
|
|
141
|
+
|
|
142
|
+
After combining, promote the **parent** work item ID via `sf devops promote`.
|
|
143
|
+
|
|
144
|
+
---
|
|
145
|
+
|
|
146
|
+
## Promote (Async)
|
|
147
|
+
|
|
148
|
+
Exactly one of `--work-item-id` or `--stage-id` must be provided; they are mutually exclusive. `--target-stage-id` is always required. **Pass `--skip-validation` ONLY when the Phase 1 validate step completed successfully this session for every work item being promoted** — `promote`'s built-in pre-promote validation runs the *same* checks (including the associated-PR requirement) as `sf devops promotion validate`. When that validation already ran this session, skipping avoids a redundant re-run; but if the agent resumed mid-workflow or promotion was invoked without a preceding validate, OMIT the flag so the CLI validates.
|
|
149
|
+
|
|
150
|
+
### Promote one or more work items
|
|
151
|
+
|
|
152
|
+
```bash
|
|
153
|
+
sf devops promote \
|
|
154
|
+
--work-item-id 1fkxx0000000001AAA \
|
|
155
|
+
--target-stage-id 1QVxx0000000001AAA \
|
|
156
|
+
--skip-validation \
|
|
157
|
+
--target-org myorg \
|
|
158
|
+
--json
|
|
159
|
+
```
|
|
160
|
+
|
|
161
|
+
Repeat `--work-item-id` per item. For a combined promotion, pass the **parent** work item ID.
|
|
162
|
+
|
|
163
|
+
### Promote an entire source stage
|
|
164
|
+
|
|
165
|
+
```bash
|
|
166
|
+
sf devops promote \
|
|
167
|
+
--stage-id 1QVxx0000000000AAA \
|
|
168
|
+
--target-stage-id 1QVxx0000000001AAA \
|
|
169
|
+
--skip-validation \
|
|
170
|
+
--target-org myorg \
|
|
171
|
+
--json
|
|
172
|
+
```
|
|
173
|
+
|
|
174
|
+
### Key Flags
|
|
175
|
+
|
|
176
|
+
| Flag | Description |
|
|
177
|
+
|------|-------------|
|
|
178
|
+
| `-i, --work-item-id` | Work item to promote (repeatable, mutually exclusive with `--stage-id`) |
|
|
179
|
+
| `-s, --stage-id` | Source stage whose approved work items are promoted (mutually exclusive with `--work-item-id`) |
|
|
180
|
+
| `-t, --target-stage-id` | Destination pipeline stage (required) |
|
|
181
|
+
| `-a, --deploy-all` | Deploy all metadata in the branch, not just changes not yet in the target stage |
|
|
182
|
+
| `-l, --test-level` | Apex test level: `NoTestRun`, `RunSpecifiedTests`, `RunLocalTests`, `RunAllTestsInOrg` |
|
|
183
|
+
| `--tests` | Specific tests to run when `--test-level RunSpecifiedTests` |
|
|
184
|
+
| `--skip-validation` | Skip `promote`'s built-in pre-promote validation. It runs the same checks (including the associated-PR requirement) as `promotion validate`. Pass this ONLY when Phase 1 validate already ran successfully this session; omit it if promotion was invoked without a preceding validate (e.g. mid-workflow resume) so the CLI validates |
|
|
185
|
+
| `-o, --target-org` | Target org alias |
|
|
186
|
+
|
|
187
|
+
### JSON Output Schema
|
|
188
|
+
|
|
189
|
+
```json
|
|
190
|
+
{
|
|
191
|
+
"status": 0,
|
|
192
|
+
"result": {
|
|
193
|
+
"promotionId": "0Af000000000001AAA",
|
|
194
|
+
"sourceStageId": "1QVxx0000000000AAA",
|
|
195
|
+
"targetStageId": "1QVxx0000000001AAA",
|
|
196
|
+
"status": "InProgress"
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
```
|
|
200
|
+
|
|
201
|
+
- Async operation. Capture `.result.promotionId` (some CLI versions use `.result.asyncOperationId`).
|
|
202
|
+
- Poll the returned identifier separately to confirm completion — do NOT busy-wait here.
|
|
203
|
+
- After the deploy completes, run `sf devops promotion complete` to finalize.
|
|
204
|
+
|
|
205
|
+
---
|
|
206
|
+
|
|
207
|
+
## Promotion Complete
|
|
208
|
+
|
|
209
|
+
Finalize the promotion — advances the promoted work items in the target stage. Run after the promote deploy succeeds. `--target-stage-id` is required (the same target stage the work items were promoted to).
|
|
210
|
+
|
|
211
|
+
```bash
|
|
212
|
+
sf devops promotion complete --target-stage-id 1QVxx0000000001AAA --target-org myorg --json
|
|
213
|
+
```
|
|
214
|
+
|
|
215
|
+
### JSON Output Schema
|
|
216
|
+
|
|
217
|
+
```json
|
|
218
|
+
{
|
|
219
|
+
"status": 0,
|
|
220
|
+
"result": {
|
|
221
|
+
"completed": true,
|
|
222
|
+
"targetStageId": "1QVxx0000000001AAA"
|
|
223
|
+
}
|
|
224
|
+
}
|
|
225
|
+
```
|
|
226
|
+
|
|
227
|
+
---
|
|
228
|
+
|
|
229
|
+
## Error Handling
|
|
230
|
+
|
|
231
|
+
**Work item not found:**
|
|
232
|
+
```json
|
|
233
|
+
{ "status": 1, "name": "NOT_FOUND", "message": "Work item does not exist or is not accessible", "exitCode": 1 }
|
|
234
|
+
```
|
|
235
|
+
|
|
236
|
+
**Not prepared before promote:**
|
|
237
|
+
```json
|
|
238
|
+
{ "status": 1, "name": "NOT_PREPARED", "message": "Work item has not been prepared for promotion", "exitCode": 1 }
|
|
239
|
+
```
|
|
240
|
+
|
|
241
|
+
**Missing target stage:**
|
|
242
|
+
```json
|
|
243
|
+
{ "status": 1, "name": "MissingRequiredFlag", "message": "Missing required flag --target-stage-id", "exitCode": 1 }
|
|
244
|
+
```
|
|
245
|
+
|
|
246
|
+
**Conflict on deploy:**
|
|
247
|
+
```json
|
|
248
|
+
{ "status": 1, "name": "DEPLOY_CONFLICT", "message": "Metadata conflict detected during deployment", "exitCode": 1 }
|
|
249
|
+
```
|
|
250
|
+
|
|
251
|
+
**Authentication failure:**
|
|
252
|
+
```json
|
|
253
|
+
{ "status": 1, "name": "NoOrgFound", "message": "No org configuration found for target-org. Run 'sf org login web' to authenticate.", "exitCode": 1 }
|
|
254
|
+
```
|
|
255
|
+
|
|
256
|
+
---
|
|
257
|
+
|
|
258
|
+
## Parsing Async Promotion IDs
|
|
259
|
+
|
|
260
|
+
```bash
|
|
261
|
+
# Promote and capture the promotion ID for status polling.
|
|
262
|
+
# --skip-validation is shown here because this snippet assumes Phase 1 validate
|
|
263
|
+
# already passed this session; OMIT it if promotion is invoked without a
|
|
264
|
+
# preceding validate (e.g. a mid-workflow resume).
|
|
265
|
+
PROMOTION_ID=$(sf devops promote \
|
|
266
|
+
--work-item-id 1fkxx0000000001AAA \
|
|
267
|
+
--target-stage-id 1QVxx0000000001AAA \
|
|
268
|
+
--skip-validation \
|
|
269
|
+
--target-org myorg \
|
|
270
|
+
--json | jq -r '.result.promotionId // .result.asyncOperationId')
|
|
271
|
+
|
|
272
|
+
echo "Promotion initiated. Promotion ID: $PROMOTION_ID"
|
|
273
|
+
# Poll this ID separately, then run: sf devops promotion complete --target-stage-id 1QVxx0000000001AAA --target-org myorg --json
|
|
274
|
+
```
|
|
275
|
+
|
|
276
|
+
---
|
|
277
|
+
|
|
278
|
+
## Resolving Names to IDs
|
|
279
|
+
|
|
280
|
+
Promotion commands need record IDs. Resolve a project name and work item subject/name to IDs first:
|
|
281
|
+
|
|
282
|
+
```bash
|
|
283
|
+
# List projects to resolve a project name to an ID
|
|
284
|
+
# (project list returns .result.projects[] with capitalized .Id / .Name)
|
|
285
|
+
sf devops project list --json | jq -r '.result.projects[] | "\(.Id): \(.Name)"'
|
|
286
|
+
|
|
287
|
+
# Resolve a work item subject to its ID
|
|
288
|
+
# (work-item list returns .result.workItems[] with .id / .subject)
|
|
289
|
+
sf devops work-item list --project-id <project-id> --json | \
|
|
290
|
+
jq -r '.result.workItems[] | select(.subject == "<subject>") | .id'
|
|
291
|
+
```
|
|
292
|
+
|
|
293
|
+
---
|
|
294
|
+
|
|
295
|
+
## Authentication Requirements
|
|
296
|
+
|
|
297
|
+
All promotion commands require:
|
|
298
|
+
|
|
299
|
+
1. **Authenticated org**: `sf org login web` or JWT auth (for CI)
|
|
300
|
+
2. **DevOps Center enabled**: org must have DOCe provisioned
|
|
301
|
+
3. **Promotion permissions**: user/service account must be able to promote in the target pipeline
|
|
302
|
+
|
|
303
|
+
Auth is the caller's responsibility — these skills contain no auth logic. In CI, use a JWT-authenticated service-account alias with least-privilege scopes.
|
|
@@ -0,0 +1,176 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: experience-lwc-base-components-integrate
|
|
3
|
+
description: "Pick the right Lightning Base Component (`lightning-*`) for a given UI task, retrieve its full API (props, methods, events, slots) from the bundled per-component reference, and wire it into an LWC (LWC `.html`, `.js`, and `.css` files) without breaking SLDS. Use this skill when users say \"I need a Lightning modal / datatable / combobox / record form\", ask which `lightning-*` component fits a use case, want a shortlist of LBC candidates, are about to hand-roll a UI that a base component already provides, or are editing an LWC bundle's `.html` / `.js` / `.css` and need to select or wire a base component. Also triggers on \"Lightning base component\", \"LBC\", \"lightning-combobox\", \"lightning-datatable\", \"use `lightning-` tag\". DO NOT TRIGGER for applying SLDS design tokens, blueprints, or styling guidance in general — that is `design-systems-slds-apply`; this skill only selects and wires `lightning-*` base components."
|
|
4
|
+
metadata:
|
|
5
|
+
version: "1.0"
|
|
6
|
+
relatedSkills:
|
|
7
|
+
- design-systems-slds-apply
|
|
8
|
+
---
|
|
9
|
+
<!-- adk-managed-skill -->
|
|
10
|
+
|
|
11
|
+
# Using Lightning Base Components
|
|
12
|
+
|
|
13
|
+
Lightning Base Components (LBC) are the `lightning-*` web components shipped
|
|
14
|
+
by Salesforce. This skill routes an agent through the right decision sequence
|
|
15
|
+
so the final component choice is **as specific as possible** and backed by
|
|
16
|
+
real API docs — not a hand-rolled reimplementation of something that already
|
|
17
|
+
exists.
|
|
18
|
+
|
|
19
|
+
## When to Use This Skill
|
|
20
|
+
|
|
21
|
+
- User describes a UI need ("searchable dropdown", "record edit form",
|
|
22
|
+
"modal with footer") and asks which `lightning-*` component fits.
|
|
23
|
+
- User is about to build a primitive (button group, combobox, toast) and
|
|
24
|
+
should be using LBC instead.
|
|
25
|
+
- User asks you to review LWC markup for LBC-related issues — specifically
|
|
26
|
+
overriding SLDS classes or restyling LBC internals.
|
|
27
|
+
- User needs the authoritative props/events/slots for a specific
|
|
28
|
+
`lightning-*` tag.
|
|
29
|
+
|
|
30
|
+
## Prerequisites
|
|
31
|
+
|
|
32
|
+
- Knowledge of which LBC namespace your org uses (`lightning` is the default
|
|
33
|
+
public namespace; some platforms expose `lightning-community` or others —
|
|
34
|
+
the user's meta files will clarify).
|
|
35
|
+
- The skill ships authoritative API docs for every Lightning Base Component
|
|
36
|
+
in [references/lightning-components.md](references/lightning-components.md).
|
|
37
|
+
Each component is a `# Component API Structure` block; grep for
|
|
38
|
+
`**Name:** <camelCaseName>` (e.g. `**Name:** datatable`) to jump to its
|
|
39
|
+
Properties / Methods / Events / Slots. Read this rather than relying on
|
|
40
|
+
cached knowledge — LBC evolves and the reference is the source of truth.
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
## Workflow
|
|
44
|
+
|
|
45
|
+
### Step 1 — Read the **entire** component index first
|
|
46
|
+
|
|
47
|
+
Open [lightning-component-index.md](references/lightning-component-index.md)
|
|
48
|
+
and scan **all** entries before making any selection. This is non-negotiable:
|
|
49
|
+
LBC's value comes from picking the most specialized component, and skipping
|
|
50
|
+
the scan leads to reinventing compound widgets out of primitives.
|
|
51
|
+
|
|
52
|
+
As you scan, compile a **candidate list** — every component whose description
|
|
53
|
+
touches any aspect of the use case. Do not filter or rank yet.
|
|
54
|
+
|
|
55
|
+
### Step 2 — Narrow to the most specific fit per feature
|
|
56
|
+
|
|
57
|
+
Once the scan is complete:
|
|
58
|
+
|
|
59
|
+
- For each feature in the use case, select the **most specific** component
|
|
60
|
+
that covers it. Prefer a specialized compound (`lightning-record-form`,
|
|
61
|
+
`lightning-tabset`, `lightning-datatable`) over a generic primitive
|
|
62
|
+
(`lightning-input`, `lightning-button`) when the specialized one covers
|
|
63
|
+
the scenario end-to-end.
|
|
64
|
+
- Avoid duplication: if `lightning-record-form` already renders fields for a
|
|
65
|
+
record, do not pair it with `lightning-input-field` unless you're
|
|
66
|
+
explicitly overriding behavior.
|
|
67
|
+
|
|
68
|
+
### Step 3 — Share the shortlist and confirm
|
|
69
|
+
|
|
70
|
+
Present the final shortlist to the developer with a one-line rationale per
|
|
71
|
+
component. Wait for explicit confirmation before pulling full API docs. This
|
|
72
|
+
prevents the agent from burning context on components the developer has
|
|
73
|
+
already mentally ruled out.
|
|
74
|
+
|
|
75
|
+
### Step 4 — Retrieve full API docs
|
|
76
|
+
|
|
77
|
+
Once confirmed, use the bundled helper to pull the exact API blocks — this
|
|
78
|
+
avoids ad-hoc grepping across a large reference:
|
|
79
|
+
|
|
80
|
+
```bash
|
|
81
|
+
scripts/extract-component-docs.sh <camelCaseName> [<camelCaseName>...]
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
Convert `lightning-<foo>` tags to camelCase (no `lightning-` prefix):
|
|
85
|
+
|
|
86
|
+
- `lightning-datatable` → `datatable`
|
|
87
|
+
- `lightning-record-edit-form` → `recordEditForm`
|
|
88
|
+
- `lightning-button-icon` → `buttonIcon`
|
|
89
|
+
|
|
90
|
+
Each returned block has the same shape: **Basic Information** (tag, namespace,
|
|
91
|
+
type), **Properties** (name, type, default, description), **Methods**,
|
|
92
|
+
**Events**, **Slots**, and (where applicable) usage notes. This skill is about
|
|
93
|
+
**picking** the components; the bundled reference is about **wiring** them.
|
|
94
|
+
|
|
95
|
+
### Step 5 — Produce integration guidance
|
|
96
|
+
|
|
97
|
+
Using the per-component reference, walk the developer through:
|
|
98
|
+
|
|
99
|
+
- The exact `<lightning-...>` tag and required attributes.
|
|
100
|
+
- Which events to bind (`onchange`, `oncommit`, `onsuccess`, …) and what
|
|
101
|
+
the event payload contains.
|
|
102
|
+
- Any slots to fill (headers, footers, custom content).
|
|
103
|
+
- Known constraints from the component docs (e.g. `lightning-record-form`
|
|
104
|
+
requires `object-api-name` and `record-id` for edit/view modes).
|
|
105
|
+
|
|
106
|
+
### Step 6 — Respect LBC styling rules
|
|
107
|
+
|
|
108
|
+
Do not override SLDS classes on LBC internals. See
|
|
109
|
+
[lbc-expert-guidance.md](references/lbc-expert-guidance.md) for specifics.
|
|
110
|
+
Common issues:
|
|
111
|
+
|
|
112
|
+
- Targeting `.slds-button` or `.slds-input` in the host component's CSS to
|
|
113
|
+
restyle an LBC — LBC ships inside a shadow root, so these selectors
|
|
114
|
+
either leak into sibling components or get stripped entirely. Use the
|
|
115
|
+
component's documented styling hooks (`--sds-c-button-*`, etc.) instead.
|
|
116
|
+
- Wrapping an LBC just to mutate its internal markup. You can't — the
|
|
117
|
+
markup is hidden behind the shadow root. If the component doesn't expose
|
|
118
|
+
the slot/prop you need, that's a platform-level gap, not a restyling job.
|
|
119
|
+
|
|
120
|
+
|
|
121
|
+
## Examples
|
|
122
|
+
|
|
123
|
+
### Example — "I need a multi-select combobox with typeahead"
|
|
124
|
+
|
|
125
|
+
1. Scan the component index end-to-end.
|
|
126
|
+
2. Candidate list includes: `lightning-combobox`, `lightning-dual-listbox`,
|
|
127
|
+
`lightning-record-picker`.
|
|
128
|
+
3. Shortlist: `lightning-dual-listbox` (the documented multi-select base
|
|
129
|
+
component). Rule out `lightning-combobox` — its documented API is
|
|
130
|
+
single-select; it has no `type="multi"` and no multi-select mode.
|
|
131
|
+
Flag that `lightning-record-picker` only fits if the values are record IDs.
|
|
132
|
+
4. Developer confirms `lightning-dual-listbox`.
|
|
133
|
+
5. Run `scripts/extract-component-docs.sh dualListbox`.
|
|
134
|
+
6. Return the `options`, `value`, `onchange` payload, and required label
|
|
135
|
+
props from the block's Properties / Events sections.
|
|
136
|
+
|
|
137
|
+
### Example — "I'm going to write my own modal"
|
|
138
|
+
|
|
139
|
+
1. Scan finds `lightning-modal`, `lightning-modal-body`,
|
|
140
|
+
`lightning-modal-footer`, `lightning-modal-header`.
|
|
141
|
+
2. Shortlist is the 4 modal components.
|
|
142
|
+
3. Confirm.
|
|
143
|
+
4. Run `scripts/extract-component-docs.sh modal modalHeader modalBody modalFooter`
|
|
144
|
+
→ full modal API (how to extend `LightningModal`, the static `.open()`
|
|
145
|
+
pattern, slotting the header/body/footer).
|
|
146
|
+
5. Steer the developer away from rolling their own dialog.
|
|
147
|
+
|
|
148
|
+
|
|
149
|
+
## Verification Checklist
|
|
150
|
+
|
|
151
|
+
- [ ] The full component index was scanned before any selection (no
|
|
152
|
+
keyword-search shortcutting).
|
|
153
|
+
- [ ] Candidate list included every component that touches the use case.
|
|
154
|
+
- [ ] Final shortlist selects the **most specific** component per feature.
|
|
155
|
+
- [ ] Developer confirmed the shortlist before the bundled component
|
|
156
|
+
reference was opened.
|
|
157
|
+
- [ ] Integration guidance cites props / events / slots from the real API
|
|
158
|
+
docs (not inferred).
|
|
159
|
+
- [ ] No suggestions to restyle LBC by overriding SLDS classes.
|
|
160
|
+
|
|
161
|
+
|
|
162
|
+
## Troubleshooting
|
|
163
|
+
|
|
164
|
+
- **Grep for `**Name:** <name>` returns no match** — name is wrong, or the
|
|
165
|
+
reference uses a different camelCase. Double-check against the component
|
|
166
|
+
index (`lightning-record-form` → `recordForm`,
|
|
167
|
+
`lightning-record-view-form` → `recordViewForm`,
|
|
168
|
+
`lightning-button-icon` → `buttonIcon`).
|
|
169
|
+
- **Proposed component doesn't have the prop you expected** — trust the
|
|
170
|
+
real API doc over memory. LBC evolves; cached knowledge lies.
|
|
171
|
+
- **Developer resists the shortlist** — don't skip Step 4. Still retrieve
|
|
172
|
+
the docs for the developer's preferred choice so they see the actual
|
|
173
|
+
trade-offs.
|
|
174
|
+
- **Developer wants to restyle LBC internals** — redirect to styling hooks
|
|
175
|
+
(see the LBC Expert reference). Refusing shadow DOM penetration is the
|
|
176
|
+
correct answer.
|
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
# Lightning Base Component Styling Guidelines
|
|
2
|
+
|
|
3
|
+
## Description
|
|
4
|
+
|
|
5
|
+
Styling guidelines for Lightning Web Components that consume Lightning Base Components: when component CSS layers custom styles on top of `lightning-*` components, certain SLDS-class usage patterns break the SLDS contract and must be rewritten to use component-owned custom classes.
|
|
6
|
+
|
|
7
|
+
## The core rule
|
|
8
|
+
|
|
9
|
+
Never target an SLDS class (`.slds-*`) in a component's CSS, either directly or as part of a compound selector. SLDS classes are owned by SLDS and may change their internal styling at any time; overriding them invalidates the SLDS guarantee.
|
|
10
|
+
|
|
11
|
+
## Scope
|
|
12
|
+
|
|
13
|
+
These guidelines apply when:
|
|
14
|
+
|
|
15
|
+
- The LWC uses one or more `lightning-*` Base Components, AND
|
|
16
|
+
- The component CSS contains selectors that include `.slds-*` class names.
|
|
17
|
+
|
|
18
|
+
## Fix pattern
|
|
19
|
+
|
|
20
|
+
Replace direct or compound SLDS-class selectors with component-owned custom classes. The fix always touches **both** the HTML template (to add the custom class) and the CSS (to retarget the selector).
|
|
21
|
+
|
|
22
|
+
### Example — overriding SLDS class properties directly
|
|
23
|
+
|
|
24
|
+
**Before**
|
|
25
|
+
|
|
26
|
+
CSS:
|
|
27
|
+
|
|
28
|
+
```css
|
|
29
|
+
.slds-button {
|
|
30
|
+
background: pink;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.slds-component_active .slds-combobox {
|
|
34
|
+
display: block;
|
|
35
|
+
}
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
HTML:
|
|
39
|
+
|
|
40
|
+
```html
|
|
41
|
+
<template>
|
|
42
|
+
<button class="slds-button">Click me</button>
|
|
43
|
+
<div class="slds-component_active slds-combobox">I'm going to display something based on state</div>
|
|
44
|
+
</template>
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
**Problem:** the CSS overrides SLDS styles directly. This invalidates the SLDS contract and breaks under SLDS internal changes.
|
|
48
|
+
|
|
49
|
+
**After**
|
|
50
|
+
|
|
51
|
+
HTML — add custom classes alongside the existing SLDS classes:
|
|
52
|
+
|
|
53
|
+
```html
|
|
54
|
+
<template>
|
|
55
|
+
<button class="slds-button primary-button">Click me</button>
|
|
56
|
+
<div class="slds-component_active slds-combobox active-display">I'm going to display something based on state</div>
|
|
57
|
+
</template>
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
CSS — target the custom classes, with the SLDS classes removed from the selectors entirely:
|
|
61
|
+
|
|
62
|
+
```css
|
|
63
|
+
.primary-button {
|
|
64
|
+
background: pink;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.active-display {
|
|
68
|
+
display: block;
|
|
69
|
+
}
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
### Key properties of the fix
|
|
73
|
+
|
|
74
|
+
- HTML: introduce a new custom class name (e.g. `primary-button`, `active-display`) on the element that needs styling.
|
|
75
|
+
- CSS: rewrite the selector to target the new custom class. The SLDS class is **completely removed** from the selector.
|
|
76
|
+
- Markup structure (tags, nesting, attributes other than `class`) is never changed.
|
|
77
|
+
|
|
78
|
+
## How to apply
|
|
79
|
+
|
|
80
|
+
For each LWC that uses a `lightning-*` Base Component, scan the CSS for selectors that contain `.slds-*` (direct or compound). For each occurrence, produce a paired HTML+CSS edit:
|
|
81
|
+
|
|
82
|
+
1. **HTML** — add a new custom class (kebab-case, component-scoped name) to the element being styled, alongside the existing SLDS class. Do not change tags, nesting, or any non-`class` attribute.
|
|
83
|
+
2. **CSS** — rewrite the selector to target the new custom class only. Remove the `.slds-*` segment from the selector entirely.
|
|
84
|
+
|
|
85
|
+
Produce one fix entry per violation with: file + line number for the HTML edit, file + line number for the CSS edit, and the corrected selector. Apply the same custom-class naming convention consistently across all violations in the same component.
|
|
86
|
+
|
|
87
|
+
### Example: component with SLDS class in CSS selector
|
|
88
|
+
|
|
89
|
+
**Component HTML:**
|
|
90
|
+
|
|
91
|
+
```html
|
|
92
|
+
<template>
|
|
93
|
+
<div class="fooDiv">
|
|
94
|
+
<button class="slds-button">Click me</button>
|
|
95
|
+
</div>
|
|
96
|
+
</template>
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
**Component CSS:**
|
|
100
|
+
|
|
101
|
+
```css
|
|
102
|
+
.fooDiv .slds-button {
|
|
103
|
+
background-color: red;
|
|
104
|
+
}
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
**Issue:** The CSS selector `.fooDiv .slds-button` targets the SLDS class directly. This overrides SLDS internal styles and breaks the SLDS contract.
|
|
108
|
+
|
|
109
|
+
**Fix:**
|
|
110
|
+
|
|
111
|
+
Add a custom class to the `button` element on line 3 of the HTML:
|
|
112
|
+
|
|
113
|
+
```html
|
|
114
|
+
<template>
|
|
115
|
+
<div class="fooDiv">
|
|
116
|
+
<button class="slds-button custom-button">Click me</button>
|
|
117
|
+
</div>
|
|
118
|
+
</template>
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
Retarget the CSS selector to the custom class:
|
|
122
|
+
|
|
123
|
+
```css
|
|
124
|
+
.custom-button {
|
|
125
|
+
background-color: red;
|
|
126
|
+
}
|
|
127
|
+
```
|