blazor-expert — Claude Code skill: what it does, how to install
Blazor reference skill for Claude Code covering Server, WebAssembly, and Hybrid models. Guides component structure, state flow, and C# forms.
npx skills add markpitt/claude-skills --skill blazor-expert -a claude-codeWhat blazor-expert does
The skill equips AI agents with reference architectures for building interactive C# web interfaces via Blazor. It addresses all three core runtimes: Blazor Server running over SignalR, client-side WebAssembly, and Blazor Hybrid embedded inside MAUI, WPF, or WinForms.
Under the hood, guidance splits into six distinct areas with practical code patterns. These cover component lifecycles, two-way bindings via EventCallback, EditForm validation, and route parameters. It also details JS interop, list virtualization, and role checks using AuthorizeView.
Because Blazor Server relies on persistent SignalR connections and taxes server memory, selecting the wrong hosting model upfront creates latency issues.
What it helps with
- configure data entry validation using
EditFormand DataAnnotations - restrict page access via
[Authorize]andAuthorizeView - optimize re-renders using
ShouldRenderand the@keydirective - wire up parent-child component communication with
EventCallback
Example prompts for the agent
- Create an
EditFormcomponent with DataAnnotations validation and error summaries. - Implement list virtualization to reduce rendering lag on large data sets.
- Configure route parameters with type constraints in a routable component.
How to install blazor-expert
1Skills CLI (Vercel)
npx skills add markpitt/claude-skills --skill blazor-expert -a claude-code2Manually: put the files in place
~/.claude/skills/blazor-expert/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/blazor-expert/
1Skills CLI (Vercel)
npx skills add markpitt/claude-skills --skill blazor-expert -a codex2Manually: put the files in place
.agents/skills/blazor-expert/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add markpitt/claude-skills --skill blazor-expert -a cursor2Manually: put the files in place
.cursor/skills/blazor-expert/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install markpitt/claude-skills blazor-expert2Manually: put the files in place
.github/skills/blazor-expert/SKILL.md1Skills CLI (Vercel)
npx skills add markpitt/claude-skills --skill blazor-expert -a gemini-cli2Platform CLI
gemini skills install https://github.com/markpitt/claude-skills --path skills/blazor-expertManually: put the files in place
.devin/skills/blazor-expert/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add markpitt/claude-skills --skill blazor-expert -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about blazor-expert
How do I install blazor-expert in Claude Code?
Run npx skills add markpitt/claude-skills --skill blazor-expert -a claude-code. The tool downloads the skill to ~/.claude/skills/blazor-expert/SKILL.md.
What does blazor-expert do?
It provides structured patterns and architectural workflows for developing Blazor applications in C#. The assistant receives targeted guidance for state management, authentication, navigation, and performance tuning.
Which Blazor hosting models are covered?
It covers Blazor Server, client-side WebAssembly, and Blazor Hybrid for desktop and mobile wrappers like MAUI, WPF, and WinForms.
