diff --git a/main/.mintlify/skills/acul-screen-generator/SKILL.md b/main/.mintlify/skills/acul-screen-generator/SKILL.md deleted file mode 100644 index 54aa917b72..0000000000 --- a/main/.mintlify/skills/acul-screen-generator/SKILL.md +++ /dev/null @@ -1,377 +0,0 @@ ---- -name: acul-screen-generator -description: Generates complete, branded Auth0 Advanced Custom Universal Login (ACUL) screen implementations using the React or Vanilla JS SDK. Use when a developer asks to create, add, or modify ACUL login screens with custom branding, social login, theming, or specific authentication flows. Triggers on requests like "generate a custom login screen", "add a signup screen to my ACUL project", "customize my Auth0 Universal Login with our brand colors", "apply our theme to all ACUL screens", or any task involving Auth0 Universal Login customization with @auth0/auth0-acul-react or @auth0/auth0-acul-js. -license: Apache-2.0 -metadata: - author: Auth0 ---- - -# ACUL Screen Generator - -Generates production-ready, fully themed Auth0 ACUL screen components. Follows a strict 8-phase workflow (Phases 0–7): CLI authentication → intent detection → project setup → screen requirements → tech stack and design → theme extraction → structured code generation → dev mode wiring. - -## Reference Hierarchy - -Always resolve the correct reference for a screen using this priority order: - -``` -1. auth0-acul-samples (31 React screens, 3 React-JS screens) - → Complete modular implementation: index.tsx + components/ + hooks/ + locales/ - → React: https://github.com/auth0-samples/auth0-acul-samples/tree/main/react/src/screens/ - → React-JS: https://github.com/auth0-samples/auth0-acul-samples/tree/main/react-js/src/screens/ - -2. SDK examples (68 React, 71 JS — all screens) - → Code snippets showing SDK imports, hooks, and action functions - → React: https://github.com/auth0/universal-login/blob/master/packages/auth0-acul-react/examples/.md - → JS: https://github.com/auth0/universal-login/blob/master/packages/auth0-acul-js/examples/.md - -3. assets/react-templates/ or assets/js-templates/ - → Structural component pattern only — never use their hooks/actions for other screens -``` - -For which screens are in auth0-acul-samples → read `references/screen-catalog.md`. - ---- - -## auth0-acul-samples Architecture - -When a screen is available in auth0-acul-samples, generate code using this modular pattern — not a monolithic component. - -**Directory structure per screen:** -``` -/ -├── index.tsx thin entry: wires manager hook + applies theme + renders layout -├── components/ -│ ├── Header.tsx logo, title, subtitle from screen.texts -│ ├── Form.tsx form fields, submit, captcha, passkey button -│ ├── Footer.tsx signup link, forgot password, back link -│ └── AlternativeLogins.tsx social login buttons (if screen has social) -├── hooks/ -│ └── useManager.ts wraps SDK hooks, exposes clean handlers + feature flags -└── locales/ - └── en.json fallback text strings -``` - -**index.tsx pattern:** -```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 ( - - -
- {/* conditional */} - <Form /> -