Skip to content
Development
Skill

/typescript-magician

Designs complex generic types, refactors `any` types to strict alternatives, creates type guards and utility types, and resolves TypeScript compiler errors. Use when the user asks about TypeScript (TS) types, generics, type inference, type guards, removing `any` types, strict

From plugin
skills
2k11 skills

Claude Code

$ npx -y skills add mcollina/skills --skill typescript-magician --agent claude-code

SKILL.md

typescript-magician.SKILL.md
name: typescript-magician
description: Designs complex generic types, refactors `any` types to strict alternatives, creates type guards and utility types, and resolves TypeScript compiler errors. Use when the user asks about TypeScript (TS) types, generics, type inference, type guards, removing `any` types, strict typing, type errors, `infer`, `extends`, conditional types, mapped types, template literal types, branded/opaque types, or utility types like `Partial`, `Record`, `ReturnType`, and `Awaited`.
metadata:
  tags: typescript, types, generics, type-safety, advanced-typescript

When to use

Use this skill for:

  • TypeScript errors and type challenges
  • Eliminating `any` types from codebases
  • Complex generics and type inference issues
  • When strict typing is needed

Instructions

When invoked: 1. Run `tsc --noEmit` to capture the full error output before making changes 2. Identify the root cause of type issues (unsound inference, missing constraints, implicit `any`, etc.) 3. Craft precise, type-safe solutions using advanced TypeScript features 4. Eliminate all `any` types with proper typing — validate each replacement still satisfies call sites 5. Confirm the fix compiles cleanly with a second `tsc --noEmit` pass

Capabilities include:

  • Advanced generics and conditional types
  • Template literal types and mapped types
  • Utility types and type manipulation
  • Brand types and nominal typing
  • Complex inference patterns
  • Variance and distribution rules
  • Module augmentation and declaration merging

For every TypeScript challenge:

  • Explain the type theory behind the problem
  • Provide multiple solution approaches when applicable
  • Show before/after type representations
  • Include comprehensive type tests
  • Ensure full IntelliSense support

Quick Examples

Eliminating `any` with generics

**Before**

function getProperty(obj: any, key: string): any {
  return obj[key];
}

**After**

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}
// getProperty({ name: "Alice" }, "name") → inferred as string ✓

Narrowing an unknown API response

**Before**

async function fetchUser(): Promise<any> {
  const res = await fetch("/api/user");
  return res.json();
}

**After**

interface User { id: number; name: string }

function isUser(value: unknown): value is User {
  return (
    typeof value === "object" &&
    value !== null &&
    "id" in value &&
    "name" in value
  );
}

async function fetchUser(): Promise<User> {
  const res = await fetch("/api/user");
  const data: unknown = await res.json();
  if (!isUser(data)) throw new Error("Invalid user shape");
  return data;
}

Reference

Read individual rule files for detailed explanations and code examples:

Core Patterns

  • [rules/as-const-typeof.md](rules/as-const-typeof.md) - Deriving types from runtime values using `as const` and `typeof`
  • [rules/array-index-access.md](rules/array-index-access.md) - Accessing array element types using `[number]` indexing
  • [rules/utility-types.md](rules/utility-types.md) - Built-in utility types: Parameters, ReturnType, Awaited, Omit, Partial, Record

Advanced Generics

  • [rules/generics-basics.md](rules/generics-basics.md) - Fundamentals of generic types, constraints, and inference
  • [rules/builder-pattern.md](rules/builder-pattern.md) - Type-safe builder pattern with chainable methods
  • [rules/deep-inference.md](rules/deep-inference.md) - Achieving deep type inference with F.Narrow and const type parameters

Type-Level Programming

  • [rules/conditional-types.md](rules/conditional-types.md) - Conditional types for type-level if/else logic
  • [rules/infer-keyword.md](rules/infer-keyword.md) - Using `infer` to extract types within conditional types
  • [rules/template-literal-types.md](rules/template-literal-types.md) - String manipulation at the type level
  • [rules/mapped-types.md](rules/mapped-types.md) - Creating new types by transforming existing type properties

Type Safety Patterns

  • [rules/opaque-types.md](rules/opaque-types.md) - Brand types and opaque types for type-safe identifiers
  • [rules/type-narrowing.md](rules/type-narrowing.md) - Narrowing types through control flow analysis
  • [rules/function-overloads.md](rules/function-overloads.md) - Using function overloads for complex function signatures

Debugging

  • [rules/error-diagnosis.md](rules/error-diagnosis.md) - Strategies for diagnosing and understanding TypeScript type errors
Read more
@mcollina
Ships withskills

Skills for AI-assisted development.

Stars on GitHub

Momentum

stars in total
2.0k
Star history of mcollina/skills on GitHub, a chart by star-history.com

Other skills on skills.

documentation

documentation

Creates, structures, and reviews technical documentation following the Diátaxis framework (tutorials, how-to guides, reference,…

@mcollina@mcollinaInstall Skill
fastify

fastify

Guides development of Fastify Node.js backend servers and REST APIs using TypeScript or JavaScript. Use when building,…

@mcollina@mcollinaInstall Skill
init

init

Creates, updates, or optimizes an AGENTS.md file for a repository with minimal, high-signal instructions covering…

@mcollina@mcollinaInstall Skill
node

node

Provides domain-specific best practices for Node.js development with TypeScript, covering type stripping, async patterns, error…

@mcollina@mcollinaInstall Skill
nodejs-core

nodejs-core

Contributes to and debugs Node.js core, including nodejs/node commit and PR tone, contribution workflows, native crashes, V8…

@mcollina@mcollinaInstall Skill

More skills from other plugins.

brainstorming
Auto-invoked

brainstorming

You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or…

@obra@obraInstall Skill
ask-matt

ask-matt

Ask which skill or flow fits your situation. A router over the skills in this repo.

skills10d309k
@mattpocock@mattpocockInstall Skill
accessibility
Auto-invoked

accessibility

Design, implement, and audit accessible UI to WCAG 2.2 Level AA across Web, iOS, and Android — semantic ARIA roles and labels,…

ecc12d293k
@affaan-m@affaan-mInstall Skill
compiler-commit

compiler-commit

Use when you want to verify compiler changes and commit with the correct convention. Runs tests, lint, and format, then commits…

react1d252k
@facebook@facebookInstall Skill

Questions about typescript-magician.

Which coding agents can use typescript-magician?
typescript-magician installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.