Back to Details

workflow-clean-code-angular

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese
<objective> Guarantee that Angular code in the target scope meets the standard of a senior developer who crafted it by hand — clean, clear, no AI slop, proper architecture, correct signal patterns, and clear ViewModel separation. </objective> <philosophy> This isn't a linter. Linters catch syntax. This skill catches **design decisions** — the kind of issues only a senior engineer spots during code review.
Three things that separate senior-crafted code from AI-generated code:
  1. Nothing unnecessary — no defensive checks for impossible scenarios, no abstractions with one consumer, no comments that restate the code
  2. Right responsibility in the right place — stores own data transformations, components coordinate UI, templates just bind
  3. Consistent patterns — every store follows the same anatomy, every component follows the same structure, no surprise conventions </philosophy>
<quick_start>
bash
/clean-code-angular feature/budget/          # Standard audit
/clean-code-angular -a --deep feature/       # Deep audit, auto mode
/clean-code-angular --quick core/            # Quick surface scan
/clean-code-angular --slop --vm feature/     # Focus: AI slop + ViewModel
/clean-code-angular diff main                # Audit changes vs main
/clean-code-angular pending                  # Audit uncommitted changes
</quick_start>
<parameters>
FlagDescription
-a
Auto mode — skip confirmations
-e
Economy mode — no subagents, direct analysis only
-s
Save — output reports to 
.claude/output/clean-code-angular/
-r
Resume — continue from a previous run
--quick
Surface scan only (grep patterns, no semantic analysis)
--deep
Full depth: all domains including AI slop + ViewModel + cross-file
--arch
Force architecture analysis
--signals
Force signal patterns analysis
--styling
Force styling analysis
--testing
Force testing analysis
--slop
Force AI slop detection
--vm
Force ViewModel/DataModel analysis
--adv
Adversarial review — after team lead, a devil's advocate agent challenges every finding for false positives, missed issues, and severity inflation
--ultra
Maximum depth: 15 specialists in 5 clusters, each with a cluster lead, plus grand tech lead and adversarial review. The nuclear option for critical code.
Default depth (no flag): grep + targeted semantic analysis of key files. 
--deep
enables all specialist domains.
</parameters> <workflow> ``` SCAN ─────────────────► APPLY ─────────────► VERIFY │ │ │ ├─ Parse scope ├─ Load docs/refs ├─ Lint + type-check ├─ Launch specialists ├─ Apply fixes ├─ Run tests │ (up to 10 agents) │ (parallel agents) ├─ Team lead final ├─ Team lead review ├─ Team lead │ craftsman review ├─ Adversarial review │ coherence check ├─ Adversarial final │ (if --adv) └─ Track progress │ challenge (if --adv) └─ Consolidated issues └─ Commit ``` </workflow>
<agent_model>
<objective> 确保目标范围内的Angular代码达到资深开发人员手工编写的标准——整洁、清晰、无AI垃圾代码、架构合理、signal模式正确、ViewModel分离清晰。 </objective> <philosophy> 这不是linter。Linter只会捕获语法问题。本工具可以捕获**设计决策**层面的问题——只有资深工程师在代码评审中才能发现的那类问题。
区分资深工程师编写的代码和AI生成代码的三个要点：
  1. 没有多余内容——不会为不可能发生的场景做防御性检查，没有只有一个使用者的抽象，没有重复描述代码的注释
  2. 权责分明——stores负责数据转换，组件协调UI，模板仅做绑定
  3. 模式统一——所有store遵循相同的结构，所有组件遵循相同的结构，没有突兀的约定 </philosophy>
<quick_start>
bash
/clean-code-angular feature/budget/          # Standard audit
/clean-code-angular -a --deep feature/       # Deep audit, auto mode
/clean-code-angular --quick core/            # Quick surface scan
/clean-code-angular --slop --vm feature/     # Focus: AI slop + ViewModel
/clean-code-angular diff main                # Audit changes vs main
/clean-code-angular pending                  # Audit uncommitted changes
</quick_start>
<parameters>
Flag描述
-a
自动模式——跳过确认步骤
-e
经济模式——无子Agent，仅执行直接分析
-s
保存——将报告输出到 
.claude/output/clean-code-angular/
目录
-r
恢复——从上一次运行的断点继续
--quick
仅表层扫描（grep模式匹配，无语义分析）
--deep
全深度扫描：覆盖所有领域，包括AI垃圾代码、ViewModel、跨文件关联分析
--arch
强制开启架构分析
--signals
强制开启signal模式分析
--styling
强制开启样式分析
--testing
强制开启测试分析
--slop
强制开启AI垃圾代码检测
--vm
强制开启ViewModel/DataModel分析
--adv
对抗式评审——团队负责人审核完成后，由对抗Agent对所有发现进行校验，排查误报、遗漏问题和严重程度高估
--ultra
最大深度扫描：5个集群共15名专业Agent，每个集群配备集群负责人，外加总技术负责人和对抗式评审，适用于核心代码的最高级别审计
默认深度（无参数）：grep匹配 + 核心文件定向语义分析 
--deep
参数开启所有专业领域分析
</parameters> <workflow> ``` SCAN ─────────────────► APPLY ─────────────► VERIFY │ │ │ ├─ Parse scope ├─ Load docs/refs ├─ Lint + type-check ├─ Launch specialists ├─ Apply fixes ├─ Run tests │ (up to 10 agents) │ (parallel agents) ├─ Team lead final ├─ Team lead review ├─ Team lead │ craftsman review ├─ Adversarial review │ coherence check ├─ Adversarial final │ (if --adv) └─ Track progress │ challenge (if --adv) └─ Consolidated issues └─ Commit ``` </workflow>
<agent_model>

Agent Architecture

Agent架构

The skill scales agent count based on flags:
ModeAgentsStructure
Economy (
-e
)		0Direct tools only, no subagents
Standard3-10 + leadFlat: specialists → team lead
Deep (
--deep
)		10 + leadAll 10 domains → team lead
Deep + Adv (
--deep --adv
)		10 + lead + advAll 10 domains → team lead → adversarial
Ultra (
--ultra
)		15 + 5 leads + grand lead + adv = 225 clusters → 5 cluster leads → grand tech lead → adversarial
本工具会根据传入参数调整Agent数量：
模式Agent数量结构
经济模式（
-e
）		0仅使用直接工具，无任何子Agent
标准模式3-10 + 负责人扁平结构：专业Agent → 团队负责人
深度模式（
--deep
）		10 + 负责人全10个领域Agent → 团队负责人
深度+对抗模式（
--deep --adv
）		10 + 负责人 + 对抗Agent全10个领域Agent → 团队负责人 → 对抗Agent
极致模式（
--ultra
）		15 + 5集群负责人 + 总技术负责人 + 对抗Agent = 225个集群 → 5名集群负责人 → 总技术负责人 → 对抗Agent

Standard/Deep Mode — Flat Architecture

标准/深度模式——扁平架构

Up to 10 domain-focused specialists launched in parallel. Count scales with scope size:
ScopeAgentsCoverage
1-4 files3 + leadArchitecture, Angular/Signals, TypeScript/Styling
5-15 files5 + lead+ Store patterns, Component design
16-30 files7 + lead+ Templates, AI slop
31+ files10 + leadAll 10 domains
最多10名专注不同领域的专业Agent并行启动，数量随扫描范围大小动态调整：
扫描范围Agent数量覆盖领域
1-4个文件3 + 负责人架构、Angular/Signals、TypeScript/样式
5-15个文件5 + 负责人新增Store模式、组件设计
16-30个文件7 + 负责人新增模板、AI垃圾代码检测
31个以上文件10 + 负责人覆盖全部10个领域

The 10 Domains

10个分析领域

#DomainFocus
1Architecture & DependenciesLayer violations, cross-feature imports, dependency direction
2Signals & Reactivity
effect()
misuse, 
computed()
opportunities, 
linkedSignal()
, cleanup
3Store Patterns6-section anatomy, cache-first, optimistic updates, resource usage
4Component DesignOnPush, responsibility, size, 
input()
/
output()
, 
inject()
5Template QualityControl flow, expression complexity, wrapper bloat, accessibility
6TypeScript Quality
any
types, 
#
fields, modern APIs, dead code
7Styling
::ng-deep
, Material M3 tokens, Tailwind v4, 
!important
8AI SlopOver-engineering, unnecessary comments, defensive theater, verbose naming
9ViewModel & Data FlowDataModel vs ViewModel, transformation location, duplicate derivations
10Security, Performance & Code HealthXSS, workarounds/hacks, design smells, 
@defer
, lazy loading
Testing quality is checked when 
--testing
or 
--deep
or 
--ultra
is enabled. The testing specialist reads 
.spec.ts
files in scope and evaluates against 
references/testing-patterns.md
.
#领域聚焦点
1架构与依赖层级违反、跨功能模块导入、依赖方向错误
2Signals与响应式
effect()
误用、
computed()
优化机会、
linkedSignal()
、清理逻辑
3Store模式6段式结构、缓存优先、乐观更新、资源使用
4组件设计OnPush、权责划分、大小、
input()
/
output()
、
inject()
5模板质量控制流、表达式复杂度、冗余包装、可访问性
6TypeScript质量
any
类型、
#
私有字段、现代API使用、死代码
7样式
::ng-deep
、Material M3 token、Tailwind v4、
!important
8AI垃圾代码过度设计、无意义注释、无效防御逻辑、冗长命名
9ViewModel与数据流DataModel与ViewModel区分、转换逻辑位置、重复派生
10安全、性能与代码健康XSS、临时补丁、设计异味、
@defer
、懒加载
开启 
--testing
、
--deep
或 
--ultra
参数时会额外检查测试质量，测试领域Agent会读取范围内的 
.spec.ts
文件，对照 
references/testing-patterns.md
进行评估。

Ultra Mode — Multi-Tier Cluster Architecture

极致模式——多层集群架构

15 specialists organized in 5 clusters, each with a dedicated cluster lead. Each specialist loads exactly the reference files it needs — no bloat.
Cluster 1: Architecture → Architecture Lead
AgentFocusLoads
1aLayer violations, cross-feature imports
references/angular-architecture.md
1bDI patterns, functional interceptors, providers
references/angular-clean-code.md
§3
1cLazy loading, routing, 
@defer
boundaries
references/angular-anti-patterns.md
§19-20
Cluster 2: Signals & State → Reactivity Lead
AgentFocusLoads
2aSignal patterns, computed, effect, afterRenderEffect
references/angular-clean-code.md
§2
2bStore anatomy, mutations, resource API
references/angular-clean-code.md
§2 + §13
2cRxJS valid vs anti-pattern, Observable/Signal bridge
references/angular-anti-patterns.md
§2 + Valid RxJS table
Cluster 3: Code Quality → Quality Lead
AgentFocusLoads
3aTypeScript, types, modern APIs (toSorted, structuredClone)
references/angular-anti-patterns.md
§6
3bAI slop detection (all 9 categories)
references/ai-slop-detection.md
3cError handling, catch typing, resource error state
references/angular-clean-code.md
§13
Cluster 4: UI & Templates → Frontend Lead
AgentFocusLoads
4aControl flow, @defer, template expressions
references/angular-clean-code.md
§4
4bStyling, accessibility, NgOptimizedImage
references/angular-anti-patterns.md
§7 + §20-21
4cPipes, ViewModel separation, formatting
references/viewmodel-patterns.md
+ 
references/angular-clean-code.md
§15
Cluster 5: Testing & Security → Security Lead
AgentFocusLoads
5aTest quality, harnesses, coverage
references/testing-patterns.md
5bSecurity, workarounds, zoneless violations
references/angular-anti-patterns.md
§8 + §15-16
5cSignal Forms, API validation, forms patterns
references/angular-clean-code.md
§14 + §9
Flow:
15 specialists (parallel) → 5 cluster leads (parallel) → Grand Tech Lead → Adversarial
15名专业Agent分为5个集群，每个集群配备专属负责人，每个Agent仅加载其需要的参考文件，无冗余加载。
集群1：架构 → 架构负责人
Agent聚焦点加载文件
1a层级违反、跨功能模块导入
references/angular-architecture.md
1bDI模式、函数式拦截器、providers
references/angular-clean-code.md
§3
1c懒加载、路由、
@defer
边界
references/angular-anti-patterns.md
§19-20
集群2：Signals与状态 → 响应式负责人
Agent聚焦点加载文件
2aSignal模式、computed、effect、afterRenderEffect
references/angular-clean-code.md
§2
2bStore结构、变更、资源API
references/angular-clean-code.md
§2 + §13
2cRxJS合法/反模式、Observable/Signal桥接
references/angular-anti-patterns.md
§2 + 合法RxJS对照表
集群3：代码质量 → 质量负责人
Agent聚焦点加载文件
3aTypeScript、类型、现代API（toSorted、structuredClone）
references/angular-anti-patterns.md
§6
3bAI垃圾代码检测（全9个类别）
references/ai-slop-detection.md
3c错误处理、catch类型、资源错误状态
references/angular-clean-code.md
§13
集群4：UI与模板 → 前端负责人
Agent聚焦点加载文件
4a控制流、@defer、模板表达式
references/angular-clean-code.md
§4
4b样式、可访问性、NgOptimizedImage
references/angular-anti-patterns.md
§7 + §20-21
4c管道、ViewModel分离、格式化
references/viewmodel-patterns.md
+ 
references/angular-clean-code.md
§15
集群5：测试与安全 → 安全负责人
Agent聚焦点加载文件
5a测试质量、harness、覆盖率
references/testing-patterns.md
5b安全、临时补丁、无zone模式违反
references/angular-anti-patterns.md
§8 + §15-16
5cSignal Forms、API校验、表单模式
references/angular-clean-code.md
§14 + §9
流转流程：
15 specialists (parallel) → 5 cluster leads (parallel) → Grand Tech Lead → Adversarial

Team Lead (Standard/Deep)

团队负责人（标准/深度模式）

Launched after specialists complete. A senior Angular architect who:
  • Merges all specialist reports into one deduplicated list
  • Removes false positives by reading the actual code
  • Resolves contradictions between specialists
  • Adds cross-cutting observations no single specialist caught
  • Prioritizes the final issue list
  • Verifies fix coherence in step-02
  • Does final craftsman review in step-03
在所有专业Agent完成工作后启动，是资深Angular架构师，负责：
  • 将所有专业Agent的报告合并为去重的问题列表
  • 通过阅读实际代码移除误报问题
  • 解决不同专业Agent之间的结论矛盾
  • 补充单个专业Agent无法发现的跨领域问题
  • 对最终问题列表进行优先级排序
  • 在第二步校验修复逻辑的一致性
  • 在第三步做最终工匠级评审

Cluster Leads (Ultra)

集群负责人（极致模式）

Each cluster lead receives ONLY its 3 specialists' reports. They:
  • Deduplicate within their domain
  • Resolve contradictions between their specialists
  • Add domain-specific cross-cutting observations
  • Output a focused domain report (max 10 issues per cluster)
每个集群负责人仅接收其管辖的3名专业Agent的报告，负责：
  • 对所属领域内的问题进行去重
  • 解决所属领域内专业Agent的结论矛盾
  • 补充领域内的跨Agent观察结论
  • 输出聚焦的领域报告（每个集群最多10个问题）

Grand Tech Lead (Ultra)

总技术负责人（极致模式）

Receives all 5 cluster lead reports. A principal Angular architect who:
  • Merges all cluster reports into one unified list
  • Resolves cross-cluster contradictions (e.g., Architecture says "move to core" but Quality says "inline it")
  • Identifies systemic patterns across clusters (e.g., "every file has the same DI problem")
  • Prioritizes by business impact, not just technical severity
  • Caps at 30 issues, notes total if more
  • Adds a "systemic diagnosis" section: what's the ROOT CAUSE behind the pattern of issues?
接收全部5个集群负责人的报告，是首席Angular架构师，负责：
  • 将所有集群报告合并为统一的问题列表
  • 解决跨集群的结论矛盾（例如架构组建议「移动到core模块」但质量组建议「内联」）
  • 识别跨集群的系统性问题（例如「每个文件都存在相同的DI问题」）
  • 按业务影响而非仅技术严重程度排序优先级
  • 最多输出30个问题，超过时标注总问题数
  • 增加「系统性诊断」章节：说明问题模式背后的根本原因

Adversarial Reviewer (--adv or --ultra)

对抗评审员（开启--adv或--ultra时）

Launched after the team/grand lead. A skeptical senior engineer who:
  • Challenges each finding: "Is this really wrong? Could there be a valid architectural reason?"
  • Hunts false positives: reads the actual code for each flagged issue and checks if context was missed
  • Hunts missed issues: reads ALL files in scope looking for issues that ALL specialists + leads missed
  • Questions severity: "Is this really Critical or just Important? Would a production user notice?"
  • Checks RxJS false flags: verifies that valid RxJS patterns aren't flagged as signal anti-patterns
  • Checks Angular version assumptions: verifies recommendations match Angular 21+
  • Checks against project profile: verifies that no finding contradicts the project's documented conventions from {project_profile}
Output: a correction table listing upgrades, downgrades, removals, and additions to the lead's findings.
</agent_model>
<state_variables>
VariableTypeDescription
{task_description}
stringScope to analyze
{task_id}
stringKebab-case identifier
{auto_mode}
booleanSkip confirmations
{economy_mode}
booleanNo subagents
{save_mode}
booleanSave reports
{depth}
quick / standard / deepAnalysis depth
{force_*}
booleanPer-domain force flags
{scoped_files}
string[]Files in scope
{issues}
arrayConsolidated issue list
{workspace_path}
stringPath to angular.json
{agent_count}
numberSpecialists to launch
{adversarial_mode}
booleanRun adversarial review after team lead
{ultra_mode}
booleanFull 22-agent multi-tier architecture
{project_profile}
objectDetected project conventions, libraries, and architecture decisions — used to filter false positives
</state_variables>
<reference_files>
FileWhen Loaded
references/angular-anti-patterns.md
Always (scanning checklist)
references/angular-clean-code.md
Always (correct patterns)
references/angular-style-guide.md
Always (official Angular conventions)
references/angular-architecture.md
Architecture issues or 
--arch
references/ai-slop-detection.md
Deep mode, 
--slop
references/viewmodel-patterns.md
Deep mode, 
--vm
references/testing-patterns.md
Testing issues or 
--testing
</reference_files>
<entry_point>
Load 
steps/step-01-scan.md
</entry_point>
<step_files>
StepFilePurpose
01
step-01-scan.md
Parse scope, launch specialists, team lead consolidation
02
step-02-apply.md
Load docs, apply fixes, team lead coherence check
03
step-03-verify.md
Quality gate, craftsman review, commit
</step_files>
<execution_rules>
  • Discover project context BEFORE scanning — read CLAUDE.md, package.json, angular.json, eslint config to build {project_profile}
  • Filter ALL findings through {project_profile} — never flag patterns that match documented project conventions
  • Load one step at a time
  • Scale agent count to scope size (economy mode = 0 agents, direct tools only)
  • Use the Grep tool for pattern detection (not bash grep)
  • Scope-aware: only touch files within the specified scope
  • Every finding: 
    file:line
    reference required
  • Every fix: source citation required
  • Team lead reviews after scan AND after apply </execution_rules>
<success_criteria> After this workflow, the scoped code reads as if a senior Angular developer wrote it by hand:
  • Zero architecture violations
  • Modern signal patterns throughout
  • Stores follow 6-section anatomy with proper ViewModel selectors
  • No AI slop — no unnecessary comments, abstractions, or defensive code
  • Clean ViewModel separation — stores transform, components bind, templates stay simple
  • Consistent patterns across all files in scope
  • Quality check passes (lint + type-check + format)
  • Tests pass
  • If --adv: adversarial review found no missed issues or false positives </success_criteria>
在团队/总技术负责人完成工作后启动，是持怀疑态度的资深工程师，负责：
  • 挑战每个发现：「这真的是问题吗？有没有合理的架构原因？」
  • 排查误报：阅读每个标记问题的实际代码，检查是否遗漏了上下文信息
  • 排查遗漏问题：阅读范围内所有文件，寻找所有专业Agent和负责人都没发现的问题
  • 质疑严重程度：「这真的是严重问题还是只是建议？生产用户会感知到吗？」
  • 检查RxJS误标记：确认合法的RxJS模式没有被标记为signal反模式
  • 检查Angular版本假设：确认建议适配Angular 21+版本
  • 对照项目配置检查：确认没有发现与 {project_profile} 中记录的项目约定冲突的问题
输出：修正表格，列出对负责人结论的升级、降级、移除和新增调整。
</agent_model>
<state_variables>
变量类型描述
{task_description}
string待分析的范围
{task_id}
string短横线分隔的任务标识
{auto_mode}
boolean跳过确认步骤
{economy_mode}
boolean无任何子Agent
{save_mode}
boolean保存报告
{depth}
quick / standard / deep分析深度
{force_*}
boolean各领域强制开启标记
{scoped_files}
string[]范围内的文件列表
{issues}
array合并后的问题列表
{workspace_path}
stringangular.json的路径
{agent_count}
number要启动的专业Agent数量
{adversarial_mode}
boolean团队负责人评审完成后运行对抗评审
{ultra_mode}
boolean开启完整22Agent多层架构
{project_profile}
object识别到的项目约定、依赖库和架构决策，用于过滤误报
</state_variables>
<reference_files>
文件加载时机
references/angular-anti-patterns.md
始终加载（扫描检查清单）
references/angular-clean-code.md
始终加载（正确模式参考）
references/angular-style-guide.md
始终加载（Angular官方约定）
references/angular-architecture.md
架构问题或开启
--arch
参数时
references/ai-slop-detection.md
深度模式或开启
--slop
参数时
references/viewmodel-patterns.md
深度模式或开启
--vm
参数时
references/testing-patterns.md
测试问题或开启
--testing
参数时
</reference_files>
<entry_point>
加载 
steps/step-01-scan.md
</entry_point>
<step_files>
步骤文件用途
01
step-01-scan.md
解析范围、启动专业Agent、团队负责人合并结果
02
step-02-apply.md
加载文档、应用修复、团队负责人一致性检查
03
step-03-verify.md
质量门禁、工匠级评审、提交
</step_files>
<execution_rules>
  • 扫描前先获取项目上下文——读取CLAUDE.md、package.json、angular.json、eslint配置构建 {project_profile}
  • 所有发现都要经过 {project_profile} 过滤——永远不要标记符合项目文档约定的模式为问题
  • 一次只加载一个步骤
  • Agent数量随扫描范围大小动态调整（经济模式=0个Agent，仅使用直接工具）
  • 使用Grep工具做模式检测（而非bash grep）
  • 范围感知：仅操作指定范围内的文件
  • 每个发现都必须提供 
    文件:行号
    引用
  • 每个修复都必须提供来源引用
  • 扫描完成和修复完成后都需要团队负责人评审 </execution_rules>
<success_criteria> 工作流执行完成后，范围内的代码读起来就像资深Angular开发人员手工编写的一样：
  • 零架构违反
  • 全程使用现代signal模式
  • Stores遵循6段式结构，搭配正确的ViewModel选择器
  • 无AI垃圾代码——没有多余注释、抽象或防御代码
  • 清晰的ViewModel分离——stores做转换，组件做绑定，模板保持简洁
  • 范围内所有文件模式统一
  • 质量检查通过（lint + 类型检查 + 格式化）
  • 测试通过
  • 如果开启--adv：对抗评审未发现遗漏问题或误报 </success_criteria>