playbooks

home / skills / pluginagentmarketplace / custom-plugin-typescript / frameworks

frameworks skill

/skills/frameworks

This skill helps you master TypeScript across NestJS, React, Next.js, and related frameworks with strong typing guidance.

npx playbooks add skill pluginagentmarketplace/custom-plugin-typescript --skill frameworks

Review the files below or copy the command above to add this skill to your agents.

Files (6)
SKILL.md
1.2 KB
---
name: frameworks
description: TypeScript with popular frameworks like NestJS, React, and Next.js
sasmp_version: "1.3.0"
bonded_agent: 02-typescript-backend
bond_type: PRIMARY_BOND
---

# TypeScript Frameworks Skill

## Overview
Use TypeScript effectively with popular frameworks including NestJS, React, Next.js, and other modern tools.

## Topics Covered

### NestJS
- Module structure
- Decorators and metadata
- Dependency injection types
- Guards and interceptors
- Custom decorators

### React TypeScript
- Component prop types
- Event handler typing
- Context with generics
- Hooks typing
- Ref typing patterns

### Next.js
- Page component types
- API route typing
- getServerSideProps types
- App Router types
- Middleware typing

### Express/Fastify
- Request/Response typing
- Middleware types
- Route handler types
- Error handling types
- Validation with zod

### Type Integration
- Prisma types
- GraphQL code generation
- API client generation
- Database types
- Schema-driven typing

## Prerequisites
- TypeScript advanced types
- Framework basics

## Learning Outcomes
- Type React components
- Build type-safe APIs
- Use framework decorators
- Integrate database types

Overview

This skill teaches TypeScript usage across popular frameworks such as NestJS, React, Next.js, Express and Fastify. It focuses on practical, framework-specific typing patterns and integration with tools like Prisma and GraphQL codegen. Expect hands-on guidance for building type-safe components, API routes, and server-side logic.

How this skill works

The skill inspects common framework areas and presents idiomatic TypeScript patterns: module and decorator typing in NestJS, prop and hook typings in React, and page/API types in Next.js. It also covers backend request/response typing for Express/Fastify, schema-driven types with zod, and end-to-end type integration with Prisma and GraphQL code generation. Examples emphasize typing across boundaries so types flow from database to client.

When to use it

  • When building React components that must be strictly typed (props, refs, events).
  • When creating NestJS modules, controllers, guards, and custom decorators.
  • When implementing Next.js pages, API routes, getServerSideProps, or the App Router.
  • When typing Express or Fastify middleware and error handlers.
  • When integrating database schemas with Prisma, GraphQL, or generated API clients.

Best practices

  • Prefer explicit prop and return types for public components and modules.
  • Use generics for reusable hooks, context, and helpers to retain type inference.
  • Keep API boundary types shared via a common types package or code generation.
  • Validate runtime input with zod or similar and derive TypeScript types from schemas.
  • Annotate decorators, guards, and interceptors in NestJS to ensure DI and metadata remain type-safe.

Example use cases

  • Type a complex form component with generic props and strongly typed event handlers.
  • Create a NestJS controller with DTOs, custom decorators, and typed guards.
  • Implement Next.js getServerSideProps with typed params and serialized results.
  • Type Express/Fastify route handlers and middleware with request/response generics.
  • Generate Prisma/GraphQL types and wire them into resolvers and client code to avoid manual typings.

FAQ

Do I need advanced TypeScript to use this skill?

You should be comfortable with advanced types (generics, mapped types, conditional types) because many patterns rely on them, but examples include explanations to bridge gaps.

How do I keep types consistent across backend and frontend?

Share a types package or use code generation (GraphQL codegen, OpenAPI/Swagger, or Prisma types) so the same source of truth is used by server and client.