@riligar/agents-kit 1.15.0 → 1.17.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-design-system/references/design-system.md

@@ -104,10 +104,3 @@ Ao pedir código ou design para uma IA, use este formato:
 - **Modais:** Devem ter um backdrop com blur (`backdrop-blur-sm`) e fundo branco sólido. Sem cabeçalhos coloridos.
 - **Dashboards:** Devem privilegiar números grandes (Big Numbers) em monocromia, com rótulos pequenos abaixo. Gráficos devem ser limpos, sem grid lines pesadas.
 
----
-
-## 🤖 Integração com Gemini CLI
-
-Este repositório possui uma **Skill do Gemini CLI** configurada em [`riligar-design-system/SKILL.md`](../SKILL.md). Ao usar o Gemini CLI neste repositório, o agente aplicará automaticamente estas diretrizes a qualquer código ou design gerado.
-
-Para saber como usar, veja o [README principal](../../README.md).

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-database/SKILL.md

@@ -0,0 +1,45 @@
+---
+name: riligar-dev-database
+description: Database patterns for RiLiGar using Drizzle ORM + bun:sqlite. Use when setting up database connections, defining schemas, creating migrations, or writing queries. Covers SQLite on Fly.io volumes with the drizzle-kit workflow.
+---
+
+# Database — Drizzle + bun:sqlite
+
+> SQLite nativo no Bun. Zero drivers externos. Base de dados no volume do Fly.io (`/app/data`).
+
+## Referências
+
+| Arquivo | Quando usar |
+| --- | --- |
+| [connection.md](references/connection.md) | Setup inicial: instalação, db.js, drizzle.config |
+| [schema.md](references/schema.md) | Definir tabelas, tipos de colunas, relações |
+| [migrations.md](references/migrations.md) | Criar e executar migrations com drizzle-kit |
+| [queries.md](references/queries.md) | Select, insert, update, delete, queries com relações |
+
+## Quick Start
+
+```javascript
+// database/db.js
+import { drizzle } from 'drizzle-orm/bun-sqlite'
+import Database from 'bun:sqlite'
+
+const sqlite = new Database(process.env.DB_PATH ?? './data/database.db')
+const db = drizzle({ client: sqlite })
+
+export { db }
+```
+
+## Regras
+
+- **Caminho do banco:** `/app/data/database.db` em produção (volume Fly.io). `./data/database.db` em desenvolvimento.
+- **Migrations sempre:** Use `drizzle-kit generate` + `drizzle-kit migrate`. Nunca edite migrations à mão.
+- **Schema único:** Todas as tabelas em `database/schema.js`.
+- **Migrations no startup:** Use `migrate()` no `index.js` antes de `.listen()`.
+
+## Related Skills
+
+| Need | Skill |
+| --- | --- |
+| **Backend (Elysia)** | @[.agent/skills/riligar-dev-manager] |
+| **Payments (Stripe)** | @[.agent/skills/riligar-infra-stripe] |
+| **Infrastructure** | @[.agent/skills/riligar-infra-fly] |

package/.agent/skills/riligar-dev-database/references/connection.md

@@ -0,0 +1,74 @@
+# Database Connection
+
+## Installation
+
+```bash
+bun add drizzle-orm
+bun add -d drizzle-kit
+```
+
+No additional drivers needed — `bun:sqlite` is built into Bun.
+
+## db.js
+
+```javascript
+// database/db.js
+import { drizzle } from 'drizzle-orm/bun-sqlite'
+import Database from 'bun:sqlite'
+
+const sqlite = new Database(process.env.DB_PATH ?? './data/database.db')
+const db = drizzle({ client: sqlite })
+
+export { db }
+```
+
+- Em **desenvolvimento**: `DB_PATH` não é definido → usa `./data/database.db`
+- Em **produção** (Fly.io): `fly secrets set DB_PATH=/app/data/database.db`
+
+## drizzle.config.js
+
+```javascript
+// drizzle.config.js (na raiz do projeto)
+import { defineConfig } from 'drizzle-kit'
+
+export default defineConfig({
+    dialect: 'sqlite',
+    schema: './database/schema.js',
+    out: './database/migrations',
+    dbCredentials: {
+        url: process.env.DB_PATH ?? './data/database.db',
+    },
+})
+```
+
+## Migrations no Startup
+
+No `index.js`, execute migrations antes de iniciar o servidor:
+
+```javascript
+// index.js
+import { migrate } from 'drizzle-orm/bun-sqlite/migrator'
+import { db } from './database/db'
+
+await migrate(db, { migrationsFolder: './database/migrations' })
+
+// ... resto do setup
+const app = new Elysia()
+    .use(routes)
+    .listen(3000)
+```
+
+Isso garante que o banco esteja sempre atualizado quando o servidor inicia no Fly.io.
+
+## Estrutura de Arquivos
+
+```
+database/
+├── db.js              # Conexão (drizzle + bun:sqlite)
+├── schema.js          # Todas as tabelas e relações
+└── migrations/
+    ├── 0000_*.sql     # Migrations geradas pelo drizzle-kit
+    ├── 0001_*.sql
+    └── meta/
+        └── _journal.json
+```

package/.agent/skills/riligar-dev-database/references/migrations.md

@@ -0,0 +1,70 @@
+# Migrations — drizzle-kit
+
+## Fluxo Padrão
+
+```
+1. Edite database/schema.js
+2. bun run db:generate    → gera migration SQL
+3. bun run db:migrate     → aplica no banco
+```
+
+## Scripts no package.json
+
+```javascript
+{
+    "scripts": {
+        "db:generate": "drizzle-kit generate",
+        "db:migrate": "drizzle-kit migrate",
+        "db:push": "drizzle-kit push",
+        "db:studio": "drizzle-kit studio"
+    }
+}
+```
+
+## Comandos
+
+### Gerar migration
+
+```bash
+bun run db:generate
+```
+
+Compara o schema atual com o último snapshot. Gera um arquivo `.sql` em `database/migrations/`. Pergunta se algum campo foi renomeado (vs criado novo + deletado).
+
+### Aplicar migrations
+
+```bash
+bun run db:migrate
+```
+
+Lê as migrations não aplicadas, executa em ordem. Mantém histórico no banco.
+
+### Push (apenas desenvolvimento)
+
+```bash
+bun run db:push
+```
+
+Aplica mudanças diretamente no banco sem gerar arquivos de migration. Útil durante prototipage rápido. **Nunca use em produção.**
+
+### Studio (GUI)
+
+```bash
+bun run db:studio
+```
+
+Abre uma interface visual para explorar e editar dados no banco.
+
+## Migrations Programáticas (Startup)
+
+Em produção, as migrations são executadas automaticamente no startup da aplicação:
+
+```javascript
+// index.js
+import { migrate } from 'drizzle-orm/bun-sqlite/migrator'
+import { db } from './database/db'
+
+await migrate(db, { migrationsFolder: './database/migrations' })
+```
+
+Isso garante que o banco esteja sempre atualizado quando o servidor inicia no Fly.io.