{"skill":{"slug":"form-builder","displayName":"form-builder","summary":"Automates HTML form creation from roadflow.rf_form using similarity matching, supports client validation, multi-step wizards, and dynamic conditional fields.","description":"---\nname: form-builder\ndescription: Automated form generation from roadflow.rf_form with similarity-based copying. Use when Codex needs: (1) Generate HTML form templates based on existing similar forms, (2) Create dynamic forms via database-assisted similarity matching, (3) Implement client-side validation with real-time feedback, or (4) Generate multi-step wizard forms optimized from rf_form table in roadflow database\n---\n\n# 表单生成器 Form Builder 📜\n\n> \"致君尧舜上，再使风俗淳\" —— 杜子美\n\n本技能提供自动化表单生成、验证和管理功能。**核心特色**：与 **数据库管理员**技能协同工作，基于 `roadflow.rf_form` 表中的现有表单数据，通过相似度匹配算法（名称编辑距离+HTML 结构相似度）复制修改并保存为新表单。所有表单均遵循无障碍设计原则（WCAG 2.1）和响应式设计规范。\n\n## 核心能力 Core Capabilities\n\n### 🔹 HTML 表单模板生成\n- **框架支持**: Bootstrap 5 / Tailwind CSS\n- **输入控件**: text, email, password, tel, url, number, date, datetime-local\n- **高级控件**: select (dropdown), radio, checkbox, file upload\n- **布局控件**: fieldset, legend, tabpanels, collapsibles\n- **富文本域**: textarea with optional rich text toolbar\n\n### 🔹 数据库驱动的智能生成（RoadFlow 集成）⭐ NEW\n- **相似度匹配算法**：基于 roadflow.rf_form 表的现有表单数据\n  - `name`字段编辑距离计算（如\"出差申请单\"vs\"请假申请单\"）\n  - `html`模板结构相似度（基于 HTML 标签/元素）\n  - `type`类型相同则权重加倍\n- **复制修改流程**：\n  a. 接收新建表单需求描述\n  b. 查询 roadflow.rf_form 表找到相似度最高的现有记录\n  c. 读取该记录的完整内容（html, fieldsjson等）\n  d. 根据新需求修改字段名、标题、字段定义等\n  e. 生成新 ID，保存为新表单\n- **输出格式**：\n  - 相似度计算结果（top 3 匹配项）\n  - 匹配到的源表单名称\n  - 新生成的表单 HTML+JSON 配置\n\n### 🔹 动态表单映射\n- **JSON Schema to HTML**: 自动将 JSON Schema 转换为完整 HTML 表单\n- **UI 组件库绑定**: React Hook Form / Vue Formulate / jQuery validation\n- **API 端点集成**: 自动生成 submit 事件处理和错误反馈\n\n### 🔹 客户端验证 Client-side Validation\n- **实时验证**: input onchange/onblur 触发即时校验\n- **错误提示**: inline error messages + visual indicators (red border, tooltip)\n- **渐进式增强**: graceful degradation 当 JS 被禁用时表单仍可提交\n- **自定义验证器**: 支持正则表达式和异步 API 调用验证\n\n### 🔹 多步骤向导 Multi-step Wizards\n- **步骤导航**: progress bar + step indicator\n- **数据持久化**: 使用 sessionStorage/localStorage 保存已填内容\n- **步骤验证**: 每步验证通过后才能进入下一步\n- **返回编辑**: 支持在任何步骤返回上一步修改\n\n### 🔹 文件上传 File Uploads\n- **拖拽支持**: drag-and-drop API integration\n- **预览功能**: image preview + file type detection\n- **限制规则**: max size, max files, allowed extensions\n- **上传处理**: progress bar + success/error handling\n\n### 🔹 条件字段 Conditional Logic\n- **显隐逻辑**: if [field] equals [value] then show/hide [target fields]\n- **级联下拉**: 选择 A 后显示相关 B 选项（如城市→区县）\n- **动态追加**: submit 时动态添加新字段到表单\n\n## 数据库配置（roadflow）\n\n- **主机**: 192.168.1.136\n- **端口**: 35438\n- **用户**: postgres\n- **密码**: Hxkj510510\n- **目标库**: roadflow\n\n## 使用场景 Use Cases\n\n当你需要以下功能时，请触发此技能：\n\n- \"为注册页面生成一个包含姓名、邮箱、密码的表单\"\n- \"将 schema.json 转换为 Bootstrap 5 格式的 HTML\"\n- \"创建一个多步骤问卷向导（基本信息→联系方式→偏好设置）\"\n- \"基于 roadflow.rf_form 中的相似表单快速生成新表单（如：新建'员工请假申请单'，参考现有的'出差申请单'和'请假申请单'）\"\n- \"生成带实时验证的文件上传表单\"\n- \"根据用户角色动态显示不同字段（管理员→编辑按钮，普通用户→查看按钮）\"\n\n## 技术细节 Technical Details\n\n本技能在幕后会使用：\n- **驱动**: 原生浏览器 API + DOM manipulation + `pg` (PostgreSQL) for roadflow DB\n- **框架支持**: Bootstrap 5 / Tailwind CSS (CSS-in-JS)\n- **验证库**: jQuery Validation / Formik / react-hook-form\n- **响应式**: mobile-first CSS with media queries\n- **无障碍**: ARIA labels, keyboard navigation support\n- **数据库集成**: roadflow.rf_form表相似度匹配（名称编辑距离 + HTML 结构相似度）\n\n## 示例 Examples\n\n### 生成 HTML 表单\n```\n创建一个产品注册表单：\n- 产品名称（文本输入，必填）\n- SKU（文本输入，最大 50 字符）\n- 价格（number，最小 0，步长 0.01）\n- 库存数量（number，最小 0）\n- 描述（textarea，最多 2000 字）\n- 上传产品图片（file，限制 jpg/png，最大 5MB）\n- 提交按钮\n\n框架：Bootstrap 5\n```\n\n### 基于 RoadFlow 现有表单生成新表单\n```\n根据 roadflow.rf_form 表生成新表单：\n需求：新建'员工考勤管理表'\n参考逻辑：查找相似度最高的现有表单（如'请假申请单'）\n操作：复制其 HTML 模板，修改 name, html, fieldsjson 等字段\n输出：新 ID + 完整表单内容\n\n### 工时数据表生成案例\n```\n需求：新建'工时数据表'（记录员工工作时间和薪资）\n相似度算法发现表中无\"工时\"关键词表单→判定为全新创建\nCKEditor 输出特征分析：\n- HTML 使用<table>布局，width:98%\n- 字段顺序：工号→姓名→部门→日期→班次→工时相关字段→工资总额（只读）\n- fieldsjson 字段类型：string, datetime, number, select, textarea\n- 生成 ID:777082588573769（MAX(id)+1）\nSQL 插入成功保存至 rf_form 表\n\n注意：当无相似表单时，新表可全新创建而非强制复制\n```\n\n### JSON Schema 转换\n```\n将以下 schema 转换为 HTML:\n{\n  \"type\": \"object\",\n  \"properties\": {\n    \"firstName\": { \"type\": \"string\" },\n    \"lastName\": { \"type\": \"string\" }\n  }\n}\n```\n\n### 多步骤向导\n```\n创建一个 3 步问卷：\n第 1 步：基本信息（姓名、邮箱）\n第 2 步：联系方式（电话、地址）\n第 3 步：偏好设置（兴趣选项、频率选择）\n每步验证通过后显示下一步\n```\n\n### 条件字段逻辑\n```\n当 [country] 为\"美国\"时显示州列表，否则显示省列表\n当 [file_type] 为\"image\"时允许选择 jpg/png/gif，否则 pdf/doc/xlsx\n```\n\n---\n\n*技能由杜甫（📜）编写，秉承\"工欲善其事，必先利其器\"的精神*\n","topics":["Database"],"tags":{"data-binding":"2.0.0","form-builder":"2.0.0","html":"2.0.0","latest":"2.0.0","ui":"2.0.0","validation":"2.0.0","wizard":"2.0.0"},"stats":{"comments":0,"downloads":844,"installsAllTime":32,"installsCurrent":1,"stars":0,"versions":2},"createdAt":1773627534816,"updatedAt":1779078266366},"latestVersion":{"version":"2.0.0","createdAt":1773629306828,"changelog":"- Version bump to 2.0.0 in package.json.\n- No functional or documentation changes in this update.","license":"MIT-0"},"metadata":null,"owner":{"handle":"ericyang1234","userId":"s174a9bf1yw02xjsb3ymse7r0983grdz","displayName":"ericyang1234","image":"https://avatars.githubusercontent.com/u/143331068?v=4"},"moderation":{"isSuspicious":false,"isMalwareBlocked":false,"verdict":"clean","reasonCodes":["review.llm_review"],"summary":"Review: review.llm_review","engineVersion":"v2.4.24","updatedAt":1780089910701}}