typescript-patterns

Provide type-safe TypeScript design patterns for utility types and API design.

Updated Nov 5, 2025
One-click install
npx skills add https://github.com/wlfmnstr/agentic-knowledge-base --skill typescript-patterns
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: typescript-patterns
Source: https://github.com/wlfmnstr/agentic-knowledge-base/tree/main/.claude/skills/typescript-patterns
Command: npx skills add https://github.com/wlfmnstr/agentic-knowledge-base --skill typescript-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps developers write more reliable, maintainable, and error-free TypeScript code by providing best practices and advanced type design patterns. It reduces common type-related bugs and improves code clarity, allowing you to focus on logic rather than debugging type mismatches.

Core Features & Use Cases

  • Advanced Type Design: Learn to create complex utility types, discriminated unions, and conditional types for precise data modeling.
  • Type-Safe API Patterns: Implement robust API responses, generic components, and event emitters that catch errors at compile time.
  • Use Case: Design a new data fetching layer for a React application, ensuring all API responses are strictly typed and handled with discriminated unions to prevent runtime errors and improve developer experience.

Quick Start

Explain the concept of discriminated unions in TypeScript and provide an example for handling different API response states (loading, success, error).

Frequently Asked Questions about typescript-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I use discriminated unions in TypeScript to handle different API response states?

Discriminated unions in TypeScript let you create type-safe API responses by tagging each state (loading, success, error) with a unique literal type. The compiler enforces exhaustive handling of all cases at compile time, preventing runtime errors and improving type safety across your entire request flow.

What are utility types in TypeScript and when should I use them?

Utility types are built-in TypeScript constructs like Partial, Readonly, and Record that transform existing types for specific use cases. Use them to enforce compile-time safety when designing generic components, API responses, and reusable type patterns without repeating type definitions.

How do I create type-safe generic components that work reliably across frontend and backend projects?

Design generic components by combining conditional types, type parameters, and type guards to ensure strict typing at every layer. This approach catches API contract mismatches, incorrect prop usage, and payload inconsistencies before runtime, reducing bugs in React and server-side TypeScript projects.

What's the best way to implement type guards and assertion helpers in TypeScript?

Type guards and assertion helpers use runtime checks combined with TypeScript's type narrowing to validate data shape and refine types safely. They prevent unsafe type casts and ensure discriminated unions and API responses conform to expected schemas at compile and runtime.

Can I use mapped types and template literal types to enforce stricter type safety?

Yes. Mapped types iterate over object keys to generate precise derived types, while template literal types construct string-literal types dynamically. Together they enforce compile-time safety for event emitters, API routes, and data validation patterns, reducing type-related bugs significantly.

Related Skills