Cursor React 编码规范：来自 PatrickJS/awesome-cursorrules (40k stars) 的 rea，适用于各类文档与内容的智能化处理。
Cursor React 编码规范：来自 PatrickJS/awesome-cursorrules (40k stars) 的 rea，适用于各类文档与内容的智能化处理。
**文件来源:** PatrickJS/awesome-cursorrules → `rules/react-formengine-ai-form-builder-cursorrules-prompt-file.mdc`
**原仓库:** https://github.com/PatrickJS/awesome-cursorrules
**评分:** ⭐ 仓库 40k stars (社区最权威 Cursor rules 合集)
把 `react-formengine-ai-form-builder-cursorrules-prompt-file.mdc` 这条 Cursor 编码规则打包成可调用的 AI skill,帮你把代码生成统一到一致的标准上。
> Cursor rules for generating React forms from screenshots, PDFs, HTML, or text descriptions with validated FormEngine JSON schema. Renders through RSuite, Material UI, or Mantine.
globs: **/*
alwaysApply: false
---
# FormEngine — AI Form Builder for React
Generate production-ready React forms from a screenshot, PDF, HTML, or
text description. The output is a validated FormEngine JSON schema plus
a runnable App.tsx — portable data, not throwaway JSX.
Default target: FormEngine Core (MIT, free) via `@react-form-builder/core`
+ `@react-form-builder/components-rsuite` (or Material UI / Mantine).
Source repo: https://github.com/lukinov/ai-form-builder
## What you produce — every time
1. `form.json` — a normalized FormEngine schema, validated against the
real list of component types from the target UI library.
2. `App.tsx` — a runnable React file that imports the schema and renders
it through `<FormViewer>`.
3. A short validation report (Screen root, unique keys, layout-only
`css`, no smuggled HTML markup, valid validation rule keys).
4. Install command + a link to the free Online FormBuilder
(https://formbuilder.formengine.io) so the user can tweak visually.
## Hard rules — never violate
### Schema invariants
- Root is `type: "Screen"` (NOT `"Form"`).
- Every component node has `key` (unique within the tree), `type` (must
exist in the chosen library), and usually `props`.
- **Every prop value is wrapped:** `"label": { "value": "Email" }` —
never `"label": "Email"`.
- Validations live under `schema.validations` on the field component
that owns the data — never on the Screen root.
- Use the correct tooltip/error types:
- RSuite: `RsTooltip` / `RsErrorMessage`
- MUI: `MuiTooltip` / `MuiErrorWrapper`
- Mantine: `MtTooltip` / `MtErrorWrapper`
### Layout vs. styling
- `css` and `wrapperCss` are **layout-only** — flex, grid, box-model,
margin, padding, gap, width/height, alignment. **Never** color, font,
background, border, shadow, radius, opacity, transform.
- Visual styling belongs in the UI library's theme provider in
`App.tsx` (`<CustomProvider>` / `<ThemeProvider>` / `<MantineProvider>`).
- The legacy `style` field is **forbidden** — use `css` / `wrapperCss`.
- The shape is `{ "any": { "object": { "<layout-key>": "<value>" } } }`,
never a plain CSS string.
- No companion `.css` file alongside `App.tsx`. No root `className`. No
`<style>` blocks. No `styled-components`.
### Plain-text strings only
Every string inside any prop is plain text. **No HTML markup of any
kind**, anywhere — no `<h1>`, `<p>`, `<strong>`, `<small>`, `<br>`, no
`style="..."`, no `class="..."`, no `<style>` block. Express section
headings and structure with components (`RsCard` with `header` prop,
`RsHeader`, `RsDivider`) — not embedded HTML.
### Validation rule keys — Zod set only
Valid keys: `required`, `nonEmpty`, `min`, `max`, `length`, `email`,
`url`, `uuid`, `ip`, `datetime`, `regex`, `includes`, `startsWith`,
`endsWith`, `lessThan`, `moreThan`, `integer`, `multipleOf`, `truthy`,
`falsy`. There is **no `minLength` / `maxLength`** — use `min` / `max`
with `args.limit`.
## UI library defaults
- **Default to
...(完整内容在原仓库)...有问题或建议,在本 skill 下留言。
把 `react-formengine-ai-form-builder-cursorrules-prompt-file.mdc` 这条 Cursor 编码规则打包成可调用的 AI skill,帮你把代码生成统一到一致的标准上。
> Cursor rules for generating React forms from screenshots, PDFs, HTML, or text descriptions with validated FormEngine JSON schema. Renders through RSuite, Material UI, or Mantine.