amis-ui

百度amis低代码框架JSON Schema生成专家。精准理解业务意图，生成正确、交互友好的amis配置，支持复杂交互（点击、回调、重载、弹层），兼容移动端。

Security Scan

The skill's files, templates, and runtime instructions are coherent with its stated purpose (AMIS JSON Schema generation and validation); it requests no credentials or installs and contains only local validator code and templates.

Purpose & Capability

Name/description match the provided artifacts: templates for CRUD/forms/dialogs, JS validator and common-pattern rule files, and README/SKILL.md describing how to pick templates and run validation. No unrelated environment variables, binaries, or external services are requested.

Instruction Scope

SKILL.md limits actions to selecting templates, generating AMIS JSON, and running the bundled validator (rules/schema-validator.js). This is within scope. Note: templates contain example API URLs like /api/* (expected for UI templates) and at least one template (templates/dashboard.json) appears to have malformed JSON structure (two top-level objects), which is a quality issue that may cause validator errors if you try to parse it. The validator itself is local JS that will run if you execute it — it does not perform network calls.

Install Mechanism

No install spec; skill is instruction-first with bundled JS and templates. Nothing is downloaded from external URLs and no archives are extracted.

Credentials

The skill declares no required environment variables, credentials, or config paths. The only references to API endpoints are example/template fields (e.g., "api": "/api/data"), which are appropriate for UI templates.

Persistence & Privilege

Flags are default (always: false, user-invocable true). The skill does not request permanent presence or modify other skills' configs.

Assessment

This skill appears to do what it says: generate and validate AMIS JSON schemas using local templates and a bundled validator. Before using: 1) review and, if needed, fix templates (I noticed templates/dashboard.json looks syntactically invalid) to avoid parsing errors; 2) be aware that running the bundled validator will execute the included Node.js code (rules/*.js) locally — review those files (they are small and appear benign) before execution; 3) double-check any example API URLs in templates so you don’t accidentally point a deployed UI to real production endpoints. Overall the package is coherent and does not request extra privileges or secrets.

amis-ui Skill

本技能专注于百度amis低代码框架的JSON Schema生成，帮助快速构建企业级中后台页面。

意图理解与组件映射

场景 → 组件映射表

业务场景	amis组件	关键配置
数据列表展示	CRUD	api, columns, filter
表单提交	Form	api, controls, rules
详情查看	Dialog/Drawer	title, body, actions
搜索筛选	Form (filter)	submitOnChange, target
批量操作	Button + actionType	ajax, reload
页面跳转	Button + actionType	url, link
状态提示	Button + actionType	toast, confirm
多步骤流程	Wizard	steps, source

组件选择决策树

用户需求
    │
    ├── 登录/注册 → Form (login.json)
    │
    ├── 数据列表 → CRUD
    │       │
    │       ├── 需要搜索 → filter-crud.json
    │       ├── 需要选择数据 → select-crud.json
    │       └── 基础列表 → basic-crud.json
    │
    ├── 搜索表单 → Form (search-form.json)
    │
    ├── 弹层操作
    │       ├── 查看详情 → detail-dialog.json
    │       ├── 编辑数据 → edit-dialog.json
    │       └── 选择数据 → select-crud.json
    │
    ├── 多步骤 → Wizard (multi-step-wizard.json)
    │
    └── 数据看板 → Dashboard (dashboard.json)

移动端适配规范

响应式配置规则

桌面端	移动端	配置方式
3列	1列	columnCount + responsive
横向布局	垂直布局	mode: 'horizontal' → responsive
完整表单	紧凑表单	size: 'md' → 'sm'

移动端优先原则

• 默认使用 mode: 'horizontal'
• 表单项使用 mode: 'inline' 或 responsive
• 弹层使用 size: 'md' 或 'sm'
• 列表使用 mode: 'list' 替代 table

JSON Schema 生成规范

必填字段清单

组件类型	必填字段
Page	type, body
Form	type, body/controls
CRUD	type, api, columns
Dialog	type, body
Button	type, label/actionType
Form Item	type, name

组件嵌套层级

Page
└── body: (Component | Component[])
    ├── Form
    │   └── controls: (FormItem | FormItem[])
    ├── CRUD
    │   ├── filter (可选)
    │   ├── columns: Column[]
    │   └── headerToolbar / footerToolbar
    ├── Dialog / Drawer
    │   ├── title
    │   └── body
    └── Grid / Flex
        └── columns / items

API配置规范

{
  "api": "/api/users",
  "api": {
    "method": "get",
    "url": "/api/users",
    "data": { "&": "$$" }
  }
}

支持的method: GET, POST, PUT, DELETE

事件动作配置模板

点击提示

{
  "type": "button",
  "label": "提交",
  "onEvent": {
    "click": {
      "actions": [
        {
          "actionType": "toast",
          "args": {
            "msgType": "success",
            "msg": "操作成功"
          }
        }
      ]
    }
  }
}

点击刷新

{
  "onEvent": {
    "click": {
      "actions": [
        {
          "actionType": "reload",
          "componentName": "targetCrud"
        }
      ]
    }
  }
}

打开弹层

{
  "actionType": "dialog",
  "dialog": {
    "title": "弹层标题",
    "body": { ... }
  }
}

提交表单

{
  "api": "post:/api/submit",
  "redirectTo": "/success",
  "onEvent": {
    "submitSucc": {
      "actions": [
        {
          "actionType": "toast",
          "args": { "msg": "提交成功" }
        },
        {
          "actionType": "reload",
          "componentName": "targetCrud"
        }
      ]
    }
  }
}

自动校验机制

校验级别

级别	说明	示例
error	语法错误/缺失必填字段	缺失type、JSON语法错误
warning	建议优化项	建议添加loading配置
info	最佳实践提示	建议添加description

常见错误模式

见 rules/common-patterns.js

校验函数

见 rules/schema-validator.js

预设模板使用说明

模板目录

templates/
├── login.json              # 登录页面
├── basic-crud.json        # 基础增删改查
├── filter-crud.json       # 带过滤搜索
├── search-form.json       # 搜索筛选表单
├── detail-dialog.json     # 详情查看弹层
├── edit-dialog.json       # 编辑弹层
├── select-crud.json       # 弹层选择数据
├── multi-step-wizard.json # 多步骤向导
└── dashboard.json         # 数据看板

使用方法

1. 根据业务场景选择对应模板
2. 复制模板作为起点
3. 修改API地址、字段名、列配置
4. 运行校验工具检查配置正确性

模板自定义要点

• API地址: 修改 api 或 url 字段
• 字段配置: 修改 columns 中的 name/label
• 表单控件: 修改 controls 中的表单项
• 按钮文字: 修改 label 字段
• 弹层标题: 修改 title 字段