moai-domain-frontend

Create 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. Await the fetched data and pass it as props to the child component.

Add the 'use server' directive, define a zod schema for the form fields, and validate FormData with safeParse inside the action. On success, write to the database and call revalidatePath; on failure, return the validation errors.

The Skill covers both ecosystems: React 19 with Next.js 16 (Server Components, App Router, Server Actions) and Vue 3.5 with the Composition API, composables, and Pinia state management. Patterns are provided for each framework side by side.

Yes, the patterns assume TypeScript 5.9+ and explicitly forbid the any type in component props and state. Verification checklists require grep proof that no any types exist in new or modified code.

Bundle growth usually comes from missing code splitting, static imports of large libraries, or unmemoized dependencies. The Skill flags any increase over 50KB without justification and recommends dynamic imports and bundle analyzer output.

Every interactive element needs an accessible name via aria-label or visible text, and async components must define loading, error, and empty states. The Skill treats missing ARIA attributes and unsanitized user HTML as red flags.