🧩

FrontendC#

Plan UI Change

Plan UI Change is a Frontend skill for Claude Code, published by dotnet in skills.

5.2K stars384 forkson dotnet/skillsAdded 2026/08/16Repository updated 2026/08/15

View source on GitHub Download repo ZIP

agent-skills

Install in seconds

Install Plan UI Change

Copy Plan UI Change into your Claude Code skills folder. Run the command in your terminal, or review the source on GitHub before installing.

terminal

npx degit https://github.com/dotnet/skills/tree/main/plugins/dotnet-blazor/skills/plan-ui-change ~/.claude/skills/plan-ui-change

Requires Node.js. Downloads this skill only — not the rest of the repository — into your Claude Code skills folder.

Without Node.js

git clone https://github.com/dotnet/skills.git

Clones the whole repository, then copy the skill’s own directory into your skills folder yourself.

In this catalog

Source file: plugins/dotnet-blazor/skills/plan-ui-change/SKILL.md in dotnet/skills
Installs to: ~/.claude/skills/plan-ui-change
Collection: One of 25 skills cataloged from this repository
Category: Frontend — 567 skills

What Plan UI Change does

Plan UI Change decomposes complex Blazor UI features into focused, composable components with parent-child data flow, then immediately implements them bottom-up. Use it when building multi-section pages, dashboards, or any Blazor UI with three or more distinct visual sections.

Plan UI Change is cataloged under Frontend on DirSkills. Plan UI Change comes from a repository tagged agent-skills.

Documentation

README

Excerpt

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:

This is the opening of the README. Read the full README on GitHub.

Frequently asked about Plan UI Change

What else does dotnet publish alongside Plan UI Change?
Plan UI Change is one of 25 skills that DirSkills catalogs from dotnet/skills, the repository it ships in. Its siblings there include .NET P/Invoke, ASP.NET Core Web API and Agentic Workflows. Each one is a separate skill with its own page in this directory, installs the same way Plan UI Change does, and is maintained by dotnet in that same repository. The rest of the collection is listed on the dotnet/skills page.
How does Plan UI Change compare to other Frontend skills?
Plan UI Change ranks #156 by stars among the 567 Frontend skills in this catalog. The most-starred ones next to it are Angular Developer, Android Clean Architecture and Accessibility. DirSkills ranks by the star count of the repository each skill ships in, so that order reflects how popular those repositories are rather than any review of Plan UI Change against them. Open each page to compare what they document and how they install.

More from dotnet/skills

Plan UI Change is one of 25 skills cataloged on DirSkills from dotnet/skills.

See all 25 skills →

.NET P/Invoke

.NET P/Invoke correctly calls native C/C++ libraries from .NET using DllImport and LibraryImport, covering signatures, strings, memory, SafeHandle, and cross-platform patterns. Use it for writing, reviewing, or debugging native interop code in .NET.

ASP.NET Core Web API

ASP.NET Core Web API guides the creation and modification of ASP.NET Core Web API endpoints with correct HTTP semantics, OpenAPI metadata, and error handling. Use it when adding controllers or minimal APIs, defining DTOs, wiring up OpenAPI/Swagger, or configuring global error handling middleware.

Agentic Workflows

Agentic Workflows routes requests to design, create, update, debug, or upgrade agentic workflows to the correct prompt files. Use it when a user asks to build or modify agentic workflows in a repository, and follow the matching prompt or skill.

Author Blazor Component

Author Blazor Component creates or reviews Blazor components (.razor files) with correct architecture for parameters, EventCallback, RenderFragment slots, lifecycle, async patterns, and disposal. Use it when writing new Blazor components that do not involve JavaScript interop, forms, prerendering, or HTTP data fetching.

Blazor JS Interop

Blazor JS Interop provides patterns for adding, reviewing, and fixing JavaScript interop in Blazor components. Use it for collocated .razor.js modules, IJSRuntime lifecycle, DotNetObjectReference callbacks, and batching interop calls.

C# Scripts

C# Scripts runs file-based C# apps with the .NET CLI when the user wants C#/.NET code without creating a project. Use for C# language/API experiments, one-file C# apps, and small multi-file C# apps using #:include/#:exclude or #:ref.

More Frontend skills

Plan UI Change is one of 567 Frontend skills cataloged on DirSkills, ranked #156 by stars among them.

Browse all Frontend skills →

Angular Developer

Angular Developer generates Angular code and provides architectural guidance for Angular projects. Use it for creating projects, components, or services, or for best practices on reactivity, forms, DI, routing, SSR, accessibility, animations, styling, testing, and CLI tooling.

Android Clean Architecture

Android Clean Architecture provides patterns for structuring Android and Kotlin Multiplatform projects, covering module boundaries, UseCases, Repositories, and data layer with Room, SQLDelight, and Ktor. Use it when setting up layered architecture in Android or KMP projects.

Accessibility

Accessibility helps design, implement, and audit inclusive digital products using WCAG 2.2 Level AA standards for keyboard, contrast, and screen-reader support. Use it when building or auditing UI that must meet WCAG 2.2 Level AA or reviewing changes for accessibility.