Agent Skills para Diseño de paneles

Skill de diseño de interfaces frontend que abarca dashboards, UI de producto, jerarquía, accesibilidad, theming y sistemas de diseño con un flujo de trabajo centrado en el oficio. Es ampliamente relevante para el diseño de dashboards, pero no es específico de dashboards.

por pbakaus/impeccable

• Layout & hierarchy

Necesita (declarado): Node.js

Skill de gusto de diseño para la reducción implacable y el oficio en interfaces de usuario, incluidos los dashboards, con tokens, jerarquía, estados y movimiento. Relevante para el oficio de dashboards pero de diseño de interfaces general.

por deeflect/mies

Guía completa de diseño UI/UX para Penpot que cubre sistemas de diseño, dashboards, formularios, navegación, accesibilidad y guías de plataforma. Puede diseñar dashboards, pero es una guía general de UI/UX de Penpot.

por github/awesome-copilot

• Color & access

Construye artefactos visuales pulidos renderizados en el navegador con HTML/CSS/JS/React, incluyendo dashboards, prototipos y visualizaciones de datos. Puede construir dashboards, pero es una skill amplia de ingeniería de diseño web.

por conardli/garden-skills

Establece una dirección de diseño frontend para UI de producción, incluidos los dashboards, abarcando jerarquía, tipografía, color, movimiento y patrones antigénicos. Relevante para la dirección visual de dashboards, pero es diseño frontend general.

por affaan-m/ecc

• Layout & hierarchy
• Color & access

Guía para un diseño visual distintivo e intencional al construir una nueva UI o remodelar una existente. Ayuda con la dirección estética, la tipografía y a tomar decisiones que no se lean como valores predeterminados de plantilla.

por anthropics/skills

• Color & access

Sistema de diseño de UI de telemetría industrial brutalista y táctica con cuadrículas rígidas, escala tipográfica extrema y color utilitario para paneles con gran densidad de datos. Aborda directamente la estética de paneles, pero es un estilo visual específico.

por leonxlnx/taste-skill

• Color & access

Impone una base de UI con criterio propio que corrige problemas de espaciado, jerarquía, tipografía y layout para evitar interfaces generadas por IA de baja calidad. Relevante para el pulido y la jerarquía de dashboards, pero es limpieza general de UI.

por ibelick/ui-skills

Instrumenta el código con logging, métricas, tracing y alertas para que el comportamiento en producción sea visible. Relevante para las facetas de métricas y alertas de los dashboards, pero trata de instrumentación, no de diseño de dashboards.

por addyosmani/agent-skills

Observabilidad en Go que cubre logging estructurado, métricas de Prometheus, trazado con OpenTelemetry, alertas y dashboards de Grafana. Relevante para las facetas de métricas y alertas, pero específico de Go y centrado en la instrumentación.

por samber/cc-skills-golang

Rastrea y calcula KPIs de startups como MRR, churn, CAC/LTV y burn para dashboards de inversores y consejo. Relevante para la faceta de métricas de los dashboards, pero es un framework de métricas, no diseño de dashboards.

por wshobson/agents

Extrae métricas de paneles de analítica y herramientas web internas con el navegador Firecrawl, produciendo resúmenes estructurados de métricas. Relevante para extraer datos de paneles pero no para diseñar paneles.

por firecrawl/firecrawl-workflows

• Metrics

Construye UIs con componentes de Nuxt UI v4 y tematización de Tailwind, incluyendo diseños de panel con barra lateral y paneles. Relevante para la implementación de paneles, pero es una habilidad de biblioteca de componentes.

por onmax/nuxt-skills

• Color & access

Usa esta skill junto con figma-use cuando la tarea implique trasladar una página, vista o diseño de varias secciones de una aplicación a Figma. Disparadores: 'write to Figma', 'create in Figma from code', 'push page to Figma', 'take this app/page and build it in Figma', 'create a screen', 'build a landing page in Figma', 'update the Figma screen to match code'. Esta es la skill de flujo de trabajo preferida siempre que el usuario quiera crear o actualizar una página, pantalla o vista completa en Figma a partir de código o una descripción. Descubre componentes, variables y estilos del sistema de diseño mediante search_design_system, los importa y ensambla pantallas de forma incremental sección por sección usando tokens del sistema de diseño en lugar de valores codificados.

por openai/skills

Usa el servidor Figma MCP para obtener contexto de diseño, capturas de pantalla, variables y recursos desde Figma, y para traducir nodos de Figma a código de producción. Actívalo cuando una tarea involucre URLs de Figma, IDs de nodos, implementación de diseño a código o configuración y solución de problemas de Figma MCP.

por openai/skills

Necesita (declarado): Node.js

Genera reglas personalizadas de sistema de diseño para el código base del usuario. Úsala cuando el usuario diga "create design system rules", "generate rules for my project", "set up design rules", "customize design system guidelines" o quiera establecer convenciones específicas del proyecto para flujos de trabajo de Figma a código. Requiere conexión con el servidor MCP de Figma.

por openai/skills

Necesita (declarado): MCP server

Traduce diseños de Figma a código de aplicación listo para producción con fidelidad visual 1:1. Úsalo al implementar código de UI a partir de archivos de Figma, cuando el usuario mencione "implementar diseño", "generar código", "implementar componente", proporcione URLs de Figma o pida crear componentes que coincidan con las especificaciones de Figma. Para escrituras en el lienzo de Figma mediante `use_figma`, usa `figma-use`.

por openai/skills

Necesita (declarado): Node.js

Extrae un archivo de documentación de diseño DESIGN.md desde un archivo Penpot: una especificación markdown portátil (frontmatter YAML con mapas de tokens de colores/tipografía/redondeo/espaciado/componentes + secciones en prosa: Overview, Colors, Typography, Layout, Shapes, Components, Do's & Don'ts, Iteration Guide, Known Gaps) en el formato design-md, basada en los tokens reales del archivo, los recursos de la biblioteca y los estilos de componentes muestreados — nunca inventados. Solo lectura en el lienzo; escribe un archivo markdown local. Disparadores: 'generate DESIGN.md', 'create a design.md', 'document the design system as markdown', 'export design guidelines', 'extract design documentation', 'design system spec file', 'make a style guide file from this design'.

por penpot/penpot-ai-kit

Revisa un diseño de Penpot frente a su código implementado (un componente fuente o una historia de Storybook) y emite un informe DRIFT estructurado. Úsalo cuando un ingeniero necesite confirmar que la implementación coincide con el diseño: extrae HTML/CSS de una selección, mapea sus tokens/estructura/estados al componente de código, los compara y enumera lo que le falta a cada lado con severidad y una reconciliación. Se degrada con elegancia a una comprobación de tokens del sistema de diseño cuando no se proporciona una fuente de código. Disparadores: 'design to code review', 'does my code match the design', 'design code parity', 'compare Penpot to my component', 'check this against Storybook', 'extract HTML/CSS from this selection', 'find design drift', 'design implementation diff'.

por penpot/penpot-ai-kit

Audita un diseño de Penpot en busca de problemas de GOBERNANZA de sistema de diseño / tokens (distintos de la accesibilidad): colores codificados donde existe un token, espaciado fuera de la cuadrícula, tokens huérfanos/sin resolver/sin usar, valores duplicados y partes desvinculadas que deberían ser instancias de componentes. Produce un informe de severidad y sugiere cambios a tokens semánticos. Disparadores: 'audit tokens', 'find hardcoded colors', 'token governance', 'check design system consistency', 'find off-grid spacing', 'detect raw values', 'are we using tokens correctly'.

por penpot/penpot-ai-kit

Kit de herramientas para dar estilo a artefactos con un tema. Estos artefactos pueden ser diapositivas, documentos, informes, landing pages HTML, etc. Hay 10 temas predefinidos con colores/tipografías que puedes aplicar a cualquier artefacto creado, o puedes generar un tema nuevo sobre la marcha.

por anthropics/skills

• Color & access

Aplica los colores de marca y la tipografía oficiales de Anthropic a cualquier tipo de artefacto que pueda beneficiarse de tener el look-and-feel de Anthropic. Úsalo cuando apliquen colores de marca o guías de estilo, formato visual o estándares de diseño de la empresa.

por anthropics/skills

Consulta recursos de monitoreo de Huawei Cloud, incluidas reglas de alarma, historiales de alarmas y dashboards, mediante scripts de solo lectura. Relevante para dashboards de monitoreo pero específico de Huawei y solo de consulta.

por huaweicloud/huaweicloud-skills

>- Genera Widget de Server-Driven UI (SDUI) de Google Cloud Monitoring y textprotos de Protocol Buffer de XyChart a partir de consultas PromQL o ListTimeSeries resueltas. Úsalo cuando: - Generes textprotos válidos de google.monitoring.dashboard.v1.Widget, que contengan conjuntos de datos PrometheusQuery o TimeSeriesFilter, para usar con la API de Cloud Monitoring Dashboards, gcloud CLI o definiciones declarativas de dashboards. - Sintetices títulos de widgets de Server-Driven UI (SDUI), etiquetas de ejes y tipos de gráfico para consultas Prometheus o ListTimeSeries. No lo uses para: - Descubrimiento de métricas o generación de consultas PromQL. Para esas tareas, usa las skills cloud-monitoring-metric-selection o cloud-monitoring-promql-query.

por google/skills

> Revisa y crea interfaces frontend distintivas y de nivel producción con alta calidad de diseño y cumplimiento del sistema de diseño. Evalúa con tres pilares: insight-to-action sin fricción, artesanía de calidad y construcción confiable. USE FOR: revisiones de PR, revisiones de diseño, auditorías de accesibilidad, verificaciones de cumplimiento del sistema de diseño, diseño frontend creativo, revisión de código UI, revisiones de componentes, verificaciones de diseño responsivo, pruebas de temas y creación de UI memorable. DO NOT USE FOR: revisiones de API backend, revisiones de esquemas de base de datos, trabajo de infraestructura o DevOps, lógica de negocio pura sin UI o código no frontend.

por microsoft/skills

• Color & access

Diseña pantallas de calidad de producción en Penpot a partir de un brief, como un diseñador visual sénior: reutilizando el sistema de diseño existente (tokens + componentes) y ensamblando sección por sección, nunca de una sola vez. Úsalo para crear una pantalla/página/landing/dashboard a partir de una descripción. NO para traducir código existente (usa penpot-build-from-code). Disparadores: 'design a dashboard', 'create a landing page', 'design this app screen', 'build a UI from this brief', 'design a settings page', 'mock up a screen in Penpot'.

por penpot/penpot-ai-kit

Revisa el código de UI para el cumplimiento de las Web Interface Guidelines. Úsalo cuando te pidan "review my UI", "check accessibility", "audit design", "review UX" o "check my site against best practices".

por vercel-labs/agent-skills

Convenciones de diseño estilo antfu, ampliadas. UnoCSS-first, tokens semánticos basados en clases con modo claro/oscuro dual para UIs de tooling y devtools, además de design-read, anti-slop y pulido de micro-interacciones para landing pages y superficies de producto. Úsalo al construir o refactorizar cualquier interfaz con UnoCSS.

por antfu/skills

>- Recupera, consulta e identifica descriptores de métricas relevantes de Google Cloud Monitoring para un servicio o recurso de GCP (como Compute Engine, Spanner, BigQuery, Cloud Run, Cloud SQL, Pub/Sub, Cloud Storage, etc.). Úsalo cuando se pida encontrar, listar, buscar o descubrir tipos de métricas, nombres, esquemas de kind/value o descriptores de GCP.

por google/skills

Audita un diseño de Penpot según WCAG 2.1/2.2 AA (opcionalmente AAA) y genera un informe estructurado de severidad: contraste de color, tamaños táctiles/de objetivo, alternativas de texto, jerarquía de encabezados y orden de teclado/enfoque. Propone correcciones — no las aplica automáticamente. También actúa como Evaluator en el ciclo de brief a pantalla. Disparadores: 'check accessibility', 'accessibility audit', 'WCAG check', 'contrast audit', 'a11y review', 'check color contrast', 'is this accessible'.

por penpot/penpot-ai-kit

• Color & access

El enfoque de Apple para el diseño de interfaces y el movimiento fluido y físico, adaptado a la web. Úsalo al crear o revisar UI basada en gestos, animaciones de resorte, interacciones de arrastre/deslizamiento/hoja, transiciones con inercia e interrumpibles, materiales translúcidos y profundidad, tipografía (tamaño óptico, tracking, interlineado), movimiento reducido, o los fundamentos de diseño (feedback, consistencia espacial, contención) detrás de las interfaces al estilo Apple.

por emilkowalski/skills