Agent Skills: MCAF: UI/UX

Use UI/UX engineering guidance for design systems, accessibility, front-end technology selection, and design-to-development collaboration. Use when bootstrapping a UI project, choosing front-end stack, or tightening design and accessibility practices.

UncategorizedID: managedcode/MCAF/mcaf-ui-ux

Repository

managedcodeLicense: CC-BY-4.0
526

Install this agent skill to your local

pnpm dlx add-skill https://github.com/managedcode/MCAF/tree/HEAD/skills/mcaf-ui-ux

Skill Files

Browse the full folder contents for mcaf-ui-ux.

Download Skill

Loading file tree…

skills/mcaf-ui-ux/SKILL.md

Skill Metadata

Name
mcaf-ui-ux
Description
"Define or refine UI engineering guidance, design-system handoff, accessibility, and frontend technology decisions. Use for concrete UI delivery or design-policy changes."

MCAF: UI/UX

Read root/local AGENTS.md, supplied designs, existing components/tokens, target devices, and the user flows involved.

Workflow

  1. Preserve the requested design and accepted product behavior. Use the established stack and design system; new architecture or dependencies need approval.
  2. Make interactions, loading/empty/error states, keyboard navigation, semantics, labels, contrast, and responsive behavior explicit where the flow needs them.
  3. Connect design choices to implementable components and acceptance criteria. Avoid ad hoc variants or speculative navigation/product changes.
  4. Review the complete affected UI and tests before verification. For visible changes, inspect rendered behavior at the relevant viewports; source/CSS checks do not prove layout.
  5. Report the UI or policy changes, rendered evidence where applicable, and remaining usability/accessibility gaps.

References

  • For design handoff and component consistency: UI engineering.
  • Only when choosing technology: selection criteria; verify current support from official sources.