Agent skill

South Admin CRUD Generator

by southliu in southliu/south-admin-react

Generates a full CRUD page - page component, data model and API client - from the south-admin-react project's own VS Code snippet templates.

MITAuto-check passedFrontend & Design

SKILL.md written in Chinese; this summary is our English description.

Install South Admin CRUD Generator

skills CLI
$ npx skills add southliu/south-admin-react --skill demo-create -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install southliu/south-admin-react demo-create --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/southliu/south-admin-react.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/demo-create .claude/skills/demo-create && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
demo-create
GitHub stars
580
Token cost
~1.7k tokens
SKILL.md length
386 words
Files
5 (incl. scripts)
Skills in repo
2
Repo updated
First seen
Licence
MIT

At a glance

Generates a full CRUD page - page component, data model and API client - from the south-admin-react project's own VS Code snippet templates.

  • Works in 8 steps: 收集必要信息 → 生成文件结构 → 代码生成规则 → …
  • Scaffolding a new CRUD module for a south-admin-react project
  • SKILL.md covers Description and Instructions
  • Runs Python and Shell scripts from its folder; calls python3 and bash

What it does

This skill generates a complete CRUD feature for the south-admin-react template from its own VS Code snippet definitions. It first asks for the module's details one at a time: an English PascalCase module name, the API path prefix, a permission prefix, whether to use a modal or a standalone page, whether to turn on internationalization, and a list of fields each marked for search, table display, form inclusion, and whether they are required.

From those answers it writes a page component, a data model file, and an API client file, choosing between a modal-based file structure or a routed standalone-page structure with separate add and edit routes. It fills in the snippet templates by substituting the module name and paths into placeholder function and import names, and builds the model's search fields, table columns and create form from only the fields marked for each purpose, keeping internationalized or plain Chinese labels depending on the i18n setting.

It only reuses the existing CRUD templates already defined in the project's own VS Code snippets file rather than inventing new page patterns of its own, and it keeps a consistent naming scheme across the files it writes.

When your agent uses it

  • Scaffolding a new CRUD module for a south-admin-react project
  • Generating a page, model and API client from a field list
  • Adding a new admin management page with search and table columns

Example prompts

  • “Create a CRUD module for Article with title, content and status fields.”
  • “Generate a User management page in modal mode with i18n on.”
  • “Scaffold a Category page with a required name field and a parent select.”

Requirements

  • The project's own VS Code CRUD snippet templates

Workflow steps

8 steps, taken from the step headings in SKILL.md.

  1. 收集必要信息
  2. 生成文件结构
  3. 代码生成规则
  4. 国际化处理
  5. 文件生成要求
  6. 注意事项
  7. 国际化文件生成(仅当 enableI18n = true 时)
  8. 输出顺序

What it can do on your machine

Read from SKILL.md and the folder at commit fcabbfa. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 4 files in scripts/ (Python and Shell), which the agent can run.

    Shell commands in SKILL.md call:

    • python3
    • bash

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

South Admin CRUD Generator loads about 1.7k tokens when it runs. Until then it costs about 53 tokens; SKILL.md has 386 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~53
When it runs · the whole SKILL.md, loaded when a task matches
~1.7k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from southliu/south-admin-react at commit fcabbfa, republished under its MIT licence (© southliu). 386 words, ~1,651 tokens.

Download SKILL.mdSave it as .claude/skills/demo-create/SKILL.md (or your agent's skills folder). This skill also uses 4 other files; get the full folder from GitHub.
name
demo-create
description
基于项目中 .vscode/south.code-snippets 定义的 CRUD 模板,快速生成后台管理系统的标准 CRUD 页面代码。该技能根据用户提供的业务模块信息(如模块名称、API路径、字段配置等),自动生成完整的页面文件(Page)、数据模型文件(Model)和 API 接口文件(Api),支持分页列表页面(demoPage)、独立操作页面(demoOptionPage)两种页面模式。

demo-create

Description

基于项目中 .vscode/south.code-snippets 定义的 CRUD 模板,快速生成后台管理系统的标准 CRUD 页面代码。根据用户提供的业务模块信息(模块名称、API路径、字段配置等),自动生成完整的页面文件(Page)、数据模型文件(Model)和 API 接口文件(Api),支持弹窗模式(demoPage)和独立页面模式(demoOptionPage)两种。

Instructions

1. 收集必要信息

在生成代码前,向用户确认以下信息(未提供则主动询问,一个一个询问):

  • moduleName:模块名称(英文 PascalCase),如 User、Article
  • apiPath:API 路径前缀,如 /system/user
  • permissionPrefix:权限前缀路径,如 /system/user
  • pageMode:modal(弹窗模式)或 page(独立页面模式)
  • enableI18n:是否开启国际化(true/false),开启时使用 t() 函数包裹标签文本
  • fatherPath:父路径(仅 page 模式),如 /system/user
  • zhTitle / enTitle:中英文标题(仅 page 模式),如 用户 / User
  • fields:业务字段列表,每个字段包含:
    • dataIndex(字段名)
    • label(标签)
    • component(组件类型:Input/InputNumber/Select/DatePicker/RangePicker/TextArea/Switch/Upload)
    • search(是否搜索项)
    • table(是否表格列)
    • form(是否表单字段)
    • required(是否必填)
    • width(表格列宽度,默认200)
2. 生成文件结构
Modal 模式
src/pages/{modulePath}/
├── index.tsx # 主页面(demoPage 模板)
└── model.ts # 数据模型(demoModel 模板)
src/servers/{modulePath}.ts # API 接口(demoApi 模板)
Page 模式
src/pages/{modulePath}/
├── index.tsx # 列表页(demoPage 模板,新增/编辑改为路由跳转)
├── model.ts # 数据模型(demoModel 模板)
└── option.tsx # 操作页(demoOptionPage 模板)
src/servers/{modulePath}.ts # API 接口(demoApi 模板)
3. 代码生成规则
3.1 通用替换规则

所有模板中进行以下替换:

  • getXXXPage → get{ModuleName}Page
  • getXXXById → get{ModuleName}ById
  • createXXX → create{ModuleName}
  • updateXXX → update{ModuleName}
  • deleteXXX → delete{ModuleName}
  • batchDeleteXXX → batchDelete{ModuleName}
  • API.URL = '/xxx' → 实际 apiPath
  • @/servers/xxx → @/servers/{实际模块路径}
  • permissionPrefix = '/xxx' → 实际权限前缀
  • fatherPath = '/xxx' → 实际父路径(page 模式)
3.2 API 文件(基于 south.code-snippets 中 demoApi 模板)

参照 .vscode/south.code-snippets 中 demoApi 的 body 内容生成,替换所有 XXX/xxx 为对应模块名称和路径。保持所有函数签名、类型定义和注释不变。

3.3 Model 文件(基于 south.code-snippets 中 demoModel 模板)

参照 .vscode/south.code-snippets 中 demoModel 的 body 内容生成:

  • searchList:仅包含 search: true 的字段,wrapperWidth 默认 200
    • enableI18n = true:label 使用 t('moduleName.fieldName') 格式
    • enableI18n = false:label 使用中文字符串
  • tableColumns:仅包含 table: true 的字段,始终保留 operate 操作列,width 默认 200
    • enableI18n = true:title 使用 t('moduleName.fieldName') 格式,保留 createdAt/updatedAt 使用 t('public.creationTime')/t('public.updateTime')
    • enableI18n = false:title 使用中文字符串
  • createList:仅包含 form: true 的字段,必填字段添加 rules: FORM_REQUIRED
    • enableI18n = true:label 使用 t('moduleName.fieldName') 格式
    • enableI18n = false:label 使用中文字符串
3.4 Page 文件(基于 south.code-snippets 中 demoPage 模板)

参照 .vscode/south.code-snippets 中 demoPage 的 body 内容生成:

  • RowData 接口:根据用户字段生成,始终包含 id: string
  • initCreate:设置合理的默认值(如 status: 1)
  • 替换 import 中的 API 函数名和路径
  • 替换 permissionPrefix
3.5 Option 文件(仅 page 模式,基于 south.code-snippets 中 demoOptionPage 模板)

参照 .vscode/south.code-snippets 中 demoOptionPage 的 body 内容生成:

  • 替换 fatherPath、zhTitle、enTitle
  • 替换 useSingleTab 中的标题
  • 替换 permissionPrefix
4. 国际化处理

根据 enableI18n 参数决定如何处理标签文本:

  • 开启国际化(enableI18n = true):所有标签使用 t() 函数包裹,如 t('public.name')、t('product.code')
  • 关闭国际化(enableI18n = false):所有标签使用中文字符串,如 '产品编码'、'产品名称'
5. 文件生成要求

重要:使用 Python 脚本生成代码,而不是手动输出代码块。

Show full SKILL.md (165 more words)Show less
5.1 使用 Python 脚本生成
  1. 准备配置 JSON,包含所有收集的信息

  2. 调用 Python 脚本生成文件:

    bash
    python3 .claude/skills/demo-create/scripts/generate.py '<config_json>'

    或使用包装脚本:

    bash
    bash .claude/skills/demo-create/scripts/run.sh '<config_json>'
  3. 脚本会自动:

    • 创建必要的目录
    • 生成所有文件内容
    • 写入文件到正确位置
    • 运行 prettier 格式化
    • 输出生成进度
5.2 配置 JSON 格式
json
{
  "module_name": "Product",
  "api_path": "/product",
  "permission_prefix": "/product",
  "page_mode": "modal",
  "enable_i18n": true,
  "project_root": "/Users/south/Desktop/case/react-admin",
  "fields": [
    {
      "dataIndex": "name",
      "label_zh": "产品名称",
      "label_en": "Product Name",
      "component": "Input",
      "search": true,
      "table": true,
      "form": true,
      "required": true,
      "width": 200
    }
  ]
}

配置说明:

  • module_name: 模块名称(PascalCase,如 Product)
  • api_path: API 路径前缀(如 /product)
  • permission_prefix: 权限前缀(如 /product)
  • page_mode: 页面模式("modal" 或 "page")
  • enable_i18n: 是否开启国际化(true 或 false)
  • project_root: 项目根路径(可选,默认为当前目录)
  • fields: 字段配置数组

字段配置说明:

  • dataIndex: 字段名
  • label_zh: 字段中文标签(由 AI 根据字段名智能生成)
  • label_en: 字段英文标签(由 AI 根据字段名智能生成)
  • component: 组件类型(Input/InputNumber/Select/DatePicker/RangePicker/TextArea/Switch/Upload)
  • search: 是否作为搜索项
  • table: 是否作为表格列
  • form: 是否作为表单字段
  • required: 是否必填
  • width: 表格列宽度(默认200)

重要:AI 应根据字段的业务含义智能生成合适的中英文标签,而不是使用固定的映射表。例如:

  • name → "产品名称" / "Product Name"(在产品模块中)
  • name → "分类名称" / "Category Name"(在分类模块中)
  • title → "文章标题" / "Article Title"(在文章模块中)
6. 注意事项
  • 不修改模板中已有的工具函数、hooks、组件使用方式
  • 保持代码风格与模板一致(缩进、空行、注释)
  • 所有类型引用保持与模板一致:BaseFormData、PagePermission、BaseSearchList、TableColumn、TableOptions、PaginationData、PageServerResult
  • 保留所有工具函数引用:checkPermission、useCommonStore、usePublicStore、useTabsStore、INIT_PAGINATION、ADD_TITLE、EDIT_TITLE、FORM_REQUIRED、useSingleTab、useEffectOnActive、useTranslation、useLocation
  • 生成的代码应可直接使用,无需额外修改
7. 国际化文件生成(仅当 enableI18n = true 时)

当开启国际化时,额外生成以下文件:

7.1 中文国际化文件

文件路径:src/locales/zh/{moduleName}.ts

根据字段配置生成翻译对象,格式:

typescript
export default {
  fieldName1: '中文名称1',
  fieldName2: '中文名称2',
  // ...
};

注意:翻译内容由 AI 根据字段名和业务模块智能生成,例如:

  • 产品模块的 name → "产品名称"
  • 分类模块的 name → "分类名称"
  • 文章模块的 title → "文章标题"
7.2 英文国际化文件

文件路径:src/locales/en/{moduleName}.ts

格式同中文文件,使用英文翻译:

typescript
export default {
  fieldName1: 'Field Name 1',
  fieldName2: 'Field Name 2',
  // ...
};

注意:翻译内容由 AI 根据字段名和业务模块智能生成,例如:

  • 产品模块的 name → "Product Name"
  • 分类模块的 name → "Category Name"
  • 文章模块的 title → "Article Title"
8. 输出顺序
  1. API 文件(src/servers/{modulePath}.ts)
  2. Model 文件(src/pages/{modulePath}/model.ts)
  3. Page 文件(src/pages/{modulePath}/index.tsx)
  4. Option 文件(仅 page 模式,src/pages/{modulePath}/option.tsx)
  5. 中文国际化文件(仅 enableI18n = true,src/locales/zh/{moduleName}.ts)
  6. 英文国际化文件(仅 enableI18n = true,src/locales/en/{moduleName}.ts)

© southliu, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 4 other files (scripts) in .claude/skills/demo-create of southliu/south-admin-react.

  • SKILL.md
  • scripts/README.md
  • scripts/config.example.json
  • scripts/generate.py
  • scripts/run.sh

Open the folder on GitHubat commit fcabbfa

Compare with similar skills

South Admin CRUD Generator next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

South Admin CRUD Generator compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
South Admin CRUD Generator this skillsouthliu/south-admin-react580—~1.7kAutomated safety check: PassMIT
Using Docs Kitlobehub/lobe-ui2.2k—~2.8kAutomated safety check: PassMIT
NEAR dApp Builderinternet-court/internet-court-skill6.6k1 repos~684Automated safety check: PassCustom licence
Web Artifacts Builderanthropics/skills180k40 repos~769Automated safety check: PassApache-2.0
Local Testinglobehub/lobe-ui2.2k—~2.1kAutomated safety check: PassMIT
Shadmin Devahaodev/shadmin174—~2.8kAutomated safety check: PassMIT

Similar skills

  • Using Docs Kit

    lobehub/lobe-ui

    Set up and author a documentation site with @lobehub/docs-kit (the lobedocs CLI, React Router + Vite static docs used by ui.lobehub.com).

    2.2k GitHub stars~2.8k tokensUpdated today
    Frontend & DesignAuto-check passed
  • NEAR dApp Builder

    internet-court/internet-court-skill

    Scaffolds new NEAR dApps with create-near-app or adds NEAR wallet sign-in, contract calls and transaction signing to an existing React or plain JavaScript app.

    6.6k GitHub starsUsed in 1 repo~684 tokens
    Frontend & DesignAuto-check passed
  • Web Artifacts Builder

    anthropics/skills

    Official

    Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.

    180k GitHub starsUsed in 40 repos~769 tokens
    Frontend & DesignAuto-check passed
  • Local Testing

    lobehub/lobe-ui

    Local browser verification for the lobe-ui component library and documentation site.

    2.2k GitHub stars~2.1k tokensUpdated today
    Frontend & DesignAuto-check passed
  • Shadmin Dev

    ahaodev/shadmin

    Apply Shadmin feature-development standards (backend Go/Gin/Ent + frontend React/TS).

    174 GitHub stars~2.8k tokensUpdated 2 days ago
    Frontend & DesignAuto-check passed
  • Spotpatch

    huanglvjing/spotpatch

    为 React 项目建立从浏览器页面元素到精确 JSX/TSX 源码、结构化上下文与可审阅修改的 SpotPatch 工作流。用户提到 SpotPatch、截图沟通前端修改、页面元素定位源码、Vite 或 Next.js 接入、组件数据链路、结构化 Prompt、AI 补丁审阅、安装检查或故障排查时使用此技能。

    134 GitHub stars~998 tokensUpdated 12 days ago
    Frontend & DesignAuto-check passed

More from southliu/south-admin-react

  • Admin Template Project Initializer

    southliu/south-admin-react

    Removes the south-admin-react template's demo pages, components and menu entries, after a dry-run preview and your confirmation, and cleans up the matching imports.

    580 GitHub stars~519 tokensUpdated 20 days ago
    Auto-check passed

Questions about South Admin CRUD Generator

What does South Admin CRUD Generator do?

Generates a full CRUD page - page component, data model and API client - from the south-admin-react project's own VS Code snippet templates. This skill generates a complete CRUD feature for the south-admin-react template from its own VS Code snippet definitions. It first asks for the module's details one at a time: an English PascalCase module name, the API path prefix, a permission prefix, whether to use a modal or a standalone page, whether to turn on internationalization, and a list of fields each marked for search, table display, form inclusion, and whether they are required.

When should I use South Admin CRUD Generator?

South Admin CRUD Generator fits situations like: scaffolding a new CRUD module for a south-admin-react project; generating a page, model and API client from a field list; adding a new admin management page with search and table columns.

How do I install South Admin CRUD Generator in Claude Code?

Run `npx skills add southliu/south-admin-react --skill demo-create -a claude-code`. Or copy the skill folder (.claude/skills/demo-create in southliu/south-admin-react) into .claude/skills/demo-create in your project. Claude Code loads it when a task matches its description.

How do I install South Admin CRUD Generator in Codex?

Run `npx skills add southliu/south-admin-react --skill demo-create -a codex`. Or copy the skill folder (.claude/skills/demo-create in southliu/south-admin-react) into .agents/skills/demo-create in your project. Codex loads it when a task matches its description.

Can I use South Admin CRUD Generator in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add southliu/south-admin-react --skill demo-create -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/demo-create, .gemini/skills/demo-create, .github/skills/demo-create and .opencode/skills/demo-create in your project.

What does South Admin CRUD Generator need to run?

Going by SKILL.md and its folder, South Admin CRUD Generator needs Python and a shell for the scripts in its folder and the command-line tools its instructions call (python3 and bash). Our summary lists: The project's own VS Code CRUD snippet templates.

Does South Admin CRUD Generator access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is South Admin CRUD Generator safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does South Admin CRUD Generator use?

South Admin CRUD Generator is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does South Admin CRUD Generator use?

About 1.7k tokens (SKILL.md is roughly 6.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to South Admin CRUD Generator?

Skills that share tags, products or a category with South Admin CRUD Generator: Using Docs Kit (lobehub/lobe-ui, 2.2k stars), NEAR dApp Builder (internet-court/internet-court-skill, 6.6k stars), Web Artifacts Builder (anthropics/skills, 180k stars) and Local Testing (lobehub/lobe-ui, 2.2k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains South Admin CRUD Generator?

southliu (a GitHub user) maintains it in southliu/south-admin-react, which has 580 GitHub stars. The repository holds 2 skills in this directory. The repository was last updated on September 20, 2026.

Source: southliu/south-admin-react on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.