moai-adk 0.35.1__py3-none-any.whl

moai_adk/templates/.claude/skills/moai-lang-typescript/SKILL.md

@@ -0,0 +1,368 @@
+---
+name: moai-lang-typescript
+description: TypeScript 5.9+ development specialist covering React 19, Next.js 16 App Router, type-safe APIs with tRPC, Zod validation, and modern TypeScript patterns. Use when developing TypeScript applications, React components, Next.js pages, or type-safe APIs.
+version: 1.0.0
+category: language
+tags:
+  - typescript
+  - react
+  - nextjs
+  - frontend
+  - fullstack
+updated: 2025-12-07
+status: active
+---
+
+## Quick Reference (30 seconds)
+
+TypeScript 5.9+ Development Specialist - Modern TypeScript with React 19, Next.js 16, and type-safe API patterns.
+
+Auto-Triggers: `.ts`, `.tsx`, `.mts`, `.cts` files, TypeScript configurations, React/Next.js projects
+
+Core Stack:
+- TypeScript 5.9: Deferred module evaluation, decorators, satisfies operator
+- React 19: Server Components, use() hook, Actions, concurrent features
+- Next.js 16: App Router, Server Actions, middleware, ISR/SSG/SSR
+- Type-Safe APIs: tRPC 11, Zod 3.23, tanstack-query
+- Testing: Vitest, React Testing Library, Playwright
+
+Quick Commands:
+```bash
+# Create Next.js 16 project
+npx create-next-app@latest --typescript --tailwind --app
+
+# Install type-safe API stack
+npm install @trpc/server @trpc/client @trpc/react-query zod @tanstack/react-query
+
+# Install testing stack
+npm install -D vitest @testing-library/react @playwright/test
+```
+
+---
+
+## Implementation Guide (5 minutes)
+
+### TypeScript 5.9 Key Features
+
+Satisfies Operator - Type checking without widening:
+```typescript
+type Colors = "red" | "green" | "blue";
+const palette = {
+  red: [255, 0, 0],
+  green: "#00ff00",
+  blue: [0, 0, 255],
+} satisfies Record<Colors, string | number[]>;
+
+palette.red.map((n) => n * 2); // Works - red is number[]
+palette.green.toUpperCase();   // Works - green is string
+```
+
+Deferred Module Evaluation:
+```typescript
+import defer * as analytics from "./heavy-analytics";
+function trackEvent(name: string) {
+  analytics.track(name); // Loads module on first use
+}
+```
+
+Modern Decorators (Stage 3):
+```typescript
+function logged<T extends (...args: any[]) => any>(
+  target: T,
+  context: ClassMethodDecoratorContext
+) {
+  return function (this: ThisParameterType<T>, ...args: Parameters<T>) {
+    console.log(`Calling ${String(context.name)}`);
+    return target.apply(this, args);
+  };
+}
+
+class API {
+  @logged
+  async fetchUser(id: string) { return fetch(`/api/users/${id}`); }
+}
+```
+
+### React 19 Patterns
+
+Server Components (Default in App Router):
+```typescript
+// app/users/[id]/page.tsx - Server Component
+interface PageProps { params: Promise<{ id: string }>; }
+
+export default async function UserPage({ params }: PageProps) {
+  const { id } = await params;
+  const user = await db.user.findUnique({ where: { id } });
+  if (!user) notFound();
+  return <main><h1>{user.name}</h1></main>;
+}
+```
+
+use() Hook - Unwrap Promises and Context:
+```typescript
+"use client";
+import { use } from "react";
+
+function UserProfile({ userPromise }: { userPromise: Promise<User> }) {
+  const user = use(userPromise); // Suspends until resolved
+  return <div>{user.name}</div>;
+}
+```
+
+Actions - Form Handling with Server Functions:
+```typescript
+// app/actions.ts
+"use server";
+import { revalidatePath } from "next/cache";
+import { z } from "zod";
+
+const CreateUserSchema = z.object({
+  name: z.string().min(2),
+  email: z.string().email(),
+});
+
+export async function createUser(formData: FormData) {
+  const validated = CreateUserSchema.parse({
+    name: formData.get("name"),
+    email: formData.get("email"),
+  });
+  await db.user.create({ data: validated });
+  revalidatePath("/users");
+}
+```
+
+useActionState for Form Status:
+```typescript
+"use client";
+import { useActionState } from "react";
+
+export function CreateUserForm() {
+  const [state, action, isPending] = useActionState(createUser, null);
+  return (
+    <form action={action}>
+      <input name="name" disabled={isPending} />
+      <button disabled={isPending}>{isPending ? "Creating..." : "Create"}</button>
+      {state?.error && <p className="error">{state.error}</p>}
+    </form>
+  );
+}
+```
+
+### Next.js 16 App Router
+
+Route Structure:
+```
+app/
+  layout.tsx          # Root layout
+  page.tsx            # Home page (/)
+  loading.tsx         # Loading UI
+  error.tsx           # Error boundary
+  api/route.ts        # API route (/api)
+  users/
+    page.tsx          # /users
+    [id]/page.tsx     # /users/:id
+  (marketing)/about/page.tsx  # /about (route group)
+```
+
+Metadata API:
+```typescript
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: { default: "My App", template: "%s | My App" },
+  description: "Modern TypeScript application",
+};
+
+export async function generateMetadata({ params }): Promise<Metadata> {
+  const { id } = await params;
+  const user = await getUser(id);
+  return { title: user.name };
+}
+```
+
+Server Actions with Validation:
+```typescript
+"use server";
+import { z } from "zod";
+import { revalidatePath } from "next/cache";
+import { redirect } from "next/navigation";
+
+const UpdateUserSchema = z.object({
+  id: z.string().uuid(),
+  name: z.string().min(2).max(100),
+  email: z.string().email(),
+});
+
+export async function updateUser(prevState: any, formData: FormData) {
+  const result = UpdateUserSchema.safeParse(Object.fromEntries(formData));
+  if (!result.success) {
+    return { errors: result.error.flatten().fieldErrors };
+  }
+  await db.user.update({ where: { id: result.data.id }, data: result.data });
+  revalidatePath(`/users/${result.data.id}`);
+  redirect(`/users/${result.data.id}`);
+}
+```
+
+### Type-Safe APIs with tRPC
+
+Server Setup:
+```typescript
+// server/trpc.ts
+import { initTRPC, TRPCError } from "@trpc/server";
+
+const t = initTRPC.context<Context>().create();
+
+export const router = t.router;
+export const publicProcedure = t.procedure;
+export const protectedProcedure = t.procedure.use(async ({ ctx, next }) => {
+  if (!ctx.session?.user) throw new TRPCError({ code: "UNAUTHORIZED" });
+  return next({ ctx: { ...ctx, user: ctx.session.user } });
+});
+```
+
+Router Definition:
+```typescript
+import { z } from "zod";
+import { router, publicProcedure, protectedProcedure } from "../trpc";
+
+export const userRouter = router({
+  getById: publicProcedure
+    .input(z.object({ id: z.string().uuid() }))
+    .query(({ input, ctx }) => ctx.db.user.findUnique({ where: { id: input.id } })),
+
+  create: protectedProcedure
+    .input(z.object({ name: z.string().min(2), email: z.string().email() }))
+    .mutation(({ input, ctx }) => ctx.db.user.create({ data: input })),
+});
+```
+
+Client Usage:
+```typescript
+"use client";
+export function UserList() {
+  const { data, isLoading } = trpc.user.list.useQuery({ page: 1 });
+  const createUser = trpc.user.create.useMutation();
+  if (isLoading) return <div>Loading...</div>;
+  return <ul>{data?.map((u) => <li key={u.id}>{u.name}</li>)}</ul>;
+}
+```
+
+### Zod Schema Patterns
+
+Complex Validation:
+```typescript
+import { z } from "zod";
+
+const UserSchema = z.object({
+  id: z.string().uuid(),
+  name: z.string().min(2).max(100),
+  email: z.string().email(),
+  role: z.enum(["admin", "user", "guest"]),
+  createdAt: z.coerce.date(),
+}).strict();
+
+type User = z.infer<typeof UserSchema>;
+
+const CreateUserSchema = UserSchema.omit({ id: true, createdAt: true })
+  .extend({ password: z.string().min(8), confirmPassword: z.string() })
+  .refine((d) => d.password === d.confirmPassword, {
+    message: "Passwords don't match", path: ["confirmPassword"],
+  });
+```
+
+### State Management
+
+Zustand for Client State:
+```typescript
+import { create } from "zustand";
+import { devtools, persist } from "zustand/middleware";
+
+interface AuthState {
+  user: User | null;
+  login: (user: User) => void;
+  logout: () => void;
+}
+
+export const useAuthStore = create<AuthState>()(
+  devtools(persist((set) => ({
+    user: null,
+    login: (user) => set({ user }),
+    logout: () => set({ user: null }),
+  }), { name: "auth-storage" }))
+);
+```
+
+Jotai for Atomic State:
+```typescript
+import { atom } from "jotai";
+import { atomWithStorage } from "jotai/utils";
+
+const countAtom = atom(0);
+const doubleCountAtom = atom((get) => get(countAtom) * 2);
+const themeAtom = atomWithStorage<"light" | "dark">("theme", "light");
+```
+
+---
+
+## Advanced Patterns
+
+For comprehensive documentation including advanced TypeScript patterns, performance optimization, testing strategies, and deployment configurations, see:
+
+- [reference.md](reference.md) - Complete API reference, Context7 library mappings, advanced type patterns
+- [examples.md](examples.md) - Production-ready code examples, full-stack patterns, testing templates
+
+### Context7 Integration
+
+```typescript
+// TypeScript - mcp__context7__get_library_docs("/microsoft/TypeScript", "decorators satisfies", 1)
+// React 19 - mcp__context7__get_library_docs("/facebook/react", "server-components use-hook", 1)
+// Next.js 16 - mcp__context7__get_library_docs("/vercel/next.js", "app-router server-actions", 1)
+// tRPC - mcp__context7__get_library_docs("/trpc/trpc", "procedures middleware", 1)
+// Zod - mcp__context7__get_library_docs("/colinhacks/zod", "schema validation", 1)
+```
+
+---
+
+## Works Well With
+
+- `moai-domain-frontend` - UI components, styling patterns
+- `moai-domain-backend` - API design, database integration
+- `moai-library-shadcn` - Component library integration
+- `moai-workflow-testing` - Testing strategies and patterns
+- `moai-foundation-quality` - Code quality standards
+- `moai-essentials-debug` - Debugging TypeScript applications
+
+---
+
+## Quick Troubleshooting
+
+TypeScript Errors:
+```bash
+npx tsc --noEmit                    # Type check only
+npx tsc --generateTrace ./trace     # Performance trace
+```
+
+React/Next.js Issues:
+```bash
+npm run build                       # Check for build errors
+npx next lint                       # ESLint check
+rm -rf .next && npm run dev         # Clear cache
+```
+
+Type Safety:
+```typescript
+// Exhaustive check
+function assertNever(x: never): never { throw new Error(`Unexpected: ${x}`); }
+
+// Type guard
+function isUser(v: unknown): v is User {
+  return typeof v === "object" && v !== null && "id" in v;
+}
+```
+
+---
+
+Version: 1.0.0
+Last Updated: 2025-12-07
+Status: Production Ready