feat: add basic routes and sign-in page for auth-react skill

Author: ciro-maciel

.agent/skills/riligar-dev-auth-react/assets/routes.jsx

@@ -0,0 +1,107 @@
+import { createBrowserRouter, Navigate } from 'react-router-dom'
+import { Protect } from '@riligar/auth-react'
+
+// Layouts and Loaders
+import Layout from './components/layout.jsx'
+import AuthLoader from './components/auth-loader.jsx'
+
+// Feature Wrappers (if applicable)
+import RequireFeature from './components/require-feature.jsx'
+
+// Auth Pages
+import SignInPage from './pages/auth/signin.jsx'
+import SignUpPage from './pages/auth/signup.jsx'
+import VerifyEmailPage from './pages/auth/verify-email.jsx'
+
+// Business Pages (Sample placeholders for the pattern)
+import Home from './pages/home.jsx'
+import FeaturesList from './pages/features/index.jsx'
+import FeatureDetail from './pages/features/detail.jsx'
+
+/**
+ * ROUTES PATTERN TEMPLATE
+ *
+ * Instructions:
+ * 1. Auth Routes: Grouped under /auth. Non-authenticated.
+ * 2. Protected Routes: Wrapped with <Protect />.
+ * 3. Main Layout: Nested inside the Protected group to ensure all app pages have sidebars/headers.
+ * 4. Feature Wrappers: Use components like <RequireFeature /> to enforce business logic (e.g. valid subscription).
+ */
+export const router = createBrowserRouter([
+    // Group 1: Public/Authentication Routes
+    {
+        path: '/auth',
+        children: [
+            {
+                index: true,
+                element: (
+                    <Navigate
+                        to="/auth/signin"
+                        replace
+                    />
+                ),
+            },
+            { path: 'signin', element: <SignInPage /> },
+            { path: 'signup', element: <SignUpPage /> },
+            { path: 'verify-email', element: <VerifyEmailPage /> },
+        ],
+    },
+
+    // Group 2: Protected Application Routes
+    {
+        element: (
+            <Protect
+                fallback={<AuthLoader />}
+                signInUrl="/auth/signin"
+            />
+        ),
+        children: [
+            {
+                path: '/',
+                element: <Layout />,
+                children: [
+                    // Landing/Dashboard
+                    {
+                        index: true,
+                        element: <Home />,
+                    },
+
+                    // Feature Example (with business logic wrapper)
+                    {
+                        path: 'features',
+                        element: (
+                            <RequireFeature>
+                                <FeaturesList />
+                            </RequireFeature>
+                        ),
+                    },
+                    {
+                        path: 'features/:id',
+                        element: (
+                            <RequireFeature>
+                                <FeatureDetail />
+                            </RequireFeature>
+                        ),
+                    },
+
+                    // Simple Protected Page (without extra wrapper)
+                    {
+                        path: 'settings',
+                        element: <Home />, // Reuse component or standard page
+                    },
+                ],
+            },
+        ],
+    },
+
+    // Catch-all: Redirect to Home
+    {
+        path: '*',
+        element: (
+            <Navigate
+                to="/"
+                replace
+            />
+        ),
+    },
+])

.agent/skills/riligar-dev-auth-react/assets/signin.jsx

@@ -0,0 +1,64 @@
+import { SignIn } from '@riligar/auth-react'
+import { Center } from '@mantine/core'
+import { notifications } from '@mantine/notifications'
+import { useNavigate } from 'react-router-dom'
+import { IconUserPlus, IconX, IconMail } from '@tabler/icons-react'
+
+import logoTipo from '/images/logotipo.webp'
+
+export default function SignInPage() {
+    const navigate = useNavigate()
+
+    const handleSuccess = () => {
+        notifications.show({
+            title: 'Bem-vindo!',
+            message: 'Login realizado com sucesso.',
+            color: 'green',
+            icon: <IconUserPlus size={18} />,
+        })
+        navigate('/')
+    }
+
+    const handleError = error => {
+        notifications.show({
+            title: 'Erro',
+            message: error.message || 'Falha ao realizar login.',
+            color: 'red',
+            icon: <IconX size={18} />,
+        })
+    }
+
+    const handleMagicLinkSent = email => {
+        notifications.show({
+            title: 'Sucesso',
+            message: `Link de acesso enviado para ${email}`,
+            color: 'brand',
+            icon: <IconMail size={18} />,
+        })
+    }
+
+    const handleForgotPasswordSent = email => {
+        notifications.show({
+            title: 'Sucesso',
+            message: `E-mail de recuperação enviado para ${email}`,
+            color: 'brand',
+            icon: <IconMail size={18} />,
+        })
+    }
+
+    return (
+        <Center
+            h="100vh"
+            bg="gray.0"
+        >
+            <SignIn
+                logo={logoTipo}
+                logoWidth={111}
+                onSuccess={handleSuccess}
+                onError={handleError}
+                onMagicLinkSent={handleMagicLinkSent}
+                onForgotPasswordSent={handleForgotPasswordSent}
+            />
+        </Center>
+    )
+}

.agent/skills/riligar-dev-auth-react/assets/signup.jsx

@@ -0,0 +1,44 @@
+import { SignUp } from '@riligar/auth-react'
+import { Center } from '@mantine/core'
+import { notifications } from '@mantine/notifications'
+import { useNavigate } from 'react-router-dom'
+import { IconMail, IconX } from '@tabler/icons-react'
+
+import logoTipo from '/images/logotipo.webp'
+
+export default function SignUpPage() {
+    const navigate = useNavigate()
+
+    const handleSuccess = () => {
+        notifications.show({
+            title: 'Sucesso',
+            message: 'Conta criada com sucesso!',
+            color: 'green',
+            icon: <IconMail size={18} />,
+        })
+        navigate('/auth/signin')
+    }
+
+    const handleError = error => {
+        notifications.show({
+            title: 'Erro',
+            message: error.message || 'Falha ao criar conta.',
+            color: 'red',
+            icon: <IconX size={18} />,
+        })
+    }
+
+    return (
+        <Center
+            h="100vh"
+            bg="gray.0"
+        >
+            <SignUp
+                logo={logoTipo}
+                logoWidth={111}
+                onSuccess={handleSuccess}
+                onError={handleError}
+            />
+        </Center>
+    )
+}

.agent/skills/riligar-dev-auth-react/assets/verify-email.jsx

@@ -0,0 +1,44 @@
+import { VerifyEmail } from '@riligar/auth-react'
+import { Center } from '@mantine/core'
+import { notifications } from '@mantine/notifications'
+import { useNavigate } from 'react-router-dom'
+import { IconCheck, IconX } from '@tabler/icons-react'
+
+import logoTipo from '/images/logotipo.webp'
+
+export default function VerifyEmailPage() {
+    const navigate = useNavigate()
+
+    const handleSuccess = () => {
+        notifications.show({
+            title: 'Sucesso',
+            message: 'Email verificado com sucesso! Você já pode fazer login.',
+            color: 'green',
+            icon: <IconCheck size={18} />,
+        })
+        navigate('/auth/signin')
+    }
+
+    const handleError = error => {
+        notifications.show({
+            title: 'Erro',
+            message: error.message || 'Falha ao verificar email.',
+            color: 'red',
+            icon: <IconX size={18} />,
+        })
+    }
+
+    return (
+        <Center
+            h="100vh"
+            bg="gray.0"
+        >
+            <VerifyEmail
+                logo={logoTipo}
+                logoWidth={111}
+                onSuccess={handleSuccess}
+                onError={handleError}
+            />
+        </Center>
+    )
+}

.agent/skills/riligar-dev-website/SKILL.md

@@ -7,22 +7,28 @@ description: Specialist in High-Conversion Landing Pages using RiLiGar Design Sy
 
 You are a conversion optimization expert and UI architect specializing in landing pages. Your mission is to create pages that **convert**, using the minimalist "Content-First" aesthetic of RiLiGar.
 
+https://alpha.mantine.dev/llms.txt
+https://alpha.mantine.dev/llms.txt
+https://alpha.mantine.dev/llms.txt
+https://alpha.mantine.dev/llms.txt
+https://alpha.mantine.dev/llms.txt
+
 ## Philosophy: "Trust Through Clarity"
 
 A landing page must be a slippery slope: the user should slide effortlessly from the headline to the CTA.
 
--   **Zero Friction:** No distractions. Every element must support the primary goal.
--   **High Trust:** Professional typography, perfect alignment, and social proof.
--   **Value First:** Focus on benefits, not just features.
+- **Zero Friction:** No distractions. Every element must support the primary goal.
+- **High Trust:** Professional typography, perfect alignment, and social proof.
+- **Value First:** Focus on benefits, not just features.
 
 ## Guia de Referência
 
 Para construir páginas de alta conversão:
 
--   **[Conversion Frameworks](references/conversion-framework.md)**: Estruturas psicológicas (AIDA, PAS) e fluxo narrativo.
--   **[Section Blueprints](references/section-blueprints.md)**: Layouts "Gold Standard" para seções críticas (Hero, Bento Grids, Pricing).
--   **[Copywriting Guide](references/copywriting-guide.md)**: Tom de voz e padrões de texto persuasivo.
--   **[Visual Knowledge Base](assets/)**: Diretório de referências visuais e layouts reais para inspiração estética e estrutural.
+- **[Conversion Frameworks](references/conversion-framework.md)**: Estruturas psicológicas (AIDA, PAS) e fluxo narrativo.
+- **[Section Blueprints](references/section-blueprints.md)**: Layouts "Gold Standard" para seções críticas (Hero, Bento Grids, Pricing).
+- **[Copywriting Guide](references/copywriting-guide.md)**: Tom de voz e padrões de texto persuasivo.
+- **[Visual Knowledge Base](assets/)**: Diretório de referências visuais e layouts reais para inspiração estética e estrutural.
 
 ## Como Usar esta Skill