MCPInstall

angular-modernization

by bitwarden OfficialFrontend & Design

Modernizes Angular code such as components and directives to follow best practices using both automatic CLI migrations and Bitwarden-specific patterns. YOU must use this skill when someone requests modernizing Angular code. DO NOT invoke for general Angular discussions unrelated to modernization.

Installs
123
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/bitwarden/clients --skill angular-modernization
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads angular-modernization automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Angular Modernization

Transforms legacy Angular components to modern architecture using a two-step approach:

  1. Automated migrations - Angular CLI schematics for standalone, control flow, and signals
  2. Bitwarden patterns - ADR compliance, OnPush change detection, proper visibility, thin components

Workflow

Step 1: Run Angular CLI Migrations

⚠️ CRITICAL: ALWAYS use Angular CLI migrations when available. DO NOT manually migrate features that have CLI schematics.

Angular provides automated schematics that handle edge cases, update tests, and ensure correctness. Manual migration should ONLY be used for patterns not covered by CLI tools.

IMPORTANT:

  • Always run the commands using npx ng.
  • All the commands must be run on directories and NOT files. Use the --path option to target directories.
  • Run migrations in order (some depend on others)

1. Standalone Components

npx ng generate @angular/core:standalone --path=<directory> --mode=convert-to-standalone

NgModule-based → standalone architecture

2. Control Flow Syntax

npx ng generate @angular/core:control-flow

*ngIf, *ngFor, *ngSwitch → @if, @for, @switch

3. Signal Inputs

npx ng generate @angular/core:signal-input-migration

@Input() → signal inputs

4. Signal Outputs

npx ng generate @angular/core:output-migration

@Output() → signal outputs

5. Signal Queries

npx ng generate @angular/core:signal-queries-migration

@ViewChild, @ContentChild, etc. → signal queries

6. inject() Function

npx ng generate @angular/core:inject-migration

Constructor injection → inject() function

7. Self-Closing Tag

npx ng generate @angular/core:self-closing-tag

Updates templates to self-closing syntax

8. Unused Imports

npx ng generate @angular/core:unused-imports

Removes unused imports

Step 2: Apply Bitwarden Patterns

See migration-patterns.md for detailed examples.

  1. Add OnPush change detection
  2. Apply visibility modifiers (protected for template access, private for internal)
  3. Convert local component state to signals
  4. Keep service observables (don't convert to signals)
  5. Extract business logic to services
  6. Organize class members correctly
  7. Update tests for standalone

Step 3: Validate

  • Fix linting and formatting using npm run lint:fix
  • Run tests using npm run test

If any errors occur, fix them accordingly.

Key Decisions

Signals vs Observables

  • Signals - Component-local state only (ADR-0027)
  • Observables - Service state and cross-component communication (ADR-0003)
  • Use toSignal() to bridge observables into signal-based components

Visibility

  • protected - Template-accessible members
  • private - Internal implementation

Other Rules

  • Always add OnPush change detection
  • No TypeScript enums (use const objects with type aliases per ADR-0025)
  • No code regions (refactor instead)
  • Thin components (business logic in services)

Validation Checklist

Before completing migration:

  • OnPush change detection added
  • Visibility modifiers applied (protected/private)
  • Signals for component state, observables for service state
  • Class members organized (see migration-patterns.md)
  • Tests updated and passing
  • No new TypeScript enums
  • No code regions

References

Bitwarden ADRs

Angular Resources

FAQ

What does the angular-modernization skill do?

Modernizes Angular code such as components and directives to follow best practices using both automatic CLI migrations and Bitwarden-specific patterns. YOU must use this skill when someone requests modernizing Angular code. DO NOT invoke for general Angular discussions unrelated to modernization.

How do I install angular-modernization?

Run npx skills add https://github.com/bitwarden/clients --skill angular-modernization in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/angular-modernization/ (personal) or .claude/skills/angular-modernization/ (project).

Which AI agents can use angular-modernization?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is angular-modernization safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains angular-modernization?

It is published by bitwarden in bitwarden/clients, and it is an official skill from the maker of the technology it covers. It has 123 recorded installs.

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

Frontend & Design1M installs

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs