Repolode
Enviar
abdiraimov-otabek

abdiraimov-otabek/dashboard-design-skill

Uma skill do Claude Code que ensina um agente de programação a criar, reformular e avaliar interfaces de dashboard limpas e honestas, com uma etapa de QA por screenshot.

Ver no GitHub
Estrelas
384
Forks
21
Issues abertas
1
Último commit
há 10 dias

O que é?

Esta é uma skill de agente para o Claude Code, escrita como instruções e arquivos de referência em Markdown, que orienta um agente de programação com IA a projetar dashboards de análise, receita, métricas e administração. Ela aborda cards de KPI e variações, gráficos, mapas de calor, gráficos de bala, períodos de comparação, listas ordenadas, seletores de intervalo de datas, filtros, estados vazios e de erro, além de layouts para telas largas e celulares. As orientações priorizam números e formas na tela, deixando as explicações para os tooltips.

A skill encerra cada trabalho com uma etapa de QA por screenshot em várias larguras de navegador, para que o resultado seja avaliado pelo que está visível, não pelo código. As especificações web usam termos do Tailwind e trechos de React, e também incluem uma referência de SwiftUI e Swift Charts. As regras se baseiam na literatura de visualização de dados e em um conjunto de dashboards já lançados.

Ela pode ser instalada como plugin do Claude Code ou copiada como uma skill simples, e outros agentes que leem Markdown podem carregá-la por meio de um arquivo AGENTS.md ou de regras.

Recursos principais

  • 01Aborda cards de KPI, gráficos, mapas de calor, gráficos de bala, listas ordenadas e seletores de intervalo de datas.
  • 02Inclui uma etapa de QA por screenshot em larguras de desktop, telas largas e celulares.
  • 03Oferece tokens de cores do Tailwind v4 e trechos de React para projetos web.
  • 04Oferece uma referência de SwiftUI e Swift Charts com verificações no simulador.
  • 05Inclui um formato de avaliação que ordena os problemas pelo impacto.

Casos de uso

  • Pedir a um agente de programação que crie um dashboard de análise do zero.
  • Pedir a um agente que avalie ou reformule o screenshot de um dashboard existente.
  • Padronizar componentes de dashboard, como seletores de data e cards de KPI, nos projetos de uma equipe.

Início rápido

  1. 1

    Adicione o marketplace ao Claude Code

    /plugin marketplace add abdiraimov-otabek/dashboard-design-skill
  2. 2

    Instale o plugin dashboard-design

    /plugin install dashboard-design@dashboard-design-skill

Antes de usar

  • Foi desenvolvido para o Claude Code. Para usar com outros agentes, é preciso apontar manualmente para a skill no arquivo AGENTS.md ou de regras.
  • As especificações web usam trechos de Tailwind e React, então precisam ser adaptadas para outras stacks, exceto pela referência separada de SwiftUI.
  • Ao concluir um trabalho, ele adiciona uma breve mensagem de despedida promovendo os apps para Mac do autor, a menos que você remova essa seção.

Em coleções

Skills de design de interface para agentes de programaçãoFerramentas, skills e plugins para Claude CodeBibliotecas de skills para agentes de IAPainéis e ferramentas de business intelligenceCursos e ferramentas de ciência de dados

Tópicos

#agent-skills#claude-code#dashboard-design#data-visualization#ui-design#tailwindcss#analytics#claude-skill#dashboard

Perguntas frequentes

O que é dashboard-design-skill?
Uma skill do Claude Code que ensina um agente de programação a criar, reformular e avaliar interfaces de dashboard limpas e honestas, com uma etapa de QA por screenshot. Esta é uma skill de agente para o Claude Code, escrita como instruções e arquivos de referência em Markdown, que orienta um agente de programação com IA a projetar dashboards de análise, receita, métricas e administração. Ela aborda cards de KPI e variações, gráficos, mapas de calor, gráficos de bala, períodos de comparação, listas ordenadas, seletores de intervalo de datas, filtros, estados vazios e de erro, além de layouts para telas largas e celulares. As orientações priorizam números e formas na tela, deixando as explicações para os tooltips.
dashboard-design-skill é gratuito? Qual é a licença?
dashboard-design-skill é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
dashboard-design-skill ainda é mantido?
Manutenção ativa. O último commit de dashboard-design-skill foi em 28 de out. de 2026.
Para que posso usar dashboard-design-skill?
Pedir a um agente de programação que crie um dashboard de análise do zero. Pedir a um agente que avalie ou reformule o screenshot de um dashboard existente. Padronizar componentes de dashboard, como seletores de data e cards de KPI, nos projetos de uma equipe.
Como instalar dashboard-design-skill?
Adicione o marketplace ao Claude Code: /plugin marketplace add abdiraimov-otabek/dashboard-design-skill Instale o plugin dashboard-design: /plugin install dashboard-design@dashboard-design-skill
Onde consigo dashboard-design-skill?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/abdiraimov-otabek/dashboard-design-skill

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados