Guide · Agent skill
How to use the Angular Migration Guide agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The angular-migration skill is an instruction file that gives an AI coding agent structured guidance for converting an AngularJS (1.x) web app into modern Angular. This guide explains what the skill does, how to install it, how to ask for it in plain language, and where its limits are. By the end you will know whether it fits your project and how to use it safely.
Angular Migration Guidesickn33/agentic-awesome-skills · MIT Download the skill Quick start
- 1Download the ZIP. Get the angular-migration ZIP from this directory page.
- 2Unzip the skill. Extract the archive so you have a folder containing SKILL.md.
- 3Place the folder. Move it to ~/.claude/skills/ for personal use or to .claude/skills/ in your project.
- 4Or upload in the Claude apps. In the Claude apps, open Settings, go to Capabilities, and upload the skill under Skills.
- 5Describe your task. Ask in plain language about migrating AngularJS 1.x code, mentioning your strategy or the file you want converted.
- 6Check the dependencies. If the agent needs a missing reference file or analyze-angular-app.sh, supply the original installation before relying on that step.
- 7Validate the output. Test the migrated code in staging and confirm the behaviour matches the original before cutover.
What the angular-migration skill makes the agent do
When the skill is loaded, the agent follows a four-step approach: assess the AngularJS codebase and its migration risks, choose a strategy (hybrid or rewrite) and define milestones, set up ngUpgrade and migrate modules, components and routing, then validate with tests and plan a cutover.
The skill covers three migration strategies: big bang (a complete rewrite, best for small apps or green field projects), incremental hybrid (run AngularJS and Angular side by side, feature by feature, best for large apps), and vertical slice (migrate one feature completely while new features go into Angular, best for medium apps).
- Shows a hybrid bootstrap example using UpgradeModule and upgrade.bootstrap with strictDi.
- Gives before-and-after code for controllers, directives and services.
- Shows downgradeInjectable for letting AngularJS use an Angular service.
- Warns that AngularJS $http resolves a response wrapper while HttpClient resolves only the body.
Install the skill from the ZIP download
Download the ZIP for the angular-migration skill from this directory page, then unzip it. The skill is a folder containing a SKILL.md file. Place that folder in one of these locations:
- Personal skills folder: ~/.claude/skills/
- Project skills folder: .claude/skills/ inside your project
- Or in the Claude apps, open Settings, go to Capabilities, and upload the skill under Skills.
Trigger the skill with natural requests
You do not need a special command. Describe the migration task in plain language and mention AngularJS or Angular so the agent recognises the context. The skill's own 'use this skill when' list covers requests such as migrating AngularJS 1.x apps, running hybrid apps, converting directives to components, modernizing dependency injection, and migrating routing.
- "Help me plan an incremental migration of our AngularJS 1.x app to Angular."
- "Convert this AngularJS directive to an Angular component and show me the before and after."
- "Our hybrid app needs ngUpgrade bootstrap. What does main.ts need?"
- "Move this UserService from $http to Angular HttpClient and keep the same behaviour."
What you need before you start
The skill assumes you already have an AngularJS (1.x) codebase to migrate. You also need Angular, TypeScript and Node.js versions that are compatible with your target project. The skill does not choose these for you.
- An AngularJS (1.x) codebase to migrate
- Angular, TypeScript and Node.js versions compatible with the target project
- Original supporting material (references, assets, and analyze-angular-app.sh) only if you need the steps that depend on them
Know what is missing from this copy
This catalog copy includes the inline guidance but not several referenced files: the references for hybrid mode, component migration, dependency injection and routing, the hybrid-bootstrap and migration-timeline assets, and scripts/analyze-angular-app.sh. The skill says not to fabricate these or treat unrelated files with the same name as equivalent.
Steps that depend on these files cannot run until you supply an original installation. The inline guidance still works for independent steps. The skill does not run scripts and does not use the network.
- Runs scripts: no
- Uses network: no
- Ask for the original supporting material before running any dependent step.
Safety and validation
The skill warns against big-bang cutovers without rollback and staging validation. It also recommends keeping hybrid compatibility testing during incremental migration. Treat its examples as partial: a real project still needs an NgModule with correct imports, component registration, HttpClient configuration, and tests for routing ownership and change detection before traffic moves.
- Do not switch production traffic without staging validation and a rollback plan.
- Review every code change and run your own tests.
- The skill's own guidance is partial and must be checked by a human.
What people use it for
- Planning an incremental migration of a large AngularJS 1.x app, feature by feature.
- Converting an AngularJS controller and its service into an Angular component and HttpClient service.
- Converting a scoped directive with & and = bindings into an Angular component with @Input and @Output.
- Setting up ngUpgrade bootstrap for a hybrid AngularJS and Angular app.
- Checking how $http response handling changes when moving to HttpClient.
Frequently asked questions
Is the angular-migration skill free to use?
The skill is published under the MIT licence, as listed on this page. Check the licence file in the source repository before redistributing it in your own product.
How do I install the angular-migration skill in Claude?
Download the ZIP from this page and unzip it so the folder contains SKILL.md. Put it in ~/.claude/skills/ for personal use or in .claude/skills/ inside your project. You can also upload it in the Claude apps under Settings, then Capabilities, then Skills.
What do I need before using the angular-migration skill?
You need an AngularJS (1.x) codebase to migrate, plus Angular, TypeScript and Node.js versions compatible with your target project. Some steps also need supporting files such as references and analyze-angular-app.sh, which are not included in this copy.
Does the skill run scripts or use the internet?
According to this listing, the skill does not run scripts and does not use the network. Some referenced steps depend on files that are not included, so those steps cannot run until you supply them.
Should I use this skill on an app already on modern Angular?
No. The skill says not to use it when the app is already on a modern Angular version, or when you only need a small UI fix without framework changes.
How does this compare with just asking an AI agent to migrate my app?
The skill gives the agent a fixed migration workflow, strategy choices and before-and-after code patterns, including the $http versus HttpClient difference. It is partial guidance, so it works best as a structured starting point that a developer reviews and tests.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you maintain a legacy AngularJS 1.x app and want an agent to help plan a gradual move to Angular, with code examples for controllers, directives, services and ngUpgrade. Skip it for apps already on modern Angular, quick UI fixes, or any production cutover you have not tested in staging, and have a human validate every change.
Download the skill