skills.rest
zhenpengLai
zhenpengLaiCOMMUNITY
Explore all skills by this author →
GitHub

dotnet-mcaf-ui-ux

Applies MCAF UI/UX guidance for front-end stack selection, accessibility, and design-system collaboration.

Updated Mar 31, 2026
Search Tags:#accessibility#front-end#design system#ui/ux#technology selection#design handoff#mcaf
One-click install
npx skills add https://github.com/zhenpengLai/myuseskill --skill dotnet-mcaf-ui-ux-zhenpenglai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dotnet-mcaf-ui-ux
Source: https://github.com/zhenpengLai/myuseskill/tree/main/dotnet-mcaf-ui-ux
Command: npx skills add https://github.com/zhenpengLai/myuseskill --skill dotnet-mcaf-ui-ux-zhenpenglai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Teams often struggle to turn UI/UX goals into concrete engineering decisions, leading to inconsistent design systems, weak accessibility, and front-end stacks chosen by preference rather than product constraints. ## Core Features & Use Cases - Front-end technology selection: Evaluates stacks against accessibility support, design-system maturity, testability, SSR/SPA needs, and deployment constraints. - Accessibility-first guidance: Treats accessibility as a baseline quality attribute with explicit tokens, spacing, and interaction rules. - Design-to-development handoff: Produces actionable engineering notes that keep design-system rules consistent during implementation. - Use Case: When bootstrapping a new product UI, use this Skill to choose a front-end direction, document accessibility requirements, and define design handoff rules engineers can follow. ## Quick Start Ask the assistant to apply the MCAF UI/UX workflow to choose a front-end stack and document accessibility and design handoff guidance for your repository.

Frequently Asked Questions about dotnet-mcaf-ui-ux

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I choose the right front-end stack for a new product?▼

Evaluate candidate stacks against accessibility support, component and design-system maturity, testability, SSR or SPA requirements, and deployment constraints. Prefer mainstream, well-supported frameworks that match the product shape rather than individual preference.

How do I make accessibility a first-class requirement in UI development?▼

Start from user outcomes and accessibility needs before choosing any framework, and treat accessibility as a baseline quality attribute. Keep tokens, spacing, and interaction rules explicit so engineers can verify compliance during implementation.

When should I not use this UI/UX guidance skill?▼

Do not use it for pure backend or infrastructure work, or for vague visual taste debates with no delivery consequence. It is designed for UI bootstrapping, front-end stack selection, and design-system or accessibility decisions.

Does this skill require access to my repository?▼

Yes, repository access is required when UI documentation, component guidance, or design-system rules live in the repo. The workflow begins by reading the nearest AGENTS.md to confirm scope and constraints.

What output does the UI/UX workflow produce?▼

It returns a structured result with status, plan, actions taken, validation skills run, verification evidence, and remaining items. Deliverables include front-end technology decisions, accessibility guidance, and design-system-aware development notes.

Related Skills

Explore More Software Engineering Skills→
julianromlijulianromli

polish

Polish front-end interfaces by fixing alignment, spacing, consistency, and micro-detail issues across breakpoints and accessibility scenarios.

Community
Advanced
Adelie-SquadAdelie-Squad
17

creative-frontend

Develop reusable UI components with design-system tokens across React, Vue, and Angular.

Official
Advanced
nexu-ionexu-io
93.2k

design-review

Perform visual audits and implement UI fixes with atomic commits and before-after documentation.

Official
Intermediate
wikimediawikimedia
7

codex-usage

Adopt Wikimedia Codex design system components, tokens, and icons in frontend projects.

Official
Advanced