@riligar/agents-kit 1.15.0 → 1.16.0

package/.agent/skills/riligar-design-system/SKILL.md

@@ -23,6 +23,7 @@ Para atingir a excelência:
 -   **[Theme Config](assets/theme.js)**: Configuração do tema com suporte a Dark Mode automático.
 -   **[Visual references](references/visual-references.md)**: Mapeamento de nuances estéticas.
 -   **[Anti-patterns](references/anti-patterns.md)**: O que evitar (especialmente CSS inline).
+-   **[Design Guidelines](references/design-system.md)**: Tipografia, cores e hierarquia visual detalhada.
 
 ## Checklist de Lapidação (RiLiGar Excellence)
 

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

@@ -14,7 +14,7 @@ This skill provides a backend workflow for integrating authentication and permis
 Install the backend SDK:
 
 ```bash
-npm install @riligar/auth-elysia
+bun add @riligar/auth-elysia
 ```
 
 ### 2. Environment Variables
@@ -55,7 +55,7 @@ const app = new Elysia()
     .listen(3000)
 ```
 
-For more patterns, see [server-snippets.ts](assets/server-snippets.ts).
+For more patterns, see [server-snippets.js](assets/server-snippets.js).
 
 ## Specialized Guides
 

package/.agent/skills/riligar-dev-dashboard/SKILL.md

@@ -15,6 +15,7 @@ description: Padrões React específicos do RiLiGar. Zustand, i18n, estrutura de
 > Sempre respeite também:
 > - @[.agent/skills/riligar-design-system] — UI exclusivo via Mantine, zero CSS
 > - Rules em `.agent/rules/` — clean-code, naming-conventions, code-style, javascript-only
+> - [references/dependencies.md](references/dependencies.md) — Pacotes e versões do frontend, config Vite
 
 ---
 
@@ -246,7 +247,336 @@ export const WHATSAPP_SUPPORT_MESSAGE = '...' // ou via i18n se traduzível
 
 ---
 
+## 8. Padrões reutilizáveis
+
+Estruturas que repetem pela codebase. Copie o esqueleto, ajuste apenas o conteúdo domínio-específico.
+
+### 8.1 Page Header
+
+Presente em **todas** as pages. Estrutura idêntica sempre:
+
+```javascript
+<Box py="xl">
+    <Group justify="space-between" align="flex-end" mb="xl">
+        <Stack gap={0}>
+            <Text size="xs" fw={700} c="dimmed" tt="uppercase" lts="0.1em">
+                {t('namespace.subtitle')}
+            </Text>
+            <Title order={1} style={{ letterSpacing: '-0.04em' }}>
+                {t('namespace.title')}
+            </Title>
+        </Stack>
+        {/* CTA opcional — ex: <Button leftSection={<IconPlus size={16} />}> */}
+    </Group>
+    {/* Conteúdo da página */}
+</Box>
+```
+
+### 8.2 Empty State
+
+Usado quando uma lista está vazia. Card com borda dashed, icone grande, texto e CTA:
+
+```javascript
+<Card padding="xl" radius="md" withBorder style={{ borderStyle: 'dashed', textAlign: 'center' }}>
+    <Stack align="center" py="xl">
+        <IconDominio size={48} stroke={1} color="var(--mantine-color-gray-2)" />
+        <Text c="dimmed" size="sm">{t('namespace.emptyMessage')}</Text>
+        <Button onClick={handleCreate} leftSection={<IconPlus size={16} />}>
+            {t('namespace.createFirst')}
+        </Button>
+    </Stack>
+</Card>
+```
+
+### 8.3 Loading Guard
+
+Loader só aparece quando não há dados ainda (não sobrescreve lista existente):
+
+```javascript
+{loading && data.length === 0 ? (
+    <Center style={{ height: 300 }}>
+        <Loader />
+    </Center>
+) : (
+    /* conteúdo normal */
+)}
+```
+
+### 8.4 Card Grid
+
+Layout responsivo padrão para listas de cards:
+
+```javascript
+<SimpleGrid cols={{ base: 1, sm: 2, md: 3 }}>
+    {items.map((item) => (
+        <Card key={item.id} padding="lg" radius="md" withBorder>
+            {/* conteúdo do card */}
+        </Card>
+    ))}
+</SimpleGrid>
+```
+
+Para galerias (mais itens pequenos): `cols={{ base: 1, sm: 2, md: 3, lg: 4 }}`
+
+### 8.5 Modal
+
+Sempre usa `useDisclosure`. Header com borderBottom específico:
+
+```javascript
+const [opened, { open, close }] = useDisclosure(false)
+
+<Modal
+    opened={opened}
+    onClose={close}
+    centered
+    radius="md"
+    padding="xl"
+    title={<Text fw={700}>{t('namespace.modalTitle')}</Text>}
+    styles={{ header: { borderBottom: '1px solid var(--mantine-color-gray-2)', marginBottom: 20 } }}
+>
+    {/* corpo do modal */}
+</Modal>
+```
+
+Para múltiplos modais na mesma page, renomeia as funções: `{ open: openEdit, close: closeEdit }`
+
+### 8.6 Status Badge
+
+Mapeia status → configuração visual via função que recebe `t`:
+
+```javascript
+const getStatusConfig = (t) => ({
+    draft:     { color: 'gray',   icon: <IconCircleDotted size={16} />, label: t('posts.status.draft') },
+    scheduled: { color: 'blue',   icon: <IconClock size={16} />,        label: t('posts.status.scheduled') },
+    published: { color: 'green',  icon: <IconCircleCheck size={16} />,  label: t('posts.status.published') },
+    failed:    { color: 'red',    icon: <IconCircleX size={16} />,      label: t('posts.status.failed') },
+})
+
+// Uso
+const config = getStatusConfig(t)[status]
+<Badge variant="dot" color={config.color}>{config.label}</Badge>
+```
+
+### 8.7 Search / Filter
+
+Filtro local sem chamada de API — estado local + filter inline:
+
+```javascript
+const [search, setSearch] = useState('')
+
+const filtered = items.filter((item) =>
+    item.name.toLowerCase().includes(search.toLowerCase())
+)
+
+<TextInput
+    placeholder={t('common.search')}
+    leftSection={<IconSearch size={16} />}
+    value={search}
+    onChange={(e) => setSearch(e.target.value)}
+/>
+```
+
+---
+
+## 9. Padrões de dados e lógica
+
+### 9.1 Store — async action
+
+Template exato que todas as actions seguem. Imports do service como namespace:
+
+```javascript
+import { create } from 'zustand'
+import * as feedsService from '../services/feeds.js'
+
+export const useFeedStore = create((set) => ({
+    feeds: [],
+    loading: false,
+    error: null,
+
+    fetchFeeds: async () => {
+        set({ loading: true, error: null })
+        try {
+            const feeds = await feedsService.getAll()
+            set({ feeds, loading: false })
+        } catch (error) {
+            set({ error: error.message, loading: false })
+            throw error
+        }
+    },
+}))
+```
+
+Nota: services são importados como `import * as service` (namespace), não como objeto exportado.
+
+### 9.2 Store — mutação de listas
+
+Atualizações imutáveis via `set(state => ...)` com spread + map/filter:
+
+```javascript
+// Atualizar item na lista
+updateFeed: (id, data) => set((state) => ({
+    feeds: state.feeds.map((f) => (f.id === id ? { ...f, ...data } : f))
+})),
+
+// Remover item
+removeFeed: (id) => set((state) => ({
+    feeds: state.feeds.filter((f) => f.id !== id)
+})),
+
+// Adicionar item
+addFeed: (feed) => set((state) => ({
+    feeds: [...state.feeds, feed]
+})),
+```
+
+### 9.3 Notifications
+
+Shape e convenção de cores consistente em toda a app:
+
+```javascript
+import { notifications } from '@mantine/notifications'
+import { IconCheck, IconX, IconAlertCircle } from '@tabler/icons-react'
+
+// ✅ Sucesso
+notifications.show({
+    title: t('common.success'),
+    message: t('namespace.savedMessage'),
+    color: 'green',
+    icon: <IconCheck size={18} />,
+})
+
+// ✅ Erro
+notifications.show({
+    title: t('common.error'),
+    message: error.message,
+    color: 'red',
+    icon: <IconX size={18} />,
+})
+
+// ✅ Warning
+notifications.show({
+    title: t('common.warning'),
+    message: t('namespace.warningMessage'),
+    color: 'yellow',
+    icon: <IconAlertCircle size={18} />,
+})
+```
+
+Icones de notification: sempre `size={18}`. Mensagens de erro: usa `error.message` diretamente (já vem traduzido do backend).
+
+### 9.4 dayjs + i18n
+
+Locale do dayjs sincroniza com o idioma do i18n:
+
+```javascript
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import { useTranslation } from 'react-i18next'
+
+dayjs.extend(relativeTime)
+
+const MyComponent = () => {
+    const { i18n } = useTranslation()
+
+    useEffect(() => {
+        dayjs.locale(i18n.language)
+    }, [i18n.language])
+
+    // Formatos usados no projeto:
+    // dayjs(date).format('DD MMM, HH:mm')       — compacto com hora
+    // dayjs(date).format('DD/MM/YYYY [at] HH:mm') — completo
+    // dayjs(date).fromNow()                      — relativo ("há 2 dias")
+}
+```
+
+---
+
+## 10. Padrões de fluxo
+
+### 10.1 Route Guard (wrapper)
+
+Componente que protege rotas verificando estado do store:
+
+```javascript
+import { Navigate } from 'react-router-dom'
+import { useFeedStore } from '../store/feed-store.js'
+
+const RequireFeed = ({ children }) => {
+    const activeFeed = useFeedStore((s) => s.activeFeed)
+    if (!activeFeed) return <Navigate to="/" />
+    return children
+}
+```
+
+Usado na definição de rotas: `<RequireFeed><EditorPage /></RequireFeed>`
+
+### 10.2 Notificação via URL params
+
+Após redirects externos (OAuth, Stripe checkout), status vem via query params:
+
+```javascript
+import { useSearchParams } from 'react-router-dom'
+
+const SubscriptionPage = () => {
+    const [searchParams, setSearchParams] = useSearchParams()
+    const { t } = useTranslation()
+
+    useEffect(() => {
+        if (searchParams.get('success')) {
+            notifications.show({ title: t('common.success'), message: t('subscription.successMessage'), color: 'green', icon: <IconCheck size={18} /> })
+            setSearchParams({})
+        } else if (searchParams.get('canceled')) {
+            notifications.show({ title: t('common.warning'), message: t('subscription.canceledMessage'), color: 'yellow', icon: <IconAlertCircle size={18} /> })
+            setSearchParams({})
+        }
+    }, [searchParams])
+}
+```
+
+### 10.3 Autosave
+
+Padrão usado no editor — debounce com state machine de status:
+
+```javascript
+const [saveStatus, setSaveStatus] = useState('idle') // 'idle' | 'saving' | 'saved'
+
+useEffect(() => {
+    if (!content) return
+    const timeout = setTimeout(async () => {
+        setSaveStatus('saving')
+        try {
+            await postsService.update(postId, { content })
+            setSaveStatus('saved')
+            // Reset para idle após 3s
+            setTimeout(() => setSaveStatus('idle'), 3000)
+        } catch {
+            setSaveStatus('idle')
+        }
+    }, 2000) // debounce de 2s
+
+    return () => clearTimeout(timeout)
+}, [content, postId])
+```
+
+---
+
+## 11. Convenção de tamanhos de icones
+
+Hierarquia consistente — sempre de `@tabler/icons-react`:
+
+| Contexto | Size | Exemplo |
+|---|---|---|
+| Menu items / nav | 14 | Sidebar links |
+| Inline / badges | 16 | Botões, labels, leftSection |
+| Notifications | 18 | Icons nas notifications |
+| Card headers | 20 | Ação principal do card |
+| Feature cards | 24 | Cards de destaque |
+| Empty states | 48 | Icone do empty state (com `stroke={1}`) |
+
+Empty states usam `stroke={1}` para parecer mais leve. Icones decorativos genéricos usam `stroke={1.5}`.
+
+---
+
 ## Related Skills
 
 - @[.agent/skills/riligar-design-system]
-- @[.agent/skills/riligar-dev-stack]

package/.agent/skills/riligar-dev-dashboard/references/dependencies.md

@@ -0,0 +1,44 @@
+# Dependências Frontend
+
+## Core
+
+| Pacote | Versão | Descrição |
+|---|---|---|
+| `react` | ^19.x | Biblioteca UI |
+| `react-dom` | ^19.x | React DOM renderer |
+| `react-router-dom` | ^7.x | Roteamento |
+| `vite` | ^5.x | Build tool |
+| `zustand` | ^5.x | Gerenciamento de estado |
+| `ky` | ^1.x | HTTP client |
+
+## UI
+
+| Pacote | Versão | Descrição |
+|---|---|---|
+| `@mantine/core` | ^8.x | Componentes UI |
+| `@mantine/hooks` | ^8.x | Hooks utilitários |
+| `@mantine/form` | ^8.x | Gerenciamento de formulários |
+| `@mantine/notifications` | ^8.x | Sistema de notificações |
+| `@tabler/icons-react` | ^3.x | Iconografia |
+
+> Use apenas Mantine para estilização. Sem CSS Modules, Custom CSS ou CSS In-line.
+
+## Configuração Vite
+
+```javascript
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+    plugins: [react()],
+    build: {
+        lib: {
+            entry: 'src/index.js',
+            formats: ['es', 'cjs'],
+        },
+        rollupOptions: {
+            external: ['react', 'react-dom', '@mantine/core'],
+        },
+    },
+})
+```

package/.agent/skills/riligar-dev-manager/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: riligar-dev-backend
+name: riligar-dev-manager
 description: Elysia backend development patterns for Bun. Use when building APIs, routes, plugins, validation, middleware, and error handling with Elysia framework.
 ---
 
@@ -10,10 +10,7 @@ description: Elysia backend development patterns for Bun. Use when building APIs
 ## Mandatory Guidelines
 
 > [!IMPORTANT]
-> All work in this skill MUST adhere to:
->
-> - @[.agent/skills/riligar-dev-clean-code] (Clean Code Standards)
-> - @[.agent/skills/riligar-tech-stack] (Tech Stack - Bun, Elysia, SQLite, Drizzle)
+> All work in this skill MUST adhere to rules em `.agent/rules/` — clean-code, code-style, javascript-only, naming-conventions.
 
 ## Quick Reference
 
@@ -62,6 +59,16 @@ src/
     └── logger.js      # Request logging
 ```
 
+## Dependencies
+
+| Pacote | Versão | Descrição |
+|---|---|---|
+| `bun` | latest | Runtime |
+| `elysia` | latest | Framework HTTP |
+| `bun:sqlite` | builtin | SQLite driver |
+| `drizzle-orm` | latest | ORM |
+| `bun:s3` | latest | S3/R2 Storage |
+
 ## Core Patterns
 
 ### Route Plugin
@@ -108,10 +115,7 @@ console.log(`Server running at ${app.server?.url}`)
 | Need | Skill |
 | --- | --- |
 | **Authentication** | @[.agent/skills/riligar-dev-auth-elysia] |
-| **Database** | @[.agent/skills/riligar-dev-database] |
-| **Tech Stack** | @[.agent/skills/riligar-tech-stack] |
-| **Clean Code** | @[.agent/skills/riligar-dev-clean-code] |
-| **Infrastructure** | @[.agent/skills/riligar-infrastructure] |
+| **Infrastructure** | @[.agent/skills/riligar-infra-fly] |
 
 ## Decision Checklist
 

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

@@ -1,5 +1,5 @@
 ---
-name: riligar-dev-landing-page
+name: riligar-dev-website
 description: Specialist in High-Conversion Landing Pages using RiLiGar Design System. Use for: (1) Creating marketing/sales pages, (2) Structuring conversion flows (AIDA/PAS), (3) Implementing high-trust components (Hero, Social Proof, Pricing), (4) Writing persuasive copy.
 ---
 

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

@@ -1,5 +1,5 @@
 ---
-name: riligar-dev-seo
+name: riligar-dev-website-seo
 description: Implementação de infraestrutura de SEO técnico seguindo a stack RiLiGar (React, Vite, Bun, Elysia). Use para configurar sitemaps, robots.txt, meta tags, OpenGraph, dados estruturados (JSON-LD) e URLs canônicas.
 ---