use-js-interop
Add, review, or fix JavaScript interop in Blazor components. USE FOR: calling JavaScript from Blazor, calling .NET from JavaScript, collocated .razor.js modules, IJSRuntime, IJSObjectReference lifecycle, DotNetObjectReference, ElementReference, timing rules for when JS is available, IAsyncDisposable disposal of JS references, server-side JS interop safety. DO NOT USE FOR: general Blazor component authoring without JS interop needs (use author-component), forms (use collect-user-input).
npx skills add dotnet/skills --skill use-js-interop --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# JS Interop in Blazor ## 1. Collocated JS Modules Always use collocated `.razor.js` files with `export` — never global `window.*` functions or `<script>` tags. ```javascript // ChartPanel.razor.js — placed next to ChartPanel.razor export function initialize(canvas, dotNetRef) { /* ... */ } export function updateData(points) { /* ... */ } export function dispose() { /* ... */ } ``` Import paths: same project = `"./Components/ChartPanel.razor.js"`, RCL = `"./_content/{AssemblyName}/..."`. ## 2. Lifecycle Timing **All JS interop must happen in `OnAfterRenderAsync` or event handlers** — never in `OnInitialized`, `OnParametersSet`, or constructors. JS is not available during server prerendering. Use a typed interop wrapper (see Section 4) — never call `InvokeAsync`/`InvokeVoidAsync` with raw string literals: ```csharp private ChartInterop? _chart; protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { _chart = new ChartInterop(JS); await _chart.InitializeAsync(_canvasRef); } } ``` **Parameter changes**: set a flag in `OnParametersSet`, apply in `OnAfterRenderAsync`: ```csharp private bool _dataChanged; protected override void OnParametersSet() => _dataC
- 1. Collocated JS Modules
- 2. Lifecycle Timing
- 3. Batch Related Operations
- .NET → JS: merge consecutive calls
- JS → .NET: batch callbacks
- 4. Typed Interop Wrapper
- 5. DotNetObjectReference for JS-to-.NET Callbacks
- 6. Disposal and Server Safety
- 7. ElementReference
- Checklist
- Common Mistakes Checklist
What does the use-js-interop skill do?
Add, review, or fix JavaScript interop in Blazor components. USE FOR: calling JavaScript from Blazor, calling .NET from JavaScript, collocated .razor.js modules, IJSRuntime, IJSObjectReference lifecycle, DotNetObjectReference, ElementReference, timing rules for when JS is available, IAsyncDisposable disposal of JS references, server-side JS interop safety. DO NOT USE FOR: general Blazor component authoring without JS interop needs (use author-component), forms (use collect-user-input).
How do I install it?
Run `npx skills add dotnet/skills --skill use-js-interop --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From dotnet/skills, a repository with 4,927 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.