Agent Skills für Dashboard-Design

Frontend-Interface-Design-Skill für Dashboards, Produkt-UI, Hierarchie, Barrierefreiheit, Theming und Designsysteme mit einem handwerklich fokussierten Workflow. Breit relevant für Dashboard-Design, aber nicht dashboard-spezifisch.

von pbakaus/impeccable

• Layout & hierarchy

Voraussetzungen (angegeben): Node.js

Design-Taste-Skill für radikale Reduktion und Craft in nutzerorientierten Interfaces, einschließlich Dashboards, mit Tokens, Hierarchie, States und Motion. Relevant für Dashboard-Craft, aber allgemeines Interface-Design.

von deeflect/mies

Umfassender UI/UX-Designleitfaden für Penpot zu Design-Systemen, Dashboards, Formularen, Navigation, Barrierefreiheit und Plattformrichtlinien. Kann Dashboards entwerfen, ist aber ein allgemeiner Penpot-UI/UX-Leitfaden.

von github/awesome-copilot

• Color & access

Erstellt ausgefeilte, im Browser gerenderte visuelle Artefakte mit HTML/CSS/JS/React, einschließlich Dashboards, Prototypen und Datenvisualisierungen. Kann Dashboards bauen, ist aber eine breite Web-Design-Engineering-Skill.

von conardli/garden-skills

Legt eine Frontend-Designrichtung für Produktions-UI fest, einschließlich Dashboards, und deckt Hierarchie, Typografie, Farbe, Motion und Anti-Generic-Muster ab. Relevant für die visuelle Ausrichtung von Dashboards, aber allgemeines Frontend-Design.

von affaan-m/ecc

• Layout & hierarchy
• Color & access

Leitfaden für unverwechselbares, bewusstes visuelles Design beim Aufbau neuer oder Umgestaltung bestehender UI. Hilft bei ästhetischer Ausrichtung, Typografie und Entscheidungen, die nicht wie vorgefertigte Standards wirken.

von anthropics/skills

• Color & access

Industrielles brutalistisches und taktisches Telemetrie-UI-Designsystem mit starren Rastern, extremer Typo-Skala und utilitaristischer Farbe für datenintensive Dashboards. Adressiert direkt Dashboard-Ästhetik, ist aber ein spezifischer visueller Stil.

von leonxlnx/taste-skill

• Color & access

Erzwingt eine meinungsstarke UI-Basislinie, die Abstands-, Hierarchie-, Typografie- und Layoutprobleme behebt, um KI-generierten Interface-Slop zu verhindern. Relevant für Dashboard-Feinschliff und Hierarchie, aber allgemeine UI-Bereinigung.

von ibelick/ui-skills

Instrumentiert Code mit Logging, Metriken, Tracing und Alerting, damit Produktionsverhalten sichtbar wird. Relevant für Metrik- und Alerting-Aspekte von Dashboards, geht es doch um Instrumentierung, nicht um Dashboard-Design.

von addyosmani/agent-skills

Go-Observability für strukturiertes Logging, Prometheus-Metriken, OpenTelemetry-Tracing, Alerting und Grafana-Dashboards. Relevant für Metrik- und Alerting-Aspekte, aber Go-spezifisch und instrumentierungsfokussiert.

von samber/cc-skills-golang

Verfolgt und berechnet Startup-KPIs wie MRR, Churn, CAC/LTV und Burn für Investor- und Board-Dashboards. Relevant für die Metrik-Komponente von Dashboards, ist aber ein Metrik-Framework, kein Dashboard-Design.

von wshobson/agents

Zieht Metriken aus Analytics-Dashboards und internen Web-Tools mit Firecrawl-Browser und erzeugt strukturierte Metrik-Zusammenfassungen. Relevant für das Extrahieren von Dashboard-Daten, aber nicht für das Design von Dashboards.

von firecrawl/firecrawl-workflows

• Metrics

Baut UIs mit Nuxt UI v4-Komponenten und Tailwind-Theming, inklusive Dashboard-Layouts mit Sidebar und Panels. Relevant für die Dashboard-Implementierung, ist aber ein Component-Library-Skill.

von onmax/nuxt-skills

• Color & access

Diese Skill zusammen mit figma-use verwenden, wenn die Aufgabe darin besteht, eine Anwendungsseite, Ansicht oder ein mehrteiliges Layout in Figma zu übertragen. Auslöser: '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'. Dies ist die bevorzugte Workflow-Skill, wann immer der Nutzer eine vollständige Seite, einen Screen oder eine Ansicht in Figma aus Code oder einer Beschreibung erstellen oder aktualisieren möchte. Entdeckt Design-System-Komponenten, Variablen und Styles über search_design_system, importiert sie und setzt Screens schrittweise Abschnitt für Abschnitt mit Design-System-Tokens statt hartcodierten Werten zusammen.

von openai/skills

Verwende den Figma MCP server, um Design-Kontext, Screenshots, Variablen und Assets aus Figma abzurufen und Figma nodes in Produktionscode zu übersetzen. Auslösen, wenn eine Aufgabe Figma URLs, node IDs, Design-to-Code-Implementierung oder Figma MCP setup und Fehlerbehebung betrifft.

von openai/skills

Voraussetzungen (angegeben): Node.js

Generiert benutzerdefinierte Design-System-Regeln für die Codebasis des Nutzers. Verwenden, wenn der Nutzer sagt "create design system rules", "generate rules for my project", "set up design rules", "customize design system guidelines" oder projektbezogene Konventionen für Figma-zu-Code-Workflows etablieren möchte. Erfordert eine Verbindung zum Figma MCP-Server.

von openai/skills

Voraussetzungen (angegeben): MCP server

Übersetzt Figma-Designs in produktionsreifen Anwendungscode mit 1:1 visueller Treue. Verwenden bei der Implementierung von UI-Code aus Figma-Dateien, wenn der Nutzer "Design implementieren", "Code generieren", "Komponente implementieren" erwähnt, Figma-URLs bereitstellt oder darum bittet, Komponenten passend zu Figma-Spezifikationen zu erstellen. Für Figma-Canvas-Schreibvorgänge über `use_figma` verwenden Sie `figma-use`.

von openai/skills

Voraussetzungen (angegeben): Node.js

Extrahiert eine DESIGN.md-Designdokumentationsdatei aus einer Penpot-Datei: eine portable Markdown-Spezifikation (YAML-Frontmatter mit Token-Maps für Farben/Typografie/Rounded/Spacing/Komponenten + Prosa-Abschnitte: Overview, Colors, Typography, Layout, Shapes, Components, Do's & Don'ts, Iteration Guide, Known Gaps) im design-md-Format, fundiert auf den echten Tokens, Library-Assets und gesampelten Komponentenstilen der Datei — niemals erfunden. Read-only auf dem Canvas; schreibt eine lokale Markdown-Datei. Trigger: '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'.

von penpot/penpot-ai-kit

Prüfe ein Penpot-Design gegen seinen implementierten Code (eine Quellkomponente oder Storybook-Story) und gib einen strukturierten DRIFT-Bericht aus. Verwende dies, wenn ein Engineer bestätigen muss, dass der Build zum Design passt: HTML/CSS aus einer Auswahl extrahieren, seine Tokens/Struktur/Zustände auf die Code-Komponente abbilden, sie diffen und auflisten, was auf jeder Seite fehlt, mit Schweregrad und Abgleich. Fällt bei fehlender Code-Quelle sauber auf eine Design-System-Token-Prüfung zurück. Auslöser: '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'.

von penpot/penpot-ai-kit

Prüfe ein Penpot-Design auf Design-System-/Token-GOVERNANCE-Probleme (abzugrenzen von Accessibility): hartkodierte Farben, wo ein Token existiert, Raster-abweichende Abstände, verwaiste/unaufgelöste/unbenutzte Tokens, doppelte Werte und losgelöste Teile, die Komponenteninstanzen sein sollten. Erstellt einen Schweregrad-Bericht und schlägt semantische Token-Austausche vor. Auslöser: 'audit tokens', 'find hardcoded colors', 'token governance', 'check design system consistency', 'find off-grid spacing', 'detect raw values', 'are we using tokens correctly'.

von penpot/penpot-ai-kit

Toolkit zum Stylen von Artefakten mit einem Theme. Diese Artefakte können Slides, Docs, Reportings, HTML-Landingpages usw. sein. Es gibt 10 voreingestellte Themes mit Farben/Schriften, die auf jedes erstellte Artefakt angewendet werden können, oder es kann spontan ein neues Theme generieren.

von anthropics/skills

• Color & access

Wendet Anthropics offizielle Markenfarben und Typografie auf jede Art von Artefakt an, das von einem Anthropic-Look-and-Feel profitieren könnte. Verwenden, wenn Markenfarben oder Styleguides, visuelle Formatierung oder Unternehmensdesignstandards zutreffen.

von anthropics/skills

Fragt Huawei-Cloud-Monitoring-Ressourcen ab, darunter Alarmregeln, Alarmverläufe und Dashboards, über schreibgeschützte Skripte. Relevant für Monitoring-Dashboards, aber Huawei-spezifisch und nur abfragend.

von huaweicloud/huaweicloud-skills

>- Generiert Google Cloud Monitoring Server-Driven UI (SDUI) Widget- und XyChart-Protocol-Buffer-Textprotos aus aufgelösten PromQL- oder ListTimeSeries-Abfragen. Verwenden, wenn: - gültige google.monitoring.dashboard.v1.Widget-Textprotos mit PrometheusQuery- oder TimeSeriesFilter-Datasets für die Verwendung mit der Cloud Monitoring Dashboards API, gcloud CLI oder deklarativen Dashboard-Definitionen generiert werden. - Server-Driven UI (SDUI) Widget-Titel, Achsenbeschriftungen und Plot-Typen für Prometheus- oder ListTimeSeries-Abfragen synthetisiert werden. Nicht verwenden für: - Metrik-Discovery oder PromQL-Abfragegenerierung. Für diese Aufgaben die Skills cloud-monitoring-metric-selection oder cloud-monitoring-promql-query verwenden.

von google/skills

> Bewerte und erstelle unverwechselbare, produktionsreife Frontend-Interfaces mit hoher Designqualität und Design-System-Compliance. Bewertet anhand von drei Säulen: reibungsloser Weg von der Erkenntnis zur Aktion, hochwertige Handwerkskunst und vertrauenswürdiger Aufbau. VERWENDEN FÜR: PR-Reviews, Design-Reviews, Accessibility-Audits, Design-System-Compliance-Checks, kreatives Frontend-Design, UI-Code-Review, Component-Reviews, Responsive-Design-Checks, Theme-Tests und das Erstellen einprägsamer UIs. NICHT VERWENDEN FÜR: Backend-API-Reviews, Datenbank-Schema-Reviews, Infrastruktur- oder DevOps-Arbeit, reine Business-Logik ohne UI oder Nicht-Frontend-Code.

von microsoft/skills

• Color & access

Entwirft produktionsreife Screens in Penpot aus einem Brief, wie ein Senior Visual Designer — unter Wiederverwendung des bestehenden Designsystems (Tokens + Komponenten) und Zusammenbau Abschnitt für Abschnitt, niemals in einem Durchgang. Verwenden, um einen Screen/eine Seite/eine Landing/ein Dashboard aus einer Beschreibung zu erstellen. NICHT zum Übersetzen von bestehendem Code (verwende penpot-build-from-code). Auslöser: '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'.

von penpot/penpot-ai-kit

Prüft UI-Code auf Einhaltung der Web Interface Guidelines. Verwenden, wenn gefragt wird: "review my UI", "check accessibility", "audit design", "review UX" oder "check my site against best practices".

von vercel-labs/agent-skills

antfu-artige Designkonventionen, erweitert. UnoCSS-first, klassenbasierte semantische Tokens mit dualem Hell/Dunkel für Tooling- und Devtools-UIs, plus Design-Read, Anti-Slop und Micro-Interaction-Politur für Landing Pages und Produktoberflächen. Verwenden beim Erstellen oder Refactoring jeder Oberfläche mit UnoCSS.

von antfu/skills

>- Relevante Google Cloud Monitoring-Metrikdeskriptoren für einen GCP-Dienst oder eine Ressource (wie Compute Engine, Spanner, BigQuery, Cloud Run, Cloud SQL, Pub/Sub, Cloud Storage usw.) abrufen, abfragen und identifizieren. Verwenden, wenn darum gebeten wird, GCP-Metriktypen, -Namen, Kind-/Wert-Schemas oder Deskriptoren zu finden, aufzulisten, zu suchen oder zu entdecken.

von google/skills

Prüft ein Penpot-Design gegen WCAG 2.1/2.2 AA (optional AAA) und erstellt einen strukturierten Schweregrad-Bericht: Farbkontrast, Touch-/Zielgrößen, Textalternativen, Überschriftenhierarchie und Tastatur-/Fokusreihenfolge. Schlägt Korrekturen vor — wendet sie nicht automatisch an. Dient außerdem als Evaluator im Brief-to-Screen-Loop. Auslöser: 'check accessibility', 'accessibility audit', 'WCAG check', 'contrast audit', 'a11y review', 'check color contrast', 'is this accessible'.

von penpot/penpot-ai-kit

• Color & access

Apples Ansatz für Interface-Design und flüssige, physische Bewegung, übersetzt für das Web. Verwenden beim Erstellen oder Prüfen gestengesteuerter UI, Spring-Animationen, Drag/Swipe/Sheet-Interaktionen, Momentum und unterbrechbaren Übergängen, transluzenten Materialien und Tiefe, Typografie (optische Größe, Tracking, Leading), Reduced Motion oder den Design-Grundlagen (Feedback, räumliche Konsistenz, Zurückhaltung) hinter Apple-artigen Interfaces.

von emilkowalski/skills