Skip to content
Data
Skill

/antv-t8-ntv

Generate structured narrative text visualizations from data using T8 Syntax. Use when users want to create data interpretation reports, summaries, or structured articles with semantic entity annotations. T8 is designed for unstructured data visualization where T stands for Text

From plugin
chart-visualization-skills
5339 skills

Claude Code

$ npx -y skills add antvis/chart-visualization-skills --skill antv-t8-ntv --agent claude-code

SKILL.md

antv-t8-ntv.SKILL.md
name: antv-t8-ntv
description: Generate structured narrative text visualizations from data using T8 Syntax. Use when users want to create data interpretation reports, summaries, or structured articles with semantic entity annotations. T8 is designed for unstructured data visualization where T stands for Text and 8 represents a byte of 8 bits, symbolizing deep insights beneath the text.

Narrative Text Visualization Skill

This skill provides a workflow for transforming data into structured narrative text visualizations using **T8 Syntax** - a declarative Markdown-like language for creating data narratives with semantic entity annotations.

What is T8

T8 is a text visualization solution under the AntV technology stack designed specifically for insight-based narrative text display. Instead of manually constructing DOM elements, you write simple, human-readable syntax that describes your data narrative.

**Key Features:**

  • **LLM-Friendly**: The syntax is intuitive and can be easily generated by AI models
  • **Declarative & Readable**: Write what you want, not how to build it
  • **Framework Agnostic**: Works with React, Vue, or vanilla JavaScript
  • **Standardized Styling**: Professional appearance by default
  • **Built-in Data Visualizations**: Mini charts (pie, line) are native to the syntax
  • **Lightweight**: Less than 20KB before gzip

Workflow

To generate narrative text visualizations, follow these steps:

1. Understand the Requirements

Analyze the user's request to determine:

  • The topic or data to be analyzed
  • The type of narrative needed (report, summary, article)
  • The key insights to highlight
  • Any specific data sources or metrics

2. Generate T8 Syntax Content

Create narrative text using T8 Syntax following the specification below. The content must include:

  • Proper document structure (headings, paragraphs, lists)
  • Entity annotations for all meaningful data points
  • Appropriate metadata for entities (origin, assessment, etc.)

3. Generate Frontend Code

Create HTML, React, or Vue code to render the T8 content based on user's preferred framework.

4. Validate Output

Ensure:

  • All data is from authentic sources
  • Minimum content length (800 words or equivalent)
  • Proper entity annotations throughout
  • Clear structure and logical flow

---

T8 Syntax Specification

T8 Syntax is a Markdown-like language for creating narrative text with semantic entity annotations. It makes data analysis reports more expressive and visually appealing.

Document Structure

Headings (6 levels)

Use standard Markdown heading syntax:

# Level 1 Heading (Main Title)
## Level 2 Heading (Section)
### Level 3 Heading (Subsection)
#### Level 4 Heading
##### Level 5 Heading
###### Level 6 Heading

**Rules:**

  • Each heading must be on its own line
  • Add one space after the `#` symbols
  • Headings create visual hierarchy in the rendered output

Paragraphs

Regular text paragraphs are separated by blank lines:

This is the first paragraph with some content.

This is the second paragraph, separated by a blank line.

**Rules:**

  • Paragraphs can span multiple lines
  • Use blank lines to separate distinct paragraphs
  • Text within a paragraph flows naturally

Lists

T8 Syntax supports both unordered and ordered lists.

**Unordered Lists:**

- First item
- Second item
- Third item

**Ordered Lists:**

1. First step
2. Second step
3. Third step

**Rules:**

  • Each list item must be on its own line
  • Add one space after the bullet marker (`-`, `*`) or number
  • Lists can contain entities and text formatting

Text Formatting

T8 Syntax supports inline text formatting using Markdown syntax:

**Bold Text:** `This is **bold text** that stands out.`

**Italic Text:** `This is *italic text* for emphasis.`

**Underline Text:** `This is __underlined text__ for importance.`

**Links:** `Visit [our website](https://example.com) for more information.`

**Rules:**

  • Formatting markers must be balanced (opening and closing)
  • Formatting can be combined with entities
  • Links use `[text](URL)` syntax where URL starts with `http://`, `https://`, or `/`

Entity Annotation Syntax

The core feature of T8 Syntax is **entity annotation** - marking specific data points with semantic meaning and metadata.

Basic Entity Syntax

[displayText](entityType)
  • `displayText`: The text shown to readers
  • `entityType`: The semantic type of this entity

**Example:**

The [sales revenue](metric_name) reached [¥1.5 million](metric_value) this quarter.

Entity with Metadata

[displayText](entityType, key1=value1, key2=value2, key3="string value")

**Metadata Rules:**

  • Separate multiple metadata fields with commas
  • Numbers and booleans: write directly (e.g., `origin=1500000`, `active=true`)
  • Strings: wrap in double quotes (e.g., `unit="元"`, `region="Asia"`)

**Example:**

Revenue grew by [15.3%](ratio_value, origin=0.153, assessment="positive") compared to last year.

Entity Types Reference

Use these entity types to annotate different kinds of data:

| Entity Type | Description | When to Use | Examples | | -------------------- | ------------------------------------ | ---------------------------------------------- | -------------------------------------------------------- | | `metric_name` | Name of a metric or KPI | When mentioning what you're measuring | "revenue", "user count", "market share" | | `metric_value` | Primary metric value | The main number/value being reported | "¥1.5 million", "50,000 users", "250 units" | | `other_metric_value` | Secondary or supporting metric value | Additional metrics that provide context | "average order value: $120" | | `delta_value` | A

Read more
@antvis
Ships withchart-visualization-skills

Turning data into a visual language for better thinking. AntV , initiated by Ant Group and open-sourced starting in 2017, reimagines data visualization by embedding the theory of graphical grammar into the JavaScript language.

Stars on GitHub

Momentum

stars in total
533
Star history of antvis/chart-visualization-skills on GitHub, a chart by star-history.com
chart-visualization

chart-visualization

将数据可视化为图表。当用户需要生成柱状图、折线图、饼图、散点图、雷达图、桑基图、思维导图、流程图等图表时调用此技能,通过 curl 工具调用 AntV API 生成图表图片

More skills from other plugins.

context-loader
Auto-invoked

context-loader

Search memories from earlier Pi sessions in this repository. Use it when earlier work may already explain the code, error,…

mem05d69k
@mem0ai@mem0aiInstall Skill
analyzing-ai-citations

analyzing-ai-citations

Answer AI citation and answer engine optimization (AEO) questions in PostHog: whether AI answer engines (ChatGPT, Claude, and an…

posthog12d41k
@posthog@posthogInstall Skill

Questions about antv-t8-ntv.

Which coding agents can use antv-t8-ntv?
antv-t8-ntv installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.