moai-domain-frontend

Enforces frontend domain quality gates across React, Vue, and Angular projects.

1|Updated Jul 28, 2025
One-click install
npx skills add https://github.com/kivo360/quickhooks --skill moai-domain-frontend-kivo360
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: moai-domain-frontend
Source: https://github.com/kivo360/quickhooks/tree/main/.claude/skills/moai-domain-frontend
Command: npx skills add https://github.com/kivo360/quickhooks --skill moai-domain-frontend-kivo360

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides frontend architecture guidance and UI pattern recommendations for modern apps.

Core Features & Use Cases

  • UI Architecture: Component design, state management, and pattern choices.
  • Integration: API interactions and frontend-backend collaboration.

Quick Start

Scaffold a React or Vue frontend with a clean architecture outline.

Frequently Asked Questions about moai-domain-frontend

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

FAQPage Schema
How do I structure component architecture in React and Vue projects?

Frontend architecture organizes components into layers—presentation, container, and domain logic—ensuring reusability and maintainability across React 19, Vue 3.5, and Angular 19. This Skill enforces that structure via domain best practices and validates it through automated code reviews.

Can I apply frontend architecture patterns across multiple frameworks?

Yes. This Skill supports React 19, Vue 3.5, Angular 19, and meta-frameworks like Nuxt, SvelteKit, Astro, and SolidJS, applying consistent UI patterns and state management principles regardless of which framework your project uses.

What quality gates should frontend code pass?

The TRUST 5 quality gates enforce test coverage ≥85%, architecture compliance, and UI pattern consistency. This Skill integrates with moai-foundation-trust to validate these gates automatically during code discussions, SPEC implementations, and code reviews.

How do I migrate existing frontend code to follow domain architecture?

This Skill provides migration guidance tailored to your current framework and codebase. It analyzes your project files, identifies architecture gaps, and recommends refactoring steps to align with frontend domain best practices.

Does this work with API integration and frontend-backend collaboration?

Yes. UI architecture includes API interaction patterns and frontend-backend collaboration strategies, ensuring clean separation between data fetching, state management, and component rendering across your tech stack.