by 运行时依赖
安装命令
点击复制技能文档
ACUL 屏幕生成器 生成生产就绪、完全主题化的 Auth0 ACUL 屏幕组件。遵循严格的 8 阶段工作流（阶段 0-7）：CLI 身份验证 → 意图检测 → 项目设置 → 屏幕要求 → 技术栈和设计 → 主题提取 → 结构化代码生成 → 开发模式连接。
引用层次 始终使用以下优先顺序解析屏幕的正确引用：
- auth0-acul-samples（31 个 React 屏幕，3 个 React-JS 屏幕）→ 完整模块化实现：index.tsx + components/ + hooks/ + locales/
- SDK 示例（68 个 React，71 个 JS — 所有屏幕）→ 代码片段显示 SDK 导入、hooks 和操作函数
- assets/react-templates/ 或 assets/js-templates/ → 结构组件模式仅 — 不要使用它们的 hooks/操作用于其他屏幕
auth0-acul-samples 架构 当屏幕在 auth0-acul-samples 中可用时，使用此模块化模式生成代码 — 不是单一组件。每个屏幕的目录结构： / ├── index.tsx 薄入口：连接管理 hook + 应用主题 + 渲染布局 ├── components/ │ ├── Header.tsx 标志、标题、子标题来自 screen.texts │ ├── Form.tsx 表单字段、提交、验证码、密钥按钮 │ ├── Footer.tsx 注册链接、忘记密码、返回链接 │ └── AlternativeLogins.tsx 社交登录按钮（如果屏幕有社交） ├── hooks/ │ └── useManager.ts 包装 SDK hooks，暴露干净处理程序 + 功能标志 └── locales/ └── en.json 回退文本字符串
index.tsx 模式： import { ULThemeCard, ULThemePageLayout } from '@/components' import { applyAuth0Theme } from '@/utils/theme/themeEngine' import Header from './components/Header' import Form from './components/Form' import Footer from './components/Footer' import { useManager } from './hooks/useManager' export const Screen = () => { const { sdkInstance, texts, locales } = useManager() applyAuth0Theme(sdkInstance) document.title = texts?.pageTitle ?? locales.pageTitle return (
{/ 条件 /} <Form /> {/ 条件 /} ) }hooks/useManager.ts 模式： import { useLoginId, useScreen, useTransaction } from '@auth0/auth0-acul-react/' import { executeSafely } from '@/utils/helpers/executeSafely' import locales from '../locales/en.json' export const useManager = () => { const sdkInstance = useLoginId() // 屏幕特定 SDK hook const screen = useScreen() const { alternateConnections } = useTransaction() const handleSubmit = async (data) => executeSafely(() => login(data)) const handleFederatedLogin = async (conn) => executeSafely(() => federatedLogin({ connection: conn })) return { sdkInstance, texts: screen.texts, locales, alternateConnections, handleSubmit, handleFederatedLogin, isPasskeyEnabled: screen.isPasskeyEnabled, isCaptchaAvailable: screen.isCaptchaAvailable, } }
当屏幕不在 auth0-acul-samples 中时，回退到基于 SDK 示例的单文件组件。
先决条件 Auth0 CLI 安装：brew install auth0 自定义域配置在 Auth0 租户上（硬 ACUL 要求） Node.js 18+
阶段 0：CLI 身份验证和租户检查 auth0 login auth0 acul config list --rendering-mode advanced 如果 auth0 acul config list 返回关于自定义域的错误：停止并通知客户在 ACUL 可用之前必须在其租户上配置自定义域。 要查看完整的 CLI 标志参考 → 读取 references/cli-commands.md。
阶段 1：意图检测 询问客户需要哪种模式： A) 从头开始 — 新项目，选择屏幕，完整设置 B) 添加屏幕 — 现有项目，添加一个或多个新屏幕 C) 修改屏幕 — 现有项目，改变现有屏幕的代码或样式 此选择控制阶段 2A / 2B / 2C。
阶段 2A：从头开始 — 项目初始化 收集：应用名称、框架（react 或 js）、初始屏幕列表。 auth0 acul init -t react -s login-id,login-password,s