@wangs-ui/skills 1.1.0-alpha.3 → 1.1.0-alpha.7

package/dist/bin.js

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-import { i as listSkills, n as updateSkills, r as addSkills, t as removeSkills } from "./src-XyTMubnF.js";
+import { i as listSkills, n as updateSkills, r as addSkills, t as removeSkills } from "./src-CtM02kKf.js";
 import path from "node:path";
 import { parseArgs } from "node:util";
 //#region bin.ts

package/dist/index.js

@@ -1,2 +1,2 @@
-import { a as getAgentSkillDirs, c as isSkillInstalled, d as loadAllSkills, i as listSkills, l as removeSkill, n as updateSkills, o as getInstalledSkills, r as addSkills, s as installSkill, t as removeSkills, u as getSkill } from "./src-XyTMubnF.js";
+import { a as getAgentSkillDirs, c as isSkillInstalled, d as loadAllSkills, i as listSkills, l as removeSkill, n as updateSkills, o as getInstalledSkills, r as addSkills, s as installSkill, t as removeSkills, u as getSkill } from "./src-CtM02kKf.js";
 export { addSkills, getAgentSkillDirs, getInstalledSkills, getSkill, installSkill, isSkillInstalled, listSkills, loadAllSkills, removeSkill, removeSkills, updateSkills };

package/dist/skills/create-form/SKILL.md

@@ -1,11 +1,11 @@
 ---
 name: create-form
-description: Architecture, validation workflows, and MCP discovery protocol for building forms and input controls with @wangs-ui/react-core.
+description: Architecture, validation workflows, strongly-typed forms (useForm, useDialogForm, useWatchField), and MCP discovery protocol for building forms and input controls with @wangs-ui/react-core.
 ---
 
 # Skill: Form Architecture & Validation Workflows
 
-Use this skill when building forms, data entry panels, settings pages, or multipart forms in Wangs UI applications.
+Use this skill when building forms, data entry panels, modal forms, settings pages, or multipart forms in Wangs UI applications.
 
 ---
 
@@ -18,6 +18,7 @@ Do **NOT** hardcode or guess prop names, field configurations, or validation opt
 ```json
 get-documentation({ "id": "form" })
 get-documentation({ "id": "field" })
+get-documentation({ "id": "dialogform" })
 get-documentation({ "id": "input" })
 get-documentation({ "id": "numberinput" })
 get-documentation({ "id": "select" })
@@ -39,29 +40,157 @@ get-documentation-for-story({ "id": "fileupload", "storyName": "Default" })
 ### Inspect Knowledge Graph & Usages:
 
 ```json
-query_graph({ "query": "useFormControl" })
-query_graph({ "query": "Field" })
+query_graph({ "query": "useForm" })
+query_graph({ "query": "useDialogForm" })
+query_graph({ "query": "useWatchField" })
 ```
 
 ---
 
-## 2. Form Architecture & State Principles
+## 2. Form Architecture & Latest API Patterns
+
+### Pattern A: Strongly Typed Forms with `useForm<T>()`
+
+For standard page forms, use `useForm<T>()` from `@wangs-ui/react-core/primitive/form`. It returns a strongly-typed `Form`, `Field`, and `control` where `Field`'s `name` prop is constrained to dot-path keys of `T` (`Path<T>`) with full IDE autocomplete and type inference.
+
+```tsx
+import Button from '@wangs-ui/react-core/primitive/button';
+import { useForm } from '@wangs-ui/react-core/primitive/form';
+import Input from '@wangs-ui/react-core/primitive/input';
+import { useI18n } from '@wangs-ui/react-i18n';
+
+interface UserFormData {
+  name: string;
+  email: string;
+  address: {
+    city: string;
+  };
+}
+
+export function UserFormPage() {
+  const { t } = useI18n();
+  // Strongly-typed Form, Field, and control bound to UserFormData
+  const { Form, Field, control } = useForm<UserFormData>();
+
+  return (
+    <Form control={control} onSubmit={(values) => console.log(values)}>
+      <Field required label={t('Full Name')} name="name">
+        {({ fieldProps }) => <Input {...fieldProps} placeholder={t('Enter full name')} />}
+      </Field>
+
+      {/* Autocompletes nested dot-path keys */}
+      <Field required label={t('City')} name="address.city">
+        {({ fieldProps }) => <Input {...fieldProps} placeholder={t('Enter city')} />}
+      </Field>
+
+      <div className="flex gap-2">
+        <Button
+          label={t('Reset')}
+          type="button"
+          severity="secondary"
+          onClick={() => control.reset()}
+        />
+        <Button label={t('Submit')} type="submit" />
+      </div>
+    </Form>
+  );
+}
+```
+
+---
+
+### Pattern B: Modal Forms with `useDialogForm<T>()`
+
+For modal/dialog forms, use `useDialogForm<T>()` from `@wangs-ui/react-core/primitive/dialogform`. It combines a modal `Dialog` with form provider lifecycle, providing automatic modal close on success (`closeOnSubmit`), validation interception, and native Enter-key submission.
+
+```tsx
+import Button from '@wangs-ui/react-core/primitive/button';
+import { useDialogForm } from '@wangs-ui/react-core/primitive/dialogform';
+import Input from '@wangs-ui/react-core/primitive/input';
+import { useI18n } from '@wangs-ui/react-i18n';
+import { useState } from 'react';
+
+interface EditProfileData {
+  fullName: string;
+  email: string;
+}
+
+export function EditProfileModal() {
+  const { t } = useI18n();
+  const [open, setOpen] = useState(false);
+  const { DialogForm, Field, control } = useDialogForm<EditProfileData>();
+
+  return (
+    <>
+      <Button label={t('Edit Profile')} onClick={() => setOpen(true)} />
+
+      <DialogForm
+        closeOnSubmit
+        control={control}
+        header={t('Edit Profile')}
+        open={open}
+        onOpenChange={setOpen}
+        onSubmit={(values) => console.log('Saved:', values)}
+        footer={
+          <div className="flex w-full justify-end gap-2">
+            <Button
+              label={t('Cancel')}
+              severity="secondary"
+              type="button"
+              variant="outline"
+              onClick={() => setOpen(false)}
+            />
+            <Button label={t('Save Changes')} type="submit" />
+          </div>
+        }
+      >
+        <div className="flex flex-col gap-4">
+          <Field required label={t('Full Name')} name="fullName">
+            {({ fieldProps }) => <Input {...fieldProps} placeholder="John Doe" />}
+          </Field>
+          <Field required label={t('Email')} name="email">
+            {({ fieldProps }) => (
+              <Input {...fieldProps} type="email" placeholder="you@example.com" />
+            )}
+          </Field>
+        </div>
+      </DialogForm>
+    </>
+  );
+}
+```
+
+---
+
+### Pattern C: Real-Time Field Watching with `useWatchField`
+
+To observe real-time field changes without causing the entire form to re-render, use `useWatchField` from `@wangs-ui/form/react`.
+
+```tsx
+import { useWatchField } from '@wangs-ui/form/react';
+
+function FormSummaryWatcher({ control }) {
+  // Subscribes only to 'username' value changes
+  const username = useWatchField({ control, name: 'username' });
+
+  return <div>Current Username: {username}</div>;
+}
+```
+
+---
+
+## 3. Submission Types
 
-1. **State & Control**:
-   - Standard REST payload forms use `useFormControl` with JSON mode.
-   - Multipart file upload workflows use `useFormControl` with FormData mode.
-2. **Field Composition**:
-   - Form inputs are wrapped with `<Field>` layout containers for unified label, tooltip, helper text, and error rendering.
-   - Exact props, slot rendering functions, and field binding options must be retrieved via MCP (`get-documentation({ "id": "field" })`).
-3. **Server Validation Error Mapping**:
-   - Backend validation responses (e.g. `422 Unprocessable Entity`) are mapped back into the form instance via `formControl.setError()`.
-4. **Submission Lifecycle**:
-   - In-flight network requests should manage loading state on submit actions and prevent accidental reset during mutations.
+| Config                                                               | Use case                  |
+| -------------------------------------------------------------------- | ------------------------- |
+| `useForm<T>()` / `useDialogForm<T>()`                                | Default JSON submission   |
+| `useForm<T, 'multipart/form-data'>({ type: 'multipart/form-data' })` | File uploads (`FormData`) |
 
 ---
 
-## 3. Mandatory Implementation Rules
+## 4. Mandatory Implementation Rules
 
-1. **Always Query MCP First**: Never guess input props or event signatures; obtain the exact types from `get-documentation`.
-2. **Strict Subpath Imports**: All components must be imported via their granular subpath (`@wangs-ui/react-core/primitive/*`, `@wangs-ui/form`).
+1. **Always Query MCP First**: Retrieve exact component and prop types via `get-documentation`.
+2. **Strict Subpath Imports**: Import primitive components via granular subpaths (`@wangs-ui/react-core/primitive/form`, `@wangs-ui/react-core/primitive/dialogform`, `@wangs-ui/react-core/primitive/field`).
 3. **Translate All Visible Strings**: Every field label, placeholder, helper text, and error message must be wrapped in `t('...')` from `@wangs-ui/react-i18n`.
+4. **Server Validation Error Mapping**: Map backend validation errors (e.g., 422 HTTP status) back into the form via `control.setError('fieldName', 'Error message')`.

package/dist/{src-XyTMubnF.js → src-CtM02kKf.js}

@@ -3,7 +3,7 @@ import fs from "node:fs";
 import { fileURLToPath } from "node:url";
 import { cancel, intro, isCancel, multiselect, outro } from "@clack/prompts";
 //#region skills/create-form/SKILL.md?raw
-var SKILL_default$7 = "---\nname: create-form\ndescription: Architecture, validation workflows, and MCP discovery protocol for building forms and input controls with @wangs-ui/react-core.\n---\n\n# Skill: Form Architecture & Validation Workflows\n\nUse this skill when building forms, data entry panels, settings pages, or multipart forms in Wangs UI applications.\n\n---\n\n## 1. MCP Inspection Protocol (Mandatory Single Source of Truth)\n\nDo **NOT** hardcode or guess prop names, field configurations, or validation options. Retrieve active component definitions and live implementation stories directly from MCP:\n\n### Inspect Component & Form Contracts:\n\n```json\nget-documentation({ \"id\": \"form\" })\nget-documentation({ \"id\": \"field\" })\nget-documentation({ \"id\": \"input\" })\nget-documentation({ \"id\": \"numberinput\" })\nget-documentation({ \"id\": \"select\" })\nget-documentation({ \"id\": \"multiselect\" })\nget-documentation({ \"id\": \"datepicker\" })\nget-documentation({ \"id\": \"fileupload\" })\n```\n\n### Inspect Live Story Implementations:\n\n```json\nget-documentation-for-story({ \"id\": \"form\", \"storyName\": \"Default\" })\nget-documentation-for-story({ \"id\": \"field\", \"storyName\": \"Default\" })\nget-documentation-for-story({ \"id\": \"select\", \"storyName\": \"Basic\" })\nget-documentation-for-story({ \"id\": \"datepicker\", \"storyName\": \"Default\" })\nget-documentation-for-story({ \"id\": \"fileupload\", \"storyName\": \"Default\" })\n```\n\n### Inspect Knowledge Graph & Usages:\n\n```json\nquery_graph({ \"query\": \"useFormControl\" })\nquery_graph({ \"query\": \"Field\" })\n```\n\n---\n\n## 2. Form Architecture & State Principles\n\n1. **State & Control**:\n   - Standard REST payload forms use `useFormControl` with JSON mode.\n   - Multipart file upload workflows use `useFormControl` with FormData mode.\n2. **Field Composition**:\n   - Form inputs are wrapped with `<Field>` layout containers for unified label, tooltip, helper text, and error rendering.\n   - Exact props, slot rendering functions, and field binding options must be retrieved via MCP (`get-documentation({ \"id\": \"field\" })`).\n3. **Server Validation Error Mapping**:\n   - Backend validation responses (e.g. `422 Unprocessable Entity`) are mapped back into the form instance via `formControl.setError()`.\n4. **Submission Lifecycle**:\n   - In-flight network requests should manage loading state on submit actions and prevent accidental reset during mutations.\n\n---\n\n## 3. Mandatory Implementation Rules\n\n1. **Always Query MCP First**: Never guess input props or event signatures; obtain the exact types from `get-documentation`.\n2. **Strict Subpath Imports**: All components must be imported via their granular subpath (`@wangs-ui/react-core/primitive/*`, `@wangs-ui/form`).\n3. **Translate All Visible Strings**: Every field label, placeholder, helper text, and error message must be wrapped in `t('...')` from `@wangs-ui/react-i18n`.\n";
+var SKILL_default$7 = "---\nname: create-form\ndescription: Architecture, validation workflows, strongly-typed forms (useForm, useDialogForm, useWatchField), and MCP discovery protocol for building forms and input controls with @wangs-ui/react-core.\n---\n\n# Skill: Form Architecture & Validation Workflows\n\nUse this skill when building forms, data entry panels, modal forms, settings pages, or multipart forms in Wangs UI applications.\n\n---\n\n## 1. MCP Inspection Protocol (Mandatory Single Source of Truth)\n\nDo **NOT** hardcode or guess prop names, field configurations, or validation options. Retrieve active component definitions and live implementation stories directly from MCP:\n\n### Inspect Component & Form Contracts:\n\n```json\nget-documentation({ \"id\": \"form\" })\nget-documentation({ \"id\": \"field\" })\nget-documentation({ \"id\": \"dialogform\" })\nget-documentation({ \"id\": \"input\" })\nget-documentation({ \"id\": \"numberinput\" })\nget-documentation({ \"id\": \"select\" })\nget-documentation({ \"id\": \"multiselect\" })\nget-documentation({ \"id\": \"datepicker\" })\nget-documentation({ \"id\": \"fileupload\" })\n```\n\n### Inspect Live Story Implementations:\n\n```json\nget-documentation-for-story({ \"id\": \"form\", \"storyName\": \"Default\" })\nget-documentation-for-story({ \"id\": \"field\", \"storyName\": \"Default\" })\nget-documentation-for-story({ \"id\": \"select\", \"storyName\": \"Basic\" })\nget-documentation-for-story({ \"id\": \"datepicker\", \"storyName\": \"Default\" })\nget-documentation-for-story({ \"id\": \"fileupload\", \"storyName\": \"Default\" })\n```\n\n### Inspect Knowledge Graph & Usages:\n\n```json\nquery_graph({ \"query\": \"useForm\" })\nquery_graph({ \"query\": \"useDialogForm\" })\nquery_graph({ \"query\": \"useWatchField\" })\n```\n\n---\n\n## 2. Form Architecture & Latest API Patterns\n\n### Pattern A: Strongly Typed Forms with `useForm<T>()`\n\nFor standard page forms, use `useForm<T>()` from `@wangs-ui/react-core/primitive/form`. It returns a strongly-typed `Form`, `Field`, and `control` where `Field`'s `name` prop is constrained to dot-path keys of `T` (`Path<T>`) with full IDE autocomplete and type inference.\n\n```tsx\nimport Button from '@wangs-ui/react-core/primitive/button';\nimport { useForm } from '@wangs-ui/react-core/primitive/form';\nimport Input from '@wangs-ui/react-core/primitive/input';\nimport { useI18n } from '@wangs-ui/react-i18n';\n\ninterface UserFormData {\n  name: string;\n  email: string;\n  address: {\n    city: string;\n  };\n}\n\nexport function UserFormPage() {\n  const { t } = useI18n();\n  // Strongly-typed Form, Field, and control bound to UserFormData\n  const { Form, Field, control } = useForm<UserFormData>();\n\n  return (\n    <Form control={control} onSubmit={(values) => console.log(values)}>\n      <Field required label={t('Full Name')} name=\"name\">\n        {({ fieldProps }) => <Input {...fieldProps} placeholder={t('Enter full name')} />}\n      </Field>\n\n      {/* Autocompletes nested dot-path keys */}\n      <Field required label={t('City')} name=\"address.city\">\n        {({ fieldProps }) => <Input {...fieldProps} placeholder={t('Enter city')} />}\n      </Field>\n\n      <div className=\"flex gap-2\">\n        <Button\n          label={t('Reset')}\n          type=\"button\"\n          severity=\"secondary\"\n          onClick={() => control.reset()}\n        />\n        <Button label={t('Submit')} type=\"submit\" />\n      </div>\n    </Form>\n  );\n}\n```\n\n---\n\n### Pattern B: Modal Forms with `useDialogForm<T>()`\n\nFor modal/dialog forms, use `useDialogForm<T>()` from `@wangs-ui/react-core/primitive/dialogform`. It combines a modal `Dialog` with form provider lifecycle, providing automatic modal close on success (`closeOnSubmit`), validation interception, and native Enter-key submission.\n\n```tsx\nimport Button from '@wangs-ui/react-core/primitive/button';\nimport { useDialogForm } from '@wangs-ui/react-core/primitive/dialogform';\nimport Input from '@wangs-ui/react-core/primitive/input';\nimport { useI18n } from '@wangs-ui/react-i18n';\nimport { useState } from 'react';\n\ninterface EditProfileData {\n  fullName: string;\n  email: string;\n}\n\nexport function EditProfileModal() {\n  const { t } = useI18n();\n  const [open, setOpen] = useState(false);\n  const { DialogForm, Field, control } = useDialogForm<EditProfileData>();\n\n  return (\n    <>\n      <Button label={t('Edit Profile')} onClick={() => setOpen(true)} />\n\n      <DialogForm\n        closeOnSubmit\n        control={control}\n        header={t('Edit Profile')}\n        open={open}\n        onOpenChange={setOpen}\n        onSubmit={(values) => console.log('Saved:', values)}\n        footer={\n          <div className=\"flex w-full justify-end gap-2\">\n            <Button\n              label={t('Cancel')}\n              severity=\"secondary\"\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => setOpen(false)}\n            />\n            <Button label={t('Save Changes')} type=\"submit\" />\n          </div>\n        }\n      >\n        <div className=\"flex flex-col gap-4\">\n          <Field required label={t('Full Name')} name=\"fullName\">\n            {({ fieldProps }) => <Input {...fieldProps} placeholder=\"John Doe\" />}\n          </Field>\n          <Field required label={t('Email')} name=\"email\">\n            {({ fieldProps }) => (\n              <Input {...fieldProps} type=\"email\" placeholder=\"you@example.com\" />\n            )}\n          </Field>\n        </div>\n      </DialogForm>\n    </>\n  );\n}\n```\n\n---\n\n### Pattern C: Real-Time Field Watching with `useWatchField`\n\nTo observe real-time field changes without causing the entire form to re-render, use `useWatchField` from `@wangs-ui/form/react`.\n\n```tsx\nimport { useWatchField } from '@wangs-ui/form/react';\n\nfunction FormSummaryWatcher({ control }) {\n  // Subscribes only to 'username' value changes\n  const username = useWatchField({ control, name: 'username' });\n\n  return <div>Current Username: {username}</div>;\n}\n```\n\n---\n\n## 3. Submission Types\n\n| Config                                                               | Use case                  |\n| -------------------------------------------------------------------- | ------------------------- |\n| `useForm<T>()` / `useDialogForm<T>()`                                | Default JSON submission   |\n| `useForm<T, 'multipart/form-data'>({ type: 'multipart/form-data' })` | File uploads (`FormData`) |\n\n---\n\n## 4. Mandatory Implementation Rules\n\n1. **Always Query MCP First**: Retrieve exact component and prop types via `get-documentation`.\n2. **Strict Subpath Imports**: Import primitive components via granular subpaths (`@wangs-ui/react-core/primitive/form`, `@wangs-ui/react-core/primitive/dialogform`, `@wangs-ui/react-core/primitive/field`).\n3. **Translate All Visible Strings**: Every field label, placeholder, helper text, and error message must be wrapped in `t('...')` from `@wangs-ui/react-i18n`.\n4. **Server Validation Error Mapping**: Map backend validation errors (e.g., 422 HTTP status) back into the form via `control.setError('fieldName', 'Error message')`.\n";
 //#endregion
 //#region skills/data-table/SKILL.md?raw
 var SKILL_default$6 = "---\nname: data-table\ndescription: Architecture, workflows, and MCP discovery protocol for building DataTables with sorting, pagination, filtering, selection, and export.\n---\n\n# Skill: DataTable Architecture & Integration Workflows\n\nUse this skill when implementing data grids, server-paginated tables, filterable listing views, or batch management interfaces with `@wangs-ui/react-core`.\n\n---\n\n## 1. MCP Inspection Protocol (Mandatory Single Source of Truth)\n\nDo **NOT** guess table prop names or hardcode table structures. Query the MCP server dynamically to inspect exact TypeScript signatures, live story implementations, and companion controls:\n\n### Inspect Component Contracts:\n\n```json\nget-documentation({ \"id\": \"datatable\" })\nget-documentation({ \"id\": \"exportbutton\" })\nget-documentation({ \"id\": \"filtercontainer\" })\nget-documentation({ \"id\": \"bulkactionbutton\" })\n```\n\n### Inspect Live Story Implementations:\n\n```json\nget-documentation-for-story({ \"id\": \"datatable\", \"storyName\": \"Basic\" })\nget-documentation-for-story({ \"id\": \"datatable\", \"storyName\": \"ServerPagination\" })\nget-documentation-for-story({ \"id\": \"datatable\", \"storyName\": \"Sortable\" })\nget-documentation-for-story({ \"id\": \"datatable\", \"storyName\": \"MultipleSelection\" })\nget-documentation-for-story({ \"id\": \"datatable\", \"storyName\": \"CustomColumn\" })\nget-documentation-for-story({ \"id\": \"exportbutton\", \"storyName\": \"WithTable\" })\n```\n\n### Inspect Knowledge Graph & Usages:\n\n```json\nquery_graph({ \"query\": \"DataTable\" })\nquery_graph({ \"query\": \"useDataTableFetch\" })\n```\n\n---\n\n## 2. Core Architecture & Mental Model\n\nThe Wangs UI `DataTable` is built on a modular, headless-first architecture:\n\n1. **Declarative Column Definitions (`TableColumn<T>[]`)**:\n   Columns are configured as typed array objects, not as JSX children. Check `get-documentation({ \"id\": \"datatable\" })` for column field types.\n2. **Table Instance Hook (`useDataTable`)**:\n   Coordinates table state (sorting, pagination, selection, column ordering, pinning, visibility).\n3. **Data Fetching Hook (`useDataTableFetch`)**:\n   Feeds server-side data, handles loading indicators, manages query parameters (`search`, `filter`, `sort`, `page`, `limit`), and debounces requests automatically.\n4. **Ecosystem Companions**:\n   - `FilterContainer` & `FilterToggleButton`: Filter popovers and faceted search.\n   - `ExportButton`: Client/server export to Excel, CSV, PDF, or Print.\n   - `BulkActionButton`: Contextual batch actions triggered when rows are selected.\n   - `CustomColumn`: User-controlled column ordering, visibility toggling, and pinning.\n\n---\n\n## 3. Mandatory Implementation Rules\n\n1. **Query MCP for Current Code Patterns**: Always run `get-documentation-for-story` for `datatable` before drafting code.\n2. **Strict Subpath Imports**: Import via `@wangs-ui/react-core/primitive/datatable` and companion primitive paths.\n3. **Always Translate Visible Copy**: All column header labels, empty state messages, and action button labels must be wrapped in `t('...')` from `@wangs-ui/react-i18n`.\n4. **Stable Row Identity**: Always configure a unique key identifier for stable selection and row identity.\n";
@@ -144,7 +144,7 @@ function removeSkill(skillId, baseDir = process.cwd()) {
 //#endregion
 //#region src/commands/list.ts
 function listSkills(baseDir = process.cwd()) {
-	intro(`\x1b[1m\x1b[36m📦 Wangs UI Consumer Skills Registry\x1b[0m (v1.1.0-alpha.2)`);
+	intro(`\x1b[1m\x1b[36m📦 Wangs UI Consumer Skills Registry\x1b[0m (v1.1.0-alpha.4)`);
 	const allSkills = loadAllSkills();
 	const targetDirs = getAgentSkillDirs(baseDir);
 	if (allSkills.length === 0) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wangs-ui/skills",
-  "version": "1.1.0-alpha.3",
+  "version": "1.1.0-alpha.7",
   "description": "CLI to install, update, and manage modular AI agent skills for Wangs UI React applications",
   "keywords": [
     "agents",

package/skills/create-form/SKILL.md

@@ -1,11 +1,11 @@
 ---
 name: create-form
-description: Architecture, validation workflows, and MCP discovery protocol for building forms and input controls with @wangs-ui/react-core.
+description: Architecture, validation workflows, strongly-typed forms (useForm, useDialogForm, useWatchField), and MCP discovery protocol for building forms and input controls with @wangs-ui/react-core.
 ---
 
 # Skill: Form Architecture & Validation Workflows
 
-Use this skill when building forms, data entry panels, settings pages, or multipart forms in Wangs UI applications.
+Use this skill when building forms, data entry panels, modal forms, settings pages, or multipart forms in Wangs UI applications.
 
 ---
 
@@ -18,6 +18,7 @@ Do **NOT** hardcode or guess prop names, field configurations, or validation opt
 ```json
 get-documentation({ "id": "form" })
 get-documentation({ "id": "field" })
+get-documentation({ "id": "dialogform" })
 get-documentation({ "id": "input" })
 get-documentation({ "id": "numberinput" })
 get-documentation({ "id": "select" })
@@ -39,29 +40,157 @@ get-documentation-for-story({ "id": "fileupload", "storyName": "Default" })
 ### Inspect Knowledge Graph & Usages:
 
 ```json
-query_graph({ "query": "useFormControl" })
-query_graph({ "query": "Field" })
+query_graph({ "query": "useForm" })
+query_graph({ "query": "useDialogForm" })
+query_graph({ "query": "useWatchField" })
 ```
 
 ---
 
-## 2. Form Architecture & State Principles
+## 2. Form Architecture & Latest API Patterns
+
+### Pattern A: Strongly Typed Forms with `useForm<T>()`
+
+For standard page forms, use `useForm<T>()` from `@wangs-ui/react-core/primitive/form`. It returns a strongly-typed `Form`, `Field`, and `control` where `Field`'s `name` prop is constrained to dot-path keys of `T` (`Path<T>`) with full IDE autocomplete and type inference.
+
+```tsx
+import Button from '@wangs-ui/react-core/primitive/button';
+import { useForm } from '@wangs-ui/react-core/primitive/form';
+import Input from '@wangs-ui/react-core/primitive/input';
+import { useI18n } from '@wangs-ui/react-i18n';
+
+interface UserFormData {
+  name: string;
+  email: string;
+  address: {
+    city: string;
+  };
+}
+
+export function UserFormPage() {
+  const { t } = useI18n();
+  // Strongly-typed Form, Field, and control bound to UserFormData
+  const { Form, Field, control } = useForm<UserFormData>();
+
+  return (
+    <Form control={control} onSubmit={(values) => console.log(values)}>
+      <Field required label={t('Full Name')} name="name">
+        {({ fieldProps }) => <Input {...fieldProps} placeholder={t('Enter full name')} />}
+      </Field>
+
+      {/* Autocompletes nested dot-path keys */}
+      <Field required label={t('City')} name="address.city">
+        {({ fieldProps }) => <Input {...fieldProps} placeholder={t('Enter city')} />}
+      </Field>
+
+      <div className="flex gap-2">
+        <Button
+          label={t('Reset')}
+          type="button"
+          severity="secondary"
+          onClick={() => control.reset()}
+        />
+        <Button label={t('Submit')} type="submit" />
+      </div>
+    </Form>
+  );
+}
+```
+
+---
+
+### Pattern B: Modal Forms with `useDialogForm<T>()`
+
+For modal/dialog forms, use `useDialogForm<T>()` from `@wangs-ui/react-core/primitive/dialogform`. It combines a modal `Dialog` with form provider lifecycle, providing automatic modal close on success (`closeOnSubmit`), validation interception, and native Enter-key submission.
+
+```tsx
+import Button from '@wangs-ui/react-core/primitive/button';
+import { useDialogForm } from '@wangs-ui/react-core/primitive/dialogform';
+import Input from '@wangs-ui/react-core/primitive/input';
+import { useI18n } from '@wangs-ui/react-i18n';
+import { useState } from 'react';
+
+interface EditProfileData {
+  fullName: string;
+  email: string;
+}
+
+export function EditProfileModal() {
+  const { t } = useI18n();
+  const [open, setOpen] = useState(false);
+  const { DialogForm, Field, control } = useDialogForm<EditProfileData>();
+
+  return (
+    <>
+      <Button label={t('Edit Profile')} onClick={() => setOpen(true)} />
+
+      <DialogForm
+        closeOnSubmit
+        control={control}
+        header={t('Edit Profile')}
+        open={open}
+        onOpenChange={setOpen}
+        onSubmit={(values) => console.log('Saved:', values)}
+        footer={
+          <div className="flex w-full justify-end gap-2">
+            <Button
+              label={t('Cancel')}
+              severity="secondary"
+              type="button"
+              variant="outline"
+              onClick={() => setOpen(false)}
+            />
+            <Button label={t('Save Changes')} type="submit" />
+          </div>
+        }
+      >
+        <div className="flex flex-col gap-4">
+          <Field required label={t('Full Name')} name="fullName">
+            {({ fieldProps }) => <Input {...fieldProps} placeholder="John Doe" />}
+          </Field>
+          <Field required label={t('Email')} name="email">
+            {({ fieldProps }) => (
+              <Input {...fieldProps} type="email" placeholder="you@example.com" />
+            )}
+          </Field>
+        </div>
+      </DialogForm>
+    </>
+  );
+}
+```
+
+---
+
+### Pattern C: Real-Time Field Watching with `useWatchField`
+
+To observe real-time field changes without causing the entire form to re-render, use `useWatchField` from `@wangs-ui/form/react`.
+
+```tsx
+import { useWatchField } from '@wangs-ui/form/react';
+
+function FormSummaryWatcher({ control }) {
+  // Subscribes only to 'username' value changes
+  const username = useWatchField({ control, name: 'username' });
+
+  return <div>Current Username: {username}</div>;
+}
+```
+
+---
+
+## 3. Submission Types
 
-1. **State & Control**:
-   - Standard REST payload forms use `useFormControl` with JSON mode.
-   - Multipart file upload workflows use `useFormControl` with FormData mode.
-2. **Field Composition**:
-   - Form inputs are wrapped with `<Field>` layout containers for unified label, tooltip, helper text, and error rendering.
-   - Exact props, slot rendering functions, and field binding options must be retrieved via MCP (`get-documentation({ "id": "field" })`).
-3. **Server Validation Error Mapping**:
-   - Backend validation responses (e.g. `422 Unprocessable Entity`) are mapped back into the form instance via `formControl.setError()`.
-4. **Submission Lifecycle**:
-   - In-flight network requests should manage loading state on submit actions and prevent accidental reset during mutations.
+| Config                                                               | Use case                  |
+| -------------------------------------------------------------------- | ------------------------- |
+| `useForm<T>()` / `useDialogForm<T>()`                                | Default JSON submission   |
+| `useForm<T, 'multipart/form-data'>({ type: 'multipart/form-data' })` | File uploads (`FormData`) |
 
 ---
 
-## 3. Mandatory Implementation Rules
+## 4. Mandatory Implementation Rules
 
-1. **Always Query MCP First**: Never guess input props or event signatures; obtain the exact types from `get-documentation`.
-2. **Strict Subpath Imports**: All components must be imported via their granular subpath (`@wangs-ui/react-core/primitive/*`, `@wangs-ui/form`).
+1. **Always Query MCP First**: Retrieve exact component and prop types via `get-documentation`.
+2. **Strict Subpath Imports**: Import primitive components via granular subpaths (`@wangs-ui/react-core/primitive/form`, `@wangs-ui/react-core/primitive/dialogform`, `@wangs-ui/react-core/primitive/field`).
 3. **Translate All Visible Strings**: Every field label, placeholder, helper text, and error message must be wrapped in `t('...')` from `@wangs-ui/react-i18n`.
+4. **Server Validation Error Mapping**: Map backend validation errors (e.g., 422 HTTP status) back into the form via `control.setError('fieldName', 'Error message')`.