Skip to main content Início Criadores 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.
Ir para a instalação Skills Marketplace Descubra e explore skills de IA criadas pela comunidade.
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Mostrar detalhes do prompt Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.
npx skills add https://github.com/diegosouzapw/awesome-omni-skill --skill moai-lang-typescriptO comando permanece em uma só linha. Role horizontalmente para revisá-lo antes de copiar.
Prefere uma cópia local? Baixe os arquivos disponíveis atualmente no SkillsMP.
Baixar Zip Baixando... Mais deste repositório 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.
Ocupações relacionadas SOC
Baseado na classificação ocupacional SOC
Explorador de arquivos
2 arquivos 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;
}
