Competenze dell'agente di visualizzazione grafici

Competenze di Visualizzazione Grafica

Trasformare i dati in un linguaggio visivo per pensare meglio.

Panoramica

Nell'era delle decisioni basate sui dati, una visualizzazione e un'analisi efficiente e accurata sono fondamentali. AntV offre una suite professionale di soluzioni di visualizzazione, fornendo un robusto toolkit e un insieme completo di competenze per l'intero flusso di lavoro, dalla progettazione del grafico all'esplorazione interattiva fino all'analisi approfondita dei dati. Consente agli utenti di trasformare rapidamente dataset complessi in grafici visivi intuitivi, abbassando significativamente la barriera alla creazione grazie a specifiche di design intelligenti e una ricca libreria di componenti. Che si tratti di reportistica quotidiana, dashboard dinamiche o analisi interattive sofisticate, AntV offre un supporto affidabile. Integrando capacità AI, questi strumenti semplificano e automatizzano ulteriormente la generazione e l'ottimizzazione delle visualizzazioni. Ciò consente agli analisti di concentrarsi maggiormente sulla scoperta di insight e sulla guida delle decisioni aziendali, rendendo veramente i dati visibili e comprensibili.

[!WARNING] Questo progetto unisce solo codice generato dall'AI.

Come contribuire:

1. Invia una segnalazione descrivendo chiaramente il problema
2. Assegnala a @copilot con i tuoi requisiti

Utilizzo

Aggiungi questo marketplace a Claude Code:

/plugin marketplace add antvis/chart-visualization-skills

Oppure puoi installare direttamente le competenze per i tuoi agenti multipli:

npx skills add antvis/chart-visualization-skills

Competenze Disponibili

• 📊 visualizzazione-grafico: Una competenza completa di generazione di grafici basata su AntV che fornisce oltre 26 tipi di grafici per la visualizzazione intelligente dei dati.

Visualizzazione Grafico seleziona intelligentemente il tipo di grafico più appropriato tra oltre 26 opzioni disponibili, estrae i parametri in base a specifiche dettagliate e genera immagini di grafici di alta qualità. Copre serie temporali, confronti, composizioni, relazioni, geografiche, gerarchiche, statistiche e visualizzazioni specializzate.

• 🎨 creatore-infografiche: Crea bellissime infografiche basate sul contenuto testuale fornito. Da usare quando gli utenti richiedono di creare infografiche.

Creatore di Infografiche utilizza AntV Infographic per trasformare dati, informazioni e conoscenza in un linguaggio visivo percepibile. Combina il design visivo con la visualizzazione dei dati, fornendo oltre 50 modelli inclusi elenchi, sequenze, gerarchie, confronti, relazioni e grafici. Comprime informazioni complesse con simboli intuitivi per aiutare il pubblico a comprendere e ricordare rapidamente i punti chiave.

• 🖼️ recupero-icone: Cerca e recupera stringhe SVG di icone dalla libreria di icone. Restituisce fino a 5 icone corrispondenti per impostazione predefinita (personalizzabile).

Ricerca Icone aiuta gli utenti a trovare icone appropriate per vari casi d'uso inclusi infografiche, sviluppo web, design e altro. Cerca per parole chiave per scoprire le icone disponibili e recuperare direttamente le loro stringhe SVG. Ogni ricerca restituisce fino a 5 icone corrispondenti per impostazione predefinita (personalizzabile tramite parametro topK) con i loro URL e il contenuto SVG completo.

• 📝 visualizzazione-testo-narrativo: Genera visualizzazioni strutturate di testo narrativo dai dati utilizzando la sintassi T8.

Visualizzazione Testo Narrativo (T8) trasforma dati non strutturati in report narrativi semanticamente ricchi utilizzando la sintassi T8 - un linguaggio dichiarativo simile a Markdown per creare narrazioni di dati con annotazioni di entità. È amichevole per LLM e indipendente dal framework, funzionando senza problemi con HTML, React e Vue. Perfetto per creare report di analisi dei dati, riassunti e documenti di insight con entità come metriche, valori, tendenze e dimensioni opportunamente etichettate. Le funzionalità includono mini grafici integrati, stile standardizzato e formattazione professionale. Supporta fonti di dati autentiche e fornisce un rendering leggero e tecnologicamente agnostico.

• 📋 esperto-antv-s2: Assistente per lo sviluppo di tabelle multidimensionali di analisi incrociata S2. Da usare quando gli utenti hanno bisogno di aiuto con tabelle pivot S2, fogli di tabella o qualsiasi sviluppo correlato a @antv/s2.

Esperto AntV S2 aiuta gli utenti nello sviluppo con il motore di tabelle di analisi incrociata multidimensionale S2. Fornisce una guida completa su @antv/s2 motore core, @antv/s2-react e @antv/s2-vue collegamenti framework, @antv/s2-react-components componenti di analisi avanzata e @antv/s2-ssr rendering lato server. Copre tabelle pivot, fogli di tabella, celle personalizzate, temi, eventi, interazioni, ordinamento, totali, suggerimenti, righe/colonne bloccate, icone, paginazione e altro.

• 🕸️ grafo-antv-g6: Generatore di codice per la visualizzazione di grafi G6 v5. Da usare quando gli utenti hanno bisogno di generare grafi G6 — grafi di rete, grafi ad albero, diagrammi di flusso, mappe mentali e qualsiasi visualizzazione di dati relazionali o strutturati a grafo con la libreria G6.

Grafo AntV G6 genera codice accurato ed eseguibile per G6 v5 seguendo le migliori pratiche. Copre l'inizializzazione di base del grafo, strutture dati (nodi, archi, combo), oltre 10 algoritmi di layout (forza, dagre, circolare, griglia, mappa mentale, lisca di pesce, ecc.), tutti i tipi predefiniti di nodi/archi/combo, gestione degli stati, oltre 15 comportamenti (trascina-area, zoom-area, clic-seleziona, lazo, ecc.), oltre 10 plugin (minimappa, suggerimento, barra degli strumenti, legenda, barra temporale, ecc.), sviluppo di elementi personalizzati, trasformazioni e animazione. Le protezioni integrate prevengono trappole comuni nella migrazione da v4 a v5 come l'uso di costruttori deprecati G6.Graph(), API graph.data() o configurazione dei comportamenti basata su modalità.

• 📈 grafico-antv-g2: Generatore di codice per grafici G2 v5. Da usare quando gli utenti hanno bisogno di generare grafici G2 — grafici a barre, grafici a linee, grafici a torta, diagrammi a dispersione, grafici ad area, mappe di calore e qualsiasi visualizzazione statistica dei dati con la libreria G2.

Grafico AntV G2 genera codice accurato ed eseguibile per G2 v5 seguendo le migliori pratiche della modalità specifica. Copre oltre 30 tipi di grafici (intervallo, linea, area, punto, rettangolo, cella, mappa ad albero, sankey, corda, nuvola di parole, indicatore, e altri), trasformazioni dei dati (stackY, dodgeX, binX, piega, ecc.), sistemi di coordinate (cartesiano, polare, theta, radiale), scale, interazioni (pennello, cursore, filtro legenda), componenti (assi, legenda, suggerimento, annotazione) e composizioni multi-vista. Le protezioni integrate prevengono trappole comuni nella migrazione da v4 a v5 come l'uso di API a catena deprecate, nomi di tavolozze non validi o riferimenti a d3 nel codice utente.

Risultati della Valutazione

L'approccio Harness Engineering è stato rigorosamente testato su 174 casi di test di generazione di grafici, dimostrando miglioramenti significativi rispetto ai metodi di base:

I risultati mostrano che Harness Engineering consente ai LLM di raggiungere un'accuratezza quasi pronta per la produzione (fino al 98,2%), superando significativamente l'approccio baseline Context7.

[!TIP] Altre competenze sono in arrivo.

Utilizzo come Libreria

Può essere utilizzata come libreria nei tuoi progetti Node.js con CLI e API.

Utilizzo CLI

Forniamo anche uno strumento CLI chiamato antv per un facile utilizzo nel terminale, installalo globalmente:

npm install -g @antv/chart-visualization-skills

Recupera o elenca competenze tramite query:

# Recupera competenze tramite query (solo metadati)
antv retrieve "bar chart" --library g2 --topk 10

# Recupera competenze con contenuto markdown completo (vincoli fondamentali automaticamente anteposti)
antv retrieve "bar chart" --library g2 --content

# Recupera competenze e restituisci come JSON
antv retrieve "bar chart" --library g2 --output json

# Ottieni una competenza tramite il suo ID esatto
antv get g2-mark-interval-basic --library g2

# Elenca tutte le competenze disponibili
antv list --library g2 --category core

# Elenca competenze e restituisci come JSON
antv list --output json

# Mostra informazioni sulle competenze (vincoli fondamentali da SKILL.md)
antv info --library g2

# Mostra informazioni sulle competenze come JSON
antv info --library g2 --output json

Utilizzo del comando:

Utilizzo: antv [opzioni] [comando]

Strumento CLI per il recupero di competenze di visualizzazione grafica AntV

Opzioni:
  -V, --version               mostra il numero di versione
  -h, --help                  mostra aiuto per il comando

Comandi:
  retrieve [opzioni] <query>  Cerca competenze corrispondenti a una query
  get [opzioni] <id>          Ottieni una competenza tramite il suo ID esatto
  list [opzioni]              Elenca tutte le competenze disponibili
  info [opzioni]              Mostra informazioni sulle competenze da SKILL.md
  help [comando]              mostra aiuto per il comando

Opzioni per retrieve:
  --library <lib>             Filtra per libreria (es. g2, g6)
  --topk <n>                  Numero di risultati da restituire (predefinito: 7)
  --content                   Includi corpo del contenuto markdown nei risultati; i vincoli fondamentali (SKILL.md Sezione 1-2) sono sempre anteposti come primo risultato
  --output <formato>           Formato di output: json | text (predefinito: "text")

Nota: --content antepone sempre i vincoli fondamentali della libreria (Sezione 1 e 2 di SKILL.md, fino al marcatore <!-- CONSTRAINTS:END -->) come primo risultato, assicurando che il modello riceva le regole essenziali insieme ai documenti di riferimento.

Utilizzo API

import { retrieve } from '@antv/chart-visualization-skills';

// Solo metadati (nessun contenuto)
const skills = retrieve('bar chart', { library: 'g2', topK: 5 });

// Con contenuto markdown completo (vincoli fondamentali automaticamente anteposti come primo risultato)
const skills = retrieve('bar chart', { library: 'g2', topK: 5, content: true });

// Con contenuto ma senza vincoli fondamentali
const skills = retrieve('bar chart', { library: 'g2', topK: 5, content: true, includeInfo: false });

retrieve(query: string, options?: RetrieveOptions): Skill[]

interface RetrieveOptions {
  library?: string;   // Filtro libreria, es. 'g2' o 'g6'
  topK?: number;      // Numero di risultati (predefinito: 7)
  content?: boolean;  // Includi corpo del contenuto markdown (predefinito: false)
  includeInfo?: boolean; // Anteponi vincoli fondamentali SKILL.md (predefinito: uguale a content)
}

Note:

• Il recupero predefinito restituisce oggetti risultato leggeri senza il campo content.
• content: true restituisce il corpo del contenuto markdown (i metadati del frontmatter sono esclusi).
• Quando includeInfo è true (il predefinito quando content: true), il blocco dei vincoli fondamentali — SKILL.md fino a <!-- CONSTRAINTS:END --> — viene iniettato come primo elemento (id con prefisso __info__), assicurando che il modello veda sempre le regole essenziali.

import { info } from '@antv/chart-visualization-skills';

const skillInfo = info('g2');
// => { name: 'antv-g2-chart', description: '...', content: '...', constraintsContent: '...' }

info(library?: string): SkillInfo | undefined

interface SkillInfo {
  name: string;
  description: string;
  content: string;            // Corpo completo di SKILL.md (dopo il frontmatter)
  constraintsContent: string; // Corpo di SKILL.md fino al marcatore <!-- CONSTRAINTS:END -->; iniettato da retrieve quando includeInfo: true
}

Licenza

Licenza MIT - vedi il file LICENSE per i dettagli.