moai-domain-frontend

Define an async page component that uses React's cache() function to memoize data fetching, then wrap the display component in Suspense with a skeleton fallback. Pass the awaited data as props to the child component.

Create a file with the 'use server' directive, define a zod schema for the form fields, and validate FormData with safeParse. On success, write to the database and call revalidatePath to refresh the affected page.

For React, Zustand or Redux Toolkit cover most cases, with React Context for simple sharing. For Vue 3.5, Pinia is the standard choice and integrates with the Composition API through composables.

Yes, it covers Vue 3.5 composables using ref, computed, and watchEffect for reactive data fetching. A typical useUser composable accepts a userId ref, fetches asynchronously, and exposes user, loading, and derived computed values.

Using any disables type checking for everything downstream, so one any infects the entire call chain. The skill's verification checklist requires grep proof that no any appears in new or modified code.

Split a component when it exceeds roughly 300 lines or mixes unrelated responsibilities. Decomposition with clear sub-component boundaries keeps rendering, state, and styling concerns testable and readable.