Add blazor skills to dotnet-blazor plugin#357
Open
javiercn wants to merge 29 commits into
Open
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a new dotnet-aspnet plugin entry to the repo and introduces an author-component skill intended to guide idiomatic Blazor component authoring, along with eval coverage for the new skill.
Changes:
- Added
dotnet-aspnetplugin manifest and registered it in both marketplace files + README. - Added
author-componentskill documentation and supporting reference guides (async rules, decomposition, disposal). - Added eval scenarios under
tests/dotnet-aspnet/author-component/to validate skill behavior.
Reviewed changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
plugins/dotnet-aspnet/plugin.json |
Introduces the new plugin manifest. |
.github/plugin/marketplace.json |
Registers dotnet-aspnet in the GitHub marketplace index. |
.claude-plugin/marketplace.json |
Mirrors the marketplace registration for Claude. |
README.md |
Adds dotnet-aspnet to the top-level plugin list. |
.github/CODEOWNERS |
Adds ownership rules for the new plugin/tests paths. |
plugins/dotnet-aspnet/skills/author-component/SKILL.md |
Main skill content: Blazor component authoring rules and patterns. |
plugins/dotnet-aspnet/skills/author-component/references/async-programming-rules.md |
Deep-dive reference for async patterns and pitfalls in Blazor. |
plugins/dotnet-aspnet/skills/author-component/references/breaking-down-components.md |
Reference for component decomposition patterns. |
plugins/dotnet-aspnet/skills/author-component/references/component-disposal.md |
Reference for disposal patterns and cleanup rules. |
tests/dotnet-aspnet/author-component/eval.yaml |
Adds eval scenarios/rubrics to measure the new skill. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
javiercn
changed the title
javiercn
force-pushed
the
javiercn/author-component
branch
from
4ad6c98 to
9637c51
Compare
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a new dotnet-blazor plugin with an author-component skill intended to guide component authoring/review toward idiomatic Blazor patterns (parameters, EventCallback, RenderFragment, lifecycle, async, disposal), along with eval coverage.
Changes:
- Introduces
dotnet-blazorplugin manifest and registers it in both marketplaces, CODEOWNERS, and repo README. - Adds the
author-componentskill (SKILL.md) plus reference docs for async rules, decomposition, and disposal patterns. - Adds eval scenarios for the new skill under
tests/dotnet-blazor/author-component.
Reviewed changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
plugins/dotnet-blazor/plugin.json |
New plugin manifest for dotnet-blazor. |
plugins/dotnet-blazor/skills/author-component/SKILL.md |
Primary skill guidance for authoring/reviewing Blazor components. |
plugins/dotnet-blazor/skills/author-component/references/async-programming-rules.md |
Deep-dive guidance for async patterns and anti-patterns in Blazor. |
plugins/dotnet-blazor/skills/author-component/references/breaking-down-components.md |
Reference patterns for decomposing UI into components and cascading context. |
plugins/dotnet-blazor/skills/author-component/references/component-disposal.md |
Reference patterns for disposal (IAsyncDisposable), timers, and JS interop cleanup. |
tests/dotnet-blazor/author-component/eval.yaml |
Adds evaluation scenarios/rubrics for the new skill. |
.github/plugin/marketplace.json |
Registers the new plugin in the GitHub marketplace list. |
.claude-plugin/marketplace.json |
Mirrors the marketplace registration for Claude Code. |
.github/CODEOWNERS |
Adds ownership entries for the new plugin and its tests. |
README.md |
Adds dotnet-blazor to the repo’s plugin list. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
Contributor
There was a problem hiding this comment.
Pull request overview
Introduces a new dotnet-blazor plugin to the repo, intended to provide curated guidance/evals for Blazor component authoring patterns (and, as included in the changes, JS interop patterns as well).
Changes:
- Adds the
dotnet-blazorplugin manifest plus marketplace/README/CODEOWNERS wiring. - Adds the
author-componentskill (SKILL.md + reference docs) and authoring-focused eval scenarios. - Adds a
use-js-interopskill and corresponding eval scenarios undertests/dotnet-blazor/use-js-interop/.
Reviewed changes
Copilot reviewed 12 out of 12 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
plugins/dotnet-blazor/plugin.json |
Defines the new plugin manifest and skill root. |
plugins/dotnet-blazor/skills/author-component/SKILL.md |
New guidance for idiomatic Blazor component authoring. |
plugins/dotnet-blazor/skills/author-component/references/async-programming-rules.md |
Deep-dive reference for async patterns in Blazor components. |
plugins/dotnet-blazor/skills/author-component/references/breaking-down-components.md |
Deep-dive reference for component decomposition patterns. |
plugins/dotnet-blazor/skills/author-component/references/component-disposal.md |
Deep-dive reference for component disposal patterns. |
tests/dotnet-blazor/author-component/eval.yaml |
Adds eval scenarios validating author-component guidance. |
plugins/dotnet-blazor/skills/use-js-interop/SKILL.md |
New JS interop guidance for Blazor, including module/disposal patterns. |
tests/dotnet-blazor/use-js-interop/eval.yaml |
Adds JS interop eval scenarios. |
.github/plugin/marketplace.json |
Registers dotnet-blazor plugin in the GitHub marketplace manifest. |
.claude-plugin/marketplace.json |
Mirrors the marketplace registration for Claude plugin manifest. |
.github/CODEOWNERS |
Adds ownership entries for the new plugin and tests paths. |
README.md |
Adds dotnet-blazor to the repo’s plugin list. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
javiercn
changed the title
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a new dotnet-blazor plugin to the repo’s skill ecosystem, with Blazor-focused SKILL.md guidance and corresponding eval scenarios, plus validator enhancements to support scenario filtering and improved work-dir handling.
Changes:
- Introduces the
plugins/dotnet-blazorplugin (skills + plan + MCP config) and registers it in marketplace + CODEOWNERS + README. - Adds
tests/dotnet-blazor/**/eval.yamlsuites for multiple Blazor skill areas (component authoring, JS interop, prerendering, auth, etc.). - Extends
eng/skill-validatorto support per-scenarioenvironment, scenario name filtering, and configurable/readable work directories.
Reviewed changes
Copilot reviewed 40 out of 40 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| tests/dotnet-blazor/use-js-interop/eval.yaml | Eval scenarios asserting Blazor JS interop best practices. |
| tests/dotnet-blazor/support-prerendering/eval.yaml | Eval scenarios for prerender-to-interactive correctness patterns. |
| tests/dotnet-blazor/plan-ui-change/eval.yaml | Eval scenarios for UI decomposition/planning behaviors. |
| tests/dotnet-blazor/fetch-and-send-data/eval.yaml | Eval scenario for async data loading/cancellation/error handling patterns. |
| tests/dotnet-blazor/create-blazor-project/eval.yaml | Eval scenarios for choosing correct Blazor template/config for different requirements. |
| tests/dotnet-blazor/coordinate-components/eval.yaml | Eval scenario for cross-component state propagation patterns. |
| tests/dotnet-blazor/configure-auth/eval.yaml | Eval scenarios for Identity + auth routing patterns across render modes. |
| tests/dotnet-blazor/collect-user-input/eval.yaml | Eval scenarios for forms, validation, and file upload constraints. |
| tests/dotnet-blazor/author-component/eval.yaml | Eval scenarios for general component authoring + lifecycle/async/disposal rules. |
| plugins/dotnet-blazor/skills/use-js-interop/SKILL.md | New skill content for Blazor JS interop guidance. |
| plugins/dotnet-blazor/skills/support-prerendering/SKILL.md | New skill content for prerendering pitfalls + solutions. |
| plugins/dotnet-blazor/skills/plan-ui-change/SKILL.md | New skill content for structured component decomposition planning. |
| plugins/dotnet-blazor/skills/fetch-and-send-data/SKILL.md | New skill content for data fetching/submission lifecycle patterns. |
| plugins/dotnet-blazor/skills/create-blazor-project/assets/agents-md/webassembly-per-page.md | AGENTS.md template asset for WASM per-page projects. |
| plugins/dotnet-blazor/skills/create-blazor-project/assets/agents-md/webassembly-global.md | AGENTS.md template asset for WASM global projects. |
| plugins/dotnet-blazor/skills/create-blazor-project/assets/agents-md/ssr-none.md | AGENTS.md template asset for static SSR-only projects. |
| plugins/dotnet-blazor/skills/create-blazor-project/assets/agents-md/server-per-page.md | AGENTS.md template asset for Server per-page projects. |
| plugins/dotnet-blazor/skills/create-blazor-project/assets/agents-md/server-global.md | AGENTS.md template asset for Server global projects. |
| plugins/dotnet-blazor/skills/create-blazor-project/assets/agents-md/auto-per-page.md | AGENTS.md template asset for Auto per-page projects. |
| plugins/dotnet-blazor/skills/create-blazor-project/assets/agents-md/auto-global.md | AGENTS.md template asset for Auto global projects. |
| plugins/dotnet-blazor/skills/create-blazor-project/SKILL.md | New skill content for scaffolding/initial project choices. |
| plugins/dotnet-blazor/skills/coordinate-components/SKILL.md | New skill content for shared state patterns across components/render modes. |
| plugins/dotnet-blazor/skills/configure-auth/SKILL.md | New skill content for auth/Identity patterns across render modes. |
| plugins/dotnet-blazor/skills/collect-user-input/SKILL.md | New skill content for forms + SSR vs interactive input patterns. |
| plugins/dotnet-blazor/skills/author-component/references/component-disposal.md | Reference doc for correct disposal patterns (IAsyncDisposable). |
| plugins/dotnet-blazor/skills/author-component/references/breaking-down-components.md | Reference doc for decomposition patterns and cascading context. |
| plugins/dotnet-blazor/skills/author-component/references/async-programming-rules.md | Reference doc for Blazor async/sync-context rules. |
| plugins/dotnet-blazor/skills/author-component/SKILL.md | New/updated core component-authoring guidance. |
| plugins/dotnet-blazor/plugin.json | New plugin manifest for dotnet-blazor. |
| plugins/dotnet-blazor/PLAN.md | Dotnet-blazor plugin plan/structure document. |
| plugins/dotnet-blazor/.mcp.json | MCP server definitions intended for the plugin. |
| eng/skill-validator/src/Services/EvalSchema.cs | Adds environment field parsing for scenarios. |
| eng/skill-validator/src/Services/AgentRunner.cs | Adds configurable/readable work dirs + run indexing. |
| eng/skill-validator/src/Models/Models.cs | Adds scenario Environment and new validator CLI config flags. |
| eng/skill-validator/src/Commands/ValidateCommand.cs | Adds CLI flags: keep work dirs, work dir base, readable names, scenario/env filtering; threads RunIndex. |
| README.md | Adds dotnet-blazor entry to the plugin list. |
| .github/plugin/marketplace.json | Registers dotnet-blazor in GitHub marketplace catalog. |
| .github/CODEOWNERS | Adds ownership rules for dotnet-blazor plugin/tests. |
| .claude-plugin/marketplace.json | Registers dotnet-blazor in Claude marketplace catalog. |
| .agents/skills/create-skill-evaluation/SKILL.md | Documentation update describing new work-dir preservation workflow/flags. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
javiercn
force-pushed
the
javiercn/author-component
branch
from
46203b1 to
a174bf4
Compare
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 33 out of 33 changed files in this pull request and generated 6 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
javiercn
force-pushed
the
javiercn/author-component
branch
from
5b17cbd to
5aef6f4
Compare
- async-programming-rules.md: Reword 'await every Task' to allow intentional fire-and-forget with DispatchExceptionAsync - async-programming-rules.md: Replace _ = InvokeAsync(...) with async void + await + DispatchExceptionAsync - component-disposal.md: Rename Timer section to 'Anti-pattern', use async void handler with error routing - SKILL.md: Fix @OnClick wording (actual downsides, not 're-render') - SKILL.md: Add comment explaining why PollAsync discard is safe
Skill teaches 7 Blazor JS interop patterns: collocated modules, lifecycle timing, batching, typed interop wrappers, DotNetObjectReference with JS class encapsulation, disposal/JSDisconnectedException, and ElementReference. Eval covers 5 scenarios (notepad, activity tracker, drag-drop, responsive layout, infinite scroll) with rubrics for typed C# wrapper classes, JS class wrappers for dotNetRef, and async/await error handling. 5-run eval: +33.4% overall, all scenarios pass.
Teaches agents to decompose complex Blazor UI requests into focused, composable components instead of building monolithic single-page components. The 5-step planning workflow covers: mapping visual regions to a component tree, classifying components, designing parameter/ EventCallback data flow, identifying reuse, and ordering implementation bottom-up. Eval: 5 scenarios (Kanban board, e-commerce catalog, help desk dashboard, team calendar, employee directory) scoring 59.7% improvement. Baselines produce 1-2 monolithic files; skilled agent decomposes into 4-6+ focused components.
…s to skill validator --scenario <substring>: filter scenarios by name substring (case-insensitive, repeatable). Useful for iterating on a specific scenario without running the full eval suite. --keep-work-dirs: preserve temporary working directories after the run instead of cleaning them up. Enables post-run inspection of baseline vs skilled output. --work-dir <path>: set a custom base directory for working directories instead of the system temp folder. Helps keep artifacts organized. --readable-work-dirs: use human-readable directory names (<timestamp>/<scenario-slug>/run-N/<variant>) instead of GUIDs. Makes it easy to find and compare baseline/isolated/plugin outputs.
A skill that teaches agents how to write eval.yaml files for the skill validator. Covers eval design principles (goal-oriented prompts, non-overlapping domains, baseline calibration), eval.yaml structure (setup, assertions, rubric items), and an iteration workflow for fast feedback and result analysis.
Wire up Playwright MCP (local/stdio) and Microsoft Learn Docs MCP (remote/http) for the dotnet-blazor plugin via .mcp.json, and reference it from plugin.json.
Scenarios in eval.yaml can now declare an 'environment' field (e.g. 'ci', 'local', 'daily'). When --environment is passed, only scenarios whose environment matches (or that have no environment set) will run. Scenarios without an environment always run regardless of the flag. This enables limiting expensive scenarios on CI while keeping them available for local development.
Skill guides scaffolding Blazor Web App projects with correct render mode selection (SSR, Server, WebAssembly, Auto) and interactivity scope (per-page vs global). Includes precomputed AGENTS.md templates for all 7 mode combinations. Eval covers 5 scenarios: Static SSR, Server+Auth (global), WebAssembly (per-page), Server (per-page), Auto+Auth (global). All pass at 5/5.
Each template now includes a structured table with Interactivity Mode and Interactivity Scope values that other skills can read to adapt their guidance to the project's configuration.
- SKILL.md: Covers [PersistentState], PersistentComponentState, RendererInfo, [ExcludeFromInteractiveRouting], prerender:false, and client service resolution during prerender - eval.yaml: 3 scenarios (Equipment inventory, Privacy page, Notifications polling) — all pass with quality improvement - PLAN.md: Blazor plugin skill roadmap with create-blazor-project done and support-prerendering as next skill
Skill covers EditForm, built-in input components, data annotation validation, custom validator with ValidationMessageStore for server-side field-specific errors, SSR form patterns, @Bind:after, InputFile for uploads, and double-submit prevention. Eval: 2 scenarios, both pass with significant improvement: - Event registration with custom validation: 3->5 (isolated), 3->4 (plugin) - Product review with photo upload: 3->5 (isolated), 3->5 (plugin)
- Add 'dotnet new blazor' setup command to all scenarios so the project is pre-scaffolded and the model focuses on form work - Add 'Editable inventory grid with inline row editing' scenario (Base=3, Iso=5, Plug=5) — tests Blazor input components vs raw HTML inputs and DataAnnotationsValidator vs manual validation - Remove pre-dropped files from inventory setup (was cueing the skill)
SKILL.md: - Add numbered workflow quick reference section - Add NotifyChangedAsync update protocol callout - Add NavigationManager.Refresh anti-pattern to Don'ts eval.yaml: - Rewrite scenario from gym domain to warehouse management - Replace CascadingParameter assertion (matched default Error.razor) with AddCascadingValue and NotifyChangedAsync assertions - Rewrite rubric items to be outcome-focused (reduces overfitting) Eval results: PASS, Isolated 5/5, Overfitting 0.32->0.22
Skill covers auth across render modes: AuthorizeView, [Authorize], Identity pages with ExcludeFromInteractiveRouting, auth state serialization for WebAssembly/Auto, and common mistakes matrix. Three eval scenarios: - Company intranet with Identity roles and authorization policies - Login/register pages in a globally interactive app (SignInManager) - Auto-mode app with auth state surviving WASM handoff Eval results: 1/1 passed, 27.7% improvement, 0.06 overfitting.
Remove skill-validator modifications (--scenario, --keep-work-dirs, --work-dir, --readable-work-dirs, --environment, RunIndex) and the create-skill-evaluation skill. Only blazor plugin and eval changes should remain in this branch.
…ODEOWNERS - Inline mcpServers object in plugin.json instead of referencing .mcp.json file path (skill-validator expects JSON object, not string reference) - Remove now-redundant .mcp.json file - Update CODEOWNERS to use @dotnet/aspnet-blazor-eng team instead of individual users
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
- configure-auth: Make prompt less prescriptive — remove named policy instruction, let model decide [Authorize(Roles)] vs policy. Relax rubric and assertions to accept either approach. - coordinate-components: Add 2 scenarios (shopping cart with scoped service, multi-page wizard with CascadingValueSource) to test mechanism selection beyond the existing warehouse dashboard. - create-blazor-project: Add file_exists assertion for .Client/*.razor on WebAssembly and Auto scenarios to verify components are placed in the correct project. - fetch-and-send-data: Soften error-handling prompt to avoid teaching the cancellation pattern directly while keeping a light timeout hint. Replace second scenario with Auto-mode shipment tracker to cover HTTP service abstraction pattern instead of duplicating Server async. - plan-ui-change: Replace 3 homogeneous dashboard scenarios (help desk, calendar, employee directory) with diverse UI shapes: multi-step wizard, nested settings tabs, and chat interface with threads. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
MCPServerDef.Command is null for HTTP-type servers (which use Url instead). Add Url field to MCPServerDef, handle http/streamable-http/sse transport types with URL validation, use explicit type allowlist for stdio/local, reject unknown types, and null-guard IsAllowedMcpCommand. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Timed-out scenarios (coordinate-components shopping cart/wizard, plan-ui-change wizard/settings/chat) were missing timeout fields and defaulting to 120s. Set 1800s for medium scenarios and 2400s for complex multi-component scenarios. Bump configure-auth intranet (900→1800) and login (600→1200) which also timed out. Tweak recipe browser prompt to mention 'fetches and displays' and 'data-loading lifecycle' to improve skill activation alignment. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Add skill-specific trigger phrases to eval prompts that were failing activation in plugin mode (all 9 skills loaded). In isolated mode these all activated consistently, but in plugin mode the agent sometimes chose competing skills like author-component. Changes: - coordinate-components/shopping-cart: Frame as coordinating shared state between components without parent-child relationships - fetch-and-send-data/recipe-browser: Emphasize calling backend service to fetch data and async data loading lifecycle - plan-ui-change/kanban: Ask for component decomposition plan before code - plan-ui-change/settings: Ask for component breakdown and interaction model Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
javiercn
force-pushed
the
javiercn/author-component
branch
from
864d07e to
e07e4e9
Compare
Member
Author
|
/evaluate |
Contributor
Skill Validation Results
[1] (Isolated) Quality unchanged but weighted score is -45.8% due to: judgment, quality, errors (0 → 1) Model: claude-opus-4.6 | Judge: claude-opus-4.6 🔍 Full Results - additional metrics and failure investigation steps ▶ Sessions Visualisation -- interactive replay of all evaluation sessions |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds a new
dotnet-blazorplugin with 9 skills covering component authoring, state management, data fetching, authentication, prerendering, JS interop, and UI planning.What's included
Plugin infrastructure
plugins/dotnet-blazor/plugin.json— plugin manifest.github/plugin/marketplace.jsonand.claude-plugin/marketplace.json— marketplace entries.github/CODEOWNERS— ownership for@lewing,@javiercnand@danroth27README.md— plugin entrySkill: author-component
Create Blazor components from scratch — parameters, events, render fragments, lifecycle, async patterns, disposal, CSS isolation.
5 runs per scenario
Skill: use-js-interop
JS interop patterns — collocated
.razor.jsmodules, lifecycle timing, typed C# wrapper classes,DotNetObjectReference,ElementReference, disposal.+33.4% | 5 runs per scenario
Skill: plan-ui-change
5-step planning workflow that decomposes complex UI requests into focused, composable components instead of monolithic single-page components.
+59.7% | 1 run per scenario
Skill: create-blazor-project
Scaffold new Blazor Web Apps with the correct
dotnet new blazoroptions for the target interactivity mode and scope. WritesAGENTS.mdmetadata for downstream skills.1 run per scenario
Skill: support-prerendering
Fix prerendering problems —
[PersistentState]with??=,RendererInfo.IsInteractiveguards,[ExcludeFromInteractiveRouting]for static SSR pages, disabling prerender.1 run per scenario
Skill: collect-user-input
Build forms with
EditForm,[SupplyParameterFromForm], validation, multi-form SSR patterns, and enhanced navigation.1 run per scenario
Skill: fetch-and-send-data
Data fetching patterns across render modes — cancellation with
CancellationTokenSource,OnParametersSetAsyncfor route-driven loads, error handling, retry UI,IAsyncDisposable.1 run per scenario
Skill: coordinate-components
Share state across components using
CascadingValueSource<T>via DI, scoped services with change events, andNotifyChangedAsyncprotocol.+35.4% | Overfitting: 0.22 | 1 run per scenario
Skill: configure-auth
Authentication and authorization across render modes — Identity setup with roles/policies,
AuthorizeRouteView,ExcludeFromInteractiveRoutingfor Identity pages,AddAuthenticationStateSerialization/Deserializationfor WebAssembly/Auto.+27.7% | Overfitting: 0.06 | 1 run per scenario
All evals run on
claude-opus-4.6with pairwise judging.