AIKraft/Skills/reference-compiler-cli

reference-compiler-cli

Объясняет ментальную модель и архитектуру кода в packages/compiler-cli. Обязательно используйте этот навык при работе с кодом в packages/compiler-cli.

ANangular official Разработка ★ 101k

Что делает навык

Навык объясняет архитектуру и ментальную модель Angular Compiler CLI (ngtsc), который является оберткой над TypeScript-компилятором для компиляции Angular-декораторов в статические свойства (Ivy-инструкции) и выполнения AOT-компиляции. Он описывает инкрементальный пайплайн компиляции, систему состояний (Traits) и ключевые подсистемы, такие как обработка декораторов и проверка типов шаблонов.

Когда применять

  • Объяснение архитектуры кода в директории packages/compiler-cli при рефакторинге или изучении исходников Angular.
  • Отладка проблем с компиляцией шаблонов или извлечением метаданных декораторов (@Component, @Directive).
  • Понимание фаз компиляции (Analysis, Resolution, Type Checking, Emit) для оптимизации работы с NgtscProgram.
  • Анализ того, как генерируются Type Check Blocks (TCBs) и статические поля ɵcmp/ɵdir.

Как работает

  1. Идентифицировать классы с Angular-декораторами как 'Traits' и отслеживать их состояние через машину состояний (Pending, Analyzed, Resolved, Skipped).
  2. Использовать NgtscProgram как точку входа, которая оборачивает стандартный ts.Program и управляет NgCompiler.
  3. Применять DecoratorHandler (например, ComponentDecoratorHandler) для извлечения метаданных, парсинга шаблонов и генерации инструкций ɵcmp.
  4. Запускать TemplateTypeChecker для генерации Type Check Blocks (TCBs) и получения диагностики TypeScript для шаблонов.
  5. Выполнять фазу Emit через ivyTransformFactory, которая трансформирует Output AST в TypeScript AST, внедряя статические поля и удаляя оригинальные декораторы.

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

Объясни, как работает машина состояний Traits в packages/compiler-cli/src/ngtsc/transform/src/trait.ts
Как ComponentDecoratorHandler из handler.ts генерирует инструкцию ɵcmp?
Опиши фазу Resolution в NgCompiler и как она связывает шаблоны с директивами.

Описание составлено по SKILL.md навыка, сверено 08.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «reference-compiler-cli» из репозитория: # https://github.com/angular/angular
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r reference-compiler-cli/ ~/.claude/skills/reference-compiler-cli/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.