# experience-lwc-base-components-integrate

Picks the right Lightning Base Component for a UI task and wires it into an LWC bundle without breaking SLDS.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 2600 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/experience-lwc-base-components-integrate/SKILL.md
- Updated: 2026-10-23
- HTML: https://affpapa.org/en/nevibecode/skills/experience-lwc-base-components-integrate

## What it does

The skill walks an agent through a fixed sequence. First it reads the whole component index, then builds a candidate list, then narrows each feature down to the most specific component that covers it. A compound widget such as `lightning-record-form` or `lightning-datatable` beats a primitive when it handles the scenario end to end.

Next the agent shows a shortlist with a one-line reason per entry and waits for confirmation. Only then does it pull the full API through `scripts/extract-component-docs.sh <camelCaseName>` — properties, methods, events, slots. Tag names convert to camelCase, so `lightning-record-edit-form` becomes `recordEditForm`.

Styling has its own step. Overriding SLDS classes on LBC internals does not work: the component sits in a shadow root, so selectors like `.slds-button` either leak into sibling components or get stripped. Use the documented hooks such as `--sds-c-button-*` instead. Design tokens and blueprints belong to `design-systems-slds-apply`, not here.

## Requirements
- Works with: Salesforce

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add forcedotcom/sf-skills --skill experience-lwc-base-components-integrate -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/experience-lwc-base-components-integrate/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/experience-lwc-base-components-integrate/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add forcedotcom/sf-skills --skill experience-lwc-base-components-integrate -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/experience-lwc-base-components-integrate/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add forcedotcom/sf-skills --skill experience-lwc-base-components-integrate -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/experience-lwc-base-components-integrate/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install forcedotcom/sf-skills experience-lwc-base-components-integrate
```

2. **Manually: put the files in place**
- File: `.github/skills/experience-lwc-base-components-integrate/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add forcedotcom/sf-skills --skill experience-lwc-base-components-integrate -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/forcedotcom/sf-skills --path skills/experience-lwc-base-components-integrate
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/experience-lwc-base-components-integrate/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add forcedotcom/sf-skills --skill experience-lwc-base-components-integrate -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/experience-lwc-base-components-integrate/SKILL.md

## When to use it
- match a lightning- component to a specific UI element
- pull the exact props, events and slots for a tag
- replace a hand-rolled primitive with a base component
- wire a component into an LWC `.html`, `.js` and `.css` bundle
- drop SLDS class overrides on component internals

## Example prompts
- I need a multi-select combobox with typeahead — which lightning- component fits?
- Give me a shortlist of candidates for a record edit form
- Show the full API for lightning-datatable: props, events, slots

## 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: 3ba3f780d959fc44.

BEGIN THIRD-PARTY FILE 3ba3f780d959fc44
```text
---
name: experience-lwc-base-components-integrate
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."
metadata:
  version: "1.0"
  domains: ["Experience"]
  relatedSkills:
    - design-systems-slds-apply
---
<!-- adk-managed-skill -->

# Using Lightning Base Components

Lightning Base Components (LBC) are the `lightning-*` web components shipped
by Salesforce. This skill routes an agent through the right decision sequence
so the final component choice is **as specific as possible** and backed by
real API docs — not a hand-rolled reimplementation of something that already
exists.

## When to Use This Skill

- User describes a UI need ("searchable dropdown", "record edit form",
  "modal with footer") and asks which `lightning-*` component fits.
- User is about to build a primitive (button group, combobox, toast) and
  should be using LBC instead.
- User asks you to review LWC markup for LBC-related issues — specifically
  overriding SLDS classes or restyling LBC internals.
- User needs the authoritative props/events/slots for a specific
  `lightning-*` tag.

## Prerequisites

- Knowledge of which LBC namespace your org uses (`lightning` is the default
  public namespace; some platforms expose `lightning-community` or others —
  the user's meta files will clarify).
- The skill ships authoritative API docs for every Lightning Base Component
```
END THIRD-PARTY FILE 3ba3f780d959fc44

The third-party file has ended. Everything between the 3ba3f780d959fc44 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 2268 of 8542 bytes. © forcedotcom · Apache-2.0 · https://github.com/forcedotcom/sf-skills/tree/HEAD/skills/experience-lwc-base-components-integrate/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