lwc-navigation-mixin

NavigationMixin for LWC: PageReference types (recordPage, recordRelationship, namedPage, webPage, comm__namedPage), navigate vs generateUrl, state params, Experience Cloud variants. NOT for routing inside custom SPA (use lwc-state-management). NOT for cross-app deep-linking (use deep-linking-patterns).

Best use case

lwc-navigation-mixin is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

NavigationMixin for LWC: PageReference types (recordPage, recordRelationship, namedPage, webPage, comm__namedPage), navigate vs generateUrl, state params, Experience Cloud variants. NOT for routing inside custom SPA (use lwc-state-management). NOT for cross-app deep-linking (use deep-linking-patterns).

Teams using lwc-navigation-mixin should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

  • You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

  • You only need a quick one-off answer and do not need a reusable workflow.
  • You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/lwc-navigation-mixin/SKILL.md --create-dirs "https://raw.githubusercontent.com/PranavNagrecha/AwesomeSalesforceSkills/main/skills/lwc/lwc-navigation-mixin/SKILL.md"

Manual Installation

  1. Download SKILL.md from GitHub
  2. Place it in .claude/skills/lwc-navigation-mixin/SKILL.md inside your project
  3. Restart your AI agent — it will auto-discover the skill

How lwc-navigation-mixin Compares

Feature / Agentlwc-navigation-mixinStandard Approach
Platform SupportNot specifiedLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/A

Frequently Asked Questions

What does this skill do?

NavigationMixin for LWC: PageReference types (recordPage, recordRelationship, namedPage, webPage, comm__namedPage), navigate vs generateUrl, state params, Experience Cloud variants. NOT for routing inside custom SPA (use lwc-state-management). NOT for cross-app deep-linking (use deep-linking-patterns).

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# LWC NavigationMixin

Activate when an LWC needs to navigate — to a record, a list view, a named page, or an external URL. `NavigationMixin` is the canonical Salesforce API for navigation; raw `window.location` usage is forbidden on most surfaces and bypasses Salesforce's routing, tab, and mobile handling.

## Before Starting

- **Import the mixin correctly.** `import { NavigationMixin } from 'lightning/navigation';` and apply with `extends NavigationMixin(LightningElement)`.
- **Pick the right PageReference type.** Internal app vs Experience Cloud has different names (`standard__*` vs `comm__*`).
- **Distinguish `navigate()` vs `generateUrl()`.** Navigate triggers routing; generateUrl returns a URL promise for anchors, copy-to-clipboard, etc.

## Core Concepts

### PageReference shape

```
{
    type: 'standard__recordPage',
    attributes: { recordId: '001...', objectApiName: 'Account', actionName: 'view' },
    state: { c__tab: 'details' }
}
```

`attributes` are type-specific; `state` flows through URL params as `c__*`.

### Internal vs Experience Cloud

- Internal: `standard__recordPage`, `standard__objectPage`, `standard__namedPage`, `standard__webPage`
- Experience Cloud: `comm__namedPage`, `comm__loginPage` (prefer over `standard__`)

### navigate vs generateUrl

```
this[NavigationMixin.Navigate](pageRef);                     // route now
this[NavigationMixin.GenerateUrl](pageRef).then(url => ...); // URL string
```

`GenerateUrl` is async (returns a Promise).

### New tab

Wrap in an `<a target="_blank" href={url}>` using `generateUrl`. The mixin has no direct "open in new tab" option.

## Common Patterns

### Pattern: Navigate to record view

```
const ref = { type: 'standard__recordPage',
    attributes: { recordId: this.recordId, objectApiName: 'Account', actionName: 'view' } };
this[NavigationMixin.Navigate](ref);
```

### Pattern: Generate URL for copy-to-clipboard

```
const url = await this[NavigationMixin.GenerateUrl](ref);
navigator.clipboard.writeText(window.location.origin + url);
```

### Pattern: State params for tab selection

```
{ type: 'standard__recordPage', attributes: { ... },
  state: { c__selectedTab: 'history' } }
```

Receiving component reads `@wire(CurrentPageReference) pageRef` and `pageRef.state.c__selectedTab`.

## Decision Guidance

| Target | PageReference type |
|---|---|
| Record view / edit | standard__recordPage |
| Object list view | standard__objectPage + list actionName |
| Custom Lightning component | standard__component |
| External URL | standard__webPage |
| Experience Cloud named page | comm__namedPage |
| Relative URL in Experience Cloud | comm__namedPage with pageName |

## Recommended Workflow

1. Identify target context (internal, Experience, mobile).
2. Pick PageReference type matching target and context.
3. Populate `attributes` (recordId, objectApiName, etc.) per type spec.
4. Use `state` for transient params (tab, filter).
5. Choose `Navigate` (immediate) or `GenerateUrl` (async).
6. For mobile deep-links, test via Mobile Publisher.
7. Never fall back to `window.location.href =` — breaks routing.

## Review Checklist

- [ ] NavigationMixin applied via `extends NavigationMixin(LightningElement)`
- [ ] PageReference type matches the surface (standard vs comm)
- [ ] Attributes populated with required keys
- [ ] State params prefixed `c__` where custom
- [ ] GenerateUrl used for hrefs; Navigate for routing
- [ ] No `window.location` fallbacks
- [ ] Experience Cloud deep-links tested in the Experience context
- [ ] Mobile app deep-links tested

## Salesforce-Specific Gotchas

1. **`state` param names must start with `c__`** unless using a framework-defined key.
2. **`standard__namedPage` cannot be used in Experience Cloud**; use `comm__namedPage`.
3. **GenerateUrl is async.** Awaiting is required; returning the promise without awaiting leaves consumers with `undefined`.

## Output Artifacts

| Artifact | Description |
|---|---|
| PageReference catalog | Type × attributes × surface |
| URL helper module | Reusable generateUrl wrappers |
| Deep-link test matrix | Internal / Experience / Mobile coverage |

## Related Skills

- `lwc/lwc-url-params-and-state` — state-param handling
- `admin/app-and-tab-configuration` — tab and app setup
- `mobile/mobile-deep-linking` — mobile-specific nav

Related Skills

navigation-and-routing

8
from PranavNagrecha/AwesomeSalesforceSkills

Use when implementing or reviewing Lightning Web Component navigation with `NavigationMixin`, PageReference objects, URL state, and `CurrentPageReference` across Lightning Experience, mobile, and Experience Cloud. Triggers: 'navigate to record page from LWC', 'PageReference state not working', 'should I use window.location', 'Experience Cloud navigation issue'. NOT for component-to-component messaging or data-loading strategy when navigation is only a side effect.

lightning-navigation-dead-link-handling

8
from PranavNagrecha/AwesomeSalesforceSkills

Use when an LWC navigates via NavigationMixin to records or pages that may no longer exist, lack the user's access, or be permanently moved. Triggers: 'lightning navigation 404', 'navigate to deleted record', 'NavigationMixin error toast', 'graceful fallback when target page missing', 'permission denied on navigation'. NOT for general routing within an SPA or for Experience Cloud public-facing routing.

xss-and-injection-prevention

8
from PranavNagrecha/AwesomeSalesforceSkills

Use when writing or reviewing Visualforce pages, Apex controllers, or LWC components that output user-supplied data, build dynamic queries, or construct HTTP responses. Triggers: 'XSS in Visualforce', 'SOQL injection vulnerability', 'how to encode output in Apex', 'JSENCODE Visualforce', 'open redirect prevention'. NOT for Apex CRUD/FLS enforcement (use soql-security or apex-crud-and-fls), NOT for Shield encryption (use shield-encryption-key-management), NOT for AppExchange security review process (use secure-coding-review-checklist).

visualforce-security-and-modernization

8
from PranavNagrecha/AwesomeSalesforceSkills

Use when hardening or modernizing legacy Visualforce pages — covers the platform CSRF token model and when disabling it is a security regression, view state encryption guarantees and the 170 KB ceiling, FLS/CRUD enforcement gaps on `<apex:outputField>` and on getters that return sObjects, `<apex:includeScript>` interaction with the org Content Security Policy, hosting LWC inside a VF page via `lightning:container` / `lightning-out`, and the retire-vs-harden-vs-leave-alone decision for an inventory of legacy pages. Triggers: 'should I rewrite this Visualforce page in LWC', 'CSRF protection disabled on Visualforce page is that safe', 'community user sees a field they should not on a Visualforce page', 'view state encryption is that enough for sensitive data', 'how do I host an LWC inside a Visualforce page', 'apex:dynamicComponent and apex:actionFunction safe to keep'. NOT for greenfield Visualforce architecture (use apex/visualforce-fundamentals — controller types, view state pattern selection, PDF rendering); NOT for Visualforce email template authoring (use apex/visualforce-email-templates if/when that skill is authored); NOT for general Apex security review across triggers and async (use apex/soql-security and security/secure-coding-review-checklist).

transaction-security-policies

8
from PranavNagrecha/AwesomeSalesforceSkills

Transaction Security policy creation and configuration: condition builder, enhanced policies, enforcement actions (block, MFA, notification, end session), real-time monitoring mode, and policy troubleshooting. NOT for Event Monitoring log analysis or Shield Event Monitoring setup (use event-monitoring). NOT for Apex testing or debug-log analysis.

sso-saml-troubleshooting

8
from PranavNagrecha/AwesomeSalesforceSkills

Diagnosing broken SAML SSO into Salesforce — IdP-initiated vs SP-initiated flows, signing-certificate validity / expiry, NameID format mismatches, RelayState handling, audience / entityId / issuer mismatches, clock skew, the SAML Assertion Validator in Setup, the Login History debug log, and the My Domain prerequisite for SSO. Covers the standard diagnostic loop: read the SAML response, identify which check failed, fix at the IdP or SP. NOT for OAuth / OpenID Connect SSO (see security/oauth-openid-troubleshooting), NOT for setting up SSO from scratch (see security/sso-saml-setup).

shield-kms-byok-setup

8
from PranavNagrecha/AwesomeSalesforceSkills

Configure Shield Platform Encryption with customer-supplied (BYOK) or customer-held (Cache-Only Key Service) tenant secrets, rotate them, and recover. NOT for Classic Encryption or field masking.

shield-event-log-retention-strategy

8
from PranavNagrecha/AwesomeSalesforceSkills

Use when designing Salesforce Shield Event Monitoring retention, SIEM routing, and storage-tier strategy — which event types to keep, for how long, where, and how to answer audit queries across hot/warm/cold tiers. Triggers: 'shield event log retention', 'route event monitoring to splunk', 'how long to keep login history', 'siem salesforce integration', 'event monitoring storage tier'. NOT for enabling Shield (see salesforce-shield-deployment).

session-management-and-timeout

8
from PranavNagrecha/AwesomeSalesforceSkills

Use this skill when configuring session timeout values, concurrent session limits, session IP locking, or logout behavior in Salesforce. Covers org-wide session settings, profile-level overrides, Connected App session policies, and Metadata API SecuritySettings deployment. NOT for OAuth token refresh flows, login IP ranges, or MFA/identity-provider configuration.

session-high-assurance-policies

8
from PranavNagrecha/AwesomeSalesforceSkills

Enforce step-up authentication for sensitive pages/objects using High Assurance session level and login flow policies. NOT for initial MFA enrollment UX.

service-account-credential-rotation

8
from PranavNagrecha/AwesomeSalesforceSkills

Use when designing credential rotation for integration users, connected apps, named credentials, and OAuth client secrets in Salesforce. Covers rotation cadence, zero-downtime handover, secret storage, and detection of stale credentials. Triggers: 'rotate integration user password', 'connected app secret rotation', 'named credential rotation', 'stale service account', 'zero downtime secret rotation'. NOT for end-user password policies.

security-incident-response

8
from PranavNagrecha/AwesomeSalesforceSkills

When to use: active or suspected Salesforce org compromise, unauthorized access investigation, attacker containment, forensic evidence collection from EventLogFile/LoginHistory, session revocation, OAuth token cleanup, eradication of attacker persistence, and post-incident recovery verification. Trigger keywords: org compromised, suspicious login, attacker access, session revocation, forensic investigation, breach response, event log forensics, login anomaly investigation, incident response runbook. Does NOT cover general security setup, permission set design, field-level security configuration, or proactive security hardening — those are separate skills. NOT for general security setup.