agentleFS
Sign inStart free
forcedotcomforcedotcom/salesforcedx-vscode/.claude/skills/lit-webview-architecture/SKILL.md

lit-webview-architecture

Skill1k starsChanged 26 days agoBSD-3-ClauseView on GitHub

Design or refactor a Lit webview's package boundary, Effect service contract, host adapter, lifecycle, registration, or browser bundle. Use for VS Code webviews that separate browser-safe UI from extension-host APIs and message protocols.

Adopted by

Steady: 0 new projects took it in the last 4 weeks, none the 4 weeks before.thin data

Week of Sep 13: 0 new projectsWeek of Sep 20: 0 new projectsWeek of Sep 27: 0 new projectsWeek of Oct 4: 0 new projectsWeek of Oct 11: 0 new projectsWeek of Oct 18: 0 new projectsWeek of Oct 25: 0 new projectsWeek of Nov 1: 0 new projects
Sep 2026Oct 2026Nov 2026
New projects taking a version of this file each week, over the 8 weeks our latest run read: only 0 in all, so this is a hint, not a trend.

Who's talking about forcedotcom/salesforcedx-vscode

The biggest 5 of 52 mentions linking to the repository that our crawl found. Each line is their own headline.

See all 52

Talked about on GitHub and Stack Overflow (52 times).

On GitHub · 50

45 more on GitHub

The file

We split this skill into the rules it gives an agent

2 rules. About 0 are common, 1 is distinctive, and 1 is very specific to this project.

  • ≈0

    Common · estimate

    Many files like this have a rule of this kind.

  • ≈1

    Distinctive · estimate

    This author's own choices. Worth a look.

  • 1

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    No VS Code, JSforce, extension service, or extension-message imports in the browser-safe package.

    line 17
  2. Very specific:

    Only subpaths with known consumers exported.

    line 18

≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

Lit webview architecture

Boundary: UI owns presentation, browser-safe state/actions, and lifecycle coordination; host owns VS Code APIs, transport, metadata/network authorities, and localization.

Browser-safe contract

  • Immutable view state, UI actions, and typed errors from Effect Schemas. Tagged/literal unions instead of loose primitives, enums, or duplicated constants when invalid states matter.
  • Directional host-to-UI and UI-to-host message schemas. Handler variant added with its behavior; exhaustive Match; no opposite-direction placeholder arms.
  • Unknown data validated at entry. DOM CustomEvent: structural type/detail guard, then Schema validation of detail; inherited DOM accessors do not form a plain schema struct.
  • Required localized labels injected by the host; no defaults hiding missing localization.
  • No VS Code, JSforce, extension service, or extension-message imports in the browser-safe package. Host data normalized and validated before UI state.
  • Only subpaths with known consumers exported; no root/testing barrels. Type-only dependencies in devDependencies with import type.

Effect lifecycle

  • 1 service contract: initial state, state stream, typed action dispatch. Extension-owned live layer plus deterministic test layers.
  • 1 composition-root-owned scoped fiber per mounted webview: controller, queues, subscriptions, DOM listeners, finalizers.
  • Listeners/subscriptions acquired and released as scoped resources. Disconnect interrupts and awaits the session fiber.
  • Fiber-identity guard on finalizer cleanup; an old disconnect cannot clear a newer rapid reconnection.
  • Components only render state and dispatch intent—no runtimes, scattered Effect.runFork/Effect.runPromise, or host calls.

Registration and bundling

  • Explicit host-called custom-element registration; every customElements.define guarded by customElements.get; no registration import side effects.
  • New entries built with shared browser esbuild config. IIFE retained while HTML loads a classic deferred script; ESM requires matching script/resource-rewrite changes.
  • Non-published UI workspaces marked private and excluded from publication/versioning. Contract tests scan source and bundles for host imports and Effect execution in presentation code.
  • Compile/bundle/test order expressed in Wireit; browser tests consume the intended emitted application.

Examples: packages/soql-builder-ui/src/application.ts, packages/soql-builder-ui/src/register.ts, packages/soql-builder-ui/test/package-contract.test.mjs, packages/salesforcedx-vscode-soql/src/soql-builder-ui/lit/.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free