Alsacreations Guidelines
alsacreations/kiwipedia
Guidelines techniques et conventions internes d'Alsacréations (Kiwipedia) — HTML, CSS, JavaScript, TypeScript, Vue.js, WordPress, PHP/MySQL, accessibilité, performance, SEO, RGPD, écoconception…
Build, refactor, or review production-grade admin interfaces with Vue 3 + JavaScript + Ant Design Vue 4.x.
$ npx skills add lazzyfu/goInsight --skill ant-design-vue-ui -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install lazzyfu/goInsight ant-design-vue-ui --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/lazzyfu/goInsight.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.codex/skills/ant-design-vue .claude/skills/ant-design-vue-ui && 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 "ant-design-vue-ui" agent skill from https://github.com/lazzyfu/goInsight/tree/master/.codex/skills/ant-design-vue into .claude/skills/ant-design-vue-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ant-design-vue-ui", 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/lazzyfu/goInsight/tree/master/.codex/skills/ant-design-vueType 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 lazzyfu/goInsight --skill ant-design-vue-ui -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install lazzyfu/goInsight ant-design-vue-ui --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/lazzyfu/goInsight.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.codex/skills/ant-design-vue .agents/skills/ant-design-vue-ui && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "ant-design-vue-ui" agent skill from https://github.com/lazzyfu/goInsight/tree/master/.codex/skills/ant-design-vue into .agents/skills/ant-design-vue-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ant-design-vue-ui", 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 lazzyfu/goInsight --skill ant-design-vue-ui -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install lazzyfu/goInsight ant-design-vue-ui --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/lazzyfu/goInsight.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.codex/skills/ant-design-vue .cursor/skills/ant-design-vue-ui && 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 "ant-design-vue-ui" agent skill from https://github.com/lazzyfu/goInsight/tree/master/.codex/skills/ant-design-vue into .cursor/skills/ant-design-vue-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ant-design-vue-ui", 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/lazzyfu/goInsight.git --path .codex/skills/ant-design-vue--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 lazzyfu/goInsight --skill ant-design-vue-ui -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install lazzyfu/goInsight ant-design-vue-ui --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/lazzyfu/goInsight.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.codex/skills/ant-design-vue .gemini/skills/ant-design-vue-ui && 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 "ant-design-vue-ui" agent skill from https://github.com/lazzyfu/goInsight/tree/master/.codex/skills/ant-design-vue into .gemini/skills/ant-design-vue-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ant-design-vue-ui", 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 lazzyfu/goInsight ant-design-vue-uiInstalls 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 lazzyfu/goInsight --skill ant-design-vue-ui -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/lazzyfu/goInsight.git skills-src && mkdir -p .github/skills && cp -r skills-src/.codex/skills/ant-design-vue .github/skills/ant-design-vue-ui && 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 "ant-design-vue-ui" agent skill from https://github.com/lazzyfu/goInsight/tree/master/.codex/skills/ant-design-vue into .github/skills/ant-design-vue-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ant-design-vue-ui", 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 lazzyfu/goInsight --skill ant-design-vue-ui -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install lazzyfu/goInsight ant-design-vue-ui --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/lazzyfu/goInsight.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.codex/skills/ant-design-vue .opencode/skills/ant-design-vue-ui && 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 "ant-design-vue-ui" agent skill from https://github.com/lazzyfu/goInsight/tree/master/.codex/skills/ant-design-vue into .opencode/skills/ant-design-vue-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ant-design-vue-ui", 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.
ant-design-vue-uiBuild, refactor, or review production-grade admin interfaces with Vue 3 + JavaScript + Ant Design Vue 4.x.
Ant Design Vue UI is an agent skill from lazzyfu/goInsight. Build, refactor, or review production-grade admin interfaces with Vue 3 + JavaScript + Ant Design Vue 4.x. Use this skill when creating or optimizing backend management pages, CRUD interfaces, modal forms, table pages, detail pages, dashboards, approval flow pages, config pages, or database/ops admin UIs. This skill focuses on real project delivery: clear structure, maintainable code, responsive layout, consistent interaction patterns, and unified enterprise admin styling.
Its SKILL.md is about 2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files (for example `agents/openai.yaml`).
It sits in Databases, covering Responsive design. It works with Vue.js, Ant Design, JavaScript and ClickHouse. The repository describes itself as: 数据库工单平台,支持MySQL和TiDB,提供工单、审批流、数据查询功能. The licence is MIT.
4 steps, taken from the step headings in SKILL.md.
Read from SKILL.md and the folder at commit 1f7c144. 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.
No scripts in the folder and no shell commands in SKILL.md.
From 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.
Ant Design Vue UI loads about 2k tokens when it runs. Until then it costs about 124 tokens; SKILL.md has 592 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); files beside SKILL.md are not scanned.
The full file from lazzyfu/goInsight at commit 1f7c144, republished under its MIT licence (© lazzyfu). 592 words, ~1,979 tokens.
.claude/skills/ant-design-vue-ui/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.你是一个专注于 Vue 3 + JavaScript + Ant Design Vue 4.x 的后台前端开发专家。
目标是输出 能直接进入项目、结构清晰、交互统一、风格稳定、便于维护 的企业后台页面和组件代码。
默认服务对象是 企业后台系统,尤其适合:
当用户出现以下需求时,使用这个 Skill:
生成结果必须满足以下要求:
能直接落地
代码必须能直接放进项目改造,不只给 demo 或零散片段。
结构统一
页面结构、命名方式、交互方式符合后台系统习惯。
交互自然
查询、分页、表单、弹窗、反馈流程清楚顺手。
代码可维护
状态清晰、逻辑分层、命名直白、方便后续继续改。
支持自适应与响应式
页面兼容常见办公宽度,窄屏下自动折行或收纳,不允许主要操作消失。
风格统一,不要 AI 味
不生成花哨、空洞、视觉很满但信息混乱的后台页面。
script setuplang="ts"以下文件作为设计规范真源:
/Users/zongfei.fu/Downloads/CodeX/goInsight/www/src/design/tokens.js/Users/zongfei.fu/Downloads/CodeX/goInsight/www/src/design/antdTheme.js如果页面视觉规则与局部实现冲突,优先遵循这两个文件。
这是一个 企业后台 UI Skill,不是官网、营销页、作品集生成器。
默认风格:
要求:
仅使用:
4 / 8 / 12 / 16 / 24 / 32禁止:
仅使用:
6 / 8 / 10 / 12禁止:
size="middle"typedangerghostblocksize优先使用 Ant Design 语义色,不随意造色:
#1677ff#52c41a#faad14#ff4d4f#d9d9d9rgba(0,0,0,0.88)rgba(0,0,0,0.65)Layout
|- Sider
|- Header
`- Content推荐:
Layout / Layout.Sider / Layout.Header / Layout.Content200px ~ 240pxa-card 承载16px ~ 24pxa-row + a-colgutter 优先 16 或 24page/
├── 查询区
├── 操作区
├── 表格区
├── 分页区
└── 新增/编辑弹窗区src/
├── views/
├── components/
├── api/
├── hooks/
├── utils/
├── constants/
└── styles/columns 配置rowKey 必填a-forma-button type="primary"a-buttona-button dangermessage.success() 等notification.error()modal.confirm()a-spinscript setup优先使用:
tableDataqueryFormpaginationmodalOpendrawerOpenformStatecurrentRowtableLoadingsubmitLoading优先使用:
getListhandleSearchhandleResethandleCreatehandleEdithandleDeletehandleViewhandleSubmitopenModalcloseModal避免:
doItsubmitFnclickOkgetDataInfohandleEverything页面逻辑至少分成:
不要把所有逻辑写成一坨。
destroyOnClosevalidateFieldsresetFields 做粗暴清空name 与校验规则保持一致defineProps 接收数据propsdefineEmits 通知父组件submitcancelchangeupdate:openupdate:valuev-modelv-model:xxxv-model:openopen,派发 update:openopencurrentRowopen、formDatasubmit、cancel、update:openqueryFormtableData页面必须支持自适应、响应式,不能只按 1440 宽度写死。
flex + flex-wrapoverflow-x: autoflex、grid、百分比宽度、minmax 等响应式方式flex / gridclamp()、百分比、min-width、max-width 控制尺寸1200px、992px、768px如果页面属于数据库、工单、审批、配置、运维类后台,优先遵守以下原则:
典型场景包括:
当用户要求开发页面、组件或优化代码时,尽量按下面格式输出:
先说明:
如有必要,明确说明代码应该放在哪:
src/views/xxx/index.vue
src/api/xxx.js
src/components/xxx-form.vue输出尽量完整,至少包括:
包括:
回答风格必须遵守:
这是一个 企业后台开发 Skill。
它追求的是:
不是做花哨网页,也不是做通用 demo。
所有输出都要像是:
一个真实项目里能直接接手、继续开发、继续维护的页面。
© lazzyfu, 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 1 other file in .codex/skills/ant-design-vue of lazzyfu/goInsight.
Open the folder on GitHubat commit 1f7c144
Ant Design Vue UI 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 |
|---|---|---|---|---|---|---|
| Ant Design Vue UI this skilllazzyfu/goInsight | 729 | — | ~2k | Automated safety check: Pass | MIT | |
| Alsacreations Guidelinesalsacreations/kiwipedia | 338 | — | ~900 | Automated safety check: Pass | None | |
| UI CraftMemTensor/memmy-agent | 2.1k | — | ~2.9k | Automated safety check: Pass | MIT | |
| Chdb SQLvemetric/vemetric | 395 | 1 repos | ~1.2k | Automated safety check: Pass | Apache-2.0 | |
| PR Triagewannabespace/conar | 1.5k | — | ~811 | Automated safety check: Pass | AGPL-3.0 | |
| ClickHouse RowBinary for Node.jsClickHouse/agent-skills | 545 | — | ~1.3k | Automated safety check: Pass | Apache-2.0 |
alsacreations/kiwipedia
Guidelines techniques et conventions internes d'Alsacréations (Kiwipedia) — HTML, CSS, JavaScript, TypeScript, Vue.js, WordPress, PHP/MySQL, accessibilité, performance, SEO, RGPD, écoconception…
MemTensor/memmy-agent
Design, build, redesign, or modify browser-visible web interfaces with product-quality composition, visual systems, interaction states, responsive behavior, accessibility, and browser visual QA.
vemetric/vemetric
A skill your agent uses when the user wants to run SQL — especially analytical SQL — on local files (parquet/csv/json), URLs, S3 paths, or remote databases (Postgres, MySQL, MongoDB, ClickHouse…
wannabespace/conar
Speed up a GitHub PR review — sort every changed file into trivial / skim / review, mark the trivial ones as viewed on GitHub, and hand back a reading order for the rest.
ClickHouse/agent-skills
Generates TypeScript or JavaScript readers and writers for ClickHouse's RowBinary formats over HTTP in Node.js, after checking that RowBinary suits the data.
sunkaifei/FlyCms
FlyCms 项目(backend/ Spring Boot 4.1.1 + frontend/ vue-vben-admin v5)的架构地图与开发规范总纲。凡在本仓库做任何开发——写后端接口、新增/修改模块、管理页面、数据库变更、修 bug、重构——都要先加载本 skill 再动手,即使用户只说"改一下""加个功能";前端登录/菜单/权限专项另见…
Categories
Build, refactor, or review production-grade admin interfaces with Vue 3 + JavaScript + Ant Design Vue 4.x. Ant Design Vue UI is an agent skill from lazzyfu/goInsight.x.
Ant Design Vue UI fits situations like: optimizing backend management pages; CRUD interfaces; approval flow pages; database/ops admin UIs.
Run `npx skills add lazzyfu/goInsight --skill ant-design-vue-ui -a claude-code`. Or copy the skill folder (.codex/skills/ant-design-vue in lazzyfu/goInsight) into .claude/skills/ant-design-vue-ui in your project. Claude Code loads it when a task matches its description.
Run `npx skills add lazzyfu/goInsight --skill ant-design-vue-ui -a codex`. Or copy the skill folder (.codex/skills/ant-design-vue in lazzyfu/goInsight) into .agents/skills/ant-design-vue-ui 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 lazzyfu/goInsight --skill ant-design-vue-ui -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/ant-design-vue-ui, .gemini/skills/ant-design-vue-ui, .github/skills/ant-design-vue-ui and .opencode/skills/ant-design-vue-ui in your project.
SKILL.md names no scripts, command-line tools or credentials: Ant Design Vue UI is instructions for the agent only.
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. Review the folder before installing.
Ant Design Vue UI is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.
About 2k tokens (SKILL.md is roughly 7.9k 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 Ant Design Vue UI: Alsacreations Guidelines (alsacreations/kiwipedia, 338 stars), UI Craft (MemTensor/memmy-agent, 2.1k stars), Chdb SQL (vemetric/vemetric, 395 stars) and PR Triage (wannabespace/conar, 1.5k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
lazzyfu (a GitHub user) maintains it in lazzyfu/goInsight, which has 729 GitHub stars. The repository was last updated on April 4, 2026.
Source: lazzyfu/goInsight on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.