moai-adk 0.34.0__py3-none-any.whl → 1.1.0__py3-none-any.whl

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

@@ -1,467 +1,97 @@
 ---
-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
-allowed-tools: Read, Write, Edit, Grep, Glob
-tags:
- - frontend
- - react
- - nextjs
- - vue
- - ui
- - components
-updated: 2025-12-06
-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
+user-invocable: false
+tags: ['frontend', 'react', 'nextjs', 'vue', 'ui', 'components']
+context7-libraries: ['/facebook/react', '/vercel/next.js', '/vuejs/vue']
+updated: 2026-01-11
+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
-
-### React 19 Server Components
-
-Modern React Architecture:
-```tsx
-// app/components/UserProfile.tsx
-import { cache } from 'react'
-import { getUser } from '@/lib/users'
-
-const getUserCached = cache(getUser)
-
-interface UserProfileProps {
- userId: string
-}
-
-export default async function UserProfile({ userId }: UserProfileProps) {
- const user = await getUserCached(userId)
-
- return (
- <div className="user-profile">
- <h2>{user.name}</h2>
- <p>{user.email}</p>
- <ClientActions userId={userId} />
- </div>
- )
-}
-
-'use client'
-
-function ClientActions({ userId }: { userId: string }) {
- const [isFollowing, setIsFollowing] = useState(false)
-
- 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>
- )
-}
-```
-
-### 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 }
- })
-
- revalidatePath('/users')
- redirect(`/users/${user.id}`)
-}
-
-// 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
- }
-}
-
-watchEffect(() => {
- fetchUser()
-})
-</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;
-}
-</style>
-```
-
-### Component Architecture
-
-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'
-
-interface CardContextValue {
- variant: 'default' | 'outlined'
-}
-
-const CardContext = createContext<CardContextValue>({
- variant: 'default'
-})
-
-interface CardProps {
- variant?: 'default' | 'outlined'
- children: React.ReactNode
-}
-
-export function Card({ variant = 'default', children }: CardProps) {
- return (
- <CardContext.Provider value={{ variant }}>
- <div className={`card card--${variant}`}>
- {children}
- </div>
- </CardContext.Provider>
- )
-}
-
-export function CardHeader({ children }: { children: React.ReactNode }) {
- return <div className="card__header">{children}</div>
-}
-
-export function CardContent({ children }: { children: React.ReactNode }) {
- return <div className="card__content">{children}</div>
-}
-
-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>
-```
+## Module Index
+
+Load specific modules for detailed patterns:
+
+### Framework Patterns
+
+React 19 Patterns in modules/react19-patterns.md:
+
+- Server Components, Concurrent features, cache() API, Form handling
+
+Next.js 16 Patterns in modules/nextjs16-patterns.md:
+
+- App Router, Server Actions, ISR, Route Handlers, Parallel Routes
+
+Vue 3.5 Patterns in modules/vue35-patterns.md:
+
+- Composition API, Composables, Reactivity, Pinia, Provide/Inject
+
+### Architecture Patterns
+
+Component Architecture in modules/component-architecture.md:
+
+- Design tokens, CVA variants, Compound components, Accessibility
+
+State Management in modules/state-management.md:
+
+- Zustand, Redux Toolkit, React Context, Pinia
+
+Performance Optimization in modules/performance-optimization.md:
+
+- Code splitting, Dynamic imports, Image optimization, Memoization
 
 ---
 
-## Advanced Patterns
-
-### Performance Optimization
-
-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>
- )
-})
-```
-
-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
- }
-)
-
-// 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"
- />
- )
-}
-```
-
-### 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 })
- }
- )
- )
-)
-```
+## Implementation Quickstart
+
+### React 19 Server Component
+
+Create an async page component that uses the cache function from React to memoize data fetching. Import Suspense for loading states. Define a getData function that fetches from the API endpoint with an id parameter and returns JSON. In the page component, wrap the DataDisplay component with Suspense using a Skeleton fallback, and pass the awaited getData result as the data prop.
+
+### Next.js Server Action
+
+Create a server action file with the use server directive. Import revalidatePath from next/cache and z from zod for validation. Define a schema with title (minimum 1 character) and content (minimum 10 characters). The createPost function accepts FormData, validates with safeParse, returns errors on failure, creates the post in the database, and calls revalidatePath for the posts page.
+
+### Vue Composable
+
+Create a useUser composable that accepts a userId ref parameter. Define user as a nullable ref, loading as a boolean ref, and fullName as a computed property that concatenates firstName and lastName. Use watchEffect to set loading true, fetch the user data asynchronously, assign to user ref, and set loading false. Return the user, loading, and fullName refs.
+
+### CVA Component
+
+Import cva and VariantProps from class-variance-authority. Define buttonVariants with base classes for inline-flex, items-center, justify-center, rounded-md, and font-medium. Add variants object with variant options for default (primary background with hover) and outline (border with hover accent). Add size options for sm (h-9, px-3, text-sm), default (h-10, px-4), and lg (h-11, px-8). Set defaultVariants for variant and size. Export a Button component that applies the variants to a button element className.
 
 ---
 
@@ -470,28 +100,38 @@ 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
+
+Module files in the modules directory contain detailed patterns.
+
+For working code examples, see [examples.md](examples.md).
+
+Official documentation:
 
-Component Libraries:
-- shadcn/ui, Material-UI, Ant Design
-- Headless UI, Radix UI
-- Custom design systems
+- 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-11