Provides a step-by-step workflow for creating Blazor components that emulate ASP.NET Web Forms controls in the BlazorWebFormsComponents library. Covers base class selection (BaseWebFormsComponent, BaseStyledComponent, DataBoundComponent, BaseValidator), Web Forms property and event naming conventions, Playwright integration testing setup, and the complete checklist from component creation through documentation and navigation updates.
SkillScore95Maintained
Automatic
◆Frontend / UI pack
Last verified 8/19/2026
What it changes
Passed 21 of 22 test cases with the skill, and 6 of 22 without it.
Without skill27%
With skill95%
Checks it passed that the model alone missed
Includes NavMenu.razor
Includes ComponentList.razor
Recommends ButtonBaseComponent
and 14 more in the full report
15 fixed6 passed either way1 still failing0 broke
Pass-rate lift
+68 pp
Tokens
-11%
Agent turns
0%
Response time
-58%
Model gemini-3.6-flashMeasured 8/19/2026v121 of 22 cases passed with skill
Tokens, turns and time describe resource use, not a dollar price.
See it in action
One of 15 test cases the skill fixed. Same model, same prompt, with and without the skill.
1 of 15
Prompt
When declaring the image source parameter for an Image control, what exact property name should be used?
What was checked, without and with the skill
Checked
Without skill
With skill
Specifies property name ImageUrl
Missed
Passed
case-09 · gemini-3.6-flash · 8/19/2026 · answers are capped and redacted
What's inside
The instructions your model reads when the skill loads.
SKILL.md99 linessingle file
Component Development Skill
This skill covers creating new Blazor components that emulate ASP.NET Web Forms controls.
Related Guides
HTML Output Matching Guide - How to ensure Blazor components render identical HTML to Web Forms controls
Quick Reference
Creating a New Component
Identify the Web Forms control from System.Web.UI.WebControls
Research the HTML output using the HTML Output Matching Guide