К основному содержанию
скилл CX Codex

typescript-refactor — скилл для Claude Code: рефакторинг TS и TSX

Скилл с 47 правилами по рефакторингу TypeScript и React/TSX: типы, сужение, дженерики, современные фичи TS 6.0 и React 19.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add pproenca/dot-skills --skill typescript-refactor -a claude-code
Открыть на GitHub

Что делает typescript-refactor

Скилл разбит на 9 категорий по приоритету: архитектура типов, сужение и гарды, современный TypeScript, React и TSX, дженерики, производительность компилятора, обработка ошибок, рантайм-паттерны, подводные камни. У каждого правила свой префикс (arch-, narrow-, modern-, tsx-, generic-, compile-, error-, perf-, quirk-) и отдельный файл в references/. Агент подтягивает нужный файл, когда задача попадает под категорию.

Внутри — конкретные приёмы: замена as-кастов на проверяемые гарды, дискриминированные объединения вместо строковых enum, satisfies для конфигов, using для очистки ресурсов, const-параметры типов, with-атрибуты импорта вместо устаревшего assert. Для React 19 — типизация пропсов напрямую без React.FC, передача ref как пропа вместо forwardRef, расширение нативных пропсов через ComponentPropsWithRef. Есть блок про компилятор: явные возвращаемые типы у экспортируемых функций, isolatedDeclarations для параллельного вывода деклараций, project references для монорепозиториев.

Скилл рассчитан на TypeScript 6.0 и React 19, поэтому на старых версиях часть советов про using, isolatedDeclarations и with-атрибуты не соберётся — это повод проверить версию компилятора до того, как агент начнёт правки. Ставится одной командой через npx skills add.

Какие задачи решает

  • убрать as-касты и заменить их на проверяемые гарды
  • спроектировать дискриминированные объединения для ветвления по типу
  • ускорить сборку монорепозитория через project references
  • типизировать пропсы и хуки в .tsx без React.FC
  • перейти на современные фичи TS 6.0 без сюрпризов в рантайме

Примеры запросов агенту

  • Отрефактори этот файл: убери as-касты и добавь type guards
  • Проверь типизацию компонента в Button.tsx по правилам typescript-refactor
  • Переведи этот конфиг на satisfies вместо аннотации типа

Как установить typescript-refactor

1Через Skills CLI (Vercel)

npx skills add pproenca/dot-skills --skill typescript-refactor -a claude-code

2Вручную: положить файлы

~/.claude/skills/typescript-refactor/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/typescript-refactor/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о typescript-refactor

Как установить typescript-refactor в Claude?

Выполни npx skills add pproenca/dot-skills --skill typescript-refactor -a claude-code. Скилл появится в ~/.claude/skills/typescript-refactor/SKILL.md.

Что делает typescript-refactor?

Даёт агенту 47 правил по рефакторингу и модернизации TypeScript и React/TSX: архитектура типов, сужение, дженерики, типизация компонентов и хуков, производительность компилятора.

Для каких версий TypeScript и React подходит скилл?

Правила актуальны для TypeScript 6.0 и React 19. Часть советов — using, isolatedDeclarations, with-атрибуты импорта — опирается на эти версии.

Исходный текст

SKILL.md · MIT
---
name: typescript-refactor
description: TypeScript and TSX refactoring and modernization guidelines from a principal specialist perspective, current to TypeScript 6.0 and React 19. This skill should be used when refactoring, reviewing, or modernizing TypeScript or React/TSX code for type safety, compiler performance, and idiomatic patterns. Triggers on tasks involving type architecture, narrowing, generics, discriminated unions, error handling, React component and hook typing, or migration to modern TypeScript features (satisfies, using, const type parameters, inferred type predicates, isolatedDeclarations, erasable syntax, import attributes).
---

# TypeScript Refactor Best Practices

Comprehensive TypeScript and TSX refactoring and modernization guide designed for AI agents and LLMs. Contains 47 rules across 9 categories, prioritized by impact to guide automated refactoring, code review, and code generation. Current to TypeScript 6.0 and React 19.

## When to Apply

Reference these guidelines when:
- Refactoring TypeScript or React/TSX code for type safety and maintainability
- Designing type architectures (discriminated unions, branded types, generics)
- Narrowing types to eliminate unsafe `as` casts
- Typing React components and hooks (props, refs, events, state) in `.tsx` files
- Adopting modern TypeScript 5.x–6.0 features (`satisfies`, `using`, const type parameters, inferred type predicates, erasable syntax, `with` import attributes)
- Optimizing compiler performance in large codebases (`isolatedDeclarations`, project references)
- Implementing type-safe error handling patterns
- Reviewing code for TypeScript quirks and pitfalls

## Rule Categories by Priority

| Priority | Category | Impact | Prefix |
|----------|----------|--------|--------|
| 1 | Type Architecture | CRITICAL | `arch-` |
| 2 | Type Narrowing & Guards | CRITICAL | `narrow-` |
| 3 | Modern TypeScript | HIGH | `modern-` |
| 4 | React & TSX | HIGH | `tsx-` |
| 5 | Generic Patterns | HIGH | `generic-` |
| 6 | Compiler Performance | MEDIUM-HIGH | `compile-` |
| 7 | Error Safety | MEDIUM | `error-` |
| 8 | Runtime Patterns | MEDIUM | `perf-` |
| 9 | Quirks & Pitfalls | LOW-MEDIUM | `quirk-` |

## Quick Reference

### 1. Type Architecture (CRITICAL)

- [`arch-discriminated-unions`](references/arch-discriminated-unions.md) — Use discriminated unions over string enums for exhaustive pattern matching
- [`arch-branded-types`](references/arch-branded-types.md) — Use branded types for domain identifiers to prevent value mix-ups
- [`arch-satisfies-over-annotation`](references/arch-satisfies-over-annotation.md) — Use `satisfies` for config objects to preserve literal types
- [`arch-interfaces-over-intersections`](references/arch-interfaces-over-intersections.md) — Extend interfaces instead of intersecting types for better error messages
- [`arch-const-assertion`](references/arch-const-assertion.md) — Use `as const` for immutable literal inference
- [`arch-readonly-by-default`](references/arch-readonly-by-default.md) — Default to readonly types for function parameters and return values
- [`arch-avoid-partial-abuse`](references/arch-avoid-partial-abuse.md) — Avoid `Partial<T>` abuse for builder patterns

### 2. Type Narrowing & Guards (CRITICAL)

- [`narrow-custom-type-guards`](references/narrow-custom-type-guards.md) — Replace `as` with runtime-checked guards; TS 5.5+ infers the predicate
- [`narrow-assertion-functions`](references/narrow-assertion-functions.md) — Use assertion functions for precondition checks
- [`narrow-exhaustive-switch`](references/narrow-exhaustive-switch.md) — Enforce exhaustive switch with `never`
- [`narrow-in-operator`](references/narrow-in-operator.md) — Narrow with the `in` operator for interface unions
- [`narrow-eliminate-as-casts`](references/narrow-eliminate-as-casts.md) — Eliminate `as` casts with proper narrowing chains

### 3. Modern TypeScript (HIGH)

- [`modern-using-keyword`](references/modern-using-keyword.md) — Use the `using` keyword for resource cleanup
- [`modern-const-type-parameters`](references/modern-const-type-parameters.md) — Use const type parameters for literal inference
- [`modern-template-literal-types`](references/modern-template-literal-types.md) — Use template literal types for string patterns
- [`modern-noinfer-utility`](references/modern-noinfer-utility.md) — Use `NoInfer` to control type parameter inference
- [`modern-verbatim-module-syntax`](references/modern-verbatim-module-syntax.md) — Enable `verbatimModuleSyntax` for explicit import types
- [`modern-erasable-syntax`](references/modern-erasable-syntax.md) — Prefer erasable syntax over enums and namespaces for type-stripping
- [`modern-import-attributes`](references/modern-import-attributes.md) — Use `with` import attributes instead of deprecated `assert`

### 4. React & TSX (HIGH)

- [`tsx-avoid-react-fc`](references/tsx-avoid-react-fc.md) — Type props directly instead of `React.FC`
- [`tsx-ref-as-prop`](references/tsx-ref-as-prop.md) — Pass `ref` as a prop instead of `forwardRef` (React 19)
- [`tsx-extend-native-props`](references/tsx-extend-native-props.md) — Extend native element props with `ComponentPropsWithRef` instead of redeclaring them
- [`tsx-discriminated-props`](references/tsx-discriminated-props.md) — Model mutually-exclusive props as discriminated unions
- [`tsx-event-handler-types`](references/tsx-event-handler-types.md) — Type event handlers with React synthetic event types
- [`tsx-hook-typing`](references/tsx-hook-typing.md) — Type `useState`/`useRef` for nullable and mutable state

### 5. Generic Patterns (HIGH)

- [`generic-constrain-dont-overconstrain`](references/generic-constrain-dont-overconstrain.md) — Constrain generics minimally
- [`generic-avoid-distributive-surprises`](references/generic-avoid-distributive-surprises.md) — Control distributive conditional types
- [`generic-mapped-type-utilities`](references/generic-mapped-type-utilities.md) — Build custom mapped types for repeated transformations
- [`generic-return-type-inference`](references/generic-return-type-inference.md) — Preserve return type inference in generic functions

### 6. Compiler Performance (MEDIUM-HIGH)

- [`compile-explicit-return-types`](references/compile-explicit-return-types.md) — Add explicit return types to exported functions
- [`compile-avoid-deep-recursion`](references/compile-avoid-deep-recursion.md) — Avoid deeply recursive type definitions
- [`compile-project-references`](references/compile-project-references.md) — Use project references for monorepo builds
- [`compile-base-types-over-unions`](references/compile-base-types-over-unions.md) — Use base types instead of large union types
- [`compile-isolated-declarations`](references/compile-isolated-declarations.md) — Enable `isolatedDeclarations` for parallel declaration emit

### 7. Error Safety (MEDIUM)

- [`error-result-type`](references/error-result-type.md) — Use Result types instead of thrown exceptions
- [`error-exhaustive-error-handling`](references/error-exhaustive-error-handling.md) — Use exhaustive checks for typed error variants
- [`error-typed-catch`](references/error-typed-catch.md) — Type catch clause variables as `unknown`
- [`error-discriminated-error-unions`](references/error-discriminated-error-unions.md) — Model domain errors as discriminated unions

### 8. Runtime Patterns (MEDIUM)

- [`perf-union-literals-over-enums`](references/perf-union-literals-over-enums.md) — Use union literals instead of enums — enums are non-erasable
- [`perf-avoid-delete-operator`](references/perf-avoid-delete-operator.md) — Avoid the `delete` operator on objects
- [`perf-object-freeze-const`](references/perf-object-freeze-const.md) — Use `Object.freeze` with `as const` for true immutability
- [`perf-object-keys-narrowing`](references/perf-object-keys-narrowing.md) — Avoid `Object.keys` type widening
- [`perf-map-set-over-object`](references/perf-map-set-over-object.md) — Use `Map` and `Set` over plain objects for dynamic collections

### 9. Quirks & Pitfalls (LOW-MEDIUM)

- [`quirk-excess-property-checks`](references/quirk-excess-property-checks.md) — Understand excess property checks on object literals
- [`quirk-empty-object-type`](references/quirk-empty-object-type.md) — Avoid the `{}` type — it means non-nullish
- [`quirk-structural-typing-escapes`](references/quirk-structural-typing-escapes.md) — Guard against structural typing escape hatches
- [`quirk-variance-annotations`](references/quirk-variance-annotations.md) — Use variance annotations to document generic intent (not for speed)

## How to Use

Read individual reference files for detailed explanations and code examples:

- [Section definitions](references/_sections.md) — Category structure and impact levels
- [Rule template](assets/templates/_template.md) — Template for adding new rules

## Reference Files

| File | Description |
|------|-------------|
| [references/_sections.md](references/_sections.md) | Category definitions and ordering |
| [assets/templates/_template.md](assets/templates/_template.md) | Template for new rules |
| [metadata.json](metadata.json) | Version and reference information |

© pproenca · MIT · pproenca/dot-skills

Похожие скиллы

Всё по теме «Код-ревью и рефакторинг» →
typescript-variables mkosir Применяет соглашения TypeScript для переменных: const assertions, замена enum на литеральные типы, union вместо флагов, различение null и undefined. CX Codex +1 3 800установок mastering-typescript Richard Hightower Помогает писать строгий код на TypeScript 5.9+ и настраивать тулчейн для React 19 или NestJS 11. Пригодится при миграции с JavaScript и проектировании сложных типов. CX Codex +1 790установок typescript-write metabase Скилл для написания и редактирования TypeScript и JavaScript кода с соблюдением стандартов Metabase. Требует строгую типизацию без any и проверку типов перед завершением. CX Codex +1 2 100установок typescript-magician mcollina Устраняет ошибки TypeScript, заменяет any на строгие типы и строит типобезопасные дженерики. Помогает навести порядок в типах кодовой базы. CX Codex +1 2 800установок typescript-advanced-types sickn33 Помогает агенту писать дженерики, условные и mapped-типы в TypeScript и честно говорит, где проверка типов заканчивается. CX Codex +1 1 300установок typescript-discriminated-unions mkosir Скилл учит ИИ-агента применять дискриминированные объединения в TypeScript для взаимоисключающих состояний и проверять исчерпывающий switch через ESLint. CX Codex +1 3 800установок

Из того же набора45

framer-motion Скилл оптимизирует анимации Framer Motion в React: предотвращает лишние ререндеры, уменьшает размер бандла и настраивает переходы жестов или скролла. CX Codex +1 1 100установок msw Скилл с 45 правилами по MSW v2: настройка, хендлеры, интеграция с тестами, GraphQL. Пригодится, когда агент пишет или правит моки HTTP-запросов. CX Codex +1 842установок clean-code Скилл для ревью и рефакторинга: 48 правил из книги Роберта Мартина с современными поправками. Пригодится, когда агент пишет или разбирает код. CX Codex +1 842установок terminal-ui Скилл с 42 правилами для терминальных интерфейсов на TypeScript: рендеринг, ввод с клавиатуры, промпты. Пригодится, когда пишете CLI на Ink или Clack. CX Codex +1 836установок react-refactor Скилл с 40 правилами архитектурного рефакторинга React-проектов. Помогает декомпозировать крупные компоненты, выносить хуки и наводить порядок в модулях. CX Codex +1 776установок shadcn Скилл с 58 правилами для shadcn/ui: подсказывает агенту, как правильно ставить компоненты, писать формы и не ломать доступность. CX Codex +1 724установок chrome-extension-ui Набор правил по интерфейсу расширений Chrome: где ставить popup, где side panel, как сделать доступную навигацию и понятные состояния загрузки. CX Codex +1 719установок chrome-extension Скилл с 67 правилами по Chrome Extensions на Manifest V3. Пригодится, когда пишете service worker, content script или мигрируете с MV2. CX Codex +1 717установок

Спонсоры проекта

Компании, которые помогают держать аналитику открытой