Skills
.Work. You
Rest

component-implementer

Community

Modernize legacy Angular components, effortlessly.

Software Engineering#TDD#refactoring#migration#component#legacy code#Angular#Signals
AuthorMichael0520
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Migrating legacy Angular components, especially those with extensive comments or TODOs, to modern Angular 20 patterns (Signals, inject()) is time-consuming and error-prone. This Skill automates the conversion process.

Core Features & Use Cases

  • Legacy Code Analysis: Extracts logic from old code comments, identifying state, services, lifecycle hooks, and API calls.
  • Modern Angular Conversion: Rewrites BehaviorSubject to Signals, @ViewChild to viewChild(), and constructor injection to inject().
  • TDD-driven Implementation: Guides the process with test-first development to ensure compatibility and correctness.
  • Use Case: You have an Angular 16 component with a TODO: Implement component logic comment and legacy code. Activate this Skill to automatically analyze the old code, write tests, and then implement the component using modern Angular 20 patterns.

Quick Start

Open an unfinished component file with legacy code comments and say "implement this component".

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: component-implementer
Download link: https://github.com/Michael0520/milo-claude/archive/main.zip#component-implementer

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.