feat: Adiciona seção de padrões reutilizáveis no SKILL.md

Author: ciro-maciel

.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 repeatem across a 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]

.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'],
+        },
+    },
+})
+```