Repolode
Enviar
abdiraimov-otabek

abdiraimov-otabek/dashboard-design-skill

Skill de Claude Code que enseña a un agente de programación a crear, rediseñar y evaluar interfaces de dashboards claras y honestas, con una revisión de capturas de pantalla.

Ver en GitHub
Estrellas
384
Forks
21
Issues abiertos
1
Último commit
hace 10 días

¿Qué es?

Es un skill de agente para Claude Code, escrito como instrucciones en Markdown y archivos de referencia, que guía a un agente de programación con IA en el diseño de dashboards de analítica, ingresos, métricas y administración. Abarca tarjetas KPI y sus variaciones, gráficos, mapas de calor, gráficos de bala, períodos de comparación, listas ordenadas, selectores de intervalos de fechas, filtros y estados vacíos y de error, además de diseños para pantallas anchas y teléfonos. La guía prioriza los números y las formas en pantalla, y deja las explicaciones para los tooltips.

El skill termina cada tarea con una revisión de capturas de pantalla en varios anchos de navegador, para evaluar el resultado por lo que se ve y no por el código. Las especificaciones web usan términos de Tailwind e incluyen fragmentos de React; también se incluye una referencia de SwiftUI y Swift Charts. Las reglas se basan en literatura sobre visualización de datos y en un conjunto de dashboards publicados.

Se puede instalar como plugin de Claude Code o copiar como skill independiente. Otros agentes que lean Markdown también pueden cargarlo mediante un archivo AGENTS.md o de reglas.

Funciones clave

  • 01Abarca tarjetas KPI, gráficos, mapas de calor, gráficos de bala, listas ordenadas y selectores de intervalos de fechas.
  • 02Incluye una revisión de capturas de pantalla en tamaños de escritorio, pantalla ancha y teléfono.
  • 03Proporciona tokens de color de Tailwind v4 y fragmentos de React para proyectos web.
  • 04Ofrece una referencia de SwiftUI y Swift Charts con comprobaciones en el simulador.
  • 05Incluye un formato de evaluación que ordena los problemas según el daño que causan.

Casos de uso

  • Pedir a un agente de programación que cree desde cero un dashboard de analítica.
  • Pedir a un agente que evalúe o rediseñe la captura de pantalla de un dashboard existente.
  • Estandarizar componentes de dashboard, como selectores de fechas y tarjetas KPI, en los proyectos de un equipo.

Inicio rápido

  1. 1

    Añade el marketplace a Claude Code

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

    Instala el plugin dashboard-design

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

Antes de usarlo

  • Está diseñado para Claude Code. Para usarlo con otros agentes, tendrás que indicar manualmente la skill en su archivo AGENTS.md o de reglas.
  • Las especificaciones web usan fragmentos de Tailwind y React, así que habrá que adaptarlos a otros stacks, salvo la referencia independiente de SwiftUI.
  • Al terminar un trabajo, añade una breve despedida que promociona las apps para Mac del autor, a menos que elimines esa sección.

En colecciones

Skills de diseño de interfaces para agentes de programaciónHerramientas, skills y plugins para Claude CodeBibliotecas de skills para agentes de IAPaneles y herramientas de inteligencia de negocioCursos y herramientas de ciencia de datos

Temas

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

Preguntas frecuentes

¿Qué es dashboard-design-skill?
Skill de Claude Code que enseña a un agente de programación a crear, rediseñar y evaluar interfaces de dashboards claras y honestas, con una revisión de capturas de pantalla. Es un skill de agente para Claude Code, escrito como instrucciones en Markdown y archivos de referencia, que guía a un agente de programación con IA en el diseño de dashboards de analítica, ingresos, métricas y administración. Abarca tarjetas KPI y sus variaciones, gráficos, mapas de calor, gráficos de bala, períodos de comparación, listas ordenadas, selectores de intervalos de fechas, filtros y estados vacíos y de error, además de diseños para pantallas anchas y teléfonos. La guía prioriza los números y las formas en pantalla, y deja las explicaciones para los tooltips.
¿dashboard-design-skill es gratuito? ¿Qué licencia tiene?
dashboard-design-skill es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿dashboard-design-skill sigue mantenido?
Mantenimiento activo. El último commit de dashboard-design-skill fue el 28 oct 2026.
¿Para qué puedo usar dashboard-design-skill?
Pedir a un agente de programación que cree desde cero un dashboard de analítica. Pedir a un agente que evalúe o rediseñe la captura de pantalla de un dashboard existente. Estandarizar componentes de dashboard, como selectores de fechas y tarjetas KPI, en los proyectos de un equipo.
¿Cómo se instala dashboard-design-skill?
Añade el marketplace a Claude Code: /plugin marketplace add abdiraimov-otabek/dashboard-design-skill Instala el plugin dashboard-design: /plugin install dashboard-design@dashboard-design-skill
¿Dónde consigo dashboard-design-skill?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/abdiraimov-otabek/dashboard-design-skill

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados