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).
Generates a full CRUD page - page component, data model and API client - from the south-admin-react project's own VS Code snippet templates.
SKILL.md written in Chinese; this summary is our English description.
$ npx skills add southliu/south-admin-react --skill demo-create -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install southliu/south-admin-react demo-create --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ 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-srcUse ~/.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/
Install the "demo-create" agent skill from https://github.com/southliu/south-admin-react/tree/main/.claude/skills/demo-create into .claude/skills/demo-create/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "demo-create", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/southliu/south-admin-react/tree/main/.claude/skills/demo-createType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add southliu/south-admin-react --skill demo-create -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install southliu/south-admin-react demo-create --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/southliu/south-admin-react.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.claude/skills/demo-create .agents/skills/demo-create && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "demo-create" agent skill from https://github.com/southliu/south-admin-react/tree/main/.claude/skills/demo-create into .agents/skills/demo-create/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "demo-create", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add southliu/south-admin-react --skill demo-create -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install southliu/south-admin-react demo-create --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/southliu/south-admin-react.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.claude/skills/demo-create .cursor/skills/demo-create && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "demo-create" agent skill from https://github.com/southliu/south-admin-react/tree/main/.claude/skills/demo-create into .cursor/skills/demo-create/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "demo-create", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/southliu/south-admin-react.git --path .claude/skills/demo-create--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add southliu/south-admin-react --skill demo-create -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install southliu/south-admin-react demo-create --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/southliu/south-admin-react.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.claude/skills/demo-create .gemini/skills/demo-create && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "demo-create" agent skill from https://github.com/southliu/south-admin-react/tree/main/.claude/skills/demo-create into .gemini/skills/demo-create/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "demo-create", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install southliu/south-admin-react demo-createInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add southliu/south-admin-react --skill demo-create -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/southliu/south-admin-react.git skills-src && mkdir -p .github/skills && cp -r skills-src/.claude/skills/demo-create .github/skills/demo-create && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "demo-create" agent skill from https://github.com/southliu/south-admin-react/tree/main/.claude/skills/demo-create into .github/skills/demo-create/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "demo-create", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add southliu/south-admin-react --skill demo-create -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install southliu/south-admin-react demo-create --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/southliu/south-admin-react.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.claude/skills/demo-create .opencode/skills/demo-create && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "demo-create" agent skill from https://github.com/southliu/south-admin-react/tree/main/.claude/skills/demo-create into .opencode/skills/demo-create/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "demo-create", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
demo-createGenerates 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.
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.
8 steps, taken from the step headings in SKILL.md.
Read from SKILL.md and the folder at commit fcabbfa. It shows what the files ask for, not the result of running them.
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.
Ships 4 files in scripts/ (Python and Shell), which the agent can run.
Shell commands in SKILL.md call:
python3bashFrom the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
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.
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.
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.
The full file from southliu/south-admin-react at commit fcabbfa, republished under its MIT licence (© southliu). 386 words, ~1,651 tokens.
.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.基于项目中 .vscode/south.code-snippets 定义的 CRUD 模板,快速生成后台管理系统的标准 CRUD 页面代码。根据用户提供的业务模块信息(模块名称、API路径、字段配置等),自动生成完整的页面文件(Page)、数据模型文件(Model)和 API 接口文件(Api),支持弹窗模式(demoPage)和独立页面模式(demoOptionPage)两种。
在生成代码前,向用户确认以下信息(未提供则主动询问,一个一个询问):
User、Article/system/user/system/usermodal(弹窗模式)或 page(独立页面模式)true/false),开启时使用 t() 函数包裹标签文本/system/user用户 / UserdataIndex(字段名)label(标签)component(组件类型:Input/InputNumber/Select/DatePicker/RangePicker/TextArea/Switch/Upload)search(是否搜索项)table(是否表格列)form(是否表单字段)required(是否必填)width(表格列宽度,默认200)src/pages/{modulePath}/
├── index.tsx # 主页面(demoPage 模板)
└── model.ts # 数据模型(demoModel 模板)
src/servers/{modulePath}.ts # API 接口(demoApi 模板)src/pages/{modulePath}/
├── index.tsx # 列表页(demoPage 模板,新增/编辑改为路由跳转)
├── model.ts # 数据模型(demoModel 模板)
└── option.tsx # 操作页(demoOptionPage 模板)
src/servers/{modulePath}.ts # API 接口(demoApi 模板)所有模板中进行以下替换:
getXXXPage → get{ModuleName}PagegetXXXById → get{ModuleName}ByIdcreateXXX → create{ModuleName}updateXXX → update{ModuleName}deleteXXX → delete{ModuleName}batchDeleteXXX → batchDelete{ModuleName}API.URL = '/xxx' → 实际 apiPath@/servers/xxx → @/servers/{实际模块路径}permissionPrefix = '/xxx' → 实际权限前缀fatherPath = '/xxx' → 实际父路径(page 模式)参照 .vscode/south.code-snippets 中 demoApi 的 body 内容生成,替换所有 XXX/xxx 为对应模块名称和路径。保持所有函数签名、类型定义和注释不变。
参照 .vscode/south.code-snippets 中 demoModel 的 body 内容生成:
search: true 的字段,wrapperWidth 默认 200enableI18n = true:label 使用 t('moduleName.fieldName') 格式enableI18n = false:label 使用中文字符串table: true 的字段,始终保留 operate 操作列,width 默认 200enableI18n = true:title 使用 t('moduleName.fieldName') 格式,保留 createdAt/updatedAt 使用 t('public.creationTime')/t('public.updateTime')enableI18n = false:title 使用中文字符串form: true 的字段,必填字段添加 rules: FORM_REQUIREDenableI18n = true:label 使用 t('moduleName.fieldName') 格式enableI18n = false:label 使用中文字符串参照 .vscode/south.code-snippets 中 demoPage 的 body 内容生成:
id: stringstatus: 1)permissionPrefix参照 .vscode/south.code-snippets 中 demoOptionPage 的 body 内容生成:
fatherPath、zhTitle、enTitleuseSingleTab 中的标题permissionPrefix根据 enableI18n 参数决定如何处理标签文本:
t() 函数包裹,如 t('public.name')、t('product.code')'产品编码'、'产品名称'重要:使用 Python 脚本生成代码,而不是手动输出代码块。
准备配置 JSON,包含所有收集的信息
调用 Python 脚本生成文件:
python3 .claude/skills/demo-create/scripts/generate.py '<config_json>'或使用包装脚本:
bash .claude/skills/demo-create/scripts/run.sh '<config_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"(在文章模块中)BaseFormData、PagePermission、BaseSearchList、TableColumn、TableOptions、PaginationData、PageServerResultcheckPermission、useCommonStore、usePublicStore、useTabsStore、INIT_PAGINATION、ADD_TITLE、EDIT_TITLE、FORM_REQUIRED、useSingleTab、useEffectOnActive、useTranslation、useLocation当开启国际化时,额外生成以下文件:
文件路径:src/locales/zh/{moduleName}.ts
根据字段配置生成翻译对象,格式:
export default {
fieldName1: '中文名称1',
fieldName2: '中文名称2',
// ...
};注意:翻译内容由 AI 根据字段名和业务模块智能生成,例如:
name → "产品名称"name → "分类名称"title → "文章标题"文件路径:src/locales/en/{moduleName}.ts
格式同中文文件,使用英文翻译:
export default {
fieldName1: 'Field Name 1',
fieldName2: 'Field Name 2',
// ...
};注意:翻译内容由 AI 根据字段名和业务模块智能生成,例如:
name → "Product Name"name → "Category Name"title → "Article Title"src/servers/{modulePath}.ts)src/pages/{modulePath}/model.ts)src/pages/{modulePath}/index.tsx)src/pages/{modulePath}/option.tsx)src/locales/zh/{moduleName}.ts)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
SKILL.md and 4 other files (scripts) in .claude/skills/demo-create of southliu/south-admin-react.
Open the folder on GitHubat commit fcabbfa
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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| South Admin CRUD Generator this skillsouthliu/south-admin-react | 580 | — | ~1.7k | Automated safety check: Pass | MIT | |
| Using Docs Kitlobehub/lobe-ui | 2.2k | — | ~2.8k | Automated safety check: Pass | MIT | |
| NEAR dApp Builderinternet-court/internet-court-skill | 6.6k | 1 repos | ~684 | Automated safety check: Pass | Custom licence | |
| Web Artifacts Builderanthropics/skills | 180k | 40 repos | ~769 | Automated safety check: Pass | Apache-2.0 | |
| Local Testinglobehub/lobe-ui | 2.2k | — | ~2.1k | Automated safety check: Pass | MIT | |
| Shadmin Devahaodev/shadmin | 174 | — | ~2.8k | Automated safety check: Pass | MIT |
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).
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.
anthropics/skills
Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.
lobehub/lobe-ui
Local browser verification for the lobe-ui component library and documentation site.
ahaodev/shadmin
Apply Shadmin feature-development standards (backend Go/Gin/Ent + frontend React/TS).
huanglvjing/spotpatch
为 React 项目建立从浏览器页面元素到精确 JSX/TSX 源码、结构化上下文与可审阅修改的 SpotPatch 工作流。用户提到 SpotPatch、截图沟通前端修改、页面元素定位源码、Vite 或 Next.js 接入、组件数据链路、结构化 Prompt、AI 补丁审阅、安装检查或故障排查时使用此技能。
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.
Works with
Categories
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.