form-builder

Automates HTML form creation from roadflow.rf_form using similarity matching, supports client validation, multi-step wizards, and dynamic conditional fields.

Security Scan

The skill's description claims direct integration with a RoadFlow database (including read/write of rf_form) but the package does not declare or implement the required DB access and instead embeds cleartext DB credentials in SKILL.md — this mismatch and presence of secrets is concerning.

Purpose & Capability

The SKILL.md repeatedly describes database-driven behaviour (querying and writing roadflow.rf_form) and even lists a concrete PostgreSQL host/user/password, yet package.json declares no 'pg' dependency, none of the code files use a DB client, and the skill's metadata lists no required env vars or credentials. That is internally inconsistent: either the skill needs DB access (and should require/declare it) or it does not. This mismatch suggests sloppy engineering at best or an attempt to hide/use embedded credentials at worst.

Instruction Scope

Runtime instructions direct the agent to find, read, modify, and save records from roadflow.rf_form and explicitly include full DB connection parameters inside SKILL.md. The provided JS files do not implement that DB interaction. The instructions also reference collaboration with a 'database administrator' skill and give the agent latitude to copy/modify full form records — i.e., access to potentially sensitive data. Embedding credentials in the SKILL.md expands the attack surface and is not declared in the skill's environment requirements.

Install Mechanism

There is no install spec (instruction-only), which is low risk for arbitrary network installs. However, the package includes local JS files (html_form_generator.js, validator.js) and a package.json with an invalid main and no declared dependencies. The included scripts link to public CDNs for Bootstrap (benign), but there is no remote download/extract step. Overall install mechanism is not high-risk, but code quality and inconsistencies are concerning.

Credentials

The skill declares no required environment variables or primary credential, yet SKILL.md contains concrete PostgreSQL credentials (host 192.168.1.136, port 35438, user postgres, password Hxkj510510, database roadflow). Hard-coded credentials in documentation are disproportionate and dangerous: secrets should not be embedded, and any DB access should be declared and scoped (least-privilege).

Persistence & Privilege

The skill is not force-included (always:false), does not request system-level persistence, and does not indicate modifying other skills' configurations. Autonomous invocation is allowed (platform default) but does not combine here with an 'always' flag or explicit privilege escalation.

What to consider before installing

Do not install or enable this skill until the author clarifies and fixes inconsistencies. Key points to address before use: (1) Remove embedded DB credentials from SKILL.md immediately — secrets must never be committed in plain text; (2) If the skill must access the roadflow DB, require and document explicit environment variables (host, port, user, password, database) and use a least-privilege DB account; (3) Provide an implementation that actually uses a DB client (e.g., 'pg') and declare it in package.json, or remove all DB-related claims; (4) Have the author provide a security/privacy statement describing what records are read, written, and logged and obtain consent if operating on production data; (5) Review and test the included scripts in an isolated sandbox — validator.js contains many string-concatenation bugs and likely runtime errors; (6) If the credentials shown are real, rotate them immediately. If you need this functionality but cannot verify the author, prefer a vetted package or request a version that requires explicit, externalized credentials and passes a security review.

表单生成器 Form Builder 📜

"致君尧舜上，再使风俗淳" —— 杜子美

本技能提供自动化表单生成、验证和管理功能。核心特色：与 数据库管理员技能协同工作，基于 roadflow.rf_form 表中的现有表单数据，通过相似度匹配算法（名称编辑距离+HTML 结构相似度）复制修改并保存为新表单。所有表单均遵循无障碍设计原则（WCAG 2.1）和响应式设计规范。

核心能力 Core Capabilities

🔹 HTML 表单模板生成

• 框架支持: Bootstrap 5 / Tailwind CSS
• 输入控件: text, email, password, tel, url, number, date, datetime-local
• 高级控件: select (dropdown), radio, checkbox, file upload
• 布局控件: fieldset, legend, tabpanels, collapsibles
• 富文本域: textarea with optional rich text toolbar

🔹 数据库驱动的智能生成（RoadFlow 集成）⭐ NEW

• 相似度匹配算法：基于 roadflow.rf_form 表的现有表单数据
  • name字段编辑距离计算（如"出差申请单"vs"请假申请单"）
  • html模板结构相似度（基于 HTML 标签/元素）
  • type类型相同则权重加倍
• 复制修改流程： a. 接收新建表单需求描述 b. 查询 roadflow.rf_form 表找到相似度最高的现有记录 c. 读取该记录的完整内容（html, fieldsjson等） d. 根据新需求修改字段名、标题、字段定义等 e. 生成新 ID，保存为新表单
• 输出格式：
  • 相似度计算结果（top 3 匹配项）
  • 匹配到的源表单名称
  • 新生成的表单 HTML+JSON 配置

🔹 动态表单映射

• JSON Schema to HTML: 自动将 JSON Schema 转换为完整 HTML 表单
• UI 组件库绑定: React Hook Form / Vue Formulate / jQuery validation
• API 端点集成: 自动生成 submit 事件处理和错误反馈

🔹 客户端验证 Client-side Validation

• 实时验证: input onchange/onblur 触发即时校验
• 错误提示: inline error messages + visual indicators (red border, tooltip)
• 渐进式增强: graceful degradation 当 JS 被禁用时表单仍可提交
• 自定义验证器: 支持正则表达式和异步 API 调用验证

🔹 多步骤向导 Multi-step Wizards

• 步骤导航: progress bar + step indicator
• 数据持久化: 使用 sessionStorage/localStorage 保存已填内容
• 步骤验证: 每步验证通过后才能进入下一步
• 返回编辑: 支持在任何步骤返回上一步修改

🔹 文件上传 File Uploads

• 拖拽支持: drag-and-drop API integration
• 预览功能: image preview + file type detection
• 限制规则: max size, max files, allowed extensions
• 上传处理: progress bar + success/error handling

🔹 条件字段 Conditional Logic

• 显隐逻辑: if [field] equals [value] then show/hide [target fields]
• 级联下拉: 选择 A 后显示相关 B 选项（如城市→区县）
• 动态追加: submit 时动态添加新字段到表单

数据库配置（roadflow）

• 主机: 192.168.1.136
• 端口: 35438
• 用户: postgres
• 密码: Hxkj510510
• 目标库: roadflow

使用场景 Use Cases

当你需要以下功能时，请触发此技能：

• "为注册页面生成一个包含姓名、邮箱、密码的表单"
• "将 schema.json 转换为 Bootstrap 5 格式的 HTML"
• "创建一个多步骤问卷向导（基本信息→联系方式→偏好设置）"
• "基于 roadflow.rf_form 中的相似表单快速生成新表单（如：新建'员工请假申请单'，参考现有的'出差申请单'和'请假申请单'）"
• "生成带实时验证的文件上传表单"
• "根据用户角色动态显示不同字段（管理员→编辑按钮，普通用户→查看按钮）"

技术细节 Technical Details

本技能在幕后会使用：

• 驱动: 原生浏览器 API + DOM manipulation + pg (PostgreSQL) for roadflow DB
• 框架支持: Bootstrap 5 / Tailwind CSS (CSS-in-JS)
• 验证库: jQuery Validation / Formik / react-hook-form
• 响应式: mobile-first CSS with media queries
• 无障碍: ARIA labels, keyboard navigation support
• 数据库集成: roadflow.rf_form表相似度匹配（名称编辑距离 + HTML 结构相似度）

示例 Examples

生成 HTML 表单

创建一个产品注册表单：
- 产品名称（文本输入，必填）
- SKU（文本输入，最大 50 字符）
- 价格（number，最小 0，步长 0.01）
- 库存数量（number，最小 0）
- 描述（textarea，最多 2000 字）
- 上传产品图片（file，限制 jpg/png，最大 5MB）
- 提交按钮

框架：Bootstrap 5

基于 RoadFlow 现有表单生成新表单

根据 roadflow.rf_form 表生成新表单：
需求：新建'员工考勤管理表'
参考逻辑：查找相似度最高的现有表单（如'请假申请单'）
操作：复制其 HTML 模板，修改 name, html, fieldsjson 等字段
输出：新 ID + 完整表单内容

### 工时数据表生成案例

需求：新建'工时数据表'（记录员工工作时间和薪资） 相似度算法发现表中无"工时"关键词表单→判定为全新创建 CKEditor 输出特征分析：

• HTML 使用<table>布局，width:98%
• 字段顺序：工号→姓名→部门→日期→班次→工时相关字段→工资总额（只读）
• fieldsjson 字段类型：string, datetime, number, select, textarea
• 生成 ID:777082588573769（MAX(id)+1） SQL 插入成功保存至 rf_form 表

注意：当无相似表单时，新表可全新创建而非强制复制

### JSON Schema 转换

将以下 schema 转换为 HTML: { "type": "object", "properties": { "firstName": { "type": "string" }, "lastName": { "type": "string" } } }

### 多步骤向导

创建一个 3 步问卷： 第 1 步：基本信息（姓名、邮箱） 第 2 步：联系方式（电话、地址） 第 3 步：偏好设置（兴趣选项、频率选择） 每步验证通过后显示下一步

### 条件字段逻辑

当 [country] 为"美国"时显示州列表，否则显示省列表 当 [file_type] 为"image"时允许选择 jpg/png/gif，否则 pdf/doc/xlsx

---

*技能由杜甫（📜）编写，秉承"工欲善其事，必先利其器"的精神*