mcpField
A
admin-ui-builder

admin-ui-builder

github.com/sergekostenchuk设计与 UI3255 次安装18 周前更新
代码仓库

关于 admin-ui-builder

admin-ui-builder 是用于现有管理后台架构的界面设计技能，面向定义或交接管理界面的团队。它覆盖权限、安全与破坏性操作状态，并要求遵循既定契约。

主要功能

  1. 01管理界面规格定义
  2. 02本地 UI 实现交接
  3. 03覆盖加载与错误状态
  4. 04纳入权限及审计状态
  5. 05破坏性操作确认要求

适用场景

  1. 01定义表单、表格和筛选器
  2. 02规划空、加载及错误界面
  3. 03为管理界面整理实现任务

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/sergekostenchuk/ui-ux-agent-skill-system --skill admin-ui-builder

安装后在 Claude Code 中输入/admin-ui-builder确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

agents/
openai.yaml
assets/
admin-screen-spec.template.md
evals/
evals.json
references/
admin-ui-build-contract.md

详细介绍

管理界面构建器

此技能用于在现有管理界面架构约定下构建或规范管理界面。

运行模式

  • screen-spec：定义管理界面的屏幕、状态、表单、表格、筛选条件和验证规则。
  • implementation-handoff：准备本地界面实现任务。
  • state-coverage：覆盖空状态、加载状态、错误状态、权限拒绝状态、审计状态和确认状态。

必需工作流

  1. 阅读 references/admin-ui-build-contract.md。
  2. 使用 assets/admin-screen-spec.template.md。
  3. 从 admin-ui-orchestrator 确认角色、权限、破坏性操作和审计要求。
  4. 不要为了视觉简洁而隐藏安全状态和权限状态。

安全规则

  • 不要执行生产环境管理变更。
  • 每项破坏性操作都需要明确的确认界面，以及回滚和审计方案。
  • 界面示例中不得暴露机密、令牌、客户私密数据或原始日志。

验证

python3 $CODEX_HOME/skills/.system/skill-creator/scripts/quick_validate.py $CODEX_HOME/skills/admin-ui-builder
python3 $CODEX_HOME/skills/senior-skill-architect/scripts/lint_production_skill.py $CODEX_HOME/skills/admin-ui-builder
python3 -m json.tool $CODEX_HOME/skills/admin-ui-builder/evals/evals.json >/dev/null

评论

支持 Markdown