reangular

A coding-agent skill that converts a React library into a modern Angular library with full feature parity, automated browser validation, and a side-by-side parity review. Example output (Opus 4.8 xhigh) here https://github.com/AleksanderBodurri/ng-flow.

Model recommendations (as of June 2026)

Claude Opus 4.6, 4.7, or 4.8 and GPT 5.5 give the most reliable results. These models follow the phased workflow, maintain context across long ports, and self-correct when they drift from the parity bar. They will take the longest but produce the best oneshot results.

Gemini 3.5 Flash can port small libraries quickly, but needs more active developer oversight. Check periodically that the skill rules (parity bar, per-feature commits, MCP validation) are being followed and redirect the agent when they are not.

What it does

Point the agent at a local React library and invoke this skill. It will:

1. Enumerate every exported symbol, component, hook, context, HOC, and utility in the React library.
2. Scaffold a modern Angular workspace (standalone components, zoneless, signals, OnPush) with a library project and a demo app.
3. Convert each feature to idiomatic Angular using input()/output()/viewChild(), signal/computed/effect, @if/@for, inject(), and @angular/cdk primitives for drag-drop, overlays, focus traps, and more.
4. Validate every demo route end-to-end in a real browser via Chrome DevTools MCP, with zero console errors, zero failed network requests, and every control exercised.
5. Compare the Angular demo against the React library's own demo or Storybook, feature by feature, until every parity box is checked.

The output is a buildable Angular library with a complete demo app, a parity-review.md audit, and a README.md crediting the original project and its contributors.

Requirements

• A local copy of the React library's source under an OSI-approved open-source license (MIT, Apache 2.0, etc.). See the legal constraint in SKILL.md.
• The angular-developer skill installed in the same workspace.
• A coding agent that supports the skills protocol (Claude Code, Gemini CLI, Copilot CLI, or compatible).
• Chrome DevTools MCP connected for end-to-end browser validation.

Installation

reangular depends on the angular-developer skill, so install both:

npx skills add https://github.com/angular/skills --skill angular-developer
npx skills add https://github.com/aleksanderbodurri/reangular

Usage

Once installed, tell your agent to use the skill and point it at the React library:

Use the reangular skill to port /path/to/react-lib to Angular.

For example, to port recharts:

Use the reangular skill to port ~/projects/recharts to Angular.
Output the workspace at ~/projects/ng-charts.

The agent walks through five phases: bootstrap, discovery, planning, execution, and parity review. It commits after each feature and validates the demo app in a real browser before declaring done. For a mid-sized library like recharts (around 40 public components), expect the process to take 30 to 60 minutes on Opus or GPT 5.5.

What "done" means

The skill enforces a strict parity bar. The port is not done until:

• Every exported symbol from the React library has a working Angular equivalent.
• ng build passes with zero errors and zero warnings.
• Every demo route is validated end-to-end in Chrome DevTools MCP.
• parity-review.md has every box checked via side-by-side comparison with the React demo.
• The generated README.md credits the original library, its contributors (sorted by commit count), and this skill.

Dependencies

Skill	Source	Required
angular-developer	github.com/angular/skills	Yes

License

MIT. See LICENSE.