@riligar/agents-kit 1.18.1 → 1.20.0

package/.agent/skills/riligar-dev-auth-react/SKILL.md

@@ -11,10 +11,10 @@ This skill provides a complete workflow for integrating authentication and permi
 
 ### 1. Installation
 
-Install the SDK using bun (preferred) or npm:
+Install the SDK and its core dependencies (Mantine & Tabler Icons) using bun:
 
 ```bash
-bun add @riligar/auth-react
+bun add @riligar/auth-react @mantine/core @mantine/hooks @mantine/notifications @tabler/icons-react
 ```
 
 ### 2. Environment Variables
@@ -34,19 +34,29 @@ VITE_AUTH_API_KEY=pk_live_your_public_key
 
 ### 3. AuthProvider Setup
 
-Wrap your application (usually in `main.jsx` or `App.jsx`) with the `AuthProvider`.
+Wrap your application (usually in `main.jsx` or `App.jsx`) with the `AuthProvider` and `MantineProvider`.
 
 ```jsx
 import { AuthProvider } from '@riligar/auth-react'
+import { MantineProvider } from '@mantine/core'
 
 ReactDOM.createRoot(document.getElementById('root')).render(
-    <AuthProvider apiKey={import.meta.env.VITE_AUTH_API_KEY}>
-        <App />
-    </AuthProvider>
+    <MantineProvider theme={yourTheme}>
+        <AuthProvider apiKey={import.meta.env.VITE_AUTH_API_KEY}>
+            <App />
+        </AuthProvider>
+    </MantineProvider>
 )
 ```
 
-For more setup patterns, see [setup-snippets.js](assets/setup-snippets.js).
+## Ready-to-Use Templates
+
+Use these assets to quickly scaffold a complete authentication flow:
+
+- **Routing Architecture**: Comprehensive [routes.jsx](assets/routes.jsx) showing Public vs Protected patterns.
+- **Login & Signup**: Generic [signin.jsx](assets/signin.jsx) and [signup.jsx](assets/signup.jsx) templates.
+- **Email Verification**: [verify-email.jsx](assets/verify-email.jsx) handler.
+- **Utility Wrappers**: [auth-loader.jsx](assets/auth-loader.jsx), [require-feature.jsx](assets/require-feature.jsx), and [layout.jsx](assets/layout.jsx).
 
 ## Specialized Guides
 
@@ -64,25 +74,21 @@ Use `useAuth()` to access user data and authentication status.
 const { user, isAuthenticated, loading } = useAuth()
 ```
 
-### Adding a Login Form
-
-Simply drop the `<SignIn />` component. Use `variant="modal"` if you want it in a popup.
-
-```jsx
-<SignIn />
-// or
-<SignIn variant="modal" opened={isOpen} onClose={() => setIsOpen(false)} />
-```
-
 ### Protecting a Dashboard
 
-Wrap your sub-routes with `<Protect />`.
+The recommended pattern is to use the **Protected Group** pattern with React Router as shown in [routes.jsx](assets/routes.jsx).
 
 ```jsx
-<Route element={<Protect redirectTo="/login" />}>
+// Nested routes under <Protect /> guarantee that all sub-routes are guarded.
+<Route element={<Protect fallback={<AuthLoader />} />}>
     <Route
-        path="/dashboard"
-        element={<Dashboard />}
-    />
+        path="/"
+        element={<Layout />}
+    >
+        <Route
+            index
+            element={<Home />}
+        />
+    </Route>
 </Route>
 ```

package/.agent/skills/riligar-dev-auth-react/assets/auth-loader.jsx

@@ -0,0 +1,31 @@
+import { Center, Loader, Stack, Text } from '@mantine/core'
+
+/**
+ * AuthLoader Component
+ *
+ * Standard loading screen used during authentication state transitions
+ * (e.g., checking tokens on initial load or redirects).
+ */
+export default function AuthLoader() {
+    return (
+        <Center h="100vh">
+            <Stack
+                align="center"
+                gap="md"
+            >
+                <Loader
+                    size="lg"
+                    variant="dots"
+                    color="brand"
+                />
+                <Text
+                    size="sm"
+                    c="dimmed"
+                    fw={500}
+                >
+                    Verificando acesso...
+                </Text>
+            </Stack>
+        </Center>
+    )
+}

package/.agent/skills/riligar-dev-auth-react/assets/layout.jsx

@@ -0,0 +1,54 @@
+import { AppShell, Burger, Group, Text } from '@mantine/core'
+import { useDisclosure } from '@mantine/hooks'
+import { Outlet } from 'react-router-dom'
+
+/**
+ * Layout Component
+ *
+ * Standard Dashboard layout using Mantine AppShell.
+ * Provides the structure for sidebars, headers, and main content area.
+ */
+export default function Layout() {
+    const [opened, { toggle }] = useDisclosure()
+
+    return (
+        <AppShell
+            header={{ height: 60 }}
+            navbar={{
+                width: 300,
+                breakpoint: 'sm',
+                collapsed: { mobile: !opened },
+            }}
+            padding="md"
+        >
+            <AppShell.Header>
+                <Group
+                    h="100%"
+                    px="md"
+                >
+                    <Burger
+                        opened={opened}
+                        onClick={toggle}
+                        hiddenFrom="sm"
+                        size="sm"
+                    />
+                    <Text fw={700}>Dashboard</Text>
+                </Group>
+            </AppShell.Header>
+
+            <AppShell.Navbar p="md">
+                {/* Navigation links go here */}
+                <Text
+                    size="sm"
+                    c="dimmed"
+                >
+                    Navigation Menu
+                </Text>
+            </AppShell.Navbar>
+
+            <AppShell.Main>
+                <Outlet />
+            </AppShell.Main>
+        </AppShell>
+    )
+}

package/.agent/skills/riligar-dev-auth-react/assets/require-feature.jsx

@@ -0,0 +1,33 @@
+import { useAuth } from '@riligar/auth-react'
+import { Navigate } from 'react-router-dom'
+import AuthLoader from './auth-loader'
+
+/**
+ * RequireFeature Wrapper
+ *
+ * Protects routes based on specific user attributes or feature flags.
+ * This is an example of how to extend authentication with business logic.
+ */
+export default function RequireFeature({ children }) {
+    const { user, isAuthenticated, loading } = useAuth()
+
+    if (loading) {
+        return <AuthLoader />
+    }
+
+    if (!isAuthenticated) {
+        return (
+            <Navigate
+                to="/auth/signin"
+                replace
+            />
+        )
+    }
+
+    // Example logic: Ensure user has a setup complete or a specific role
+    // if (!user.onboardingCompleted) {
+    //     return <Navigate to="/onboarding" replace />
+    // }
+
+    return children
+}

package/.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
+            />
+        ),
+    },
+])

package/.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>
+    )
+}

package/.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>
+    )
+}

package/.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>
+    )
+}

package/.agent/skills/riligar-dev-auth-react/references/route-protection.md

@@ -13,33 +13,38 @@ Use these components to control access to specific parts of your application.
 
 ## Usage Patterns
 
-### Protecting Routes (React Router)
+### Protecting Routes (createBrowserRouter)
+
+The most robust way to protect routes in a Riligar app is using the **Protected Group** pattern with `createBrowserRouter`. This ensures consistent layout and authentication guards.
 
 ```jsx
-import { Protect, SignIn } from '@riligar/auth-react'
-import { Routes, Route } from 'react-router-dom'
-
-;<Routes>
-    <Route
-        path="/login"
-        element={<SignIn />}
-    />
-
-    <Route element={<Protect redirectTo="/login" />}>
-        <Route
-            path="/dashboard"
-            element={<Dashboard />}
-        />
-        <Route
-            path="/settings"
-            element={<Settings />}
-        />
-    </Route>
-</Routes>
+import { createBrowserRouter, Navigate } from 'react-router-dom'
+import { Protect } from '@riligar/auth-react'
+import AuthLoader from '../components/auth-loader.jsx'
+import Layout from '../components/layout.jsx'
+
+export const router = createBrowserRouter([
+    // Public paths
+    { path: '/auth/signin', element: <SignIn /> },
+
+    // Protected paths
+    {
+        element: <Protect fallback={<AuthLoader />} />,
+        children: [
+            {
+                path: '/',
+                element: <Layout />,
+                children: [{ index: true, element: <Dashboard /> }],
+            },
+        ],
+    },
+])
 ```
 
 ### Conditional UI Elements
 
+Use these wrappers inside your components (headers, sidebars, etc.) for granular visibility.
+
 ```jsx
 import { SignedIn, SignedOut, AuthLoading } from '@riligar/auth-react'
 

package/.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
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@riligar/agents-kit",
-    "version": "1.18.1",
+    "version": "1.20.0",
     "publishConfig": {
         "access": "public"
     },