> 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, `infer`, `extends`, conditional types, mapped types, template literal types, branded/opaque types, or utility types like `Partial`, `Record`, `ReturnType`, and `Awaited`.
curl "https://skillshub.wtf/Harmeet10000/skills/typescript-magician?format=md"When to use
Use this skill for:
- TypeScript errors and type challenges
- Eliminating
anytypes from codebases - Complex generics and type inference issues
- When strict typing is needed
Instructions
When invoked:
- Run
tsc --noEmitto capture the full error output before making changes - Identify the root cause of type issues (unsound inference, missing constraints, implicit
any, etc.) - Craft precise, type-safe solutions using advanced TypeScript features
- Eliminate all
anytypes with proper typing — validate each replacement still satisfies call sites - Confirm the fix compiles cleanly with a second
tsc --noEmitpass
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 - Deriving types from runtime values using
as constandtypeof - rules/array-index-access.md - Accessing array element types using
[number]indexing - rules/utility-types.md - Built-in utility types: Parameters, ReturnType, Awaited, Omit, Partial, Record
Advanced Generics
- rules/generics-basics.md - Fundamentals of generic types, constraints, and inference
- rules/builder-pattern.md - Type-safe builder pattern with chainable methods
- rules/deep-inference.md - Achieving deep type inference with F.Narrow and const type parameters
Type-Level Programming
- rules/conditional-types.md - Conditional types for type-level if/else logic
- rules/infer-keyword.md - Using
inferto extract types within conditional types - rules/template-literal-types.md - String manipulation at the type level
- rules/mapped-types.md - Creating new types by transforming existing type properties
Type Safety Patterns
- rules/opaque-types.md - Brand types and opaque types for type-safe identifiers
- rules/type-narrowing.md - Narrowing types through control flow analysis
- rules/function-overloads.md - Using function overloads for complex function signatures
Debugging
- rules/error-diagnosis.md - Strategies for diagnosing and understanding TypeScript type errors
> related_skills --same-repo
> vibe-ppt
Convert this into a web based slide deck using reveal.js. Use the following brand colour and logo. Primary colour: #EE4822 Theme: Light Logo: https://media.licdn.com/dms/image/v2/D560BAQFeaNrDEATcKQ/company-logo_200_200/company-logo_200_200/0/1709465010800/100xengineers_logo?e=2147483647&v=beta&t=qKncqAfB_j9ckDOxOx1eN9EEPocLTbNqliLnAU3sP6c Slide Content: Vibe Coding with Gemini Canvas Slide 1: Vibe Coding with Gemini Canvas Slide 2: What is Vibe Coding? Vibe Coding: Use natural language pro
> upwork-scrape-apply
# Upwork Job Scrape & Apply Pipeline Scrape Upwork jobs matching AI/automation keywords, generate personalized cover letters and proposals, and output to a Google Sheet with one-click apply links. ## Inputs - **Keywords**: List of search terms (default: automation, ai agent, n8n, gpt, workflow, api integration, scraping, ai consultant) - **Limit**: Max jobs to fetch (default: 50) - **Days**: Only jobs from last N days (default: 1 = last 24 hours) - **Filters**: - `--verified-payment`: Only
> ui-ux-pro-max
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: g
> typescript-expert
TypeScript and JavaScript expert with deep knowledge of type-level programming, performance optimization, monorepo management, migration strategies, and modern tooling.