plan-ui-change
强调先设计再实现,降低返工并提高可维护性与复用性。
将复杂 Blazor 页面拆解为可复用组件并规划实现步骤。
把一个复杂的 Blazor 页面拆成多个小而专注的组件,并规划实现步骤和数据流。适合需要做多区域面板、仪表盘或有 3 个以上视觉区块的页面,帮你理清父子关系和组件边界再开始编码。特别强调先设计组件分解再实现,避免写成一个臃肿的单体组件。
▸ 展开 SKILL.md 英文原文
Plan complex Blazor UI features by decomposing them into focused components. USE FOR: building a complex Blazor page with multiple sections, planning component decomposition, designing a multi-section dashboard or layout, breaking down a large UI feature into composable components, pages with sidebars and content panels, any page with 3+ distinct visual sections or multiple interacting sub-features, identifying parent-child relationships and data flow. DO NOT USE FOR: creating new Blazor projects or apps from scratch (use create-blazor-project), implementing a single individual component (use author-component), writing component code with parameters and EventCallback (use author-component), or simple single-component pages.
帮我安装这个 skill:https://raw.githubusercontent.com/dotnet/skills/main/plugins/dotnet-blazor/skills/plan-ui-change/SKILL.mdcurl -fsSL "https://raw.githubusercontent.com/dotnet/skills/main/plugins/dotnet-blazor/skills/plan-ui-change/SKILL.md"# Plan a Blazor UI Change When asked to build a complex UI feature, **plan the component decomposition first, then immediately implement it**. A single monolithic page component is almost never the right answer — break the UI into focused, composable components. ## Planning Workflow ### Step 1 — Map the Visual Regions Read the request and identify every distinct visual region. Each region that has its own data, behavior, or layout responsibility is a candidate component. Draw the component tree: ``` InventoryDashboard (page — owns data, orchestrates layout) ├── StockSummaryBar (read-only stats: total items, low-stock count, value) ├── InventoryFilters (search bo