plan-ui-change
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
npx skills add dotnet/skills --skill plan-ui-change --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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 box, category dropdown, stock-level toggle) ├── InventoryTable (sortable table of products) │ └── InventoryRow (single product row with inline edit/delete) └── AddProductForm (slide-out form for new products) ``` Rules for identifying components: - **Distinct responsibility** — a region owns its own state or behavior → separate component - **Repeated structure** — items in a list, cards in a grid → extract the item template - **Independent interactivity** — a section that handles user input separately from its siblings → separ
- Planning Workflow
- Step 1 — Map the Visual Regions
- Step 2 — Classify Each Component
- Step 3 — Design Data Flow
- Step 4 — Identify Reuse Opportunities
- Step 5 — Order the Implementation
- Output Format
- Anti-Patterns to Avoid
- Guidelines
What does the plan-ui-change skill do?
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
How do I install it?
Run `npx skills add dotnet/skills --skill plan-ui-change --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From dotnet/skills, a repository with 4,927 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.