Initial commit

skills/react-allauth/references/styling-guide.md

@@ -0,0 +1,75 @@
+# React-Allauth Components Requiring Styling
+
+## Overview
+
+This file lists all authentication components that require styling. These components are functional but use minimal styling from the django-allauth example repository. Apply consistent design using a styling skill (e.g., `apply-shadcn`).
+
+## Components Requiring Styling
+
+### Account Files (15 files)
+
+1. `frontend/src/user_management/account/Login.jsx`
+2. `frontend/src/user_management/account/RequestLoginCode.jsx`
+3. `frontend/src/user_management/account/ConfirmLoginCode.jsx`
+4. `frontend/src/user_management/account/Logout.jsx`
+5. `frontend/src/user_management/account/Signup.jsx`
+6. `frontend/src/user_management/account/ChangeEmail.jsx`
+7. `frontend/src/user_management/account/VerifyEmail.jsx`
+8. `frontend/src/user_management/account/VerifyEmailByCode.jsx`
+9. `frontend/src/user_management/account/VerificationEmailSent.jsx`
+10. `frontend/src/user_management/account/RequestPasswordReset.jsx`
+11. `frontend/src/user_management/account/ConfirmPasswordResetCode.jsx`
+12. `frontend/src/user_management/account/ChangePassword.jsx`
+13. `frontend/src/user_management/account/ResetPassword.jsx`
+14. `frontend/src/user_management/account/Reauthenticate.jsx`
+
+### Social Account Files (3 files)
+
+1. `frontend/src/user_management/socialaccount/ProviderSignup.jsx`
+2. `frontend/src/user_management/socialaccount/ProviderCallback.jsx`
+3. `frontend/src/user_management/socialaccount/ManageProviders.jsx`
+
+### MFA Files (15 files)
+
+1. `frontend/src/user_management/mfa/MFAOverview.jsx`
+2. `frontend/src/user_management/mfa/ActivateTOTP.jsx`
+3. `frontend/src/user_management/mfa/DeactivateTOTP.jsx`
+4. `frontend/src/user_management/mfa/AuthenticateTOTP.jsx`
+5. `frontend/src/user_management/mfa/ReauthenticateTOTP.jsx`
+6. `frontend/src/user_management/mfa/RecoveryCodes.jsx`
+7. `frontend/src/user_management/mfa/GenerateRecoveryCodes.jsx`
+8. `frontend/src/user_management/mfa/AuthenticateRecoveryCodes.jsx`
+9. `frontend/src/user_management/mfa/ReauthenticateRecoveryCodes.jsx`
+10. `frontend/src/user_management/mfa/AddWebAuthn.jsx`
+11. `frontend/src/user_management/mfa/ListWebAuthn.jsx`
+12. `frontend/src/user_management/mfa/AuthenticateWebAuthn.jsx`
+13. `frontend/src/user_management/mfa/ReauthenticateWebAuthn.jsx`
+14. `frontend/src/user_management/mfa/SignupByPasskey.jsx`
+15. `frontend/src/user_management/mfa/CreateSignupPasskey.jsx`
+16. `frontend/src/user_management/mfa/Trust.jsx`
+
+### Component Files (2 files)
+
+1. `frontend/src/user_management/components/Button.jsx`
+2. `frontend/src/user_management/mfa/WebAuthnLoginButton.jsx`
+
+**Total:** 35 files requiring styling
+
+## Button Component Duplication Issue
+
+Two Button.jsx files exist in the project:
+
+1. **`frontend/src/components/ui/button.jsx`** - shadcn/ui Button component with full styling variants
+2. **`frontend/src/user_management/components/Button.jsx`** - Wrapper component that uses shadcn/ui Button
+
+**Recommended approach:** Keep both files as they serve different purposes:
+
+- **`frontend/src/components/ui/button.jsx`** - Core shadcn/ui component with styling system
+- **`frontend/src/user_management/components/Button.jsx`** - Wrapper that ensures authentication components use consistent button styling
+
+## Notes
+
+- All components use React Router for navigation
+- Components expect shadcn/ui components to be available via `@/components/ui/` imports
+- The authentication context (`AuthContextProvider`) must wrap all components
+- Components use the allauth API client from `user_management/lib/allauth.jsx`