Porting angular to mobile

Skill stevenfackley/opencode-amplifier/.opencode/skills/porting-angular-to-mobile

Contract-governed OpenCode config that amplifies constrained LLMs (Sonnet 4.5, GPT-5.1, cheap corp models) into near-frontier coding agents: multi-agent pipeline with per-agent models, independent test-gen + locked tests, golden-pattern corpus, cross-model review, and an eval harness.

Install

npx -y skills add stevenfackley/opencode-amplifier --skill porting-angular-to-mobile

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Use when reproducing a developed Angular web app/feature as a native mobile screen (Swift/SwiftUI or MAUI). You are READING Angular to extract behavior, state, API calls, and validation — not writing Angular. Includes an Angular→mobile concept map.

SKILL.md

3.1 KB, as published. Nobody here has run it

Porting Angular Features to Mobile

You're not maintaining the Angular app — you're reproducing its behavior on mobile. Read it to extract the spec, not to admire the framework. Reproduce the behavior and UX contract, not the DOM.

Extract in this order — this IS the reproduction spec

Screens & routing — the route config (app.routes.ts / RouterModule) → your screen list and nav graph. Route params/guards → your nav arguments + access rules.
API calls — services using HttpClient. Endpoints, request/response shapes, headers/auth. This is the SAME backend your mobile app hits — reuse the contract (consuming-shared-libraries / swift-api-client).
State — what each component holds vs. a shared service (signals / BehaviorSubject / NgRx store) → your mobile view-model state.
Validation & business rules — reactive-form Validators, custom validators, logic in services. Reproduce these EXACTLY (a looser/stricter mobile form is a defect).
UX flows & edge cases — loading/empty/error/disabled states, conditional rendering (@if/@for/@empty, *ngIf), confirmations. The states are the spec.

Angular → mobile concept map

Angular	SwiftUI	MAUI
Standalone component	`View`	`ContentPage` + XAML
`@Input()` / `@Output()`	init params / closures (or Combine)	bindable props / events
Service (`providedIn:'root'`) + DI	`@Observable` model / injected service	DI service (`maui-di-services`)
Signal / `BehaviorSubject`	`@Observable` prop / `@State`	`[ObservableProperty]`
RxJS pipe / stream	`async`/`await`, `AsyncStream`, Combine	events / `IObservable`, async
`HttpClient` service	`swift-api-client`	typed `HttpClient` + ACL
Reactive form + `Validators`	form state + validation funcs	validation in the VM
Router + guards	`NavigationStack` + nav state	Shell routes + guards
`@if` / `@for` control flow	`if` / `ForEach`	`CollectionView` / triggers
Pipe (`date`, `currency`)	`Formatter` / computed	`IValueConverter`

Gotchas

Reproduce validation to the letter — web/mobile validation mismatch is a real bug.
RxJS hides timing (debounceTime, switchMap, retry) — capture the behavior, not just the final value.
Web layout ≠ mobile layout — reproduce the flow and rules, redesign the presentation for touch (apply distinctive-ui-design; don't transliterate the web look).
Server-driven behavior (interceptors, route guards) may need a mobile equivalent.

Output a reproduction spec

Screens → state → API contract → validation rules → UX states/edge cases → open questions for the web team. Then build with /plan. The annotated angular-feature-anatomy pattern shows where each of these lives in real Angular code.