moai-adk 0.32.8__py3-none-any.whl → 0.41.0__py3-none-any.whl

moai_adk/templates/.claude/skills/moai-domain-frontend/SKILL.md

@@ -1,467 +1,165 @@
 ---
-name: moai-domain-frontend
-description: Frontend development specialist covering React 19, Next.js 16, Vue 3.5, and modern UI/UX patterns with component architecture
-version: 1.0.0
-category: domain
-tags:
- - frontend
- - react
- - nextjs
- - vue
- - ui
- - components
-updated: 2025-11-30
-status: active
-author: MoAI-ADK Team
+name: "moai-domain-frontend"
+description: "Frontend development specialist covering React 19, Next.js 16, Vue 3.5, and modern UI/UX patterns with component architecture. Use when building web UIs, implementing components, optimizing frontend performance, or integrating state management."
+version: 2.0.0
+category: "domain"
+modularized: true
+tags: ['frontend', 'react', 'nextjs', 'vue', 'ui', 'components']
+context7-libraries: ['/facebook/react', '/vercel/next.js', '/vuejs/vue']
+updated: 2026-01-08
+allowed-tools:
+  - Read
+  - Grep
+  - Glob
+  - mcp__context7__resolve-library-id
+  - mcp__context7__get-library-docs
+status: "active"
+author: "MoAI-ADK Team"
 ---
 
 # Frontend Development Specialist
 
-## Quick Reference (30 seconds)
+## Quick Reference
 
-Modern Frontend Development - Comprehensive frontend patterns covering React 19, Next.js 16, Vue 3.5, and modern UI/UX architecture.
+Modern Frontend Development - Comprehensive patterns for React 19, Next.js 16, Vue 3.5.
 
 Core Capabilities:
-- React 19: Server components, concurrent features, optimized patterns
-- Next.js 16: App router, server actions, advanced optimization
-- 🟢 Vue 3.5: Composition API, TypeScript integration, reactivity
-- Component Architecture: Design systems, component libraries, story-driven development
-- Responsive Design: Mobile-first, accessibility, performance optimization
+- React 19: Server components, concurrent features, cache(), Suspense
+- Next.js 16: App Router, Server Actions, ISR, Route handlers
+- Vue 3.5: Composition API, TypeScript, Pinia state management
+- Component Architecture: Design systems, compound components, CVA
+- Performance: Code splitting, dynamic imports, memoization
 
 When to Use:
 - Modern web application development
-- Component library creation and management
-- Performance optimization for frontend
-- UI/UX implementation with accessibility
-- Cross-platform frontend development
+- Component library creation
+- Frontend performance optimization
+- UI/UX with accessibility
 
 ---
 
-## Implementation Guide
+## Module Index
 
-### React 19 Server Components
+Load specific modules for detailed patterns:
 
-Modern React Architecture:
-```tsx
-// app/components/UserProfile.tsx
-import { cache } from 'react'
-import { getUser } from '@/lib/users'
+### Framework Patterns
 
-const getUserCached = cache(getUser)
+[React 19 Patterns](modules/react19-patterns.md):
+- Server Components, Concurrent features, cache() API, Form handling
 
-interface UserProfileProps {
- userId: string
-}
+[Next.js 16 Patterns](modules/nextjs16-patterns.md):
+- App Router, Server Actions, ISR, Route Handlers, Parallel Routes
 
-export default async function UserProfile({ userId }: UserProfileProps) {
- const user = await getUserCached(userId)
+[Vue 3.5 Patterns](modules/vue35-patterns.md):
+- Composition API, Composables, Reactivity, Pinia, Provide/Inject
 
- return (
- <div className="user-profile">
- <h2>{user.name}</h2>
- <p>{user.email}</p>
- <ClientActions userId={userId} />
- </div>
- )
-}
+### Architecture Patterns
 
-'use client'
+[Component Architecture](modules/component-architecture.md):
+- Design tokens, CVA variants, Compound components, Accessibility
 
-function ClientActions({ userId }: { userId: string }) {
- const [isFollowing, setIsFollowing] = useState(false)
+[State Management](modules/state-management.md):
+- Zustand, Redux Toolkit, React Context, Pinia
 
- return (
- <button onClick={() => setIsFollowing(!isFollowing)}>
- {isFollowing ? 'Unfollow' : 'Follow'}
- </button>
- )
-}
-```
-
-Concurrent Features:
-```tsx
-import { Suspense } from 'react'
-import { ErrorBoundary } from 'react-error-boundary'
-
-function App() {
- return (
- <ErrorBoundary fallback={<div>Something went wrong</div>}>
- <Suspense fallback={<Loading />}>
- <UserProfile userId="123" />
- </Suspense>
- </ErrorBoundary>
- )
-}
-```
+[Performance Optimization](modules/performance-optimization.md):
+- Code splitting, Dynamic imports, Image optimization, Memoization
 
-### Next.js 16 App Router
-
-Server Actions and Data Fetching:
-```tsx
-// app/actions/users.ts
-'use server'
-
-import { revalidatePath } from 'next/cache'
-import { redirect } from 'next/navigation'
-
-export async function createUser(formData: FormData) {
- const name = formData.get('name') as string
- const email = formData.get('email') as string
+---
 
- const user = await db.user.create({
- data: { name, email }
- })
+## Implementation Quickstart
 
- revalidatePath('/users')
- redirect(`/users/${user.id}`)
-}
+### React 19 Server Component
 
-// app/users/page.tsx
-import { createUser } from '../actions/users'
-
-export default function UsersPage() {
- return (
- <form action={createUser}>
- <input name="name" placeholder="Name" required />
- <input name="email" type="email" placeholder="Email" required />
- <button type="submit">Create User</button>
- </form>
- )
-}
-```
-
-Advanced Route Patterns:
 ```tsx
-// app/[category]/[slug]/page.tsx
-interface PageProps {
- params: { category: string; slug: string }
- searchParams: { [key: string]: string | string[] | undefined }
-}
-
-export default async function Page({ params, searchParams }: PageProps) {
- const { category, slug } = params
- const page = searchParams.page ?? '1'
-
- const data = await getData(category, slug, page)
-
- return <ContentComponent data={data} />
-}
-
-// Generate static params for performance
-export async function generateStaticParams() {
- const posts = await getAllPosts()
- return posts.map((post) => ({
- category: post.category,
- slug: post.slug
- }))
-}
-```
-
-### Vue 3.5 Composition API
-
-Modern Vue Patterns:
-```vue
-<!-- components/UserCard.vue -->
-<script setup lang="ts">
-import { ref, computed, onMounted, watchEffect } from 'vue'
-
-interface User {
- id: string
- name: string
- email: string
-}
-
-interface Props {
- userId: string
-}
-
-const props = defineProps<Props>()
-const emit = defineEmits<{
- userLoaded: [user: User]
-}>()
-
-const user = ref<User | null>(null)
-const loading = ref(true)
-const error = ref<string | null>(null)
-
-const initials = computed(() => {
- return user.value?.name
- .split(' ')
- .map(n => n[0])
- .join('')
- .toUpperCase() ?? '??'
-})
-
-const fetchUser = async () => {
- try {
- loading.value = true
- error.value = null
- user.value = await getUser(props.userId)
- emit('userLoaded', user.value)
- } catch (err) {
- error.value = err instanceof Error ? err.message : 'Failed to load user'
- } finally {
- loading.value = false
- }
-}
+import { cache } from 'react'
+import { Suspense } from 'react'
 
-watchEffect(() => {
- fetchUser()
+const getData = cache(async (id: string) => {
+  const res = await fetch(`/api/data/${id}`)
+  return res.json()
 })
-</script>
-
-<template>
- <div class="user-card">
- <div v-if="loading" class="loading">Loading...</div>
- <div v-else-if="error" class="error">{{ error }}</div>
- <div v-else-if="user" class="user-info">
- <div class="avatar">{{ initials }}</div>
- <div class="details">
- <h3>{{ user.name }}</h3>
- <p>{{ user.email }}</p>
- </div>
- </div>
- </div>
-</template>
-
-<style scoped>
-.user-card {
- @apply border rounded-lg p-4 shadow-sm;
-}
 
-.avatar {
- @apply w-12 h-12 rounded-full bg-blue-500 text-white flex items-center justify-center font-semibold;
+export default async function Page({ params }: { params: { id: string } }) {
+  return (
+    <Suspense fallback={<Skeleton />}>
+      <DataDisplay data={await getData(params.id)} />
+    </Suspense>
+  )
 }
-</style>
 ```
 
-### Component Architecture
+### Next.js Server Action
 
-Design System Components:
 ```tsx
-// components/Button/Button.tsx
-import { forwardRef } from 'react'
-import { cva, type VariantProps } from 'class-variance-authority'
-
-const buttonVariants = cva(
- 'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none',
- {
- variants: {
- variant: {
- default: 'bg-primary text-primary-foreground hover:bg-primary/90',
- destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
- outline: 'border border-input hover:bg-accent hover:text-accent-foreground',
- secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
- ghost: 'hover:bg-accent hover:text-accent-foreground',
- link: 'underline-offset-4 hover:underline text-primary',
- },
- size: {
- default: 'h-10 py-2 px-4',
- sm: 'h-9 px-3 rounded-md',
- lg: 'h-11 px-8 rounded-md',
- icon: 'h-10 w-10',
- },
- },
- defaultVariants: {
- variant: 'default',
- size: 'default',
- },
- }
-)
-
-export interface ButtonProps
- extends React.ButtonHTMLAttributes<HTMLButtonElement>,
- VariantProps<typeof buttonVariants> {
- asChild?: boolean
-}
-
-const Button = forwardRef<HTMLButtonElement, ButtonProps>(
- ({ className, variant, size, asChild = false, ...props }, ref) => {
- return (
- <button
- className={cn(buttonVariants({ variant, size, className }))}
- ref={ref}
- {...props}
- />
- )
- }
-)
-Button.displayName = 'Button'
-
-export { Button, buttonVariants }
-```
-
-Compound Components Pattern:
-```tsx
-// components/Card/Card.tsx
-import { createContext, useContext } from 'react'
+'use server'
 
-interface CardContextValue {
- variant: 'default' | 'outlined'
-}
+import { revalidatePath } from 'next/cache'
+import { z } from 'zod'
 
-const CardContext = createContext<CardContextValue>({
- variant: 'default'
+const schema = z.object({
+  title: z.string().min(1),
+  content: z.string().min(10)
 })
 
-interface CardProps {
- variant?: 'default' | 'outlined'
- children: React.ReactNode
+export async function createPost(formData: FormData) {
+  const result = schema.safeParse({
+    title: formData.get('title'),
+    content: formData.get('content')
+  })
+  if (!result.success) return { errors: result.error.flatten().fieldErrors }
+  await db.post.create({ data: result.data })
+  revalidatePath('/posts')
 }
+```
 
-export function Card({ variant = 'default', children }: CardProps) {
- return (
- <CardContext.Provider value={{ variant }}>
- <div className={`card card--${variant}`}>
- {children}
- </div>
- </CardContext.Provider>
- )
-}
+### Vue Composable
 
-export function CardHeader({ children }: { children: React.ReactNode }) {
- return <div className="card__header">{children}</div>
-}
+```typescript
+import { ref, computed, watchEffect } from 'vue'
 
-export function CardContent({ children }: { children: React.ReactNode }) {
- return <div className="card__content">{children}</div>
+export function useUser(userId: Ref<string>) {
+  const user = ref<User | null>(null)
+  const loading = ref(false)
+  const fullName = computed(() =>
+    user.value ? `${user.value.firstName} ${user.value.lastName}` : ''
+  )
+  watchEffect(async () => {
+    loading.value = true
+    user.value = await fetchUser(userId.value)
+    loading.value = false
+  })
+  return { user, loading, fullName }
 }
-
-export function CardFooter({ children }: { children: React.ReactNode }) {
- return <div className="card__footer">{children}</div>
-}
-
-// Usage
-<Card variant="outlined">
- <CardHeader>
- <h3>Title</h3>
- </CardHeader>
- <CardContent>
- <p>Card content goes here</p>
- </CardContent>
- <CardFooter>
- <Button>Action</Button>
- </CardFooter>
-</Card>
 ```
 
----
-
-## Advanced Patterns
-
-### Performance Optimization
+### CVA Component
 
-React Optimization Patterns:
 ```tsx
-import { memo, useMemo, useCallback, useMemo, useDeferredValue } from 'react'
-
-const ExpensiveList = memo(({ items, onItemClick }: {
- items: Item[]
- onItemClick: (item: Item) => void
-}) => {
- const expensiveValue = useMemo(() => {
- return items.reduce((sum, item) => sum + item.value, 0)
- }, [items])
-
- const handleClick = useCallback((item: Item) => {
- onItemClick(item)
- }, [onItemClick])
-
- return (
- <div>
- <p>Total: {expensiveValue}</p>
- {items.map(item => (
- <div key={item.id} onClick={() => handleClick(item)}>
- {item.name}
- </div>
- ))}
- </div>
- )
-})
-```
+import { cva, type VariantProps } from 'class-variance-authority'
 
-Next.js Performance:
-```tsx
-// Dynamic imports for code splitting
-import dynamic from 'next/dynamic'
-
-const DynamicChart = dynamic(
- () => import('@/components/Chart'),
- {
- loading: () => <div>Loading chart...</div>,
- ssr: false // Client-side only for heavy components
- }
+const buttonVariants = cva(
+  'inline-flex items-center justify-center rounded-md font-medium',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-white hover:bg-primary/90',
+        outline: 'border border-input hover:bg-accent',
+      },
+      size: {
+        sm: 'h-9 px-3 text-sm',
+        default: 'h-10 px-4',
+        lg: 'h-11 px-8',
+      },
+    },
+    defaultVariants: { variant: 'default', size: 'default' },
+  }
 )
 
-// Image optimization
-import Image from 'next/image'
-
-function OptimizedImage({ src, alt, ...props }) {
- return (
- <Image
- src={src}
- alt={alt}
- {...props}
- placeholder="blur"
- blurDataURL="data:image/jpeg;base64,..."
- sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
- />
- )
+export function Button({ variant, size, children }: ButtonProps) {
+  return <button className={buttonVariants({ variant, size })}>{children}</button>
 }
 ```
 
-### State Management
-
-Zustand for Modern State Management:
-```tsx
-import { create } from 'zustand'
-import { devtools, persist } from 'zustand/middleware'
-
-interface UserState {
- user: User | null
- isLoading: boolean
- login: (email: string, password: string) => Promise<void>
- logout: () => void
- updateUser: (updates: Partial<User>) => void
-}
-
-export const useUserStore = create<UserState>()(
- devtools(
- persist(
- (set, get) => ({
- user: null,
- isLoading: false,
-
- login: async (email: string, password: string) => {
- set({ isLoading: true })
- try {
- const user = await authService.login(email, password)
- set({ user, isLoading: false })
- } catch (error) {
- set({ isLoading: false })
- throw error
- }
- },
-
- logout: () => {
- set({ user: null })
- },
-
- updateUser: (updates: Partial<User>) => {
- set(state => ({
- user: state.user ? { ...state.user, ...updates } : null
- }))
- }
- }),
- {
- name: 'user-storage',
- partialize: (state) => ({ user: state.user })
- }
- )
- )
-)
-```
-
 ---
 
 ## Works Well With
@@ -469,28 +167,28 @@ export const useUserStore = create<UserState>()(
 - moai-domain-backend - Full-stack development
 - moai-library-shadcn - Component library integration
 - moai-domain-uiux - UI/UX design principles
-- moai-quality-security - Frontend security and accessibility
-- moai-system-universal - Cross-platform optimization
+- moai-lang-typescript - TypeScript patterns
+- moai-workflow-testing - Frontend testing
 
 ---
 
 ## Technology Stack
 
-Primary Technologies:
-- Frameworks: React 19, Next.js 16, Vue 3.5, Nuxt 3
-- Languages: TypeScript 5.9+, JavaScript ES2024
-- Styling: Tailwind CSS 3.4+, CSS Modules, Styled Components
-- State Management: Zustand, Redux Toolkit, Pinia
-- Testing: Vitest, Testing Library, Playwright
-- Build Tools: Vite 5, Turbopack, SWC
+Frameworks: React 19, Next.js 16, Vue 3.5, Nuxt 3
+Languages: TypeScript 5.9+, JavaScript ES2024
+Styling: Tailwind CSS 3.4+, CSS Modules, shadcn/ui
+State: Zustand, Redux Toolkit, Pinia
+Testing: Vitest, Testing Library, Playwright
+
+---
+
+## Resources
 
-Component Libraries:
-- shadcn/ui, Material-UI, Ant Design
-- Headless UI, Radix UI
-- Custom design systems
+Module files in modules/ directory contain detailed patterns.
+- React: https://react.dev/
+- Next.js: https://nextjs.org/docs
+- Vue: https://vuejs.org/
 
 ---
 
-Status: Production Ready
-Last Updated: 2025-11-30
-Maintained by: MoAI-ADK Frontend Team
+Version: 2.0.0 | Last Updated: 2026-01-06