typescript-patterns

Standardize TypeScript patterns for API DTOs, component props, and TanStack Query generics.

2|1|Updated Mar 25, 2026
One-click install
npx skills add https://github.com/529-studio/Vmarble-Warehouse-Management-Client --skill typescript-patterns-529-studio
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: typescript-patterns
Source: https://github.com/529-studio/Vmarble-Warehouse-Management-Client/tree/main/.agents/skills/typescript-patterns
Command: npx skills add https://github.com/529-studio/Vmarble-Warehouse-Management-Client --skill typescript-patterns-529-studio

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill prevents common TypeScript errors, type divergence, and runtime crashes by enforcing strict coding patterns and standardized API handling across the codebase.

Core Features & Use Cases

  • Type Consistency: Ensures all API DTOs are centralized and imported rather than re-declared, maintaining a single source of truth.
  • Robust Error Handling: Provides standardized patterns for handling API errors and strict null/undefined checks to prevent runtime exceptions.
  • Component Standardization: Enforces the use of ComponentProps and proper generic usage for TanStack Query and Zustand stores.

Quick Start

Apply the typescript-patterns skill to refactor the current component to use proper prop extension and strict null checks.

Frequently Asked Questions about typescript-patterns

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

FAQPage Schema
How do I enforce strict type-safe TypeScript patterns for API DTOs?

To enforce type-safe TypeScript patterns, centralize all API DTOs as a single source of truth and import them directly rather than re-declaring definitions. This prevents type divergence and maintains consistency across your codebase.

What is the best way to handle API errors and strict null checks in React?

The best way to handle API errors and strict null checks in React is to apply standardized error handling patterns alongside strict null and undefined validation. This prevents runtime exceptions and ensures robust component execution.

How do I standardize component prop extension in a Next.js codebase?

To standardize component prop extension in a Next.js codebase, enforce the use of ComponentProps for prop inheritance. This ensures maintainability and strict adherence to centralized type definitions for all new and existing code.

How do I manage TanStack Query generics to prevent runtime crashes?

To manage TanStack Query generics and prevent runtime crashes, apply standardized generic usage patterns defined by centralized type definitions. This ensures strict type safety across data fetching operations.

Does this TypeScript standardization work with Zustand stores?

Yes, this TypeScript standardization works with Zustand stores by enforcing proper generic usage. Applying these strict type definitions ensures state management remains type-safe and maintainable across the repository.

Why do I need centralized type definitions for frontend development tasks?

You need centralized type definitions for frontend development tasks to prevent type divergence and runtime crashes. Standardizing API DTO management ensures a single source of truth, maintaining code quality and type safety.