form-library-integration

What problem does it solve?

This skill solves the problem of keeping a React form’s current values perfectly synchronized with shareable URL state so users can reload, share, and return to the same draft without losing their inputs.

Core Features & Use Cases

• Module-scoped default state sharing: Define a single module-scoped defaults object that both useUrlState and useForm use to maintain a stable form shape and identity.
• URL hydration → form initialization: Hydrate useForm by passing defaultValues: urlState so the form starts from whatever is currently encoded in the URL.
• Push-based form → URL updates: Sync form changes back into the URL by subscribing via RHF subscribe() (not watch()) and calling setUrl(values) to coalesce updates efficiently.
• Use cases: Filter UIs, search forms, and multi-step wizards where the URL should act as a draft store for round-trippable form values.

Quick Start

Load this skill when you want your form values to be shareable as a URL draft link, then wire useUrlState and useForm to share module-scoped defaults with defaultValues: urlState and update the URL using RHF subscribe().