schema-driven-formslisted

# Schema-driven Forms > Default UI forms toolchain for Singleton SD projects. > Pair with the **frontend** skill for Next.js, TanStack Query, Tailwind, and tokens. > Architecture Doc: ClickUp page **Schema-driven Forms (UI)** under doc `2kz0kcnk-1416`. --- ## Locked pipeline ``` Zod schema (TS source of truth) ↓ zod-to-json-schema (or Zod 4 equivalent) JSON Schema ↓ + explicit UI Schema JSON Forms (@jsonforms/core + @jsonforms/react) ↓ custom React renderers (Tailwind + Singleton SD tokens) Form UI → typed submit → Nest API (class-validator DTOs) ``` | Layer | Role | | --- | --- | | **Zod** | Author form shape, refine/transform, `z.infer` types | | **JSON Schema** | Interchange for JSON Forms validation/rendering | | **UI Schema** | Layout, grouping, visibility rules — not optional | | **JSON Forms** | Schema-driven control tree ([jsonforms.io](https://jsonforms.io/)) | | **Custom renderers** | Visual system — **never** default to Material UI renderers | Forms are **one** schema-driven component family. Other UI stays hand-built. --- ## When to use / when not to **Use** for: - Create/edit entity forms (tenants, contacts, support admin, settings) - Admin consoles where fields largely mirror a domain schema - Repeated CRUD forms that benefit from shared renderers **Do not force** for: - Highly custom multi-step wizards with heavy side effects - Drag-and-drop builders, rich canvases, or one-off interactive UX - Pure display / read-only view