@riligar/agents-kit 1.0.0

package/.agent/skills/riligar-dev-landing-page/SKILL.md

@@ -0,0 +1,53 @@
+---
+name: riligar-dev-landing-page
+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.
+license: Apache-2.0
+---
+
+# RiLiGar Landing Page Architect
+
+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.
+
+## 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.
+
+## 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.
+
+## Como Usar esta Skill
+
+Sempre que gerar ou editar uma landing page:
+
+1.  **Analise os Assets:** Consulte as imagens em `assets/` para capturar padrões de espaçamento, hierarquia visual e tratamento de componentes que já funcionam no ecossistema RiLiGar.
+2.  **Referência Cruzada:** Use os `original-*.webp` para layouts modulares e os `screencapture-*.webp` para fluxos completos de página.
+
+## Checklist de Conversão (The "Grand-Slam" Verification)
+
+Antes de validar qualquer Landing Page, verifique:
+
+1.  [ ] **The 3-Second Rule:** O Hero deixa claro _o que é_, _para quem é_ e _qual o benefício_ em 3 segundos?
+2.  [ ] **CTA Contrast:** O botão de chamada para ação se destaca visualmente mas segue o tema?
+3.  [ ] **Social Proof:** Existe prova social visível "above the fold" ou logo após?
+4.  [ ] **Objection Handling:** A seção de FAQ ou Benefícios mata as principais objeções?
+5.  [ ] **Mobile Flow:** A experiência em mobile é tão fluida quanto no desktop? (Stacking correto).
+6.  [ ] **Scannability:** O texto é escaneável? (Headlines fortes, bullet points, ícones).
+7.  [ ] **Speed:** Imagens otimizadas e código limpo (sem bloat).
+8.  [ ] **RiLiGar Compliance:** Segue o design system? (Sem CSS inline, Mantine nativo).
+
+## Princípios de Layout
+
+1.  **Single Column Mobile:** Em mobile, tudo deve ser uma coluna única confortável.
+2.  **Alternating Layouts:** Use padrões "Zig-Zag" (Imagem esq/Texto dir -> Texto esq/Imagem dir) para manter o interesse.
+3.  **Bento Grids:** Para features, use grids estilo Bento para densidade de informação organizada.
+4.  **Whitespace is Luxury:** Use muito espaço em branco para dar sofisticação e foco.

package/.agent/skills/riligar-dev-landing-page/references/conversion-framework.md

@@ -0,0 +1,39 @@
+# Conversion Frameworks & Psychology
+
+Use these psychological frameworks to structure the narrative flow of the Landing Page.
+
+## 1. The "Why" Before "How" (Golden Circle)
+
+Start with the belief/mission (Why), then the process (How), then the product (What).
+
+-   **Why:** "We believe design should be invisible."
+-   **How:** "By removing all CSS files and focusing on content."
+-   **What:** "A headless UI library for minimalists."
+
+## 2. P.A.S. (Problem - Agitation - Solution)
+
+Best for SaaS and solution-oriented products.
+
+1.  **Problem:** Identify the pain point clearly.
+    -   _Ex:_ "Managing design systems is a nightmare of broken consistency."
+2.  **Agitation:** Twist the knife. Make the problem feel urgent.
+    -   _Ex:_ "Every new hire breaks the UI. You spend more time reviewing CSS than shipping features."
+3.  **Solution:** Present your product as the only logical cure.
+    -   _Ex:_ "RiLiGar enforces consistency via props. No CSS files allowed."
+
+## 3. A.I.D.A. (Attention - Interest - Desire - Action)
+
+Classic structure for longer sales pages.
+
+1.  **Attention:** Hook them in the Hero section with a big promise.
+2.  **Interest:** Keep them reading with interesting facts or counter-intuitive insights.
+3.  **Desire:** Make them want it using social proof and benefit-focused copy.
+4.  **Action:** Tell them exactly what to do (CTA).
+
+## 4. The "Slippery Slope"
+
+The goal of every sentence is to get the user to read the next sentence.
+
+-   Short paragraphs.
+-   High contrast headings.
+-   Visual interruptions (images/icons) to break monotony.

package/.agent/skills/riligar-dev-landing-page/references/copywriting-guide.md

@@ -0,0 +1,38 @@
+# Copywriting Guide for High Conversion
+
+Words sell. Design just builds trust so the words can do their job.
+
+## Tone of Voice: "The Confident Expert"
+
+-   **Direct:** "Get more leads." (Not: "We help you try to get more leads")
+-   **Concise:** Remove every unnecessary word. Adverbs are the enemy.
+-   **You-Centric:** Use "You" 3x more than "We".
+
+## Headline Formulas (The 80/20)
+
+80% of people read the headline. 20% read the rest.
+
+1.  **The "Big Benefit" + "Timeframe":**
+    -   _Ex:_ "Build your landing page in 5 minutes."
+2.  **The "Value" without "Pain":**
+    -   _Ex:_ "Get SEO-ready content without the writer's block."
+3.  **The "Desirable Outcome" for "Specific Audience":**
+    -   _Ex:_ "Automated bookkeeping for creative agencies."
+
+## Power Words & Phrases
+
+Sprinkle these for emotional impact:
+
+-   **Trust:** Guaranteed, Proven, Secure, endorsed, Certified.
+-   **Urgency:** Now, Today, Instant, Limited, Deadline.
+-   **Exclusivity:** Access, VIP, Secret, Unveil, Join.
+-   **Ease:** Effortless, Simple, Roadmap, Step-by-step.
+
+## Formatting for Scanners
+
+People don't read; they scan.
+
+-   **Bold** key benefits.
+-   Use **Bullet points** for lists > 3 items.
+-   Use **Subheads** to break up long text blocks.
+-   Keep lines under 60-80 characters for readability.

package/.agent/skills/riligar-dev-landing-page/references/section-blueprints.md

@@ -0,0 +1,56 @@
+# Section Blueprints (Golden Standards)
+
+Use these structural patterns to ensure high-quality layouts without reinventing the wheel.
+
+## 1. The "High-Impact" Hero
+
+**Goal:** clarity in < 3 seconds.
+
+-   **Layout:** Center aligned (for focus) or Split (Left Text / Right Visual).
+-   **Components:**
+    -   `Badge` (Pill): "V2.0 Now Available" (Top)
+    -   `Title` (H1): 40-60 chars max. Tight line-height.
+    -   `Text` (Subheadline): Dimmed color, larger size (lg/xl).
+    -   `Group`: Primary CTA + Secondary CTA (Video demo or "Learn more").
+    -   `Image/Container`: High-quality visual or app screenshot below or to the side.
+
+## 2. Bentham Grids (Feature Mosaic)
+
+**Goal:** Show high density of features without overwhelming.
+
+-   **Layout:** `SimpleGrid` or `Grid` with cards of different spans.
+-   **Card Style:**
+    -   `Paper` with `withBorder`.
+    -   Icon on top left.
+    -   Title + Description.
+    -   _Optional:_ Mini-visual inside the card.
+-   **Pattern:** Main feature takes 2 columns, minor features take 1.
+
+## 3. "Wall of Love" (Social Proof)
+
+**Goal:** Overwhelming trust.
+
+-   **Layout:** Masonry or Marquee.
+-   **Components:**
+    -   `Marquee`: Logos of companies (grayscale, opacity 0.5 -> 1 on hover).
+    -   `Card` (Testimonial): User avatar + Name + twitter handle + Short quote.
+
+## 4. The "No-Brainer" Pricing
+
+**Goal:** Guide to the preferred plan.
+
+-   **Layout:** 3 Cards. Middle one popped out (scale 1.05) or highlighted border.
+-   **Components:**
+    -   `Card`:
+        -   Title ("Pro").
+        -   Price ("$29/mo").
+        -   List (`List` with `List.Item` and Check icon).
+        -   CTA Button (`fullWidth`).
+-   **Psychology:** Anchor with a high price, make the middle one the transparent "best value".
+
+## 5. FAQ (Objection Handling)
+
+**Goal:** Answer unasked questions to remove friction.
+
+-   **Layout:** `Accordion` (skin `neutral` or separated).
+-   **Content:** Address: Refund policy, Support, Technical reqs.

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

@@ -0,0 +1,200 @@
+---
+name: riligar-dev-seo
+description: Implementação de infraestrutura de SEO técnico seguindo a stack RiLiGar (React, Vite, Bun, Elysia). Use esta skill para configurar sitemaps, robots.txt, meta tags, OpenGraph, dados estruturados (JSON-LD) e URLs canônicas em projetos JavaScript.
+allowed-tools: Read, Glob, Grep, Write, Edit, Bash, WebSearch
+---
+
+# SEO Técnico (RiLiGar Tech Stack)
+
+## Arquivos da Skill
+
+Esta skill utiliza os seguintes arquivos de referência:
+
+- **SKILL.md** (este arquivo): Guia central de implementação
+- **references/implementation.md**: Templates de código para React/Vite e Bun/Elysia
+- **references/checklist.md**: Checklist pré-lançamento
+- **references/structured-data.md**: Templates de markup JSON-LD
+
+## O que esta Skill cobre
+
+1. **Sitemaps** → Geração dinâmica via Bun/Elysia ou estática via Vite/`public`.
+2. **Robots.txt** → Diretivas para crawlers.
+3. **Meta Tags** → OpenGraph, Twitter Cards, descrições e títulos.
+4. **Dados Estruturados** → Schema markup (JSON-LD) para rich snippets.
+5. **URLs Canônicas** → Prevenção de conteúdo duplicado.
+6. **Performance & Vitals** → Otimização para os Core Web Vitals.
+
+---
+
+# Part 1: Implementação de Sitemap
+
+Em projetos RiLiGar, o sitemap pode ser estático (em `public/sitemap.xml`) ou dinâmico via backend Elysia.
+
+## Sitemap Estático (Vite `public/sitemap.xml`)
+
+Para sites institucionais simples:
+
+```xml
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://riligar.com/</loc>
+    <lastmod>2025-01-20</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>1.0</priority>
+  </url>
+</urlset>
+```
+
+## Sitemap Dinâmico (Elysia /backend)
+
+Se o site tiver conteúdo dinâmico (postagens de blog, produtos), crie um endpoint no Elysia:
+
+```javascript
+// src/routes/seo.js
+import { Elysia } from 'elysia'
+import { db } from '../database/db'
+
+export const seoRoutes = new Elysia().get('/sitemap.xml', async ({ set }) => {
+    const posts = await db.query.posts.findMany()
+    const baseUrl = 'https://riligar.com'
+
+    const xml = `<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+    <url>
+        <loc>${baseUrl}</loc>
+        <priority>1.0</priority>
+    </url>
+    ${posts
+        .map(
+            post => `
+    <url>
+        <loc>${baseUrl}/blog/${post.slug}</loc>
+        <lastmod>${post.updatedAt.toISOString().split('T')[0]}</lastmod>
+        <priority>0.7</priority>
+    </url>`
+        )
+        .join('')}
+</urlset>`
+
+    set.headers['Content-Type'] = 'application/xml'
+    return xml
+})
+```
+
+---
+
+# Part 2: Implementação de Robots.txt
+
+O `robots.txt` deve ficar na pasta `public/` do frontend ou ser servido pelo backend.
+
+```text
+User-agent: *
+Allow: /
+Disallow: /api/
+Disallow: /dashboard/
+Disallow: /admin/
+
+# Block AI training bots
+User-agent: GPTBot
+Disallow: /
+User-agent: ChatGPT-User
+Disallow: /
+User-agent: CCBot
+Disallow: /
+
+Sitemap: https://riligar.com/sitemap.xml
+```
+
+---
+
+# Part 3: Metadata e Meta Tags
+
+Em SPAs (Single Page Applications) React/Vite, use metadados estáticos no `index.html` ou gerencie dinamicamente.
+
+## No index.html (Baseline)
+
+```html
+<title>RiLiGar — Sua Tagline</title>
+<meta
+    name="description"
+    content="Descrição chamativa de 150-160 caracteres."
+/>
+
+<!-- OpenGraph -->
+<meta
+    property="og:type"
+    content="website"
+/>
+<meta
+    property="og:title"
+    content="RiLiGar — Sua Tagline"
+/>
+<meta
+    property="og:description"
+    content="Descrição para redes sociais."
+/>
+<meta
+    property="og:image"
+    content="https://riligar.com/og-image.png"
+/>
+
+<!-- Twitter -->
+<meta
+    name="twitter:card"
+    content="summary_large_image"
+/>
+<meta
+    name="twitter:title"
+    content="RiLiGar — Sua Tagline"
+/>
+<meta
+    name="twitter:image"
+    content="https://riligar.com/og-image.png"
+/>
+```
+
+## Dinâmico (Server-side Injection no Elysia)
+
+Para melhores resultados de SEO em conteúdo dinâmico, o Elysia pode injetar as tags no HTML enviado:
+
+```javascript
+// Exemplo simples de injeção no Elysia
+app.get('/*', async ({ path }) => {
+    let html = await Bun.file('dist/index.html').text()
+
+    if (path.startsWith('/blog/')) {
+        const post = await getPost(path.split('/')[2])
+        html = html.replace('<title>RiLiGar</title>', `<title>${post.title} | RiLiGar</title>`)
+        html = html.replace('content="RiLiGar description"', `content="${post.excerpt}"`)
+    }
+
+    return new Response(html, { headers: { 'Content-Type': 'text/html' } })
+})
+```
+
+---
+
+# Part 4: Variáveis de Ambiente
+
+Sempre configure a URL base:
+
+```bash
+# .env
+VITE_SITE_URL=https://riligar.com
+SITE_URL=https://riligar.com
+```
+
+---
+
+# Checklist de Implementação
+
+1. [ ] `robots.txt` configurado e bloqueando `/admin` e `/dashboard`.
+2. [ ] `sitemap.xml` gerado e acessível.
+3. [ ] Meta tags OpenGraph e Twitter presentes em todas as páginas públicas.
+4. [ ] Imagem OG de 1200x630px em `public/og-image.png`.
+5. [ ] Canonical URLs apontando para a versão preferencial.
+6. [ ] Dados estruturados (JSON-LD) para Organização no Home.
+7. [ ] Headers de performance (preload de fontes) no index.html.
+
+Para detalhes específicos, consulte os arquivos na pasta `references/`.

package/.agent/skills/riligar-dev-seo/references/checklist.md

@@ -0,0 +1,87 @@
+# Checklist de SEO Técnico (RiLiGar)
+
+## Antes do Desenvolvimento
+
+- [ ] Definir `SITE_URL` (com ou sem www) em todos os ambientes.
+- [ ] Garantir que HTTPS é obrigatório.
+- [ ] Planejar estrutura de URLs (Ex: `/blog/[slug]` vs `/p/[slug]`).
+
+---
+
+## Arquivos Essenciais
+
+### Sitemap (`sitemap.xml`)
+
+- [ ] Arquivo acessível via `/sitemap.xml`.
+- [ ] Inclui todas as páginas públicas e indexáveis.
+- [ ] Exclui páginas privadas/auth (`/dashboard`, `/admin`).
+- [ ] `lastmod` reflete a data real de atualização do conteúdo.
+- [ ] Prioridades fazem sentido (1.0 Home, 0.8 principais).
+- [ ] Conteúdo dinâmico incluído via geração no backend (se aplicável).
+
+### Robots.txt (`robots.txt`)
+
+- [ ] Arquivo bloqueia indexação em ambientes de staging/dev.
+- [ ] Permite crawlers em produção.
+- [ ] Bloqueia caminhos sensíveis: `/api/`, `/dashboard/`, `/admin/`.
+- [ ] Não bloqueia CSS/JS/Imagens necessários para renderização.
+- [ ] Referencia a URL correta do sitemap.
+- [ ] Política de bots de IA definida conforme necessidade.
+
+### Metadados Base (`index.html`)
+
+- [ ] `<title>` padrão configurado com a marca.
+- [ ] Meta Descrição atraente (150-160 caracteres).
+- [ ] OpenGraph configurado (`og:title`, `og:description`, `og:image`, `og:type`).
+- [ ] Twitter Card configurado (`twitter:card`, `twitter:image`).
+- [ ] URL Canônica definida dinamicamente ou estaticamente.
+
+---
+
+## Imagens e Ativos
+
+- [ ] OG Image padrão em `public/og-image.png`.
+- [ ] OG Image com dimensões exatas: 1200x630 pixels.
+- [ ] Favicon presente em múltiplos formatos (`.ico`, `.png`).
+- [ ] Apple Touch Icon presente para iOS.
+
+---
+
+## Performance (Core Web Vitals)
+
+Os Core Web Vitals impactam diretamente o ranking:
+
+### LCP (Largest Contentful Paint) < 2.5s
+
+- [ ] Heros otimizados e sem lazy load (deve carregar rápido).
+- [ ] Fontes críticas com `font-display: swap` ou preloading.
+- [ ] Imagens pesadas em formato `.webp`.
+
+### INP (Interaction to Next Paint) / FID < 200ms
+
+- [ ] Bundle de JavaScript otimizado (sem excessos).
+- [ ] Scripts de terceiros (Analytics, Pixels) carregados com `defer`.
+
+### CLS (Cumulative Layout Shift) < 0.1
+
+- [ ] Imagens têm `width` e `height` definidos no HTML/CSS.
+- [ ] Espaços reservados para anúncios ou elementos dinâmicos.
+
+---
+
+## Dados Estruturados (JSON-LD)
+
+- [ ] Schema `Organization` na Homepage.
+- [ ] Schema `Article` em posts de blog.
+- [ ] Schema `Product` em páginas de produto/serviço.
+- [ ] Testado no [Google Rich Results Test](https://search.google.com/test/rich-results).
+
+---
+
+## Erros Comuns a Evitar
+
+1. **Bloquear JS em robots.txt:** Impede os bots de "verem" o site React.
+2. **Meta descrições duplicadas:** Cada página deve ter uma descrição única.
+3. **Falta de URL Canônica:** Gera problema de conteúdo duplicado.
+4. **Placeholder Text:** Nunca deixar "Lorem Ipsum" no ar.
+5. **Esquecer de liberar o sitemap no auth:** Crawlers não conseguem ler o arquivo.