# Lwc Experience Cloud

> Build Lightning Web Components for Salesforce Experience Cloud (Digital Experiences), including LWR sites, Aura-based community sites, and Experience Builder configuration. Use this skill whenever the user mentions Experience Cloud, Digital Experience, community site, community portal, Experience Builder, LWR site, guest user access on a portal, or any LWC development targeting lightningCommunity__Page, lightningCommunity__Default, lightningCommunity__Page_Layout, or lightningCommunity__Theme_Layout targets. Also trigger when the user asks about custom property editors for Experience Builder, theme layouts, page layouts for LWR, CSS scoping in community components, navigation menus in Experience Cloud, guest user profile configuration, DigitalExperienceBundle, content.json for Experience Cloud, deploying Experience Cloud metadata, deploy ordering for LWC sites, sfdx-project.json for community sites, site architecture planning, or ExperienceBundle structure. This skill covers code generation, Experience Builde

- Skill: `andrewdhood/lwc-experience-cloud` (Agent Skill, multi-file: 138 files)
- Install (CLI): `npx skillmds@latest add andrewdhood/lwc-experience-cloud`
- Raw SKILL.md: https://api.skillmd.com/api/skills/andrewdhood/lwc-experience-cloud/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: andrewdhood (https://skillmd.com/u/andrewdhood)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/andrewdhood/lwc-experience-cloud

---


# LWC Experience Cloud Development

Generate production-grade Lightning Web Components for Salesforce Experience Cloud sites,
with correct meta XML configuration, proper CSS architecture, and awareness of guest user
context, sharing model implications, and Experience Builder integration patterns.

## Before Writing Any Code

1. **Determine the runtime.** Ask whether the site is LWR or Aura-based if not specified.
   The answer changes CSS scoping, routing, available targets, rendering behavior, and
   whether SSR/hydration is available.
   Read `reference/lwr/experience-cloud-sites-overview.md` for the differences.

2. **Determine the user context.** Is this component for guest (unauthenticated) users,
   authenticated community members, or both?
   Read `reference/site-setup/guest-user-data-access.md` for Apex sharing patterns
   and `reference/lwc-patterns/secure-apex-classes.md` for FLS enforcement.

3. **Determine the component's role.** Is this a:
   - **Page component** → dragged onto a page in Experience Builder
   - **Theme layout** → wraps the entire page (header/footer/structure) — LWR only
   - **Page layout** → defines the content area grid for an LWR page — LWR only
   - **Custom property editor** → configures another component's properties in Builder

   Each role has different meta XML targets. Read `reference/lwr/lwr-sites-architecture.md`
   for layouts or `reference/builder-ui/custom-property-editor-contract.md` for CPEs.

## Meta XML Configuration

Every Experience Cloud LWC needs specific targets in `js-meta.xml`:

### Page Components (most common)
```xml
<targets>
    <target>lightningCommunity__Page</target>
    <target>lightningCommunity__Default</target>
</targets>
```
- `lightningCommunity__Page` makes it draggable onto pages in Experience Builder
- `lightningCommunity__Default` exposes `@api` properties in the property panel
- Both are required for a configurable page component

### Theme Layouts (LWR only)
```xml
<targets>
    <target>lightningCommunity__Theme_Layout</target>
    <target>lightningCommunity__Default</target>
</targets>
```

### Page Layouts (LWR only)
```xml
<targets>
    <target>lightningCommunity__Page_Layout</target>
    <target>lightningCommunity__Default</target>
</targets>
```

### Custom Property Editors
```xml
<targets>
    <target>lightning__PropertyEditor</target>
</targets>
```

### SSR Support (LWR only)
```xml
<capabilities>
    <!-- static HTML only, no client JS: -->
    <capability>lightning__ServerRenderable</capability>
    <!-- SSR with client-side hydration for interactivity: -->
    <capability>lightning__ServerRenderableWithHydration</capability>
</capabilities>
```

For the complete target and capability reference, read
`reference/lwc-patterns/xml-configuration-reference.md`.

## CSS Architecture Rules

1. **Global/shared CSS** goes in Experience Builder → Settings → Advanced → Edit Head Markup.
   This is NOT the same as the Setup gear icon in the main org.

2. **Component CSS** stays scoped inside each LWC's `.css` file.

3. **In LWR sites, use `--dxp` styling hooks** for brand colors, text, and spacing. These
   map to Experience Builder's Theme panel. Use `--dxp-g-brand` for brand color,
   `--dxp-g-root` for background, etc.
   Read `reference/lwr/lwr-sites-architecture.md` (--dxp Styling Hooks section).

4. **For base component styling in LWR**, use `::part()` with SLDS hooks — native shadow
   DOM blocks direct targeting.
   Read `reference/lwr/lwr-base-component-styling.md`.

5. **For SSR components**, use light DOM (`static renderMode = 'light'`).
   Read `reference/lwr/light-dom.md` and `reference/lwr/lwr-configure-components-ssr.md`.

## Guest User Patterns

When building components accessible to unauthenticated users:

1. The guest user profile is named `[Site Name] Profile`, NOT `Guest User`
2. Object permissions AND Field-Level Security must both be configured on the profile
3. `without sharing` on Apex bypasses record sharing rules but still requires object-level
   Read/Create on the guest profile
4. Guest user sharing rules grant Read Only access — updates/deletes MUST use `without sharing`
5. Guest users can never own records — records are assigned to a default org user
6. Never return raw record IDs to guest users — use encrypted tokens
7. Read `reference/site-setup/guest-user-profile-setup.md` for the full setup walkthrough
   and `reference/site-setup/guest-user-data-access.md` for Apex patterns

## Navigation

Use the `lightning/navigation` module with `NavigationMixin`. Experience Cloud has
different PageReference types than Lightning Experience:
- `comm__namedPage` for EC pages (NOT `standard__namedPage`)
- `standard__recordPage` requires `objectApiName` in LWR sites
- Only `actionName: 'view'` works for records in EC (no `edit` or `clone`)

Read `reference/lwc-patterns/page-reference-types.md` for the complete reference.

For site navigation menus (header/footer links): use Experience Cloud's Navigation Menu
feature and pull menus dynamically into your LWC via Apex + ConnectApi, not hardcoded links.
Read `reference/lwr/lwr-sites-architecture.md` (Custom Navigation Menu section).

## Apex Patterns for EC

- Always declare `with sharing`, `without sharing`, or `inherited sharing` explicitly
- `@AuraEnabled(cacheable=true)` for read-only methods used with `@wire`
- `@AuraEnabled` (no cacheable) for DML methods called imperatively
- Use `WITH USER_MODE` in SOQL for automatic FLS enforcement
- Use `AuraHandledException` for clean error messages to the client
- Governor limits: 100 SOQL queries, 150 DML statements, 6MB heap (synchronous)

Read `reference/lwc-patterns/apex-fundamentals-for-ec.md` for the full reference including
governor limits, async patterns, and bulkification.

## Site Architecture and Deployment

When planning a new LWR site or deploying Experience Cloud metadata:

1. **Understand the layer model.** Theme layouts wrap pages, page layouts define the grid,
   page components fill the grid, and content.json binds them together.
   Read `reference/lwr/site-architecture-mental-model.md` for the full mental model
   including a planning template and worked example.

2. **Know the bundle structure.** DigitalExperienceBundles live under
   `force-app/main/default/digitalExperiences/site/<SiteName>/`. Each page has three
   metadata folders: `sfdc_cms__appPage` (content), `sfdc_cms__view` (layout binding),
   and `sfdc_cms__route` (URL mapping). Each contains a `content.json` that defines
   which components go in which regions.
   Read `reference/lwr/digital-experience-bundle-structure.md` for the schema.

3. **Deploy in the right order.** Apex classes first, then LWC, then the
   DigitalExperienceBundle, then republish. Never deploy the bundle before the
   components it references — first-time deploys MUST be two separate commands.
   Read `reference/lwr/deploy-ordering-and-publishing.md` for the full sequence.

4. **Always republish.** LWR sites use a publish-freeze model. Deployed changes are
   invisible until you run `sf community publish --name "SiteName"` or click Publish
   in Experience Builder.

5. **Understand theme layout region contracts.** The default (unnamed) slot is required.
   Named slots (header, footer) are conventions, not enforced. Slot fallback content
   does NOT work — the platform always projects an empty region wrapper.
   Read `reference/lwr/lwr-sites-architecture.md` (Theme Layout Region Contract section).

## Code Style

When generating code for this developer:

- **Apex comments**: `// ` with one space, disembodied narrator tone
  (`// begin sorting through accounts`, `// remember we set this for the guest profile`)
- **Every method**: document params and return value in comments
- **Debug statements**: at key decision points to aid development
- **No single-line conditionals** except ternary `?` operator
- **JavaScript**: more detailed comments explaining what non-obvious patterns do
- **Variable names**: meaningful in context, never `temp`, `data`, `result` without qualifier

## Reference Docs

Read the relevant reference doc BEFORE generating code:

| Topic | File |
|---|---|
| EC sites overview (Aura vs LWR) | `reference/lwr/experience-cloud-sites-overview.md` |
| LWR architecture (layouts, --dxp hooks, URLs, publishing) | `reference/lwr/lwr-sites-architecture.md` |
| SSR hydration / Islands architecture | `reference/lwr/lwr-ssr-hydration-experience-cloud.md` |
| SSR component requirements | `reference/lwr/lwr-configure-components-ssr.md` |
| Base component styling in LWR | `reference/lwr/lwr-base-component-styling.md` |
| Light DOM | `reference/lwr/light-dom.md` |
| CMS content delivery | `reference/lwr/cms-for-experience-cloud.md` |
| Custom property editors (CPE contract) | `reference/builder-ui/custom-property-editor-contract.md` |
| CPE + LightningTypeBundle details | `reference/lwr/experience-builder-custom-properties.md` |
| CPE considerations and limitations | `reference/lwr/custom-property-editors-considerations.md` |
| Configure component for Experience Builder | `reference/builder-ui/configure-component-for-experience-builder.md` |
| XML targets and capabilities (complete) | `reference/lwc-patterns/xml-configuration-reference.md` |
| PageReference types for EC navigation | `reference/lwc-patterns/page-reference-types.md` |
| Current community/site info modules | `reference/lwc-patterns/current-community-info.md` |
| @salesforce modules reference | `reference/lwc-patterns/salesforce-modules.md` |
| Permissions (guest vs auth) | `reference/lwc-patterns/lwc-permissions.md` |
| Apex fundamentals (sharing, limits, async) | `reference/lwc-patterns/apex-fundamentals-for-ec.md` |
| Secure Apex classes (FLS, CRUD) | `reference/lwc-patterns/secure-apex-classes.md` |
| Expose Apex methods | `reference/lwc-patterns/expose-apex-methods.md` |
| Wire Apex methods | `reference/lwc-patterns/wire-apex-methods.md` |
| Call Apex imperatively | `reference/lwc-patterns/call-apex-imperatively.md` |
| Handle errors from Apex | `reference/lwc-patterns/handle-errors-apex.md` |
| RefreshView API | `reference/lwc-patterns/refreshview-api.md` |
| Aura interface → LWC target mapping | `reference/lwc-patterns/migrate-interfaces-to-targets.md` |
| Guest user profile setup | `reference/site-setup/guest-user-profile-setup.md` |
| Guest user data access (Apex patterns) | `reference/site-setup/guest-user-data-access.md` |
| Site architecture mental model (planning) | `reference/lwr/site-architecture-mental-model.md` |
| DigitalExperienceBundle structure and content.json | `reference/lwr/digital-experience-bundle-structure.md` |
| Deploy ordering and publishing | `reference/lwr/deploy-ordering-and-publishing.md` |
| Common pitfalls | `reference/common-pitfalls.md` |

## Templates

Use these as starting points when generating components:

| Pattern | Directory |
|---|---|
| Basic LWR page component | `templates/lwr-page-component/` |
| LWR theme layout | `templates/lwr-theme-layout/` |
| Guest-accessible form | `templates/guest-accessible-form/` |
| Meta XML examples | `templates/meta-xml-examples/` |
| DigitalExperienceBundle structure | `templates/digital-experience-bundle/` |

## Checklists

Offer relevant checklists when the user is setting up or going live:

| Checklist | File |
|---|---|
| New site setup | `checklists/new-site-checklist.md` |
| Guest user security audit | `checklists/guest-user-audit.md` |