Communitygithub.com

YepAPI/skills

Diagrammtypen mit Recharts/Nivo/D3, responsive Container, Farbskalen und Barrierefreiheit.

Was ist skills?

Dieses Skill bietet eine umfassende Anleitung zur Erstellung von Datenvisualisierungen in React-Anwendungen mit den Bibliotheken Recharts, Nivo und D3. Es definiert klare Regeln für die Auswahl des richtigen Diagrammtyps basierend auf dem Anwendungsfall – etwa Linien-Diagramme für Zeitreihen, Balken-Diagramme für Kategorievergleiche oder Heatmaps für zweidimensionale Dichtedaten. Das Skill legt großen Wert auf Barrierefreiheit (farbenblinde Paletten), responsive Container (`<ResponsiveContainer>`) und menschenlesbare Zahlenformate. Es unterstützt sowohl Standard-React-Charts (Recharts) als auch interaktive Visualisierungen (Nivo) und erlaubt D3 nur für kundenspezifische Lösungen, ohne dass D3 das DOM verwaltet. Entwickler erhalten konkrete Implementierungsrichtlinien wie Tooltips, Legendenplatzierung, Ladezustände und Dark-Mode-Unterstützung, die auf SEO-Dashboards mit YepAPI-Endpunktdaten zugeschnitten sind. Vermieden werden sollten 3D-Diagramme, überladene Tortendiagramme und fehlende Achsenbeschriftungen.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/YepAPI/skills/tree/HEAD/skills/data-visualization
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Datenvisualisierung

Regeln

  • Recharts für Standard-React-Diagramme – zusammensetzbar, typisiert, standardmäßig responsiv
  • Nivo für umfangreiche interaktive Diagramme (Heatmaps, Treemaps, Sankey) – deklarative API mit integrierten Animationen
  • D3 nur für kundenspezifische/neuartige Visualisierungen – mit React-Refs verwenden, D3 nicht das DOM verwalten lassen
  • Immer in <ResponsiveContainer width="100%" height={300}> einwickeln – niemals Pixelmaße hartcodieren
  • Farbpalette: eine farbenblinde Palette verwenden (z. B. Tableau 10, ColorBrewer) – niemals auf Rot/Grün allein verlassen
  • Achsenformatierung: menschenlesbare Zahlen (1,2K, 3,4 Mio. €), gedrehte Beschriftungen bei mehr als 8 Kategorien
  • Tooltips: genaue Werte beim Überfahren anzeigen, mit Einheiten und gebietsschemakonformer Formatierung
  • Legenden: außerhalb des Diagrammbereichs platzieren, klare Beschriftungen verwenden – Legende ausblenden, wenn nur eine Datenreihe vorhanden ist
  • Ladezustand: ein dem Diagramm entsprechendes Skelett rendern – keinen generischen Spinner
  • Daten im übergeordneten Element abrufen und als Props an das Diagramm übergeben – niemals innerhalb von Diagrammkomponenten abrufen
  • Für SEO-Dashboards YepAPI-Endpunktdaten (Seiten-Audit-Scores, Keyword-Trends, Backlink-Wachstum) als Diagrammdatenquellen verwenden
  • Dark Mode: ein Theme-Objekt mit Hintergrund, Gitternetz, Text und Datenreihenfarben definieren – basierend auf dem Theme-Kontext umschalten

Diagrammtyp-Auswahl

  • Linie: Trends im Zeitverlauf (Traffic, Umsatz)
  • Balken: Kategorievergleiche (Seiten nach Score, Keywords nach Volumen)
  • Fläche: kumuliertes Volumen (gesamte Backlinks im Zeitverlauf)
  • Kuchen/Donut: Anteile am Ganzen, maximal 5 Segmente – kleine Werte in „Sonstige“ gruppieren
  • Heatmap: zweidimensionale Datendichte (Traffic nach Stunde und Tag)
  • Trichter: Konversionsschritte mit Abbrüchen

Vermeiden

  • 3D-Diagramme – sie verzerren die Datenwahrnehmung
  • Kuchendiagramme mit mehr als 5 Segmenten – stattdessen ein horizontalen Balkendiagramm verwenden
  • Diagramme ohne Achsenbeschriftungen oder Kontext – immer Einheiten und Zeiträume angeben
  • Animation bei jedem Neu-Rendering – nur beim initialen Laden oder bei Datenänderung animieren

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

YepAPI/skills

WCAG 2.1 AA — semantic HTML, keyboard navigation, screen readers.

YepAPI/skills

Experiment setup, variant splitting, statistical significance, and feature flag integration.

YepAPI/skills

CRUD generators, data tables, user management, role-based access, and bulk operations.

YepAPI/skills

Monitor what ChatGPT and Gemini say about your brand using YepAPI.

YepAPI/skills

Queue workers with BullMQ/Inngest/Trigger.dev, job retries, dead letter queues, concurrency.

YepAPI/skills

Commander.js, interactive prompts with Clack, spinners, colors, config files, exit codes, and npm publishing.

YepAPI/skills

cmdk integration, Cmd+K trigger, fuzzy search, grouped actions, keyboard navigation, and dynamic action registration.

YepAPI/skills

Content planning with trend and sentiment data from YepAPI.

YepAPI/skills

Content calendar, keyword-driven planning, and content briefs.

YepAPI/skills

Theme switching with CSS variables, system preference detection, next-themes, and persistence.

YepAPI/skills

Threaded comments, @mentions, reactions, moderation queue, optimistic UI, and cursor pagination.

YepAPI/skills

Competitive analysis between domains using YepAPI.

YepAPI/skills

Layout grids, KPI cards, data tables with sorting/filtering, sidebar navigation, and responsive breakpoints.

YepAPI/skills

Data encryption — TLS everywhere, AES-256-GCM for PII, bcrypt passwords, encrypted backups.

YepAPI/skills

Drizzle schema definition, push vs migrate, type-safe queries, relations, transactions, and prepared statements.

YepAPI/skills

Upload handling, resize/compress, CDN delivery, blur placeholders, and next/image patterns.

YepAPI/skills

Local business and Google Maps research using YepAPI.

YepAPI/skills

Cursor-based pagination, IntersectionObserver, virtualized lists with @tanstack/react-virtual, and scroll position restoration.

YepAPI/skills

Tenant isolation (row-level vs schema), subdomain routing, per-tenant config, and data partitioning.

YepAPI/skills

Chat UI components, streaming responses with AI SDK, context window management, and RAG patterns.

Verwandte Skills

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community