Communitygithub.com

andyed/muriel

Ensina Claude a usar uma dúzia de ferramentas de construção de visualizações — raster, SVG, web, vídeo, terminal, interativo, gráficos de gaze, mapas de calor, figuras científicas. Tokens de marca e auditoria de contraste 8:1 incluídos.

O que é muriel?

O skill andyed/muriel transforma o Claude em um poderoso construtor de visualizações, suportando uma variedade de tipos gráficos como raster, SVG, web, vídeo, terminal, gráficos interativos, mapas de gaze, mapas de calor e figuras científicas. Ele é especialmente útil para desenvolvedores e designers que precisam gerar rapidamente gráficos personalizados, desde protótipos de alta fidelidade até visualizações de dados complexas. O skill inclui tokens de marca para personalização visual e uma auditoria de contraste integrada que garante acessibilidade seguindo a proporção 8:1 (WCAG AAA). Funciona em plataformas compatíveis com Claude Code, Cursor e Codex, permitindo que o agente crie visualizações diretamente a partir de comandos em linguagem natural. Isso reduz o tempo de iteração e elimina a necessidade de alternar entre múltiplas ferramentas, tornando o processo de design gráfico mais fluido e acessível.

Funciona com✓Claude Code~Codex CLI~Cursor
npx skills add andyed/muriel

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

O que muriel faz?

Ensina Claude a usar uma dúzia de ferramentas de construção de visualizações — raster, SVG, web, vídeo, terminal, interativo, gráficos de gaze, mapas de calor, figuras científicas. Tokens de marca e auditoria de contraste 8:1 incluídos.

Recursos

  • Raster: Geração e edição de imagens raster (PNG, JPEG).
  • SVG: Criação e manipulação de gráficos vetoriais escaláveis.
  • Web: Produção de visualizações baseadas em HTML/CSS/JavaScript.
  • Vídeo: Geração de animações e saída em vídeo.
  • Terminal: Visualizações prontas para terminal (ASCII, ANSI).
  • Interativo: Gráficos interativos para exploração de dados.
  • Gráficos de gaze (gaze plots): Mapeamento de movimentos oculares.
  • Mapas de calor (heatmaps): Representação de densidade e intensidade de dados.
  • Figuras científicas: Formatos adequados para publicações acadêmicas.

Auditoria de Contraste 8:1

O skill inclui uma verificação automática de contraste que garante que todas as visualizações geradas respeitem a proporção de contraste mínima de 8:1 (nível AAA do WCAG para texto normal). Isso é feito analisando as combinações de cores usadas e ajustando-as conforme necessário.

Tokens de Marca

Você pode fornecer tokens de marca (cores primárias, secundárias, logotipos, fontes) para que as visualizações sigam a identidade visual da sua empresa ou projeto. O skill aplicará automaticamente esses tokens às saídas.

Exemplos de Uso

# Gere um gráfico de barras em SVG com contraste 8:1
> Crie um gráfico de barras mostrando vendas trimestrais em SVG

# Produza um mapa de calor interativo em HTML
> Desenhe um mapa de calor de cliques para uma página de checkout

# Crie uma figura científica no formato PNG
> Ilustre a relação entre tempo de reação e precisão em ensaios

Plataformas Suportadas

  • Claude Code
  • Cursor
  • Codex

Como Usar

  1. Ative o skill andyed/muriel no seu agente.
  2. Faça uma solicitação em linguagem natural descrevendo a visualização desejada.
  3. O agente escolherá a ferramenta mais adequada, aplicará a auditoria de contraste e os tokens de marca se fornecidos.
  4. Receba o arquivo gerado (ou código-fonte) pronto para uso.

Habilidades Relacionadas