Skip to main content Home Creators 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.
Jump to install Skills Marketplace Discover and explore AI skills built by the community.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Show prompt details A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/diegosouzapw/awesome-omni-skill --skill moai-lang-typescriptThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Download Zip Downloading... More from this repository 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.
Related occupations SOC
Based on SOC occupation classification
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;
}
