skills.rest
ryan-mahoney
ryan-mahoneyCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

form-modernizer

Modernize React forms with TypeScript contracts and Playwright visual verification.

Updated Mar 14, 2026
Search Tags:#automation#typescript#react#refactor#playwright#form#design-system
One-click install
npx skills add https://github.com/ryan-mahoney/ryan-llm-skills --skill form-modernizer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: form-modernizer
Source: https://github.com/ryan-mahoney/ryan-llm-skills/tree/main/skills/form-modernizer
Command: npx skills add https://github.com/ryan-mahoney/ryan-llm-skills --skill form-modernizer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Modernize an existing React form end-to-end by rethinking structure, typing, and UI to align with design-system standards, while preserving behavior and data contracts.

Core Features & Use Cases

  • Multi-phase form modernization including analysis, design decisions, implementation, and visual verification.
  • TypeScript contract generation and UI-first refactor that respects existing API and data models.
  • Pixel-accurate Playwright-based visual checks and accessibility improvements.

Quick Start

Install and run the form-modernizer against a target form path to kick off the end-to-end workflow, including optional flags for screenshots.

Frequently Asked Questions about form-modernizer

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

FAQPage Schema
How do I modernize an existing React form to align with a design system?▼

To modernize a React form, you apply design-system-aligned refactors, generate TypeScript typings, and improve accessibility across add and edit modes while preserving existing backend interfaces and data contracts.

What's the best way to refactor a React form without breaking its API?▼

The best way to refactor a React form without breaking its API is to use contract-driven changes that respect existing data models and backend interfaces while applying UI-first design-system upgrades.

Does Playwright work for visual verification of React form refactoring?▼

Yes, Playwright works for visual verification of React form refactoring by executing pixel-accurate visual checks to verify that the modernized UI changes match the expected design outcomes.

Can I upgrade form UI and improve accessibility across add and edit modes?▼

Yes, you can upgrade form UI and improve accessibility across both add and edit modes by applying multi-phase form modernization that analyzes the form structure and implements design-system-aligned changes.

Do I need TypeScript to automate form modernization with design-system standards?▼

Yes, TypeScript is needed for form modernization because the workflow includes TypeScript contract generation to ensure proper typings and data integrity during the UI-first refactor process.

Why does form modernization require parallel analysis of the codebase?▼

Form modernization requires parallel analysis to efficiently evaluate the existing React form structure, design decisions, and implementation phases simultaneously before applying refactors and visual verification.

Related Skills

Explore More Software Engineering Skills→
henrybravohenrybravo

reverse-engineering

Analyze existing codebases to extract specifications and generate technical documentation.

Community
Advanced
legotec73legotec73

design-review

Audit live websites for visual issues and apply atomic code fixes.

Community
Advanced
staruhubstaruhub
662

ui-analyzer

Analyze UI design screenshots to generate React TypeScript components with Tailwind CSS.

Community
Intermediate
kollaboraikollaborai
1

webapp-testing

Automate local web app testing with Playwright and Python scripts.

Community
Intermediate