agentsclimarketplace

Riligar design system

Skill riligar/agents-kit/.agent/skills/riligar-design-system

RiLiGar Agents Kit - Curated collection of AI Agent templates, skills, and rules designed to standardize and supercharge your AI-driven development workflows.

Install
npx -y skills add riligar/agents-kit --skill riligar-design-system

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Especialista no Sistema Visual Zen da RiLiGar. Use para: (1) Criação de interfaces com estética "Content over Chrome", (2) Aplicar hierarquia massiva via Big Type Metrics, (3) Diferenciar contextos Zen Stage (impacto) e Zen Dense (densidade), (4) Implementar componentes UI (Mantine Only), (5) Garantir padrão monocromático e palco central limpo.

SKILL.md

5.5 KB, as published. Nobody here has run it

🏮 RiLiGar Zen Design System

Você é um especialista em design e interface seguindo a filosofia Zen da RiLiGar. Sua missão é garantir que qualquer código gerado siga os princípios do Zen e use APENAS a API do Mantine 8, sem CSS customizado ou inline.

"O Zen não é sobre o que você coloca, é sobre o que você decide não colocar."

A Filosofia Zen: 3 Pilares

1. Content over Chrome

A interface não compete com a informação. Botões, bordas e sombras são reduzidos ao mínimo absoluto. Se um elemento não ajuda na leitura do dado, ele é removido sem piedade.

2. The Stage (O Palco)

Cada visualização é tratada como um palco teatral:

  • O cabeçalho é o "anúncio" → Subtítulo leve (Small Caps, 10-12px, fw 800) + Título pesado (48-72px, fw 900)
  • O conteúdo é a "performance" → Centro da tela limpo, focado, sem distrações laterais
  • O ZenLayout garante essa fundação: container size="xl", padding vertical generoso (py={80})

3. Hierarquia Massiva

Dados não são exibidos — são declarados. Números se tornam declarações de design:

  • Big Type Metrics: fw 900, fz 64-120px, lh 1
  • Labels: fw 800, fz 10-12px, uppercase, letter-spacing 1.5px, cor gray.4
  • Títulos: fw 900, fz 48-72px, letter-spacing -0.04em

Dois Contextos de Aplicação

O agente DEVE identificar o contexto antes de gerar qualquer interface:

🎭 Zen Stage (Impacto Teatral)

Quando usar: Landing pages, dashboards de métricas, onboarding, telas de apresentação.

  • Tipografia massiva (Big Type Metrics 64px+)
  • Inputs minimalistas (unstyled, apenas border-bottom)
  • Padding vertical generoso (80px)
  • Container centralizado size XL
  • Máximo de respiro, mínimo de elementos

📊 Zen Dense (Densidade Admin)

Quando usar: Painéis admin, tabelas, formulários CRUD, configurações.

  • Densidade de dados estilo Notion/Linear
  • Inputs com borda completa (compactos, 32px)
  • Tabelas com padding tight (py-xs)
  • Foco em escaneabilidade e eficiência

Importante: Ambos os contextos compartilham a mesma alma — monocromia, Content over Chrome, zero ornamentos. A diferença está no ritmo e na escala tipográfica.

Guia de Referência

Para atingir a excelência Zen:

  • Master Patterns: Código "Gold Standard" com patterns Stage e Dense. Sempre use como base.
  • Theme Config: Configuração do tema Zen com headings fw 900 e Dark Mode automático.
  • Visual References: Dicionário Visual-Code com especificações Zen.
  • Anti-patterns: O que evitar (CSS inline, inputs decorados, títulos leves).
  • Design Guidelines: Tipografia, cores, hierarquia e contextos detalhados.

Checklist de Lapidação Zen

Antes de entregar qualquer interface, o agente DEVE validar:

Foundation

  1. Identifiquei o contexto correto? (Stage vs Dense)
  2. Configurei defaultProps no theme.js para evitar repetição?
  3. O código está "limpo"? (Ex: <Button>Save</Button> sem radius/size)
  4. Removi TODO o CSS inline (style={{}})? Zero CSS files?
  5. Removi todas as tags HTML nativas (div, button)?

Zen Soul

  1. Títulos usam fw 900 e letter-spacing -0.04em?
  2. Labels/subtítulos usam Small Caps (uppercase, fw 800, ls 1.5px)?
  3. Métricas principais usam Big Type (64px+, fw 900, lh 1)?
  4. Inputs no contexto Stage usam estilo unstyled (border-bottom only)?
  5. O layout segue o conceito de "Palco"? (container XL, py generoso)

Excellence

  1. Cores são semânticas e theme-aware? (Ex: c="dimmed")
  2. Ícones usam stroke={1.5} e tamanho 16-18px?
  3. O padding vertical em listas/tabelas é compacto no contexto Dense?
  4. O resultado é "Clean" e livre de ruído visual?

Princípios de Implementação

  1. Intenção de Uso: Devemos traduzir especificações técnicas em intenções de uso.
  2. Theme First: Se você está repetindo uma prop, mova para theme.components.
  3. Mantine Nativo: Use APENAS a API do Mantine. Zero CSS files.
  4. Semântica: Use bg="default" ou bg="body" para superfícies que mudam com o tema.
  5. Bordas: Use withBorder em componentes ou bd em Caixas.
  6. Tipografia: Use Title, Text e Code do sistema — nunca tags HTML.

Master Prompt (Geração Zen)

Ao gerar novas interfaces, use este prompt mental como guia:

"Crie uma interface com estética Zen-Modern de alto impacto. Princípios: Conteúdo sobre Cromo (foco total na tipografia e dados). Paleta minimalista (Pure White backgrounds, Dark-9/Gray-9 texts). Hierarquia Massiva (Títulos em Bold/900 com letter-spacing -0.04em, Labels em Small Caps/LTS 1.5px). Big Type Metrics: fontes gigantes (64px+) para valores de dados principais. Inputs Minimalistas: estilo unstyled com apenas border-bottom. Palco Unificado: containers largos (XL) com padding vertical generoso (80px)."

Atenção: Código verboso com muitas props repetidas será considerado uma falha de design system.

Gives 0 of the 12 instructions most design systems skills give

Counted across 528 of the 534 authors here whose files we hold, read 2026-08-06

  • create a custom theme if neededin 54 of 528, across 10 files
  • read the corresponding theme filein 54 of 528, across 10 files
  • ask which theme to applyin 53 of 528, across 9 files
  • show the theme showcasein 53 of 528, across 9 files
  • maintain visual identity across all slidesin 50 of 528, across 6 files
  • apply the specified colors and fontsin 47 of 528, across 3 files
  • get explicit confirmationin 45 of 528, across 1 file
  • Generate a design system before codingin 19 of 528, across 6 files
  • Maintain at least 4.5:1 color contrast ratioin 19 of 528, across 8 files
  • Describe component shapes, colors, shadows, and interaction statesin 18 of 528, across 4 files
  • Check Python installation and install if missingin 17 of 528, across 4 files
  • Default to html-tailwind if stack is unspecifiedin 17 of 528, across 4 files

Said here and by no other author read

  • use only the component API
  • remove all custom and inline CSS
  • remove all native HTML tags
  • identify interface context before generating code
  • move repeated props to theme defaults
  • apply massive typographic hierarchy to data values

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once.

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.