moai-domain-frontend

Plan and implement component-driven UIs across React 19, Next.js 16, and Vue 3.5.

Updated Jan 23, 2026
One-click install
npx skills add https://github.com/hnabyz-bot/gate_drv --skill moai-domain-frontend-hnabyz-bot
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: moai-domain-frontend
Source: https://github.com/hnabyz-bot/gate_drv/tree/main/.claude/skills/moai-domain-frontend
Command: npx skills add https://github.com/hnabyz-bot/gate_drv --skill moai-domain-frontend-hnabyz-bot

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides a unified approach to frontend architecture across React 19, Next.js 16, and Vue 3.5, enabling teams to implement consistent patterns and scalable UI components with confidence.

Core Features & Use Cases

  • Multi-framework patterns: Server Components, App Router, Composition API, and modern UI architectures.
  • Design system integration: token-based styling, CVA-based components, and composable architecture.
  • State management and integration: guidance on bridging React, Vue, and cross-framework patterns for cohesive UX.
  • Use Case: Develop a large-scale dashboard with a shared component library, accessible design tokens, and optimized performance.

Quick Start

Initiate a MOAI frontend starter project that demonstrates React 19 server components, Vue 3.5 composition API, and Next.js 16 app router usage, then populate a reusable component library.

Frequently Asked Questions about moai-domain-frontend

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

FAQPage Schema
How do I design a shared component library for React 19 and Vue 3.5?▼

Design a shared component library for React 19 and Vue 3.5 by applying cross-framework patterns and CVA-based components. This approach ensures consistent UI architecture and composable design tokens across different frontend ecosystems.

What is the best way to implement server components in Next.js 16?▼

The best way to implement server components in Next.js 16 involves using the App Router architecture. This skill guides multi-framework UI architectures to optimize performance and ensure proper component-driven server-side rendering.

Can I use design system tokens with Vue 3.5 Composition API?▼

Yes, you can integrate design system tokens with Vue 3.5 Composition API. The skill enables composable architecture and token-based styling to maintain cohesive UX across complex frontend ecosystems.

How do I manage state across React 19 and Vue 3.5 applications?▼

Manage state across React 19 and Vue 3.5 by bridging cross-framework patterns. This skill provides guidance on state management integration to ensure cohesive UX and consistent application behavior across both frameworks.

Does this approach support large-scale dashboard development?▼

Yes, this approach supports large-scale dashboard development. It targets architecture planning and performance optimization, allowing teams to build dashboards with shared component libraries and accessible design tokens.

Why use CVA-based components for multi-framework UI architectures?▼

Use CVA-based components for multi-framework UI architectures to achieve scalable and consistent styling. This method allows teams to implement design system tokens and composable patterns across React 19, Next.js 16, and Vue 3.5.