Refactor inline types into reusable, well-organized type definitions using interfaces, type aliases, and generics
Extracts inline TypeScript types into reusable, well-organized definitions. Triggers when you specify a target file for type extraction.
/plugin marketplace add djankies/claude-configs/plugin install typescript@claude-configsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
Project configuration: @tsconfig.json @package.json </context>
<task> Refactor inline types into reusable, well-organized type definitions:Read the target file specified by the user.
Identify all inline type definitions:
Find duplicated type patterns:
Locate complex inline types:
Detect types that could be reused:
Determine appropriate type organization:
Interfaces for object shapes (extensible):
interface User {
id: string
name: string
email: string
}
interface AdminUser extends User {
permissions: string[]
}
Type aliases for unions/primitives/functions:
type Status = "pending" | "active" | "inactive"
type ID = string | number
type Handler = (event: Event) => void
Generics for reusable patterns:
type Result<T, E = Error> =
| { success: true; data: T }
| { success: false; error: E }
type Nullable<T> = T | null
type Optional<T> = T | undefined
Utility types for transformations:
type PartialUser = Partial<User>
type UserCredentials = Pick<User, "email" | "password">
type PublicUser = Omit<User, "password">
type ReadonlyUser = Readonly<User>
Plan type hierarchy:
Create types module if needed:
types.ts for single domaintypes/index.ts for multiple domainstypes/{domain}.ts for large projectsExtract inline types to named definitions:
Before:
function createUser(data: {
name: string
email: string
age: number
}): { id: string; name: string; email: string; age: number } {
return { id: generateId(), ...data }
}
After:
interface UserInput {
name: string
email: string
age: number
}
interface User extends UserInput {
id: string
}
function createUser(data: UserInput): User {
return { id: generateId(), ...data }
}
Give descriptive names:
Add JSDoc for complex types:
/**
* Represents the result of an async operation.
* Success case includes data, failure case includes error.
*/
type AsyncResult<T, E = Error> =
| { success: true; data: T }
| { success: false; error: E }
Use generic constraints:
interface Repository<T extends { id: string }> {
findById(id: string): Promise<T | null>
save(item: T): Promise<T>
}
Organize types logically:
// Base types
export interface User {
id: string
name: string
}
// Derived types
export interface AdminUser extends User {
permissions: string[]
}
// Input/output types
export type CreateUserInput = Omit<User, "id">
export type UserResponse = Readonly<User>
// Utility types
export type PartialUser = Partial<User>
Export public types:
export interface User { }
export type Status = "active" | "inactive"
Keep internal types private:
interface InternalCache { }
type ValidationState = "valid" | "invalid"
Update original file:
import { User, CreateUserInput, UserResponse } from "./types"
Replace duplicate types:
Simplify complex inline types:
// Before
function process(
data: { id: string } & ({ type: "user"; name: string } | { type: "admin"; permissions: string[] })
): void { }
// After
interface BaseData {
id: string
}
type UserData = BaseData & {
type: "user"
name: string
}
type AdminData = BaseData & {
type: "admin"
permissions: string[]
}
type ProcessData = UserData | AdminData
function process(data: ProcessData): void { }
Add type aliases for readability:
type UserID = string
type Timestamp = number
type EmailAddress = string
Use discriminated unions:
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; size: number }
| { kind: "rectangle"; width: number; height: number }
function area(shape: Shape): number {
switch (shape.kind) {
case "circle":
return Math.PI * shape.radius ** 2
case "square":
return shape.size ** 2
case "rectangle":
return shape.width * shape.height
}
}
Apply utility types:
type UserInput = Omit<User, "id" | "createdAt">
type PartialUpdate = Partial<UserInput>
type ReadonlyConfig = Readonly<Config>
type RequiredFields = Required<OptionalConfig>
Run type check on the target file:
pnpm type-check 2>&1 | grep "target-file"
Replace target-file with the actual file path.
Verify:
If errors found:
Code Quality Requirements:
Extraction Requirements:
Type Design Principles:
pnpm type-check 2>&1 | grep "target-file"
Replace target-file with the actual file path. Must show zero errors.
File Integrity:
Failure Handling:
For each extracted type:
Location: {types-file}:{line}
Definition:
{Type definition}
Usage: {Where and how it's used}
Rationale: {Why extraction provides value}
Add to original file:
import { Type1, Type2, Type3 } from "./types"
{Output showing zero errors}
✅ All types properly extracted ✅ No type errors introduced ✅ Type safety maintained ✅ Imports/exports correct </output>
This skill should be used when the user asks to "create a slash command", "add a command", "write a custom command", "define command arguments", "use command frontmatter", "organize commands", "create command with file references", "interactive command", "use AskUserQuestion in command", or needs guidance on slash command structure, YAML frontmatter fields, dynamic arguments, bash execution in commands, user interaction patterns, or command development best practices for Claude Code.
This skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.
This skill should be used when the user asks to "create a hook", "add a PreToolUse/PostToolUse/Stop hook", "validate tool use", "implement prompt-based hooks", "use ${CLAUDE_PLUGIN_ROOT}", "set up event-driven automation", "block dangerous commands", or mentions hook events (PreToolUse, PostToolUse, Stop, SubagentStop, SessionStart, SessionEnd, UserPromptSubmit, PreCompact, Notification). Provides comprehensive guidance for creating and implementing Claude Code plugin hooks with focus on advanced prompt-based hooks API.