refactor

Refactors Angular 19 components and modules through phased analysis, planning, and parallel execution.

Updated Jul 9, 2026
One-click install
npx skills add https://github.com/MadheshSM/learning --skill refactor-madheshsm
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: refactor
Source: https://github.com/MadheshSM/learning/tree/main/Angular/.claude/skills/refactor
Command: npx skills add https://github.com/MadheshSM/learning --skill refactor-madheshsm

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Angular codebases accumulate technical debt: any/unknown types, console.log calls, untranslated strings, hardcoded colors, legacy decorators, and oversized files. Manually auditing and fixing all of this across a module is slow and error-prone. ## Core Features & Use Cases - Deep Multi-Dimensional Analysis: Scans TypeScript, HTML, and SCSS with parallel agents to count type-safety issues, dead code, i18n gaps, theme violations, and file-size limit breaches. - Phased Plan with Approval Gate: Generates a file-by-file refactoring plan (Phases A–H covering cleanup, type safety, duplication, Angular 19 patterns, constants/i18n, SCSS, security, tests) and waits for user confirmation before changing anything. - Angular 19 Modernization: Migrates legacy @Input()/@Output() and @ViewChild decorators to signal-based input()/output()/viewChild() APIs, replaces get getters with computed(), and enforces shared enums and constants. - Use Case: Point it at a feature module like src/app/modules/project-management to get a full audit, an approved phased plan, and parallel-agent execution that ends with typecheck/lint verification against /check-module criteria. ## Quick Start Ask the AI to run the refactor skill on a specific component or module path, review the generated phased plan, and approve it to start implementation.

Frequently Asked Questions about refactor

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I refactor an Angular component to Angular 19 signal APIs?

Run the refactor skill on the component path. It detects legacy @Input()/@Output() and @ViewChild decorators, then migrates them to input(), output(), and viewChild() signals, updating templates and specs to use signal reads and fixture.componentRef.setInput.

How to find and fix any types and console.log in an Angular module?

The analysis phase greps the module for any/unknown usages, console.log calls, inline type declarations, and eslint-disable comments. The generated plan replaces any with proper interfaces, removes logging, and fixes root causes so files pass ESLint with zero suppressions.

Does this skill change code without approval?

No. It performs a read-only analysis first, generates a detailed phased plan with per-file tasks, and waits for explicit user confirmation before implementing anything. Verification runs after each phase.

What file size limits does the Angular refactor enforce?

It flags components over 300 LOC, services over 250 LOC, HTML templates over 200 LOC, SCSS files over 150 LOC, spec files over 400 LOC, and interface files over 100 LOC, then plans splits or extractions for oversized files.

Can it handle i18n and SCSS theme compliance?

Yes. It detects untranslated static strings, hardcoded hex colors, px values, deep nesting, and RTL-unfriendly properties, then replaces them with translate pipe keys, theme variables from _variables.scss, rem units, and logical start/end properties.