#601

Globales Ranking · von 601 Skills

data-visualizer AI Agent Skill

Quellcode ansehen: oakoss/agent-skills

Safe

Installation

npx skills add oakoss/agent-skills --skill data-visualizer

43

Installationen

Data Visualizer

Build charts, dashboards, and interactive data visualizations using modern libraries. Covers Recharts (React), Chart.js (framework-agnostic), and D3.js (custom/advanced).

Library Selection

Library Best For React Custom Bundle (gzip)
Recharts Quick React charts, standard types Native Limited ~139KB
Chart.js Framework-agnostic, simple API Wrapper Moderate ~68KB (tree-shakeable)
D3.js Custom visualizations, full control Manual Full ~13-30KB per module

Chart Type Selection

Chart Best For Avoid When
Line Trends over time, continuous data Categorical data
Bar Comparing categories, rankings Continuous data
Pie/Donut Part-to-whole (max 5-7 slices) >7 categories, precise comparison
Area Volume over time, stacked categories Too many overlapping series
Scatter Correlation, outliers, distribution Time series
Heatmap Intensity across two dimensions Simple comparisons

Dashboard Patterns

Pattern Use Case Key Feature
KPI Dashboard Executive metrics Trend indicators, card grid
Real-Time Live monitoring SSE/WebSocket, animation disabled
Interactive Filters Exploratory analysis Period/region selects, drill-down
Drill-Down Hierarchical data Click to zoom (year → month → day)

Responsive Design

Approach Implementation
Container-based sizing <ResponsiveContainer width="100%" height={300}>
Aspect ratio mode <ResponsiveContainer width="100%" aspect={2}>
Mobile-aware Reduce strokeWidth, height on small screens
Label simplification Fewer axis labels on mobile

Common Mistakes

Mistake Fix
Fixed width/height Use ResponsiveContainer
Animation on real-time data Set isAnimationActive={false}
Too many pie slices Max 5-7 slices, group rest as "Other"
Non-accessible colors Use WCAG AA compliant, colorblind-safe palette
Loading entire chart library Lazy load with dynamic imports
No data formatting Use Intl.NumberFormat for currency/percent

Delegation

  • Explore data shape and available fields before choosing chart type: Use Explore agent
  • Build a complete multi-chart dashboard from requirements: Use Task agent
  • Plan visualization architecture for large-scale analytics pages: Use Plan agent

References

Installationen

Installationen 43
Globales Ranking #601 von 601

Sicherheitsprüfung

ath Safe
socket Safe
Warnungen: 0 Bewertung: 90
snyk Low
EU EU-Hosted Inference API

Power your AI Agents with the best open-source models.

Drop-in OpenAI-compatible API. No data leaves Europe.

Explore Inference API

GLM

GLM 5

$1.00 / $3.20

per M tokens

Kimi

Kimi K2.5

$0.60 / $2.80

per M tokens

MiniMax

MiniMax M2.5

$0.30 / $1.20

per M tokens

Qwen

Qwen3.5 122B

$0.40 / $3.00

per M tokens

So verwenden Sie diesen Skill

1

Install data-visualizer by running npx skills add oakoss/agent-skills --skill data-visualizer in your project directory. Führen Sie den obigen Installationsbefehl in Ihrem Projektverzeichnis aus. Die Skill-Datei wird von GitHub heruntergeladen und in Ihrem Projekt platziert.

2

Keine Konfiguration erforderlich. Ihr KI-Agent (Claude Code, Cursor, Windsurf usw.) erkennt installierte Skills automatisch und nutzt sie als Kontext bei der Code-Generierung.

3

Der Skill verbessert das Verständnis Ihres Agenten für data-visualizer, und hilft ihm, etablierte Muster zu befolgen, häufige Fehler zu vermeiden und produktionsreifen Code zu erzeugen.

Was Sie erhalten

Skills sind Klartext-Anweisungsdateien — kein ausführbarer Code. Sie kodieren Expertenwissen über Frameworks, Sprachen oder Tools, das Ihr KI-Agent liest, um seine Ausgabe zu verbessern. Das bedeutet null Laufzeit-Overhead, keine Abhängigkeitskonflikte und volle Transparenz: Sie können jede Anweisung vor der Installation lesen und prüfen.

Kompatibilität

Dieser Skill funktioniert mit jedem KI-Coding-Agenten, der das skills.sh-Format unterstützt, einschließlich Claude Code (Anthropic), Cursor, Windsurf, Cline, Aider und anderen Tools, die projektbezogene Kontextdateien lesen. Skills sind auf Transportebene framework-agnostisch — der Inhalt bestimmt, für welche Sprache oder welches Framework er gilt.

Data sourced from the skills.sh registry and GitHub. Install counts and security audits are updated regularly.

EU Made in Europe

Chat with 100+ AI Models in one App.

Use Claude, ChatGPT, Gemini alongside with EU-Hosted Models like Deepseek, GLM-5, Kimi K2.5 and many more.

Start for free View pricing
Kundensupport