skills.rest
dacy
dacyCOMMUNITY
Explore all skills by this author →
GitHub

ux-integration-skill

Coordinate MFE registration, theming, and routing with the operational desktop shell.

Updated Mar 2, 2026
Search Tags:#shell#ux#design-standards#module-federation#ui-integration#mfe
One-click install
npx skills add https://github.com/dacy/architect-skill --skill ux-integration-skill
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ux-integration-skill
Source: https://github.com/dacy/architect-skill/tree/main/.claude/skills/ux-integration-skill
Command: npx skills add https://github.com/dacy/architect-skill --skill ux-integration-skill

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Designers and engineers often struggle to ensure user-facing components align with the company's operational desktop UI shell, causing inconsistent UX and integration gaps.

Core Features & Use Cases

  • MFE registration and shell integration: ensure MFEs are registered, themed, and composed within the shell.
  • Cross-MFE communication contracts: document event bus usage and data flow to coordinate UI behavior across MFEs.
  • Guided design standards: reference references/mfe-standards.md to enforce module federation patterns and shell contracts.

Quick Start

Follow the MFE standards to register a new UI component with the shell and validate that it adheres to the design system before deployment.

Frequently Asked Questions about ux-integration-skill

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

FAQPage Schema
How do I integrate a micro-frontend with a desktop shell using module federation?▼

MFE integration with a desktop shell requires registering the micro-frontend, supporting theming, and establishing route registration. You must follow mfe-standards.md to ensure proper module federation setup and shell contract compliance for consistent UX.

What is cross-MFE communication and how does it coordinate UI behavior?▼

Cross-MFE communication coordinates UI behavior across micro-frontends by documenting event bus usage and data flow. This establishes communication contracts that ensure micro-frontend components interact consistently within the operational desktop shell.

How do I ensure UI consistency for new MFEs in an operational desktop?▼

UI consistency for new MFEs is ensured by applying guided design standards from mfe-standards.md. You must validate that each component adheres to the design system, supports shell theming, and meets shell contract requirements before deployment.

Do I need to follow specific design standards for shell contract compliance?▼

Yes, shell contract compliance requires following the mfe-standards.md reference. This enforces module federation patterns, theming support, and route registration to guarantee that new MFE extensions align with the operational desktop shell.

Can I use this to register MFE extensions that need theming and route support?▼

Yes, this applies to new MFEs or extensions that must register with the operational desktop shell. It guides theming support, route registration, and cross-MFE communication contracts to ensure proper integration and consistent user experience.

Related Skills

Explore More Design & Creative Skills→
grvpanchalgrvpanchal
1

server-mfe

Configure shared runtimes, versioned contracts, and event bus for micro-frontend deployment.

Community
Intermediate
hilaryosbornehilaryosborne

fe-micro-frontends

Guide the design and integration of micro-frontends using MFE, BFF, and SDK components.

Community
Advanced
Harmeet10000Harmeet10000
7

design-system-patterns

Standardizes tokens, theming, and component APIs for scalable UI foundations across web and mobile.

Community
Advanced
openobserveopenobserve
20.6k

ui-architect

Enforce O2 component library and design token standards for Vue interfaces.

Official
Advanced