AIKraft/AI/Войти
AIKraft/Skills/планирование ui-изменений

планирование ui-изменений

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-feature

dotnet official Дизайн

Что делает навык

Навык обеспечивает планирование и декомпозицию сложных UI-функций Blazor на сфокусированные, компонуемые компоненты, избегая создания монолитных страниц. Он определяет структуру дерева компонентов, поток данных и порядок реализации для обеспечения тестируемости и переиспользования кода.

Когда применять

  • Создание сложной страницы Blazor с несколькими секциями и боковыми панелями
  • Планирование декомпозиции компонентов для многосекционных лейаутов
  • Разбиение крупной UI-функции на составные компоненты (например, таблицы с редактированием)
  • Проектирование страниц с 3+ визуально различимыми секциями или взаимодействующими подфункциями

Как работает

  1. Шаг 1: Карта визуальных регионов — идентифицируйте области с собственной ответственностью по данным, поведению или макету и постройте дерево компонентов.
  2. Шаг 2: Классификация компонентов — определите для каждого компонента действие, режим рендеринга, управляемое состояние и примерную строко-емкость (разделять, если >150 строк разметки).
  3. Шаг 3: Проектирование потока данных — назначьте владельца состояния, настройте передачу данных вниз через [Parameter] и событий вверх через EventCallback<T>.
  4. Шаг 4: Поиск возможностей повторного использования — проверьте наличие существующих компонентов (списки, фильтры, DataTable<T>) для избежания дублирования.
  5. Шаг 5: Порядок реализации — стройте снизу вверх: сначала модели/сервисы, затем листовые компоненты, контейнеры и, наконец, страницу-контейнер.
  6. Немедленная реализация: после вывода краткого плана (дерево, таблица, поток данных, порядок) сразу приступайте к созданию файлов .razor без ожидания подтверждения.

Примеры запросов агенту

Спланируй и реализуй страницу панели управления запасами с фильтрами, таблицей продуктов и формой добавления.
Разработай сложный лейаут Blazor с боковой панелью навигации и основной областью контента, декомпозировав его на компоненты.
Создай страницу с тремя секциями: статистикой, фильтрами и сортируемой таблицей, разбив её на отдельные компоненты.

Описание составлено по SKILL.md навыка, сверено 05.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «plan-ui-change» из репозитория: # https://github.com/dotnet/skills
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r plan-ui-change/ ~/.claude/skills/plan-ui-change/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.