skills.rest
GedMarc
GedMarcCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

angular-awesome-migration

Migrate Angular Awesome wrapper directives to updated Web Awesome component APIs.

2|1|Updated Jun 4, 2025
Search Tags:#typescript#testing#angular#migration#wrappers#api-migration#web-awesome
One-click install
npx skills add https://github.com/GedMarc/angular-awesome --skill angular-awesome-migration
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: angular-awesome-migration
Source: https://github.com/GedMarc/angular-awesome/tree/main/skills/angular-awesome-migration
Command: npx skills add https://github.com/GedMarc/angular-awesome --skill angular-awesome-migration

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Keeps Angular wrapper directives aligned with upstream Web Awesome component API changes to prevent runtime regressions, type mismatches, and outdated documentation after breaking or additive updates.

Core Features & Use Cases

  • Migration workflow: Step-by-step checklist for identifying API deltas, updating types, directives, containers, tests, and docs.
  • Type and API updates: Guidance for modifying src/types, renaming inputs/outputs, and updating applyInputs logic to match upstream property names and types.
  • Real-world example: Converting a custom toast container to official wa-toast and wa-toast-item elements and renaming ToastConfig.position → ToastConfig.placement.

Quick Start

Use the angular-awesome-migration skill to update the WaToast wrapper by renaming position to placement, updating TypeScript types, replacing custom container rendering with official wa-toast and wa-toast-item elements, and then run build, tests, and docs regeneration.

Frequently Asked Questions about angular-awesome-migration

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

FAQPage Schema
How do I migrate Angular wrapper directives when Web Awesome component APIs change?▼

To migrate Angular wrapper directives, update TypeScript types in src/types, modify directive inputs/outputs and templates, update services and containers, revise unit tests, document breaking changes in CHANGELOG.md, and regenerate docs before running builds and tests.

What happens to my Angular project when upstream Web Awesome components rename properties?▼

When upstream Web Awesome components rename properties, you must update applyInputs logic and directive inputs/outputs to match the new names, preventing runtime regressions and type mismatches in your Angular project.

Do I need to update unit tests when migrating Angular Awesome wrappers to new APIs?▼

Yes, you must revise unit tests when migrating Angular Awesome wrappers to new APIs. The migration workflow requires updating tests alongside types, directives, and templates to ensure no runtime regressions occur after breaking changes.

How do I convert a custom Angular toast container to official Web Awesome elements?▼

To convert a custom Angular toast container, replace custom container rendering with official wa-toast and wa-toast-item elements, rename ToastConfig.position to ToastConfig.placement, update TypeScript types, and then run builds and tests.

What is the best way to document breaking API changes in Angular wrapper directives?▼

The best way to document breaking API changes is to record them in CHANGELOG.md. This migration step tracks upstream Web Awesome component API deltas like renamed properties, removed events, or changed value semantics.

Related Skills

Explore More Software Engineering Skills→
GedMarcGedMarc
2

angular-awesome

Wrap Web Awesome wa-* components as Angular 20+ directives with typed inputs and outputs.

Community
Intermediate
tomguntomgun

writing-tests

Write and run unit, integration, and acceptance tests for code changes.

Community
Intermediate
TheNordicOneTheNordicOne
9

angular-components

Standardize Angular v20+ component and directive TypeScript files with signals-based patterns.

Community
Intermediate
GedMarcGedMarc
2

angular-awesome-theming

Applies Tailwind-style utility classes and design tokens to style web components.

Community
Intermediate