@angular-modernizer/claude-plugin

v1.0.1

Published

23 days ago

Claude Code plugin for Angular Modernizer — installs agents and skills into ~/.claude/

0High
0Medium
0Low

eiweiss666

angular modernizer claude mcp claude-code-plugin

Angular Modernizer — Agents & Skills

21 Agents | 28 Skills | Distributed via npx @angular-modernizer/claude-plugin

Architecture Diagram

graph TD
    %% ── Styling ──
    classDef entry fill:#4CAF50,color:#fff,stroke:#2E7D32
    classDef analysis fill:#2196F3,color:#fff,stroke:#1565C0
    classDef plan fill:#FF9800,color:#fff,stroke:#E65100
    classDef exec fill:#F44336,color:#fff,stroke:#B71C1C
    classDef test fill:#9C27B0,color:#fff,stroke:#6A1B9A
    classDef skill fill:#607D8B,color:#fff,stroke:#37474F
    classDef learn fill:#795548,color:#fff,stroke:#4E342E

    %% ── Entry Points ──
    INIT[ngm-init-project]:::entry
    HEALTH[ngm-health-check]:::entry

    %% ── Analysis ──
    ARCH_SCAN[ngm-architecture-scanner]:::analysis
    ARCHITECT[ngm-architect]:::analysis
    BUILD_GUARD[ngm-build-guard]:::analysis

    %% ── Planning ──
    MIG_PLAN[ngm-migration-planner]:::plan
    MIG_BLUE[ngm-migration-blueprint]:::plan
    FEAT_PLAN[ngm-feature-planner]:::plan
    BUG_BLUE[ngm-bug-blueprint]:::plan
    BUG_INV[ngm-bug-investigator]:::plan

    %% ── Testing ──
    BASELINE[ngm-baseline-tester]:::test
    VISUAL[ngm-visual-comparator]:::test
    REPRO[ngm-reproduce-bug]:::test

    %% ── Execution ──
    SAFE[ngm-safe-transformer]:::exec
    BATCH[ngm-batch-modernizer]:::exec
    RXJS[ngm-rxjs-modernizer]:::exec
    SBS[ngm-service-bag-splitter]:::exec
    LIB[ngm-library-extractor]:::exec
    BUG_FIX[ngm-bug-fixer]:::exec
    FEAT_IMPL[ngm-feature-implementer]:::exec

    %% ── Learning ──
    FEEDBACK[ngm-feedback-analyst]:::learn

    %% ── Skills ──
    TRIAGE{/ngm-bug-triage}:::skill
    FIX_LAYER{/ngm-fix-layer-violation}:::skill
    BLAST{/ngm-blast-radius}:::skill
    DI_TOKEN{/ngm-di-token-extractor}:::skill
    MODEL{/ngm-model-mover}:::skill
    CONSUMER{/ngm-consumer-updater}:::skill
    PROVIDER{/ngm-provider-wirer}:::skill
    CIRCULAR{/ngm-circular-breaker}:::skill
    SCOPE{/ngm-scope-blueprint}:::skill

    %% ═══════════════════════════════════
    %% ── Migration Flow ──
    %% ═══════════════════════════════════
    INIT --> HEALTH
    HEALTH --> MIG_PLAN
    HEALTH --> MIG_BLUE
    HEALTH --> ARCH_SCAN
    MIG_PLAN --> BATCH
    MIG_BLUE --> BATCH
    BATCH --> SAFE
    BATCH --> RXJS
    BATCH --> SBS
    SAFE --> BUILD_GUARD
    SAFE --> BASELINE

    %% ═══════════════════════════════════
    %% ── Bug Fix Flow ──
    %% ═══════════════════════════════════
    TRIAGE --> REPRO
    TRIAGE --> VISUAL
    TRIAGE --> BUG_INV
    REPRO --> BUG_BLUE
    REPRO --> BUG_INV
    BUG_INV --> ARCHITECT
    BUG_INV --> BUG_FIX
    BUG_BLUE --> BASELINE
    BASELINE --> BUG_FIX
    VISUAL --> BASELINE
    BUG_FIX --> VISUAL

    %% ═══════════════════════════════════
    %% ── Feature Flow ──
    %% ═══════════════════════════════════
    ARCHITECT --> FEAT_PLAN
    FEAT_PLAN --> BASELINE
    BASELINE --> FEAT_IMPL
    FEAT_IMPL --> HEALTH

    %% ═══════════════════════════════════
    %% ── Layer Violation Flow ──
    %% ═══════════════════════════════════
    FIX_LAYER --> BLAST
    FIX_LAYER --> DI_TOKEN
    FIX_LAYER --> MODEL
    DI_TOKEN --> PROVIDER
    DI_TOKEN --> CONSUMER
    MODEL --> CONSUMER
    CIRCULAR --> CONSUMER

    %% ═══════════════════════════════════
    %% ── Library Extraction ──
    %% ═══════════════════════════════════
    HEALTH --> LIB

    %% ═══════════════════════════════════
    %% ── Closed-Loop Feedback ──
    %% ═══════════════════════════════════

    %% Pre-flight skill
    PRE_FLIGHT{/ngm-pre-flight-check}:::learn
    LEARN[learn-patterns]:::learn

    %% Feedback collection (16 agents)
    BUG_FIX -.-> FEEDBACK
    SAFE -.-> FEEDBACK
    FEAT_IMPL -.-> FEEDBACK
    BATCH -.-> FEEDBACK
    BASELINE -.-> FEEDBACK
    VISUAL -.-> FEEDBACK

    %% Closed loop: feedback flows BACK to agents
    FEEDBACK ==> PRE_FLIGHT
    PRE_FLIGHT --> SAFE
    PRE_FLIGHT --> BUG_FIX
    PRE_FLIGHT --> BATCH

    %% Pattern knowledge feeds build-guard
    LEARN --> BUILD_GUARD

Legend:

Green: entry points
Blue: analysis (read-only)
Orange: planning (write plan files, no code changes)
Red: execution (modify application code)
Purple: testing (write test files only)
Grey: skills (targeted scaffolding)
Brown: learning + feedback (closed loop)
Solid arrows: direct invocation
Thick arrows (==>): closed-loop feedback flow
Dashed arrows: feedback collection (async)

Call Hierarchies

Project Setup & Analysis

ngm-init-project
  └── (standalone — creates .angular-modernizer.json)

ngm-health-check
  └── (standalone — runs all analysis dimensions, returns violation map)

ngm-architecture-scanner
  └── (standalone — deep arch + SOLID analysis)

Migration

ngm-health-check
  ├── ngm-migration-planner          (conversation output)
  │     └── ngm-batch-modernizer     (execute roadmap)
  │
  └── ngm-migration-blueprint        (writes .migration-plan/ to disk)
        └── ngm-batch-modernizer     (execute plan)
              ├── ngm-safe-transformer        (per file, with safety envelope)
              │     ├── ngm-baseline-tester    (Phase 0: guard mode)
              │     └── ngm-build-guard        (pre-check)
              ├── ngm-rxjs-modernizer         (RxJS cluster in mandatory order)
              └── ngm-service-bag-splitter    (multi-file service split)

Bug Fix

ngm-bug-triage                              (decision tree: which tool first?)
  │
  ├── Stack trace / error code path:
  │     ngm-reproduce-bug                   (Playwright: screenshots + console + network)
  │       └── ngm-bug-blueprint             (investigate + write the plan folder)
  │             └── ngm-baseline-tester     (reproduce mode: RED + GREEN tests)
  │                   └── ngm-bug-fixer     (apply fix, @baseline-target = success)
  │
  ├── Visual / data mismatch path:
  │     ngm-visual-comparator               (screenshot State A vs B, multimodal diff)
  │       └── ngm-baseline-tester           (unit tests for missing data)
  │             └── ngm-bug-fixer           (fix until tests green)
  │                   └── ngm-visual-comparator  (re-verify visual match)
  │
  └── Quick path (hypothesis known):
        ngm-bug-investigator                (trace + report in conversation)
          └── ngm-bug-fixer                 (confirm + fix)

Supporting agent (invoked directly, hands off to ngm-bug-blueprint):
  ngm-architect (Mode B)                    (architectural bug analysis)

Feature Implementation

ngm-architect (Mode A)                      (Mermaid diagrams + file map + SOLID checklist)
  └── ngm-feature-planner                   (writes .feature-plan/ to disk)
        └── ngm-baseline-tester             (Phase 0: guard integration points)
              └── ngm-feature-implementer   (ng generate + Edit + validate)
                    └── ngm-health-check    (verify new code quality)

Layer Violation Fix

/ngm-fix-layer-violation                    (one-shot: all steps automated)
  ├── /ngm-blast-radius                     (dependency analysis)
  ├── /ngm-di-token-extractor               (service: interface + InjectionToken)
  │     └── /ngm-provider-wirer             (wire token to NgModule)
  ├── /ngm-model-mover                      (pure data: move to the shared layer models/)
  └── /ngm-consumer-updater                 (update import sites)

/ngm-circular-breaker                       (break A↔B cycles)
  └── /ngm-consumer-updater                 (update imports)

Library Extraction

ngm-library-extractor (Phase 1)            (detect candidates, show scores)
  └── user confirms
        └── ngm-library-extractor (Phase 2) (execute extraction)

Closed-Loop Feedback

/ngm-pre-flight-check                       (query history BEFORE transforming)
  ├── suggest-improvements (ruleId)         → success rate, suggestions
  ├── review-feedback (category)            → failure patterns
  └── review-feedback (tool filter)         → known tool misses
        ↓
  Verdict: PROCEED / CAUTION / REVIEW-FIRST
        ↓
  ngm-safe-transformer / bug-fixer / batch  (uses verdict + adjusted confidence)
        ↓
  collect-feedback                           (16 agents feed data back)
  collect-feedback kind "analysis"           (9 agents report tool misses, incl. dropped connections)
        ↓
  ngm-feedback-analyst                       (full analysis on demand)
    ├── review-feedback                      (patterns, trends)
    ├── suggest-improvements                 (per-rule suggestions)
    └── analyze-parser-performance           (parser metrics)

learn-patterns                               (AST-based pattern discovery)
  └── .angular-modernizer-cache/pattern-knowledge.json
        └── ngm-build-guard (Step 4.5)      (risk tier adjustment)

Agents (21) — with Invocation Examples

Top-Level Agents (invoke directly)

These are the agents you typically start a workflow with.

Entry Points

Analysis & Design

Transformation

Planning

Bug Fix

Testing

Feature Implementation

Learning

Internal Agents (called by other agents)

These agents are typically not invoked directly — they are called automatically by top-level agents as part of their workflow. You can invoke them manually, but usually don't need to.

Skills (28) — with Invocation Examples

Top-Level Skills (invoke directly with `/skill-name`)

Decision Guides — "I don't know where to start"

Scaffolding — "Fix this structural problem"

Analysis — "Tell me about this"

Reference — "How does X work?"

Internal Skills (called by other skills/agents)

These skills live inside other workflows and are rarely invoked standalone.

Quick Start Cheat Sheet

MCP Server Availability Check

Register the server once, under the single name angular-modernizer (tools then appear as mcp__angular-modernizer__<tool>). All docs, agents and skills assume this name. Extra registrations under other names give duplicate tool sets and make it unclear which server a result came from.

claude mcp add angular-modernizer -- npx -y @angular-modernizer/adapter-mcp
claude mcp list        # expect: angular-modernizer: ... - Connected

The installer (install.js) only copies agents and skills; it does not register hooks. To get a warning at the start of every session when the server is missing or disconnected, add this SessionStart hook yourself to .claude/settings.json (project) or your user settings:

{
  "hooks": {
    "SessionStart": [
      {
        "hooks": [
          {
            "type": "command",
            "timeout": 30,
            "command": "claude mcp list 2>/dev/null | grep -E '^angular-modernizer:' | grep -q 'Connected' || echo 'WARNING: MCP server angular-modernizer is not registered or not connected. Modernizer tools are unavailable in this session. Fix: claude mcp add angular-modernizer -- npx -y @angular-modernizer/adapter-mcp'"
          }
        ]
      }
    ]
  }
}

The hook output is added to the session context, so the agent sees the warning before it plans around missing tools. claude mcp list health-checks every server, so the hook can take a few seconds.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Angular Modernizer — Agents & Skills

Architecture Diagram

Call Hierarchies

Project Setup & Analysis

Migration

Bug Fix

Feature Implementation

Layer Violation Fix

Library Extraction

Closed-Loop Feedback

Agents (21) — with Invocation Examples

Top-Level Agents (invoke directly)

Entry Points

Analysis & Design

Transformation

Planning

Bug Fix

Testing

Feature Implementation

Learning

Internal Agents (called by other agents)

Skills (28) — with Invocation Examples

Top-Level Skills (invoke directly with /skill-name)

Decision Guides — "I don't know where to start"

Scaffolding — "Fix this structural problem"

Analysis — "Tell me about this"

Reference — "How does X work?"

Internal Skills (called by other skills/agents)

Quick Start Cheat Sheet

MCP Server Availability Check

Top-Level Skills (invoke directly with `/skill-name`)