blazor-expert by markpitt/claude-skills
npx skills add https://github.com/markpitt/claude-skills --skill blazor-expert提供使用 Blazor 开发应用程序的专家级指导。Blazor 是微软推出的框架,用于使用 C# 而非 JavaScript 构建交互式 Web UI。
| 任务 | 加载资源 | 关键主题 |
|---|---|---|
| 构建组件,处理生命周期事件 | components-lifecycle.md | 组件结构、生命周期方法、参数、级联值、RenderFragment 组合 |
| 管理组件状态,处理事件 | state-management-events.md | 本地状态、EventCallback、数据绑定、级联状态、基于服务的状态 |
| 配置路由,在页面间导航 | routing-navigation.md | 路由参数、约束、导航、NavLink、查询字符串、布局 |
| 构建表单,验证用户输入 | forms-validation.md |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| EditForm、输入组件、DataAnnotations 验证、自定义验证器 |
| 设置身份验证与授权 | authentication-authorization.md | 身份验证设置、AuthorizeView、Authorize 特性、策略、声明 |
| 优化性能,使用 JavaScript 互操作 | performance-advanced.md | 渲染优化、虚拟化、JS 互操作、延迟加载、WASM 最佳实践 |
确定您的主要目标:
打开推荐的资源文件,并使用 Ctrl+F 搜索您的特定需求。每个资源都按主题组织,并包含可运行的代码示例。
决策:根据部署环境、离线需求和服务器限制进行选择。
{id:int})✅ 单一职责 - 每个组件都有一个明确的目的
✅ 组合 - 使用 RenderFragments 实现灵活的布局
✅ 参数清晰 - 使用描述性名称,用 [EditorRequired] 标记必需参数
✅ 正确释放 - 实现 IDisposable 以清理资源
✅ 基于事件的通信 - 使用 EventCallback 进行子到父的更新
✅ 优先使用 EventCallback 而非 Action - 正确处理异步
✅ 不可变更新 - 创建新的对象/集合,不要直接修改
✅ 基于服务的状态 - 使用作用域服务管理共享状态
✅ 取消事件订阅 - 在 Dispose 中防止内存泄漏
✅ 后台线程使用 InvokeAsync - 线程安全的状态更新
✅ 路由约束 - 使用 :int、:guid 等验证格式
✅ NavLink 组件 - 自动高亮活动状态
✅ 注销后使用 forceLoad - 清除客户端状态
✅ ReturnUrl 模式 - 登录后重定向回原页面
✅ 查询字符串 - 在导航过程中保留筛选/分页状态
✅ EditForm + DataAnnotationsValidator - 内置验证
✅ ValidationMessage - 显示字段级错误
✅ 自定义验证器 - 扩展以实现复杂规则
✅ 异步验证 - 提交前检查服务器可用性
✅ 加载状态 - 处理时禁用提交按钮
✅ 服务器验证 - 切勿仅依赖客户端检查
✅ 策略优于角色 - 更灵活的授权规则
✅ 声明存储详细信息 - 将用户属性存储在声明中
✅ 级联 AuthenticationState - 在所有组件中可用
✅ 错误边界 - 优雅的错误处理
✅ 列表使用 @key - 优化项匹配
✅ 重写 ShouldRender - 防止不必要的渲染
✅ 大型列表使用虚拟化 - 仅渲染可见项
✅ JS 模块隔离 - 高效加载和缓存 JS 模块
✅ WASM 使用 AOT - 生产环境部署
items = items.Append(item).ToList()StateHasChanged()firstRender 检查,验证 JS 文件路径await JS.InvokeAsync("import", "./script.js")await AuthStateTask!CircuitOptions.DisconnectedCircuitRetentionPeriod组件结构、生命周期方法、参数、级联值和组合模式的完整指南。理解 Blazor 组件基础知识的必备资料。
全面涵盖本地和基于服务的状态、使用 EventCallback 的事件处理、数据绑定模式和组件通信。构建交互式 UI 的核心。
完整路由参考,包括路由参数、约束、编程式导航、查询字符串和布局管理。多页面应用的必备资料。
完整的表单 API,包含 EditForm 组件、输入控件、DataAnnotations 验证、自定义验证器和表单模式。数据录入场景的必备资料。
Server 和 WASM 的完整身份验证设置、AuthorizeView、策略、基于声明的访问控制和登录/注销模式。安全应用的必要资料。
性能优化技术,包括 ShouldRender、虚拟化、JavaScript 互操作模式、延迟加载和 WASM 最佳实践。生产应用的关键资料。
实施 Blazor 功能时:
版本 : 2.0 - 模块化编排模式
最后更新 : 2025年12月4日
状态 : 生产就绪 ✅
每周安装数
294
仓库
GitHub 星标
11
首次出现
2026年1月24日
安全审计
安装于
opencode260
codex248
gemini-cli246
github-copilot245
kimi-cli213
amp211
Expert-level guidance for developing applications with Blazor, Microsoft's framework for building interactive web UIs using C# instead of JavaScript.
| Task | Load Resource | Key Topics |
|---|---|---|
| Build components, handle lifecycle events | components-lifecycle.md | Component structure, lifecycle methods, parameters, cascading values, RenderFragment composition |
| Manage component state, handle events | state-management-events.md | Local state, EventCallback, data binding, cascading state, service-based state |
| Configure routes, navigate between pages | routing-navigation.md | Route parameters, constraints, navigation, NavLink, query strings, layouts |
| Build forms, validate user input | forms-validation.md | EditForm, input components, DataAnnotations validation, custom validators |
| Setup authentication & authorization | authentication-authorization.md | Auth setup, AuthorizeView, Authorize attribute, policies, claims |
| Optimize performance, use JavaScript interop | performance-advanced.md | Rendering optimization, virtualization, JS interop, lazy loading, WASM best practices |
Identify your primary objective:
Open the recommended resource file(s) and search for your specific need using Ctrl+F. Each resource is organized by topic with working code examples.
Decision : Choose based on deployment environment, offline requirements, and server constraints.
{id:int})✅ Single Responsibility - Each component has one clear purpose ✅ Composition - Use RenderFragments for flexible layouts ✅ Parameter Clarity - Use descriptive names, mark required with [EditorRequired] ✅ Proper Disposal - Implement IDisposable to clean up resources ✅ Event-Based Communication - Use EventCallback for child-to-parent updates
✅ EventCallback Over Action - Proper async handling ✅ Immutable Updates - Create new objects/collections, don't mutate ✅ Service-Based State - Use scoped services for shared state ✅ Unsubscribe from Events - Prevent memory leaks in Dispose ✅ InvokeAsync for Background Threads - Thread-safe state updates
✅ Route Constraints - Use :int, :guid, etc. to validate formats ✅ NavLink Component - Automatic active state highlighting ✅ forceLoad After Logout - Clear client-side state ✅ ReturnUrl Pattern - Redirect back after login ✅ Query Strings - Preserve filters/pagination across navigation
✅ EditForm + DataAnnotationsValidator - Built-in validation ✅ ValidationMessage - Show field-level errors ✅ Custom Validators - Extend for complex rules ✅ Async Validation - Check server availability before submit ✅ Loading State - Disable submit button while processing
✅ Server Validation - Never trust client-side checks alone ✅ Policies Over Roles - More flexible authorization rules ✅ Claims for Details - Store user attributes in claims ✅ Cascading AuthenticationState - Available in all components ✅ Error Boundaries - Graceful error handling
✅ @key on Lists - Optimize item matching ✅ ShouldRender Override - Prevent unnecessary renders ✅ Virtualization for Large Lists - Only render visible items ✅ JS Module Isolation - Load and cache JS modules efficiently ✅ AOT for WASM - Production deployments
items = items.Append(item).ToList()StateHasChanged() manuallyfirstRender check, verify JS file pathawait JS.InvokeAsync("import", "./script.js")await AuthStateTask! in code blockCircuitOptions.DisconnectedCircuitRetentionPeriodComplete guide to component structure, lifecycle methods, parameters, cascading values, and composition patterns. Essential for understanding Blazor component fundamentals.
Comprehensive coverage of local and service-based state, event handling with EventCallback, data binding patterns, and component communication. Core for interactive UI building.
Complete routing reference including route parameters, constraints, programmatic navigation, query strings, and layout management. Essential for multi-page apps.
Full forms API with EditForm component, input controls, DataAnnotations validation, custom validators, and form patterns. Required for data entry scenarios.
Complete auth setup for Server and WASM, AuthorizeView, policies, claims-based access control, and login/logout patterns. Necessary for secured applications.
Performance optimization techniques including ShouldRender, virtualization, JavaScript interop patterns, lazy loading, and WASM best practices. Vital for production apps.
When implementing Blazor features:
Version : 2.0 - Modular Orchestration Pattern
Last Updated : December 4, 2025
Status : Production Ready ✅
Weekly Installs
294
Repository
GitHub Stars
11
First Seen
Jan 24, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode260
codex248
gemini-cli246
github-copilot245
kimi-cli213
amp211
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
106,200 周安装