Skip to main content 홈 크리에이터 diegosouzapw awesome-omni-skill moai-lang-typescript
moai-lang-typescript 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.
설치로 이동 Skills Marketplace 커뮤니티가 만든 AI 스킬을 발견하고 탐색하세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/diegosouzapw/awesome-omni-skill --skill moai-lang-typescript명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
Zip 다운로드 다운로드 중... 이 저장소의 다른 Skills Token-efficient tracking for AI orchestration. CLI-first for status updates (~50 tokens), agent fallback for complex ops (~1KB). Use when: updating task status, querying blockers, creating progress files, validating phases.
AshAi extension guidelines for integrating AI capabilities with Ash Framework. Use when implementing vectorization/embeddings, exposing Ash actions as LLM tools, creating prompt-backed actions, or setting up MCP servers. Covers semantic search, LangChain integration, and structured outputs.
This skill should be used when solving hard questions, complex architectural problems, or debugging issues that benefit from GPT-5 Pro or GPT-5.1 thinking models with large file context. Use when standard Claude analysis needs deeper reasoning or extended context windows.
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 modularized false user-invocable false tags ["typescript","react","nextjs","frontend","fullstack"] updated "2026-01-08T00:00:00.000Z" status active allowed-tools ["Read","Grep","Glob","mcp__context7__resolve-library-id","mcp__context7__get-library-docs"]
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:
npx create-next-app@latest --typescript --tailwind --app
npm install @trpc/server @trpc/client @trpc/react-query zod @tanstack/react-query
npm install -D vitest @testing-library/react @playwright/test
Implementation Guide (5 minutes)
TypeScript 5.9 Key Features
Satisfies Operator - Type checking without widening:
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 );
palette.green
toUpperCase
Deferred Module Evaluation:
import defer * as analytics from "./heavy-analytics" ;
function trackEvent (name : string track (name);
}
Modern Decorators (Stage 3):
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):
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:
"use client" ;
import { use } from "react" ;
function UserProfile ({ userPromise }: { userPromise: Promise <User> } ) {
const user = use (userPromise);
return <div > {user.name}</div > Actions - Form Handling with Server Functions:
"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:
"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 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)
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:
"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
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 } });
});
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 })),
});
"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 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:
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" }))
);
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 - Complete API reference, Context7 library mappings, advanced type patternsexamples.md - Production-ready code examples, full-stack patterns, testing templates
Context7 Integration
Works Well With
moai-domain-frontend - UI components, styling patternsmoai-domain-backend - API design, database integrationmoai-library-shadcn - Component library integrationmoai-workflow-testing - Testing strategies and patternsmoai-foundation-quality - Code quality standardsmoai-essentials-debug - Debugging TypeScript applications
Quick Troubleshooting npx tsc --noEmit
npx tsc --generateTrace ./trace
npm run build
npx next lint
rm -rf .next && npm run dev
function assertNever (x : never never { throw new Error (`Unexpected: ${x} ` ); }
function isUser (v : unknown User {
return typeof v === "object" && v !== null && "id" in v;
}
