Skill: lumacoder/amis-json-skills (version 1.0.1)

--- name: amis-ui description: >- 百度amis低代码框架JSON Schema生成专家。精准理解业务意图，生成正确、交互友好的amis配置，支持复杂交互（点击、回调、重载、弹层），兼容移动端。 version: 1.0.1 --- # 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配置规范 ```json { "api": "/api/users", "api": { "method": "get", "url": "/api/users", "data": { "&": "$$" } } } ``` 支持的method: `GET`, `POST`, `PUT`, `DELETE` ### 事件动作配置模板 #### 点击提示 ```json { "type": "button", "label": "提交", "onEvent": { "click": { "actions": [ { "actionType": "toast", "args": { "msgType": "success", "msg": "操作成功" } } ] } } } ``` #### 点击刷新 ```json { "onEvent": { "click": { "actions": [ { "actionType": "reload", "componentName": "targetCrud" } ] } } } ``` #### 打开弹层 ```json { "actionType": "dialog", "dialog": { "title": "弹层标题", "body": { ... } } } ``` #### 提交表单 ```json { "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` 字段

path: README.md
content: # amis-json-skills

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

<p align="center">
  <a href="https://github.com/baidu/amis">
    <img src="https://img.shields.io/badge/amis-6.12+-blue.svg" alt="amis version">
  </a>
  <a href="https://opensource.org/licenses/Apache-2.0">
    <img src="https://img.shields.io/badge/License-Apache%202.0-green.svg" alt="License">
  </a>
</p>

---

## 功能特性

- **智能意图理解** - 根据业务场景自动匹配最佳组件方案
- **9+ 预设模板** - 覆盖常见CRUD、表单、弹层、向导等场景
- **自动校验** - JSON Schema 语法检查、错误警告、优化建议
- **移动端适配** - 内置响应式配置规范，兼容多端
- **复杂交互** - 支持点击、回调用、弹层、重载等事件动作

---

## 快速开始

### 在 OpenCode 中使用

#### 方式一：加载Skill（推荐）

在对话中直接加载：

```
@amis-json-skills
```

或描述需求自动触发：

```
帮我生成一个用户管理页面
需要一个带搜索的CRUD
创建一个登录表单
```

#### 方式二：手动引用模板

模板位于：`~/.claude/skills/amis-json-skills/templates/`

```bash
# 查看可用模板
ls ~/.claude/skills/amis-json-skills/templates/
```

复制模板到你的项目：

```bash
cp ~/.claude/skills/amis-json-skills/templates/basic-crud.json ./my-crud.json
```

---

### 在 Claude Code 中使用

#### 方式一：通过 /skill 命令

```bash
# 加载 skill
/skill load amis-json-skills

# 或在对话中直接使用
```

#### 方式二：引用模板文件

```bash
# 列出模板
ls ~/.claude/skills/amis-json-skills/templates/

# 读取模板
cat ~/.claude/skills/amis-json-skills/templates/basic-crud.json
```

#### 方式三：对话中触发

直接描述需求：

```
创建一个订单管理页面，需要有搜索筛选功能
```

---

### 在 Antigravity 中使用

Antigravity 通过MCP（Model Context Protocol）集成，可以自动加载skill。

```python
# 在 Antigravity 配置中启用 skill
{
  "skills": ["amis-json-skills"]
}
```

或运行时加载：

```
@amis-json-skills 帮我生成一个商品列表页面
```

---

## 模板清单

| 模板文件                 | 适用场景         | 核心组件            |
| ------------------------ | ---------------- | ------------------- |
| `login.json`             | 用户登录页面     | Form                |
| `basic-crud.json`        | 基础增删改查列表 | CRUD + Dialog       |
| `filter-crud.json`       | 带条件搜索的CRUD | CRUD + filter       |
| `search-form.json`       | 独立搜索筛选表单 | Form + target       |
| `detail-dialog.json`     | 查看详情弹层     | Dialog + static     |
| `edit-dialog.json`       | 编辑数据弹层     | Dialog + Form       |
| `select-crud.json`       | 弹层中选择数据   | Dialog + CRUD       |
| `multi-step-wizard.json` | 多步骤流程向导   | Wizard              |
| `dashboard.json`         | 数据看板         | Page + Chart + Card |

---

## 意图理解与组件映射

### 场景 → 组件

| 业务场景     | 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             |

### API 配置

```json
{
  "api": "/api/users"
}
```

或详细配置：

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

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

### 事件动作配置

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

---

## 自动校验

### 校验级别

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

### 校验规则

- JSON 语法完整性
- 必填字段检查 (type, name, api, columns等)
- 组件层级结构
- API 配置规范
- 事件动作配置

### 使用校验

```javascript
const { validateAmisSchema } = require("./rules/schema-validator.js");

const schema = {
  /* 你的 amis 配置 */
};
const result = validateAmisSchema(schema);

console.log(result.errors); // 错误列表
console.log(result.warnings); // 警告列表
console.log(result.suggestions); // 建议列表
```

---

## 示例

### 订单管理页面

输入：

```
帮我生成一个订单管理页面，需要有搜索筛选功能，包括订单号、客户姓名、订单状态、支付状态和下单日期
```

输出：`examples/order-management.json`

---

### 更多示例

更多业务场景示例持续添加中...

---

## 目录结构

```
amis-json-skills/
├── README.md                     # 本文件
├── examples/                     # 业务示例
│   └── order-management.json    # 订单管理页面
├── templates/                    # 预设模板 (位于 ~/.claude/skills/amis-json-skills/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
├── rules/                        # 校验规则 (位于 ~/.claude/skills/amis-json-skills/rules/)
│   ├── schema-validator.js
│   └── common-patterns.js
└── SKILL.md                      # Skill 说明 (位于 ~/.claude/skills/amis-json-skills/)
```

---

## 相关链接

- [amis 官方文档](https://baidu.github.io/amis/zh-CN/docs/index)
- [amis GitHub](https://github.com/baidu/amis)
- [amis Editor 在线编辑器](https://aisuda.github.io/amis-editor-demo/)

---

## License

Apache License 2.0


path: rules/common-patterns.js
content: /**
 * amis 常见错误模式库
 * 包含错误模式检测和自动修复建议
 */

const errorPatterns = [
  {
    pattern: /missing.*type/i,
    message: '组件缺少type字段',
    fix: '添加 "type": "组件类型"',
    example: '{ "type": "page" }'
  },
  {
    pattern: /missing.*name.*form/i,
    message: 'Form控件缺少name字段',
    fix: '为表单控件添加唯一的name属性',
    example: '{ "type": "text", "name": "username" }'
  },
  {
    pattern: /missing.*api.*crud/i,
    message: 'CRUD缺少api配置',
    fix: '添加api地址用于数据获取',
    example: '{ "api": "/api/data" }'
  },
  {
    pattern: /missing.*columns.*crud/i,
    message: 'CRUD缺少columns配置',
    fix: '添加columns定义表格列',
    example: '{ "columns": [{ "name": "id", "label": "ID" }] }'
  },
  {
    pattern: /invalid.*json/i,
    message: 'JSON格式错误',
    fix: '检查JSON语法，确保引号和括号匹配',
    example: '{"key": "value"}'
  }
];

const warningPatterns = [
  {
    pattern: /button.*without.*action/i,
    message: 'Button未设置操作类型',
    suggestion: '建议设置actionType: dialog/ajax/url/reload等'
  },
  {
    pattern: /form.*without.*api/i,
    message: 'Form未设置提交API',
    suggestion: '建议设置api用于数据提交'
  },
  {
    pattern: /crud.*without.*operation/i,
    message: 'CRUD缺少操作列',
    suggestion: '建议添加type: operation的列用于操作按钮'
  },
  {
    pattern: /dialog.*without.*title/i,
    message: 'Dialog未设置标题',
    suggestion: '建议设置title便于用户理解'
  },
  {
    pattern: /missing.*label.*button/i,
    message: 'Button未设置label',
    suggestion: '建议设置label或icon便于识别'
  }
];

const infoPatterns = [
  {
    pattern: /form.*horizontal/i,
    message: '表单使用横向模式',
    suggestion: '移动端可考虑使用responsive适配'
  },
  {
    pattern: /crud.*table/i,
    message: 'CRUD使用表格模式',
    suggestion: '移动端可考虑使用list或cards模式'
  },
  {
    pattern: /without.*loading/i,
    message: '建议添加loading状态',
    suggestion: '对于异步操作，建议添加loading配置提升用户体验'
  },
  {
    pattern: /without.*description/i,
    message: '建议添加字段说明',
    suggestion: '添加description属性帮助用户理解'
  }
];

function detectErrorPatterns(schemaString) {
  const results = [];
  const schemaStr = JSON.stringify(schemaString);

  errorPatterns.forEach(item => {
    if (item.pattern.test(schemaStr)) {
      results.push({
        type: 'error',
        message: item.message,
        fix: item.fix,
        example: item.example
      });
    }
  });

  return results;
}

function detectWarningPatterns(schemaString) {
  const results = [];
  const schemaStr = JSON.stringify(schemaString);

  warningPatterns.forEach(item => {
    if (item.pattern.test(schemaStr)) {
      results.push({
        type: 'warning',
        message: item.message,
        suggestion: item.suggestion
      });
    }
  });

  return results;
}

function detectInfoPatterns(schemaString) {
  const results = [];
  const schemaStr = JSON.stringify(schemaString);

  infoPatterns.forEach(item => {
    if (item.pattern.test(schemaStr)) {
      results.push({
        type: 'info',
        message: item.message,
        suggestion: item.suggestion
      });
    }
  });

  return results;
}

function getSuggestions(schema) {
  const suggestions = [];

  // 检查移动端适配
  if (schema.type === 'form' && schema.mode === 'horizontal') {
    suggestions.push('移动端适配：可考虑添加responsive配置');
  }

  if (schema.type === 'crud' && schema.mode === 'table') {
    suggestions.push('移动端适配：可考虑添加mobile条件切换为list模式');
  }

  // 检查数据加载
  if (schema.type === 'crud' && !schema.loadDataOnce && !schema.api) {
    suggestions.push('大数据量场景建议考虑loadDataOnce或分页配置');
  }

  // 检查权限控制
  if (schema.type === 'button' && !schema.hiddenOn && !schema.disabled) {
    suggestions.push('建议根据权限配置hiddenOn或disabled属性');
  }

  return suggestions;
}

// 导出函数
if (typeof module !== 'undefined' && module.exports) {
  module.exports = {
    errorPatterns,
    warningPatterns,
    infoPatterns,
    detectErrorPatterns,
    detectWarningPatterns,
    detectInfoPatterns,
    getSuggestions
  };
}


path: templates/basic-crud.json
content: /**
 * 基础增删改查模板
 * 适用场景：数据列表管理、新增/编辑/删除/查看
 * 核心组件：CRUD + Dialog
 */
{
  "type": "page",
  "title": "数据管理",
  "body": {
    "type": "crud",
    "name": "dataTable",
    "api": "/api/data",
    "columns": [
      {
        "name": "id",
        "label": "ID",
        "width": 60
      },
      {
        "name": "name",
        "label": "名称",
        "sortable": true
      },
      {
        "name": "status",
        "label": "状态",
        "type": "mapping",
        "map": {
          "1": "<span class=\"label label-success\">启用</span>",
          "0": "<span class=\"label label-default\">禁用</span>"
        }
      },
      {
        "name": "created_at",
        "label": "创建时间",
        "type": "date",
        "format": "YYYY-MM-DD HH:mm"
      },
      {
        "type": "operation",
        "label": "操作",
        "buttons": [
          {
            "label": "编辑",
            "type": "button",
            "actionType": "dialog",
            "dialog": {
              "title": "编辑数据",
              "body": {
                "type": "form",
                "api": "put:/api/data/${id}",
                "controls": [
                  {
                    "type": "text",
                    "name": "name",
                    "label": "名称",
                    "required": true
                  }
                ]
              }
            }
          },
          {
            "label": "删除",
            "type": "button",
            "actionType": "ajax",
            "confirmText": "确认删除该数据？",
            "api": "delete:/api/data/${id}"
          }
        ]
      }
    ],
    "headerToolbar": [
      {
        "type": "button",
        "label": "新增",
        "actionType": "dialog",
        "level": "primary",
        "dialog": {
          "title": "新增数据",
          "body": {
            "type": "form",
            "api": "post:/api/data",
            "controls": [
              {
                "type": "text",
                "name": "name",
                "label": "名称",
                "required": true
              }
            ]
          }
        }
      },
      "bulkActions",
      {
        "type": "columns-toggler",
        "align": "right"
      }
    ],
    "footerToolbar": [
      "statistics",
      "switch-per-page",
      "pagination"
    ]
  }
}


Security scan verdicts — ClawScan: clean | static analysis: clean | VirusTotal: clean | SkillSpector: suspicious (MEDIUM)