Toolverse
All skills

angular-modernization

by bitwarden

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

Installation

Pick a client and clone the repository into its skills directory.

Installation

Quick info

Author
bitwarden
Category
Frontend
Views
19

About this skill

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 to use

  1. Przygotuj projekt Angular z dostępem do katalogu, w którym znajdują się komponenty do modernizacji. Skill wymaga uprawnień do czytania, pisania plików i uruchamiania poleceń npx ng.

  2. Poproś skill o modernizację konkretnego katalogu lub zestawu komponentów. Podaj ścieżkę do folderu zawierającego kod do transformacji.

  3. Skill automatycznie uruchomi migracje Angular CLI w kolejności: najpierw konwersja na komponenty standalone, następnie zmiana składni kontroli przepływu (*ngIf na @if, *ngFor na @for), potem migracja @Input na sygnały, @Output na sygnały wyjściowe i wreszcie @ViewChild/@ContentChild na sygnałowe queries.

  4. Każda migracja jest uruchamiana na całym katalogu za pomocą flagi --path, nigdy na pojedynczych plikach. Skill czeka na zakończenie każdego kroku przed przejściem do następnego.

  5. Po zakończeniu wszystkich migracji sprawdź wyniki — komponenty powinny być standalone, używać nowej składni @if/@for, oraz sygnałów zamiast tradycyjnych dekoratorów @Input/@Output.

  6. Jeśli napotkasz kod, który nie ma automatycznej migracji CLI, skill zastosuje wzorce Bitwarden: OnPush change detection, poprawną widoczność i architekturę cienkich komponentów.

Related skills

interactive-dashboard-builder

by anthropics

Build self-contained interactive HTML dashboards with Chart.js, dropdown filters, and professional styling. Use when creating dashboards, building interactive reports, or generating shareable HTML files with charts and filters that work without a server.

Frontend
2298

screenshot-to-code

by OneWave-AI

Convert UI screenshots into working HTML/CSS/React/Vue code. Detects design patterns, components, and generates responsive layouts. Use this when users provide screenshots of websites, apps, or UI designs and want code implementation.

Frontend
94209

angular

by sickn33

Modern Angular (v20+) expert with deep knowledge of Signals, Standalone Components, Zoneless applications, SSR/Hydration, and reactive patterns. Use PROACTIVELY for Angular development, component architecture, state management, performance optimization, and migration to modern

Frontend
2656

game-development

by davila7

Game development orchestrator. Routes to platform-specific skills based on project needs.

Frontend
36112

tailwind-design-system

by wshobson

Build scalable design systems with Tailwind CSS, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.

Frontend
2676

brainstorming

by obra

Use when creating or developing, before writing code or implementation plans - refines rough ideas into fully-formed designs through collaborative questioning, alternative exploration, and incremental validation. Don't use during clear 'mechanical' processes

Frontend
49170