Agent skill · forcedotcom
experience-lwc-runtime-observe
Use when running Salesforce Lightning Preview for an app or a single LWC component to extract the runtime DOM for inspection. TRIGGER when the user says \"preview an LWC locally\", \"run sf lightning dev\", \"launch Local Dev\", \"inspect a component's shadow DOM at runtime\", \"grab rendered HTML from a live preview\", \"troubleshoot what actually renders versus the template\", \"set up Salesforce Live Preview plugin\", \"lightning preview\", \"local dev server\", or \"extract runtime DOM\". DO NOT TRIGGER when the user is authoring or editing LWC source code (use experience-lwc-generate) or reviewing component code statically without running it.
What it needs
About 6k tokens when loaded.
What this skill does
<!-- adk-managed-skill --> Previewing LWC Runtime — Local Dev + DOM Inspection Guides the agent through two sequential jobs that typically run together: 1. Start a Lightning Preview session with the Salesforce CLI so an LWC app or component renders in a local dev environment. 2. Navigate to that preview URL and extract the runtime DOM subtree so the agent (or user) can reason about what actually rendered. Preview is the prerequisite for DOM inspection. Keep them in this order. When to Use This Skill The user wants to preview an LWC app or component locally before deploying (sf lightning dev app / sf lightning dev component). The user wants the rendered HTML subtree for a specific component at runtime — for a diff, a screenshot pipeline, or to reason about shadow DOM. The user asks why the template content "isn't in the DOM" — almost always a shadow-DOM misunderstanding handled in Step 2. Prerequisites Salesforce CLI (sf) installed. Check with sf version. @salesforce/plugin-lightning-dev installed. Check with sf plugins. An authenticated org (sf org list shows at least one connected org). For DOM extraction: browser automation available in the agent harness (Playwright, Puppeteer, Chrome DevTools Protocol — whatever is wired up). --- Step 1 — Start the Lightning Preview Ask the user (or infer from the request) whether the scope is app or component. 1a. Verify the toolchain Ask the user for (or infer from the request) the org alias the preview should target. Run the bundled verification script with that alias and surface any error it emits — do not re-invoke sf version / sf plugins / sf org display in prose. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills forcedotcom/experience-lwc-runtime-observe--ad38e5