SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场acul-screen-generator

acul-screen-generator

编程与开发

查看项目

更新于 10-15 15:33

技能介绍

用途

ACUL Screen Generator 用于构建或自定义 Auth0 Universal Login 界面，提供完整的 UI 控制能力。它可生成品牌化的登录、注册或 MFA 界面，支持 ACUL React 或 JS 技术栈。该技能以生产就绪、完整主题化的 Auth0 ACUL 界面组件为输出目标。

主要能力

该技能遵循严格的 9 阶段工作流（Phase 0–8）：

  • Phase 0：环境验证与 CLI 认证
  • Phase 1：意图检测
  • Phase 2A/2B/2C：项目初始化、添加界面、修改界面
  • Phase 3：界面需求收集
  • Phase 4：技术栈检测
  • Phase 5：主题提取与范围确定
  • Phase 6：结构化代码生成
  • Phase 7：构建验证与迭代修复
  • Phase 8：开发模式接线

参考解析遵循优先级顺序：首先检查界面是否存在于 auth0-acul-samples（作为 CLI 使用的门槛）；若存在，则使用 Auth0 CLI 脚手架代码（auth0 acul screen add 或 auth0 acul init）；若不存在，则使用 SDK 示例（React 或 JS）；最后可参考 assets/react-templates/ 或 assets/js-templates/ 的结构化组件模式。

对于存在于 auth0-acul-samples 的界面，采用模块化架构生成代码，而非单一组件。每个界面的目录结构包括：index.tsx（薄入口，连接 manager hook、应用主题、渲染布局）、components/（Header、Form、Footer、AlternativeLogins）、hooks/（useManager.ts，封装 SDK hooks）、locales/（en.json 回退文本）。

index.tsx 必须包含默认导出（export default），因为项目的 screenLoader.ts 使用 lazy(() => import('@/screens/<screen-name>')) 加载界面，React.lazy 解析模块的默认导出。仅有命名导出可编译通过，但运行时会渲染空白或显示“screen not implemented”。

使用方式

前置条件：

  • 已安装 Auth0 CLI：brew install auth0
  • 在 Auth0 租户上配置自定义域名（ACUL 硬性要求）
  • Node.js ≥ 22（Auth0 CLI 生成的 ACUL 项目要求）

Phase 0 步骤：

  1. 验证 Node.js 版本：node --version，确认主版本 ≥ 22。未安装或低于 22 时停止并提示安装或升级（如 nvm install 22 && nvm use 22）。
  2. CLI 认证与租户检查：auth0 login；auth0 acul config list --rendering-mode advanced。若返回自定义域名相关错误，停止并告知客户需先配置自定义域名。

Phase 1 意图检测：询问客户所需模式——A) 从零构建；B) 添加界面；C) 修改界面。

Phase 2A 从零构建：收集应用名称、框架（react 或 js）、初始界面列表。执行 auth0 acul init <app_name> -t react -s login-id,login-password,signup，并对每个界面执行 auth0 acul config generate <screen-name>。验证 acul_config.json 已创建。CLI 脚手架代码为主要来源，不应从 GitHub 获取。

Phase 2B 添加界面：先验证 acul_config.json 存在。检查界面是否存在于 auth0-acul-samples。若存在，尝试 auth0 acul screen add <screen-name> -d <project-dir>；若成功则直接使用脚手架代码。若不存在或 CLI 失败，则跳过 CLI，直接获取参考代码。手动生成的界面需注册到 screenLoader.ts 的 SCREEN_COMPONENTS 映射中，否则本地开发模式会显示“Screen '' is not implemented”。需先判断 screenLoader.ts 是否自动生成：若存在生成器（如 generate:screenLoader 脚本），则不要手动编辑，而应确认界面名在允许列表（VALID_SCREENS）中并运行生成器；若无生成器，则手动编辑映射。

Phase 2C 修改界面：验证 acul_config.json 存在。执行 auth0 acul config get <screen-name> -f <screen-name>.json 和 auth0 acul config list --rendering-mode advanced。以本地代码为主要参考。

Phase 3 界面需求：收集界面类型、所需组件（社交提供商：Google、GitHub、Apple、Microsoft、Facebook；表单字段：email、username、phone、password、confirm-password；MFA 类型：OTP、SMS、push、WebAuthn；可选附加项：captcha、passkey 按钮、remember-me、条款复选框）。

Phase 4 技术栈检测：确认或检测框架（React 使用 @auth0/auth0-acul-react，JS 使用 @auth0/auth0-acul-js）、样式库（Tailwind CSS / CSS Modules / styled-components / 纯 CSS）、是否存在主题文件。

Phase 5 主题提取与范围：设计输入可为图像/模型图（提取主色、辅色、强调色、背景色、字体、边框圆角、间距节奏、布局类型）或仅品牌色（派生完整 token 集）。主题范围可选单界面或所有界面。

适用场景

  • 需要为 Auth0 Universal Login 创建品牌化登录、注册或 MFA 界面
  • 需要从零构建 ACUL 项目
  • 需要在现有项目中添加新的 ACUL 界面
  • 需要修改现有 ACUL 界面的代码或样式
  • 需要基于图像或品牌色提取并应用主题

限制

  • 需要 Node.js ≥ 22，低于此版本将无法构建或运行
  • 需要在 Auth0 租户上配置自定义域名，否则 ACUL 不可用
  • 需要已安装 Auth0 CLI
  • 若界面不在 auth0-acul-samples 中，CLI 的 auth0 acul screen add 命令将失败，需改用 SDK 示例
  • 手动生成的界面必须注册到 screenLoader.ts，否则本地开发模式无法解析
  • index.tsx 必须包含默认导出，否则运行时渲染空白
  • 关于收费、价格、平台等具体信息，资料中暂未提供