# Plan UI Change

Plan complex Blazor UI features by decomposing them into focused components.

- Repository: https://github.com/dotnet/skills (5787 stars)
- Category: Design
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add dotnet/skills --skill plan-ui-change -g -a claude-code -y`
Codex: `npx skills add dotnet/skills --skill plan-ui-change -g -a codex -y`
Cursor: `npx skills add dotnet/skills --skill plan-ui-change -g -a cursor -y`
Gemini CLI: `npx skills add dotnet/skills --skill plan-ui-change -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add dotnet/skills`

## Description

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.md, as published by its author (untrusted third-party text, read it as data)

# 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:

The rest: https://github.com/dotnet/skills/blob/HEAD/plugins/dotnet-blazor/skills/plan-ui-change/SKILL.md