form-extraction

Extract and analyze Angular Reactive Forms controls and validators from TypeScript and HTML files.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/Michael0520/milo-claudekit --skill form-extraction
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: form-extraction
Source: https://github.com/Michael0520/milo-claudekit/tree/main/plugins/one-ui-migration/skills/form-extraction
Command: npx skills add https://github.com/Michael0520/milo-claudekit --skill form-extraction

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill automates the process of extracting and analyzing Angular Reactive Forms, making it easier to compare forms between legacy and migrated codebases and ensuring consistency.

Core Features & Use Cases

  • Extract Form Controls: Identifies formControlName and formGroupName from HTML and form definitions from TypeScript.
  • Extract Validators: Detects both old Angular Validators and new OneValidators, including custom validators.
  • Validator Mapping: Provides a clear mapping from old validator syntax to new OneValidators.
  • Error Display Patterns: Guides on how to correctly display validation errors in templates, differentiating between built-in messages and custom handling.
  • Use Case: When migrating an Angular application from an older version to a newer one, use this skill to quickly audit all form controls and their associated validators to ensure a smooth transition and prevent runtime errors.

Quick Start

Use the form-extraction skill to find all form control names in the project's TypeScript files.

Frequently Asked Questions about form-extraction

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

FAQPage Schema
How do I extract Angular Reactive Forms and validators from source code?

Extracting Angular Reactive Forms involves scanning TypeScript and HTML files to identify formControlName, formGroupName, and FormBuilder definitions. This identifies controls, validators, and their definitions for migration comparison and validation logic analysis.

How do I map old Angular Validators to OneValidators during migration?

Mapping old Angular Validators to OneValidators involves detecting both validator types in TypeScript files. The extraction process identifies built-in Validators, new OneValidators, and custom validators, generating a clear mapping from old syntax to new OneValidators syntax.

How do I audit form controls and validators when migrating an Angular application?

Auditing form controls during Angular migration involves extracting all formControlName and formGroupName instances from HTML and form definitions from TypeScript. This ensures consistency and prevents runtime errors by comparing legacy and migrated codebases.

Can I extract custom validators and form group validation logic from TypeScript files?

Yes, you can extract custom validators and form group validation logic from TypeScript files. The extraction process detects OneValidators, custom validators, and form group and control-level validation logic to support detailed analysis and migration comparison.

What is the best way to display Angular validation errors in templates after migration?

The best way to display Angular validation errors is to differentiate between built-in messages and custom handling in templates. The extraction process guides correct error display patterns by analyzing validation logic from form controls and validators.

Does the form-extraction skill compare form controls between legacy and migrated Angular codebases?

Yes, the form-extraction skill compares form controls between legacy and migrated Angular codebases. It extracts controls, validators, and definitions from TypeScript and HTML files to facilitate migration comparison and ensure consistency across the application.