New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Admin Management Page

by pa001024 in pa001024/dna-builder

在 dna-builder 里新增一个 /admin 后台管理页（侧边栏菜单 + 路由 + REST 封装 + 统计卡/筛选卡/表格/分页 + 详情弹窗），并在本地实测验证。当需要给后台加新的管理页面、或改动 src/admin/ 下的页面结构时使用。

MITAuto-check passed

Install Admin Management Page

skills CLI
$ npx skills add pa001024/dna-builder --skill admin-management-page -a claude-code

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

GitHub CLI
$ gh skill install pa001024/dna-builder admin-management-page --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/pa001024/dna-builder.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/admin-management-page .claude/skills/admin-management-page && 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
admin-management-page
GitHub stars
137
Token cost
~890 tokens
SKILL.md length
245 words
Files
1
Skills in repo
14
Repo updated
First seen
Licence
MIT

At a glance

在 dna-builder 里新增一个 /admin 后台管理页（侧边栏菜单 + 路由 + REST 封装 + 统计卡/筛选卡/表格/分页 + 详情弹窗），并在本地实测验证。当需要给后台加新的管理页面、或改动 src/admin/ 下的页面结构时使用。

  • Works in 4 steps: src/api/.ts — REST 封装，抄… → src/admin/Management.vue — 页面本体，结构固定四段 → src/router.ts — 在 /admin 的 children… → …
  • SKILL.md covers 两类页面，先分清, 改动清单（自定义 REST 页）, 硬约定（踩过） and 验证
  • Calls bun

What it does

Admin Management Page is an agent skill from pa001024/dna-builder. 在 dna-builder 里新增一个 /admin 后台管理页（侧边栏菜单 + 路由 + REST 封装 + 统计卡/筛选卡/表格/分页 + 详情弹窗），并在本地实测验证。当需要给后台加新的管理页面、或改动 src/admin/ 下的页面结构时使用。

Its SKILL.md is about 890 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It works with Vue.js. The repository describes itself as: 二重螺旋构筑模拟器 Duet Night Abyss Builder. The licence is MIT.

Example prompts

  • “/admin-management-page”

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

  1. src/api/.ts — REST 封装，抄 src/api/modShare.ts 的写法
  2. src/admin/Management.vue — 页面本体，结构固定四段
  3. src/router.ts — 在 /admin 的 children 里加懒加载路由
  4. src/admin/AdminLayout.vue — menuItems 数组加 { name: "中文菜单名", path: "/admin/", icon: "ri:xxx-line" }。

What it can do on your machine

Read from SKILL.md and the folder at commit 3ed567f. 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

    Shell commands in SKILL.md call:

    • bun

    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

Admin Management Page loads about 890 tokens when it runs. Until then it costs about 37 tokens; SKILL.md has 245 words of instructions outside code blocks.

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

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); files beside SKILL.md are not scanned.

SKILL.md

The full file from pa001024/dna-builder at commit 3ed567f, republished under its MIT licence (© pa001024). 245 words, ~890 tokens.

Download SKILL.mdSave it as .claude/skills/admin-management-page/SKILL.md (or your agent's skills folder).
name
admin-management-page
description
在 dna-builder 里新增一个 /admin 后台管理页（侧边栏菜单 + 路由 + REST 封装 + 统计卡/筛选卡/表格/分页 + 详情弹窗），并在本地实测验证。当需要给后台加新的管理页面、或改动 src/admin/ 下的页面结构时使用。
agent_created
true

新增后台管理页

src/admin/ 下有 15+ 个同构管理页（UserManagement.vue、RankingManagement.vue …）， 改造或新增前先挑一个同类的读一遍当模板，别从零写。

两类页面，先分清

类型适用落点
GraphQL CRUD增删改查挂在 GraphQL schema 上的普通实体不写页面，往 src/admin/crud-config.ts 加一段配置，复用 AdminCrudPage.vue
自定义 REST 页数据不在数据表里（文件分片、外部服务、聚合统计）新建 src/admin/<Feature>Management.vue，按下面的配方

判据：数据是「数据库里的一行」→ 配 CRUD；是「磁盘文件 / 日志 / 外部接口」→ 自定义页。

改动清单（自定义 REST 页）

  1. src/api/<feature>.ts — REST 封装，抄 src/api/modShare.ts 的写法：
    • 内部一个 request<T>(path, token, params?, init?)：拼 ${env.apiEndpoint.replace(/\/$/, "")}/api/v1/<...>、 用 URLSearchParams 丢空值、头带 token、非 2xx 或 {success:false} 统一抛 Error(error 文案)。
    • 导出具名函数（listXxx / readXxx / …），每个都要 JSDoc；不要把接口类型塞进 src/api/app.ts（那里只 re-export）。
  2. src/admin/<Feature>Management.vue — 页面本体，结构固定四段： 统计卡（grid 一排 4 张）→ 筛选卡（起止日期/关键字/下拉 + 查询/重置）→ 结果表 → PageFoot。
  3. src/router.ts — 在 /admin 的 children 里加懒加载路由： { name: "admin-<kebab>", path: "<kebab>", component: () => import("./admin/<Feature>Management.vue") }
  4. src/admin/AdminLayout.vue — menuItems 数组加 { name: "中文菜单名", path: "/admin/<kebab>", icon: "ri:xxx-line" }。

硬约定（踩过）

  • 图标必须在 src/components/Icon.vue 注册，否则全量 vue-tsc 报 TS2820（Type '"ri:xxx"' is not assignable）。 用项目工具加：bun tools/icon-tool.ts add ri:xxx-line，别手改那个大对象。
  • 组件是全局自动注册的（unplugin-vue-components）：Icon / Dialog / ScrollArea / PageFoot 直接用， 不要写 import，写了反而与同目录文件不一致。
  • Dialog.vue 的 max-w-[450px] 是写死的。要放整段对话 / 大表格这类宽内容时，自绘遮罩 （fixed inset-0 z-100 flex items-center justify-center bg-gray-900/50 p-4 + 内层 w-full max-w-6xl max-h-[88vh] flex flex-col）， 改成 Dialog 加宽会波及其它调用方。
  • 页面里的用户可控文本一律 {{ }} 插值，禁止 v-html（日志、标题、错误原文都属于用户可控）。
  • 分页是两条独立的轴：PageFoot 只管「当前已加载集合」的翻页； 服务端 limit（默认 200 / 上限 2000）是另一条——返回带 truncated 时，底部给「加载更早记录」按钮， 点了把 limit 翻倍重查。别把两者混成一个。
  • 统计接口失败不能挡住列表：loadStats 与 search 分开 try/catch，各自降级。
  • 加减列时 thead th 与 tbody td 必须同增同减（列数错位不会报错，只会静默串列）。 探针里别硬编码列序号：const i = headers.indexOf("列名") 再按 row.children[i] 取值。
  • 长标识类取值（trace id / 会话 id / 哈希）的展示规格：列表里只显示前 10 位加省略号， 完整值挂 title，点一下复制完整值——半截值对排查没用，全值又排不进一列。
  • 复制统一走 copyText(text, label)（AiLogManagement.vue / AiLogSessionDialog.vue 各一份）， 不要再写 copyXxx() 那种单用途 helper，提示文案由 label 拼。

验证

  1. 类型/lint：增量 lint 是最省的路径
    bash
    DNA_LINT_NODE="<managed node 绝对路径>" bun tools/incremental-lint.ts
    环境声明文件（*.d.ts、vite-env.d.ts、components.d.ts）被判为有改动时会退回全量，属正常。 整项目 vue-tsc 会因大工程把 V8 打崩（exit 134），别单独去跑它。
  2. 布局必须量出来，不靠肉眼：探针脚本放 .tmp/*.mjs，读 getBoundingClientRect / getComputedStyle， 断言 table.getBoundingClientRect().width <= document.documentElement.clientWidth（无横向溢出）。
    • 脚本用 import { chromium } from "@playwright/test" —— 仓库里没有裸 playwright 包。
    • ⚠️ 提交进仓库的 e2e 用 bun-webview-test（.agents/skills/bun-webview-test），Playwright 只用于 .tmp 里的临时探针。
    • 后端在生产域（env.apiEndpoint）时，本地页面发不出可用的真实请求 → 用 page.route("**/api/v1/<...>/**", …) 拦截并喂 fixture，别去请求真接口。
    • 点击前先清遮挡层：document.querySelectorAll("dialog").forEach(n => n.remove()) + 移除 .modal-backdrop。 数据包安装弹窗是异步挂载的，会重新出现——page.screenshot 之前再清一次，否则截图上糊一层弹窗。
  3. 开发服务器固定 http://localhost:1420，不要自己起 dev/build。

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

Files

Just SKILL.md in .agents/skills/admin-management-page of pa001024/dna-builder.

Open the folder on GitHubat commit 3ed567f

Compare with similar skills

Admin Management Page 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.

Admin Management Page compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Admin Management Page this skillpa001024/dna-builder137—~890Automated safety check: PassMIT
Tailwindcss Developmentanonaddy/anonaddy4.9k10 repos~865Automated safety check: PassMIT
GSAP Core Animationgreensock/gsap-skills16k3 repos~3.7kAutomated safety check: PassMIT
GSAP in Vue, Nuxt and Sveltegreensock/gsap-skills16k3 repos~2.6kAutomated safety check: PassMIT
Vuetify Playgroundvuetifyjs/vuetify41k—~730Automated safety check: PassCustom licence
Inertia Vue Developmentanonaddy/anonaddy4.9k3 repos~3.4kAutomated safety check: PassMIT

Similar skills

  • Tailwindcss Development

    anonaddy/anonaddy

    Always invoke when the user's message includes 'tailwind' in any form.

    4.9k GitHub starsUsed in 10 repos~865 tokens
    Frontend & DesignAuto-check passed

  • GSAP Core Animation

    greensock/gsap-skills

    Covers the GSAP core API for tweens, easing, staggers, defaults and matchMedia, and when to choose GSAP over CSS animations or other JavaScript animation libraries.

    16k GitHub starsUsed in 3 repos~3.7k tokens
    Frontend & DesignAuto-check passed

  • GSAP in Vue, Nuxt and Svelte

    greensock/gsap-skills

    Shows how to use GSAP in Vue, Nuxt, Svelte and other lifecycle-based frameworks: create after mount, scope selectors to the component, and revert on unmount.

    16k GitHub starsUsed in 3 repos~2.6k tokens
    Frontend & DesignAuto-check passed

  • Vuetify Playground

    vuetifyjs/vuetify

    Maintains the Vuetify repo's local Playground.vue so contributors get a realistic reproduction and a short demo they can paste into a pull request description.

    41k GitHub stars~730 tokensUpdated today
    Frontend & DesignAuto-check passed

  • Inertia Vue Development

    anonaddy/anonaddy

    Develops Inertia.js v3 Vue client-side applications. An agent skill from anonaddy/anonaddy.

    4.9k GitHub starsUsed in 3 repos~3.4k tokens
    Auto-check passed

  • Web Clone

    Jane-xiaoer/claude-skill-web-clone

    网站复刻 / 克隆方法论。USE WHEN 用户说 复刻网站、克隆网站、clone website、抄个站、仿站、 照着这个站做一个、reproduce site、还原某个网页效果、把这个站搬下来改成我的、 复刻某个交互/WebGL/Canvas/Three.js 效果。提供「先拿真源码 → 判路径 → 逆向拆解 → 搭工程 → 替换内容」的可移植决策树，覆盖静态站 /…

    1k GitHub starsUsed in 1 repo~2.7k tokens
    Game DevelopmentAuto-check passed

More from pa001024/dna-builder

All 14 skills in this repo

  • Fmodel Unpack

    pa001024/dna-builder

    This skill documents how to use the fmodel-mcp toolkit (a CUE4Parse-based .NET CLI plus a thin Python MCP server) to inspect and export Unreal Engine game assets — pak files, textures, meshes…

    137 GitHub stars~2.6k tokensUpdated today
    Auto-check passed

  • Bun Webview Test

    pa001024/dna-builder

    使用 Bun 1.4 内置的 Bun.WebView 无头浏览器对前端页面（Vue/Vite 等）做端到端冒烟与交互测试。当需要加载页面、真实点击、读取 DOM/应用状态、做断言、截图归档，或对本地开发服务器/静态站点做零依赖的浏览器级验证、可视化巡检、交互回归测试时，应使用本技能。

    137 GitHub stars~1.2k tokensUpdated today
    Auto-check passed

  • Ue4 Pak Mod

    pa001024/dna-builder

    制作与调试 Unreal Engine 4.27 游戏的 pak 模组（模型/网格/资产换皮，如《二重螺旋》Duet Night Abyss）。两条路线：编辑器烘焙（Blender 自由改模型 → UE4.27 cook → pak）与二进制替换（改写已烘焙 .uasset 的导出名/载荷）。当需要「把 A 的模型换成 B 的模型」「让模型能自由导入 Blender…

    137 GitHub stars~2.5k tokensUpdated today
    Auto-check passed

  • Build Creator

    pa001024/dna-builder

    给 dna-builder 里任意角色从零推一套「最优构筑」（BD）的通用方法论：读角色机制 → 辅助候选排列组合 → buff 组（含光环型海妖 / 角色专属如大冲击）→ 定计算方向 → 魔灵与潜质 → 必带 MOD → 用 autoBuild 跑一遍并剔除不合理件 → 消融实验。当需要「给某个角色配一套最优 BD」「这个角色带什么辅助/队友最强」「跑一下 XX…

    137 GitHub stars~3.6k tokensUpdated today
    Auto-check passed

  • Perf Hotspot Profiling

    pa001024/dna-builder

    用 V8 CPU profile 定位 JS/TS 热点函数，并用「同进程交替 A/B + best(min) 统计量 + checksum 锚点」的微基准方法安全地做性能优化。当需要优化计算热点、怀疑某函数耗时占比高、想评估某个优化（含 Wasm/SIMD 等加速路径）是否真有收益、或要建立可回归的性能基准时使用。

    137 GitHub stars~1k tokensUpdated today
    Auto-check passed

  • For Beginer

    pa001024/dna-builder

    《二重螺旋》新手开荒指南（校对至 1.6 版本）。含分阶段开荒流程（历练 35 前 / 35~45 / 45~60 / 60 后）、前期角色与武器获取清单、角色获取循环（深渊→周本→密函商店）、魔之楔六大系列与金 Mod 升级口径、减负活动、灾厄武器四把（棘刺绝响 / 无止无休 / 权火将熄 / 血染织羽）的两条刷取路线与 1.6 配队（暗队 /…

    137 GitHub stars~2.1k tokensUpdated today
    Auto-check passed

Works with

Questions about Admin Management Page

What does Admin Management Page do?

在 dna-builder 里新增一个 /admin 后台管理页（侧边栏菜单 + 路由 + REST 封装 + 统计卡/筛选卡/表格/分页 + 详情弹窗），并在本地实测验证。当需要给后台加新的管理页面、或改动 src/admin/ 下的页面结构时使用。. Admin Management Page is an agent skill from pa001024/dna-builder.

How do I install Admin Management Page in Claude Code?

Run `npx skills add pa001024/dna-builder --skill admin-management-page -a claude-code`. Or copy the skill folder (.agents/skills/admin-management-page in pa001024/dna-builder) into .claude/skills/admin-management-page in your project. Claude Code loads it when a task matches its description.

How do I install Admin Management Page in Codex?

Run `npx skills add pa001024/dna-builder --skill admin-management-page -a codex`. Or copy the skill folder (.agents/skills/admin-management-page in pa001024/dna-builder) into .agents/skills/admin-management-page in your project. Codex loads it when a task matches its description.

Can I use Admin Management Page 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 pa001024/dna-builder --skill admin-management-page -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/admin-management-page, .gemini/skills/admin-management-page, .github/skills/admin-management-page and .opencode/skills/admin-management-page in your project.

What does Admin Management Page need to run?

Going by SKILL.md and its folder, Admin Management Page needs the command-line tools its instructions call (bun).

Does Admin Management Page 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 Admin Management Page 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. Review the folder before installing.

What licence does Admin Management Page use?

Admin Management Page 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 Admin Management Page use?

About 890 tokens (SKILL.md is roughly 3.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 Admin Management Page?

Skills that share tags, products or a category with Admin Management Page: Tailwindcss Development (anonaddy/anonaddy, 4.9k stars), GSAP Core Animation (greensock/gsap-skills, 16k stars), GSAP in Vue, Nuxt and Svelte (greensock/gsap-skills, 16k stars) and Vuetify Playground (vuetifyjs/vuetify, 41k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Admin Management Page?

pa001024 (a GitHub user) maintains it in pa001024/dna-builder, which has 137 GitHub stars. The repository holds 14 skills in this directory. The repository was last updated on October 10, 2026.

Source: pa001024/dna-builder on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.