riligar-dev-website
npx machina-cli add skill riligar/agents-kit/riligar-dev-website --openclawRiLiGar 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.
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.
Guia de Referência
Para construir páginas de alta conversão:
- Conversion Frameworks: Estruturas psicológicas (AIDA, PAS) e fluxo narrativo.
- Section Blueprints: Layouts "Gold Standard" para seções críticas (Hero, Bento Grids, Pricing).
- Copywriting Guide: Tom de voz e padrões de texto persuasivo.
- Visual Knowledge Base: 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:
- 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. - Referência Cruzada: Use os
original-*.webppara layouts modulares e osscreencapture-*.webppara fluxos completos de página.
Checklist de Conversão (The "Grand-Slam" Verification)
Antes de validar qualquer Landing Page, verifique:
- The 3-Second Rule: O Hero deixa claro o que é, para quem é e qual o benefício em 3 segundos?
- CTA Contrast: O botão de chamada para ação se destaca visualmente mas segue o tema?
- Social Proof: Existe prova social visível "above the fold" ou logo após?
- Objection Handling: A seção de FAQ ou Benefícios mata as principais objeções?
- Mobile Flow: A experiência em mobile é tão fluida quanto no desktop? (Stacking correto).
- Scannability: O texto é escaneável? (Headlines fortes, bullet points, ícones).
- Speed: Imagens otimizadas e código limpo (sem bloat).
- RiLiGar Compliance: Segue o design system? (Sem CSS inline, Mantine nativo).
Princípios de Layout
- Single Column Mobile: Em mobile, tudo deve ser uma coluna única confortável.
- Alternating Layouts: Use padrões "Zig-Zag" (Imagem esq/Texto dir -> Texto esq/Imagem dir) para manter o interesse.
- Bento Grids: Para features, use grids estilo Bento para densidade de informação organizada.
- Whitespace is Luxury: Use muito espaço em branco para dar sofisticação e foco.
Source
git clone https://github.com/riligar/agents-kit/blob/prod/.agent/skills/riligar-dev-website/SKILL.mdView on GitHub Overview
Specialist in crafting high-conversion landing pages with the RiLiGar Design System. Builds marketing and sales pages, structures conversion flows using AIDA or PAS, and implements high-trust components like Hero, Social Proof, and Pricing, paired with persuasive copy.
How This Skill Works
Leverages a minimalist Content-First aesthetic and RiLiGar tokens to keep UX clean while driving conversions. Begins with asset analysis in assets/ and cross-referencing original-*.webp and screencapture-*.webp to inform modular layouts, then applies established frameworks and copy guidelines to assemble sections (Hero, Bento Grids, Pricing) and a compelling narrative.
When to Use It
- Creating marketing/sales landing pages that convert
- Structuring conversion flows with AIDA or PAS
- Implementing high-trust sections (Hero, social proof, pricing) using RiLiGar components
- Writing persuasive copy aligned to the RiLiGar voice
- Auditing pages for RiLiGar compliance and accessibility
Quick Start
- Step 1: Analyze assets in the assets/ folder to capture spacing, hierarchy, and component treatment
- Step 2: Cross-check original-*.webp for modular layouts and screencapture-*.webp for full-page flows
- Step 3: Validate against the Grand-Slam checklist and RiLiGar compliance (3-second rule, contrast, social proof, FAQs, mobile stacking)
Best Practices
- The 3-Second Rule: ensure the hero communicates what it is, for whom, and the benefit within 3 seconds
- CTA Contrast: make the call-to-action visually distinct while maintaining brand theme
- Social Proof: show proof above the fold or immediately after to build trust
- Objection Handling: include FAQs or Benefits to address main blockers
- Mobile-first Stacking: ensure single-column layout and smooth flow on mobile, with proper whitespace
Example Use Cases
- SaaS landing page with Hero, value-focused copy, social proof, and pricing tiers
- Marketing page using AIDA/PAS with a Zig-Zag layout for images and text
- Pricing page employing Bento Grid for dense yet readable feature blocks
- Product launch page calibrated for quick scroll and strong CTA
- Mobile-first variant that matches desktop flow using RiLiGar spacing rules
