Plan UI Change
Plan complex Blazor UI features by decomposing them into focused components.
Install
npx skills add dotnet/skills --skill plan-ui-change -g -a claude-code -y- Repository
- dotnet/skills5.8k
- Category
- Design
- Updated
- 3d ago
- License
- MIT
- Context cost
- Mediumabout 1,721 tokens
- Runs scripts
- No, instructions only
What it does
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.
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 → separate component
- Size, any section that would exceed ~150 lines of markup on its own → split it
Step 2, Classify Each Component
For every component in the tree, determine:
