Skip to content
typescript-magician logo

TypeScript Magician

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 typing, type errors,...

mcollina/skills2.6Kinstalls1.9Kstars

SKILL.md

Full skill instructions

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

Advanced Generics

Type-Level Programming

Type Safety Patterns

Debugging

More skills from mcollina

oauth logo
mcollina/skills

oauth

Implements OAuth 2.0/2.1 authorization flows in Fastify applications — configures authorization code with PKCE, client credentials, device flow, refresh token rotation, JWT validation, and token introspection/revocation endpoints. Use when setting up authentication, authorization, login flows, ac...

1.9K 1.3K
View
skill-optimizer logo
mcollina/skills

skill-optimizer

Optimizes AI skills for activation, clarity, and cross-model reliability. Use when creating or editing skill packs, diagnosing weak skill uptake, reducing regressions, tuning instruction salience, improving examples, shrinking context cost, or setting benchmark/release gates for skills. Trigger t...

1.9K 1.3K
View
octocat logo
mcollina/skills

octocat

Use this skill whenever the prompt contains any `github.com` URL, even if the user only pastes a link and gives no GitHub-specific keywords. Handles git and GitHub operations using the gh CLI. Triggers include any GitHub link to an issue, pull request, commit, compare page, Actions run, release, ...

1.9K 676
View
init logo
mcollina/skills

init

Creates, updates, or optimizes an AGENTS.md file for a repository with minimal, high-signal instructions covering non-discoverable coding conventions, tooling quirks, workflow preferences, and project-specific rules that agents cannot infer from reading the codebase. Use when setting up agent ins...

1.9K 641
View

Configures ESLint v9 flat config and neostandard for JavaScript and TypeScript projects, including migrating from legacy `.eslintrc*` files or the `standard` package. Use when you need to set up or fix linting with `eslint.config.js` or `eslint.config.mjs`, troubleshoot lint errors, configure neo...

1.9K 625
View
snipgrapher logo
mcollina/skills

snipgrapher

Configures and uses snipgrapher to generate polished code snippet images, including syntax-highlighted PNGs, SVGs, and WebP exports with custom themes, profiles, and styling options. Use when the user wants to create code screenshots, turn code into shareable images, generate pretty code snippets...

1.9K 493
View
githuman logo
mcollina/githuman-skills

githuman

githuman

9 173
View

Popular AI tools

Kaiber logo
Video

Kaiber

Generate, edit, and beat-sync AI video with leading models in one workspace.

Paid
View
Vimcal logo
Productivity

Vimcal

The world's fastest calendar for remote work

Free
View

Transform Your Design with AI Designer by ImgCreator.ai

Freemium
View
Akool AI logo
Content & writing

Akool AI

Revolutionizing Video Production with AI-Powered Creativity

Paid
View

Extend an image past the frame and let AI fill the new aspect ratio.

Freemium
View
StarByFace logo
Security

StarByFace

Discover your celebrity doppelgänger with StarByFace!

Free
View
C

ChainClarity explains 700+ crypto whitepapers in plain English, with layered summaries, comparisons, research tools, alerts, and a $4.99 Pro plan.

Freemium
View
Opus Clip logo
Coding & apps

Opus Clip

Opus.ai: Revolutionize Your Web Experience

Free
View