admin-dashboard
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
Chineseadmin-dashboard
admin-dashboard
Build a complete admin UI for this specific website: its own information architecture, vocabulary, and screens, in its own design. The admin for a newsletter, a marketplace, a course platform, and a portfolio should look and work differently, because their operators do different things. Everything shown comes from the application's real models and operations. If one exists already, improve it; if none does, build it.
为这个特定网站构建完整的管理 UI:采用其自身的信息架构、术语体系和界面风格,并沿用其自身的设计。新闻简报、交易市场、课程平台和作品集的管理后台,在外观和操作方式上应各不相同,因为它们的运营人员所做的事情不同。所有展示内容均来自应用的真实模型和运营流程。如果已有管理后台,则原地改进;如果没有,则进行构建。
Activate when
适用条件
- The user asks for an admin dashboard, admin panel, back office, CMS-style management, or "a way for me to manage this".
- The product has data or workflows nobody can operate: submissions, users and roles, content or listings, orders and subscriptions, support requests, reported content, privacy requests, email suppression.
- An admin exists and needs improving, or a launch review (,
launch-all) found an operator task with no screen.production-all - Not for a site with nothing to operate and no request for one.
- 用户要求管理后台、管理面板、后台管理系统、CMS 式管理功能,或“让我能够管理这些内容的方式”。
- 产品存在无人能够操作的数据或工作流:提交记录、用户与角色、内容或上架项、订单与订阅、支持请求、被举报内容、隐私请求、邮件抑制。
- 已存在管理后台且需要改进,或者发布审查(、
launch-all)发现某项运营任务没有对应界面。production-all - 不适用于没有任何需要操作的内容且用户也未提出相关要求的网站。
Working alone
独立工作
This skill is self-contained. Its companions (declared in its metadata) are skills whose method it may need to do its own promised work. Use of a companion can be conditional: declaring one does not mean running it. When a companion's lane applies, use the skill if it is installed; if not, follow its short entry in references/companion-methods.md and say in your report which lanes ran inline at reduced depth. Never skip an applicable lane silently. Skills mentioned here only for escalation, referral, documentation, or optional deeper follow-up are not dependencies: report the hand-off and finish honestly.
Companions: , , , , , , , .
design-system-reconnaissanceadmin-authorizationadmin-audit-logdata-rightswcag-readinessforms-readinessmobile-readinessfailure-resilience本 skill 是自包含的。它的 companions(在 metadata 中声明)是本 skill 为完成自身承诺工作可能需要其方法的 skills。使用 companion 可以是有条件的:声明某个 companion 并不意味着一定会运行它。当某个 companion 的适用工作范围出现时,如果该 skill 已安装,就使用它;否则按照 references/companion-methods.md 中的简要条目执行,并在报告中说明哪些工作范围以内联方式按较低深度运行。绝不能静默跳过任何适用工作范围。此处仅出于升级处理、转交、文档记录或可选后续深入工作而提及的 skills 不属于依赖:应报告交接情况并如实完成工作。
Companions:、、、、、、、。
design-system-reconnaissanceadmin-authorizationadmin-audit-logdata-rightswcag-readinessforms-readinessmobile-readinessfailure-resilienceInspect
检查
1. Is there an admin already? Search for , , , role checks, admin API routes ( lists them). If yes, read it, list what it covers and misses, and improve it in place. If the project already uses an admin framework (react-admin, Refine, AdminJS, Payload, Strapi), extend it instead of building a parallel one.
/admin/dashboard/manageinventory-data-model2. Inventory the application. Run the helper (path relative to this skill's folder):
bash
node scripts/inventory-data-model.mjs --root .It lists entities and columns from Prisma, SQL migrations, Drizzle, and Mongoose, flags personal-data, secret-like, soft-delete, role, and owner columns, and reports the stack (auth, database, payments, email), the UI kit and table library, and existing admin routes. It shows what is defined, not what is populated, and names stores it cannot read (Firestore, TypeORM, Sequelize): read those from code. Then read the app itself: auth and how roles work, the routes and features, forms and submissions, payments and subscriptions, user content and reports, email, and privacy flows ().
data-rights3. Write the admin brief. Follow section 0 of references/admin-blueprint.md. Decide, from this product: who the operators are and their five most frequent tasks; the product's own vocabulary; the navigation order and grouping; the landing view; the navigation idiom, density, and personality copied from the existing site; where to invest real workflow depth and where a simple list is enough; the right view for each entity (table, calendar, board, media grid). Ask the owner only about facts the code cannot tell you.
4. Inspect the design system before writing UI. Run : tokens, components, layout shell, table/form/dialog patterns, navigation, motion, voice. Build every screen from them. Never introduce a new UI kit or a ReadyVibe look.
design-system-reconnaissance5. Review what the admin will touch: sensitive fields to minimize or mask, destructive actions and the audit trail they need (), and how deletion really works ().
admin-audit-logdata-rights1. 是否已有管理后台? 搜索 、、、角色检查和管理员 API 路由( 会列出这些内容)。如果存在,则阅读相关实现,列出其已覆盖和缺失的功能,并原地改进。如果项目已经使用管理后台框架(react-admin、Refine、AdminJS、Payload、Strapi),应扩展现有框架,而不是另建一套并行系统。
/admin/dashboard/manageinventory-data-model2. 盘点应用。 运行辅助脚本(路径相对于本 skill 所在目录):
bash
node scripts/inventory-data-model.mjs --root .它会列出 Prisma、SQL migrations、Drizzle 和 Mongoose 中的实体与字段,标记涉及个人数据、疑似密钥、软删除、角色和所有者的字段,并报告技术栈(身份验证、数据库、支付、邮件)、UI kit、表格库和现有管理后台路由。它展示的是已经定义的内容,而不是实际填充的数据,并指出它无法读取哪些存储(Firestore、TypeORM、Sequelize):这些内容需要从代码中读取。随后阅读应用本身:身份验证机制及其角色工作方式、路由和功能、表单与提交、支付与订阅、用户内容和举报、邮件以及隐私流程()。
data-rights3. 编写管理后台简报。 按照 references/admin-blueprint.md 的第 0 节执行。根据当前产品决定:运营人员是谁及其最常执行的五项任务;产品自身的术语体系;导航顺序与分组;landing view;应沿用现有网站风格的导航交互方式、信息密度和个性;哪些地方需要投入真正的工作流深度,哪些地方使用简单列表即可;每个实体适合采用何种视图(表格、日历、看板、媒体网格)。仅就代码无法确定的事实询问产品所有者。
4. 编写 UI 前检查设计系统。 运行 :检查设计令牌、组件、布局外壳、表格、表单、对话框模式、导航、动效和语气。所有界面均基于这些内容构建。绝不引入新的 UI kit 或 ReadyVibe 风格。
design-system-reconnaissance5. 审查管理后台将触及的内容: 需要最小化或遮蔽的敏感字段,破坏性操作及其所需的审计轨迹(),以及删除机制的实际工作方式()。
admin-audit-logdata-rightsEvidence that counts
有效证据
Label each claim OBSERVED, SOURCE-INDICATED, DECLARED, INFERRED, UNKNOWN, or REVIEW REQUIRED. UNKNOWN is never a pass and never a failure.
- Entities, fields, roles, and operations come from the schema and code (SOURCE-INDICATED) and, for behavior, from exercising them on a local or staging database (OBSERVED).
- What operators need is partly DECLARED by the owner. Read the code first, then ask about the rest.
- Every number on screen comes from a real query. No data source, no figure.
- A schema defined only in a hosted dashboard, or a store the helper cannot read, is UNKNOWN until read from code.
将每项结论标记为 OBSERVED、SOURCE-INDICATED、DECLARED、INFERRED、UNKNOWN 或 REVIEW REQUIRED。UNKNOWN 既不算通过,也不算失败。
- 实体、字段、角色和操作来自 schema 与代码(SOURCE-INDICATED);对于行为,则来自在本地或 staging 数据库中实际执行相应操作(OBSERVED)。
- 运营人员的需求有一部分由产品所有者声明(DECLARED)。先阅读代码,再询问其余内容。
- 屏幕上的每个数字都来自真实查询。没有数据源,就不能显示数字。
- 仅在托管平台控制台中定义的 schema,或辅助脚本无法读取的存储,在从代码中读取之前均为 UNKNOWN。
May change
可以进行的更改
Build or improve the admin using the project's stack and existing design system, shaped by the brief:
- A full admin, not a stub: an app shell and navigation in the site's own idiom, a landing view of real "what needs me?" items, and a management area for every entity operators handle, with search, filters, sort, pagination, detail and edit screens, validation, empty/loading/error/success states, and confirmation for destructive actions. Add workflows where the product needs them: review queues, approvals, status changes, bulk actions with counts. The module catalog in the blueprint is a menu: rename, merge, split, and reorder to fit the product.
- Access: every admin page, API route, and server action authenticates and authorizes on the server (); nothing is linked from public navigation;
admin-authorization, not in the sitemap. First-admin bootstrap through a one-time, documented mechanism (an allow-listed email in server environment, or a seed command that prompts for a password); never default credentials. A new role column or table is a migration: propose it and get the owner's go-ahead before applying it to anything but a local database. Secrets and elevated credentials never reach the browser.noindex - Actions: only operations the app genuinely supports, executed server-side, each recorded through (actor, action, target, time, no secrets). Refunds and other money movement go through the payment provider's server API with confirmation, or link out to the provider.
admin-audit-log - Data honesty: counts and recent activity from real queries. A chart appears only when a real time series exists and the owner wants it, labeled with its source and range. Never invent revenue, MRR, conversion, growth, active users, or trends, and never seed fake customers or metrics into anything shipped. Create test users and records in a local database to verify.
- Quality: accessible (semantic tables, keyboard, visible focus, announced errors; ), responsive at laptop and tablet widths (
wcag-readiness), forms done properly (mobile-readiness), failure states handled (forms-readiness).failure-resilience
使用项目的技术栈和现有设计系统,并依据简报构建或改进管理后台:
- 完整的管理后台,而不是简陋框架:采用网站自身风格的应用外壳和导航,以真实的“有什么需要我处理?”事项作为 landing view,为运营人员处理的每个实体提供管理区域,包括搜索、筛选、排序、分页、详情和编辑界面、校验、空状态、加载状态、错误状态、成功状态及破坏性操作确认。在产品确有需要时添加工作流:审核队列、审批、状态变更以及显示影响数量的批量操作。简报中的模块目录只是菜单:可根据产品重命名、合并、拆分和重新排序。
- 访问控制: 每个管理页面、API 路由和 server action 都必须在服务端完成身份验证和授权();不得从公共导航中链接任何管理后台;使用
admin-authorization,且不加入 sitemap。首位管理员通过一次性且有文档记录的机制进行初始化,例如使用 server environment 中的白名单邮箱,或运行会提示输入密码的 seed command;绝不能使用默认凭据。新增角色字段或角色表属于 migration:必须先提出方案并获得产品所有者的同意,然后才能应用到本地数据库以外的任何环境。Secrets 和高权限凭据绝不能进入浏览器。noindex - 操作: 只执行应用真正支持的操作,并在服务端执行;每项操作都通过 记录,包含操作者、操作、目标和时间,不记录 secrets。退款及其他资金流转必须通过支付服务商的 server API 执行并要求确认,或者链接到服务商后台。
admin-audit-log - 数据真实性: 数量和近期活动均来自真实查询。只有在存在真实时间序列且产品所有者需要时才能显示图表,并标注其来源和时间范围。绝不能虚构营收、MRR、转化率、增长、活跃用户或趋势,也绝不能把虚假客户或指标写入任何正式交付的系统。应在本地数据库中创建测试用户和测试记录进行验证。
- 质量: 保证可访问性(语义化表格、键盘操作、可见焦点、可由辅助技术播报的错误;),适配笔记本和平板宽度(
wcag-readiness),正确实现表单(mobile-readiness),并妥善处理失败状态(forms-readiness)。failure-resilience
Must not claim
不得声称的内容
"Admin dashboard complete", "secure", or "operators can manage everything". Describe exactly which tasks it supports and what remains out of scope. Never present placeholder or invented figures as live.
不得声称“管理后台已完成”“安全”或“运营人员可以管理一切”。应准确描述支持了哪些任务,以及哪些内容不在范围内。绝不能把占位数据或虚构数字当作实时数据展示。
Verify
验证
- As an admin test user, complete each module's main task end to end on a local or staging build (read a submission, approve a listing, suspend a user, handle a privacy request, remove reported content).
- As anonymous and as a normal user, request every admin route and API directly; confirm denial with no data in the response (matrix).
admin-authorization - Confirm each destructive action wrote an audit entry without secrets, and that deletions really remove or anonymize data.
- Confirm every number traces to a query, and empty states appear with no data.
- Design match: compare with an existing page at laptop and tablet widths: same fonts, colors, components, spacing, and voice.
- Distinctiveness: the navigation, labels, landing view, and entity views should be recognizably this product's. If the admin would be interchangeable with another product's, redo the brief.
- Keyboard-only pass through one list, one edit form, and one dialog.
- Anything you could not run is UNVERIFIED, with what would settle it.
- 以管理后台测试用户的身份,在本地或 staging 构建环境中端到端完成每个模块的主要任务(读取一条提交记录、批准一个上架项、暂停一个用户、处理隐私请求、移除被举报内容)。
- 以匿名用户和普通用户身份,直接请求每个管理后台路由和 API;确认请求被拒绝,且响应中不包含任何数据(矩阵)。
admin-authorization - 确认每项破坏性操作都写入了不含 secrets 的审计记录,并确认删除操作确实会删除或匿名化数据。
- 确认每个数字都能追溯到具体查询,并在没有数据时显示空状态。
- 设计匹配: 在笔记本和平板宽度下与现有页面进行比较,确保字体、颜色、组件、间距和语气一致。
- 辨识度: 导航、标签、landing view 和实体视图应明显属于当前产品。如果该管理后台可以与其他产品的管理后台互换使用,则重新编写简报。
- 仅使用键盘完整操作一个列表、一个编辑表单和一个对话框。
- 任何无法运行的内容均标记为 UNVERIFIED,并说明需要执行什么验证才能确认结果。
Escalate
升级处理
- Sensitive or regulated data in the admin (health, financial, children's data), impersonation ("log in as user"), or bulk export: REVIEW REQUIRED; recommend an independent security review before launch.
- Money movement: provider server API with the owner's confirmation and an audit trail, or link out.
- Any privileged route reachable by an unauthorized principal is HIGH: fix it first.
- Procedures and deadlines for privacy requests come from , which looks them up; never invent them.
data-rights
- 管理后台涉及敏感或受监管数据(健康、财务、儿童数据)、模拟用户身份(“以用户身份登录”)或批量导出时,标记为 REVIEW REQUIRED;建议在发布前进行独立安全审查。
- 资金流转应通过服务商 server API 执行,并由产品所有者确认,同时保留审计轨迹;或者链接到服务商后台。
- 任何未授权主体都能访问特权路由都属于 HIGH 问题:应优先修复。
- 隐私请求的流程和期限由 查找并确定;绝不能自行编造。
data-rights
No change is valid when
无需更改的情况
The user did not ask for an admin and existing tools (provider dashboards, the database console) already cover every operator task. Then report the runbook step for each task instead of building screens nobody needs.
如果用户没有要求管理后台,而且现有工具(服务商控制台、数据库控制台)已经涵盖所有运营任务,则应为每项任务提供对应的 runbook 步骤,而不是构建无人需要的界面。