mcaf-ui-ux
The mcaf-ui-ux skill provides structured guidance for UI/UX decisions including design systems, accessibility standards, and front-end technology selection within the MCAF framework. Use it when bootstrapping UI projects, selecting front-end stacks, or improving accessibility and design-to-development collaboration; avoid it for backend-only work or subjective design debates without concrete delivery outcomes.
git clone --depth 1 https://github.com/managedcode/dotnet-skills /tmp/mcaf-ui-ux && cp -r /tmp/mcaf-ui-ux/catalog/Platform/MCAF/skills/mcaf-ui-ux ~/.claude/skills/mcaf-ui-uxSKILL.md
# MCAF: UI/UX ## Trigger On - bootstrapping a UI project - choosing front-end stack or design-system direction - tightening accessibility or design-to-development collaboration ## Value - produce a concrete project delta: code, docs, config, tests, CI, or review artifact - reduce ambiguity through explicit planning, verification, and final validation skills - leave reusable project context so future tasks are faster and safer ## Do Not Use For - pure backend or infrastructure work - vague visual taste debates with no delivery consequence ## Inputs - user outcomes, device targets, and accessibility needs - design-system constraints and design handoff inputs - current front-end stack and delivery constraints ## Quick Start 1. Read the nearest `AGENTS.md` and confirm scope and constraints. 2. Run this skill's `Workflow` through the `Ralph Loop` until outcomes are acceptable. 3. Return the `Required Result Format` with concrete artifacts and verification evidence. ## Workflow 1. Start from user outcomes and accessibility needs, not framework preference. 2. Tie design choices to implementation and delivery constraints. 3. Pull only the references that match the active UI decision. ## Deliver - better UI/UX delivery guidance - clearer front-end technology and accessibility decisions - design-system-aware development notes ## Validate - accessibility is treated as a first-class requirement - technology choices serve the product and team constraints - design handoff guidance is actionable for engineers ## Ralph Loop Use the Ralph Loop for every task, including docs, architecture, testing, and tooling work. 1. Brainstorm first (mandatory): - analyze current state - define the problem, target outcome, constraints, and risks - generate options and think through trade-offs before committing - capture the recommended direction and open questions 2. Plan second (mandatory): - write a detailed execution plan from the chosen direction - list final validation skills to run at the end, with order and reason 3. Execute one planned step and produce a concrete delta. 4. Review the result and capture findings with actionable next fixes. 5. Apply fixes in small batches and rerun the relevant checks or review steps. 6. Update the plan after each iteration. 7. Repeat until outcomes are acceptable or only explicit exceptions remain. 8. If a dependency is missing, bootstrap it or return `status: not_applicable` with explicit reason and fallback path. ### Required Result Format - `status`: `complete` | `clean` | `improved` | `configured` | `not_applicable` | `blocked` - `plan`: concise plan and current iteration step - `actions_taken`: concrete changes made - `validation_skills`: final skills run, or skipped with reasons - `verification`: commands, checks, or review evidence summary - `remaining`: top unresolved items or `none` For setup-only requests with no execution, return `status: configured` and exact next commands. ## Load References - read [references/ui-ux.md](references/ui-ux.md) first - open [references/recommended-technologies.md](references/recommended-technologies.md) when the active question is front-end stack or tech selection ## Example Requests - "Choose the right frontend direction for this product." - "Tighten accessibility and design handoff rules." - "Document UI engineering guidance for this repo."
Build, debug, modernize, or review ASP.NET Core applications with correct hosting, middleware, security, configuration, logging, and deployment patterns on current .NET. USE FOR: working on ASP.NET Core apps, services, or middleware; changing auth, routing, configuration, hosting, or deployment behavior; deciding between ASP.NET Core sub-stacks. DO NOT USE FOR: unrelated stacks; generic tasks that do not need this specific guidance. INVOKES: inspect the repository context, edit targeted files, and run relevant build, test, lint, or validation commands when changes are made.
Build, upgrade, and operate .NET Aspire 13.3.x application hosts with current CLI, AppHost, ServiceDefaults, integrations, dashboard, testing, and Azure deployment patterns for distributed apps. USE FOR: Aspire.AppHost.Sdk, Aspire.Hosting.*, DistributedApplication.CreateBuilder, WithReference, WaitFor, AddProject, AddRedis, AddPostgres, aspire run, aspire init, aspire. DO NOT USE FOR: unrelated stacks; generic tasks that do not need this specific guidance. INVOKES: inspect the repository context, edit targeted files, and run relevant build, test, lint, or validation commands when changes are made.
Build, review, or migrate Azure Functions in .NET with correct execution model, isolated worker setup, bindings, DI, and Durable Functions patterns. USE FOR: working on Azure Functions in .NET; migrating from the in-process model to the isolated worker model; adding Durable Functions, bindings, or host configuration. DO NOT USE FOR: unrelated stacks; generic tasks that do not need this specific guidance. INVOKES: inspect the repository context, edit targeted files, and run relevant build, test, lint, or validation commands when changes are made.
Build and review Blazor applications across server, WebAssembly, web app, and hybrid scenarios with correct component design, state flow, rendering, and hosting choices. USE FOR: building interactive web UIs with C# instead of JavaScript; choosing between Server, WebAssembly, or Auto render modes; designing component hierarchies and state. DO NOT USE FOR: unrelated stacks; generic tasks that do not need this specific guidance. INVOKES: inspect the repository context, edit targeted files, and run relevant build, test, lint, or validation commands when changes are made.
Maintain or migrate EF6-based applications with realistic guidance on what to keep, what to modernize, and when EF Core is or is not the right next step. USE FOR: EF6 codebases; runtime versus ORM migration decisions; EDMX, code-first, ObjectContext, and legacy data-access review. DO NOT USE FOR: unrelated stacks; generic tasks that do not need this specific guidance. INVOKES: inspect the repository context, edit targeted files, and run relevant build, test, lint, or validation commands when changes are made.
Design, tune, or review EF Core data access with proper modeling, migrations, query translation, performance, and lifetime management for modern .NET applications. USE FOR: DbContext, migrations, model configuration, EF queries, tracking, loading, performance, transactions, and EF6 migration decisions. DO NOT USE FOR: unrelated stacks; generic tasks that do not need this specific guidance. INVOKES: inspect the repository context, edit targeted files, and run relevant build, test, lint, or validation commands when changes are made.
Build, review, or migrate .NET MAUI applications across Android, iOS, macOS, and Windows with correct cross-platform UI, platform integration, and native packaging assumptions. USE FOR: working on cross-platform mobile or desktop UI in .NET MAUI; integrating device capabilities, navigation, or platform-specific code; migrating Xamarin.Forms or aligning. DO NOT USE FOR: unrelated stacks; generic tasks that do not need this specific guidance. INVOKES: inspect the repository context, edit targeted files, and run relevant build, test, lint, or validation commands when changes are made.
Use ML.NET to train, evaluate, or integrate machine-learning models into .NET applications with realistic data preparation, inference, and deployment expectations. USE FOR: ML.NET integration; local model training or retraining; inference pipelines, model loading, evaluation, and deployment review. DO NOT USE FOR: unrelated stacks; generic tasks that do not need this specific guidance. INVOKES: inspect the repository context, edit targeted files, and run relevant build, test, lint, or validation commands when changes are made.