typescript-refactoring-patterns
Expert TypeScript refactoring patterns for cleaner, type-safe code
Works with
Agent Skills format with YAML frontmatter. Claude Code reads it as-is.
---
name: "typescript-refactoring-patterns"
description: "Expert TypeScript refactoring patterns for cleaner, type-safe code"
license: "MIT"
---
# TypeScript Refactoring Patterns
## Core Principles
1. **Type Narrowing Over Type Assertions** - Use type guards and discriminated unions instead of `as` casts
2. **Const Assertions for Literals** - Use `as const` for immutable literal types
3. **Generic Constraints** - Prefer `extends` constraints over `any`
4. **Branded Types** - Use branded types for domain-specific validation
## Refactoring Patterns
### Extract Discriminated Union
When you see multiple boolean flags, refactor to discriminated union:
```typescript
// Before
interface User {
isAdmin: boolean;
isGuest: boolean;
permissions?: string[];
}
// After
type User =
| { role: 'admin'; permissions: string[] }
| { role: 'guest' }
| { role: 'member'; permissions: string[] };
```
### Replace Conditional with Polymorphism
When you see switch statements on type, use the strategy pattern:
```typescript
// Before
function process(item: Item) {
switch (item.type) {
case 'a': return processA(item);
case 'b': return processB(item);
}
}
// After
const processors: Record<ItemType, (item: Item) => Result> = {
a: processA,
b: processB,
};
const process = (item: Item) => processors[item.type](item);
```
### Extract Type Guard
When narrowing types, create reusable type guards:
```typescript
function isNonNullable<T>(value: T): value is NonNullable<T> {
return value !== null && value !== undefined;
}
// Usage
const items = array.filter(isNonNullable);
```
### Use Branded Types for Validation
Prevent primitive obsession with branded types:
```typescript
type UserId = string & { readonly brand: unique symbol };
type Email = string & { readonly brand: unique symbol };
function createUserId(id: string): UserId {
if (!isValidUuid(id)) throw new Error('Invalid user ID');
return id as UserId;
}
```
## Code Smell Detectors
Watch for these patterns and refactor:
- `any` types (replace with `unknown` + type guards)
- Non-null assertions `!` (add proper checks)
- Type assertions `as` (use type guards)
- Optional chaining abuse `?.?.?.` (restructure data)
- Index signatures without validation
## Quick Wins
1. Enable `strict: true` in tsconfig
2. Use `satisfies` for type checking without widening
3. Prefer `readonly` arrays and objects
4. Use `unknown` for external data, validate at boundariesMore Refactoring skills
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
analyze-project
lllllllama/rigorpilot-skills
Rigor Analyze / Rigor Audit read-only skill for deep learning research repositories. Use when the user wants to read and understand a repository, inspect model structure and training or inference entrypoints, review configs and insertion points, or flag suspicious implementation patterns without modifying code or running heavy jobs. Do not use for active command execution, broad refactoring, speculative code adaptation, or automatic bug fixing.
request-refactor-plan
mattpocock/skills
Create a detailed refactor plan with tiny commits via user interview, then file it as a GitHub issue. Use when user wants to plan a refactor, create a refactoring RFC, or break a refactor into safe incremental steps.

