angular-migration

Overview of angular-migration skill

What angular-migration actually helps you do

The angular-migration skill is for teams moving an existing AngularJS 1.x codebase to modern Angular, especially when a full rewrite is too risky. Its core job is not just “convert syntax,” but help you choose a migration path, structure a hybrid app when needed, and handle the painful seams: directives to components, AngularJS services to Angular DI, and route-by-route replacement.

Who should use the angular-migration skill

This skill fits frontend engineers, tech leads, and migration owners who already have a real AngularJS app and need a practical path forward. It is most useful when you need to:

• decide between big-bang, hybrid, or vertical-slice migration
• keep shipping while migrating
• rewrite old directives/controllers into Angular components and services
• phase routing and dependency injection changes safely

Best-fit migration scenarios

Use angular-migration when your app has meaningful legacy weight:

• a large AngularJS codebase with ongoing releases
• shared services and directives that cannot be replaced all at once
• a need for hybrid AngularJS + Angular runtime during transition
• feature-level migration planning rather than abstract framework advice

If you only need a brand-new Angular app, this skill is probably overkill.

What makes this skill different from a generic migration prompt

A generic prompt will often jump straight into code conversion. The angular-migration skill is more useful when the hard part is sequencing: choosing migration strategy, bootstrapping hybrid mode, and mapping old AngularJS concepts into Angular equivalents without breaking the delivery pipeline. That is the real adoption blocker for most teams.

What to know before you install

This skill is repository-light: the main source of truth is SKILL.md, with no extra scripts, references, or helper assets. That makes it fast to inspect, but it also means you should expect guidance patterns and examples rather than automation. Install it if you want decision support and migration structure, not a turnkey codemod.

How to Use angular-migration skill

Install context for angular-migration skill

Install angular-migration into your agent environment with your standard Skills workflow. A common pattern is:

npx skills add https://github.com/wshobson/agents --skill angular-migration

Because this skill lives as a single SKILL.md file, installation is mainly about making the guidance callable inside your agent workflow rather than pulling in executable tooling.

Read this file first

Start with:

• SKILL.md

That file contains the usable content: when to use the skill, migration strategies, hybrid setup, and code examples. Since there are no supporting rule or resource folders here, reading the whole file is realistic and worth doing before you rely on it.

What input the skill needs from you

The angular-migration skill works much better when you provide concrete repo facts instead of asking for a generic plan. Useful inputs include:

• current AngularJS version and app size
• whether releases must continue during migration
• routing library in use
• major directive patterns
• DI/service patterns
• build tooling and test status
• whether hybrid runtime is acceptable
• target Angular version and timeline

Without this, the output usually stays at “choose hybrid for large apps,” which is true but not decision-grade.

Turn a rough goal into a strong prompt

Weak prompt:

• “Help migrate my AngularJS app to Angular.”

Stronger prompt:

• “Use the angular-migration skill to recommend a migration strategy for a 70k-line AngularJS 1.6 app with ui-router, 120 directives, and weekly releases. We need to keep shipping, can tolerate a hybrid app for 6 months, and want a phased route migration. Propose strategy, sequencing, first feature slice, DI conversion approach, and top technical risks.”

This works better because the skill is strongest at planning the migration shape, not guessing your constraints.

A practical angular-migration usage workflow

A good angular-migration usage pattern is:

1. classify the app: small rewrite candidate vs hybrid candidate
2. choose one strategy: big bang, incremental hybrid, or vertical slice
3. identify migration units: routes, features, directives, services
4. define interoperability needs for AngularJS and Angular
5. convert a narrow feature first
6. validate bootstrapping, DI, and routing seams
7. repeat with a stable migration checklist

This avoids the common mistake of mixing strategy debate with low-level rewrites too early.

Strategy selection: how to choose well

The repository emphasizes three strategies:

• Big Bang: best for smaller apps or where parallel rewrite is realistic
• Incremental / Hybrid: best for larger apps that must keep shipping
• Vertical Slice: best when features are distinct and can be replaced end-to-end

For most real legacy apps, hybrid or vertical-slice is the practical answer. Choose big bang only when operational risk is lower than the cost of long-lived dual-stack complexity.

Using angular-migration for hybrid app planning

One of the most valuable parts of angular-migration for Frontend Development is hybrid planning. If you are using @angular/upgrade/static, ask the skill to help with:

• bootstrap order
• AngularJS/Angular coexistence boundaries
• downgraded/upgraded components and services
• which shared dependencies should move first
• how to keep feature teams unblocked during coexistence

This is where ordinary prompts often become vague or unsafe.

Directive, component, and DI conversion prompts

Ask the skill for targeted conversions, not just whole-app plans. Good prompt shapes:

• “Map this AngularJS directive with isolate scope and link function into an Angular component design.”
• “Convert this AngularJS service registration pattern into Angular DI with provider scope guidance.”
• “Explain which controllers should become smart container components versus plain services.”

These narrower asks produce more usable outputs than “convert everything.”

Routing migration guidance

Routing is often where migration plans fall apart. Use the skill to reason about:

• whether to migrate route-by-route or feature-by-feature
• how AngularJS router state maps to Angular routing
• how to isolate old and new route ownership during hybrid mode
• when to move guards, resolvers, and data fetching patterns

If your app has complex nested states, mention them explicitly in the prompt.

Repository-reading path for fast evaluation

If you are deciding whether angular-migration install is worth it, inspect:

1. SKILL.md frontmatter for the exact scope
2. strategy headings to see if your migration mode is covered
3. hybrid app examples for UpgradeModule relevance
4. conversion sections for directive, DI, and routing fit

You can evaluate this skill quickly because the content is concentrated in one file.

Practical tips that improve output quality

To get better results from the angular-migration skill:

• paste a representative AngularJS directive or service, not a toy snippet
• describe release constraints and team capacity
• ask for sequencing, not just end-state architecture
• request tradeoffs between two migration paths
• ask the model to flag risky legacy patterns before proposing code changes

That produces output you can act on in a real repo review.

angular-migration skill FAQ

Is angular-migration good for beginners?

Yes, but mainly for guided planning rather than hands-free migration. A beginner can use it to understand strategy options and concept mapping, but you still need enough AngularJS and Angular literacy to validate the suggested architecture and code transformations.

When is angular-migration not the right skill?

Skip angular-migration if:

• your project is already on modern Angular
• you only need a version-to-version Angular upgrade
• you want automated code mods
• your app is so small that rebuilding is clearly cheaper than phased migration planning

This skill is specifically about AngularJS-to-Angular transition.

Does the angular-migration skill replace reading Angular docs?

No. It shortens planning and translation work, especially around hybrid architecture and phased migration. You will still need Angular and ngUpgrade documentation for exact APIs, version compatibility, and implementation details.

Is this better than a normal LLM prompt?

Usually yes, if your problem is migration structure rather than one-off code translation. The angular-migration guide gives the agent a scoped mental model: strategy choice, hybrid setup, component conversion, DI updates, and routing migration. That reduces generic advice and makes outputs more migration-aware.

Can I use angular-migration for a large enterprise app?

Yes, and that is one of its strongest fits. Large apps benefit most from the skill's emphasis on incremental and hybrid approaches. Just make sure your prompt includes organizational realities like release cadence, shared libraries, ownership boundaries, and risk tolerance.

Does this skill include automation or scripts?

No. Based on the repository structure, there are no bundled scripts, references, or helper resources. The value is in the migration framework and examples, not in executable tooling.

How to Improve angular-migration skill

Give the skill architecture facts, not just goals

The fastest way to improve angular-migration output is to feed it real system shape:

• module count
• route map
• directive types
• shared services
• test coverage
• build constraints
• browser support requirements

The skill can only recommend credible sequencing if it knows what is tightly coupled.

Ask for an explicit migration plan format

Good results improve further when you request a structure such as:

• recommended strategy
• why not the other two
• first 3 migration slices
• hybrid app requirements
• DI and routing changes
• rollback risks
• definition of done per slice

This makes the answer easier to review with engineering stakeholders.

Common failure mode: asking for code before strategy

A frequent mistake is requesting component rewrites before choosing migration boundaries. That can create attractive but unusable output. Use the angular-migration skill first to decide migration order, then ask for code conversions within one chosen slice.

Common failure mode: hiding constraints

If you omit constraints like “must release weekly” or “cannot freeze product work,” the skill may suggest a cleaner but unrealistic approach. Better prompts surface:

• delivery pressure
• team size
• acceptable hybrid duration
• allowed breaking changes
• testing maturity

These details materially change the recommendation.

Improve angular-migration usage with before-and-after examples

When asking for transformation help, include:

• current AngularJS code
• desired Angular style or version target
• local conventions
• any compatibility requirements during hybrid mode

That helps the skill preserve intent instead of generating textbook Angular code that does not fit your repo.

Iterate after the first output

Treat the first answer as migration framing, not the final plan. Then refine with follow-ups like:

• “Revise for a 3-team setup with shared libraries.”
• “Change the recommendation if we cannot use ngUpgrade.”
• “Break the first feature slice into weekly milestones.”
• “Show the service migration risks before component migration.”

This is usually how you turn a decent plan into a repo-specific one.

What to improve first if outputs feel generic

If the angular-migration skill feels too broad, improve inputs in this order:

1. app size and release model
2. chosen or suspected migration strategy
3. one real feature slice
4. one real directive/service example
5. routing and DI constraints

That sequence gives the skill enough context to move from generic migration advice to practical frontend delivery guidance.