Markdown Report Writing
NeuroAIHub/BrainPilot
Guide AI agents to write beautifully formatted, well-illustrated Markdown reports with proper structure, diagrams, and compatibility across GitHub and Obsidian.
指导用户使用 @ant-design/agentic-ui 的 Markdown Editor / Renderer 扩展语法。图表场景优先使用内置 chart（HTML 注释 chartType + 表格），只有当内置 chartType 都不能表达诉求时才回退 Mermaid。Triggers on keywords like 表格, 视频, 图表, 卡片, 提示块, 流程图, 语法…
Install Markdown Syntax Guide
$ npx skills add antdigital-ai/agentic-ui --skill markdown-syntax-guide -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install antdigital-ai/agentic-ui markdown-syntax-guide --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/antdigital-ai/agentic-ui.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.cursor/skills/markdown-syntax-guide .claude/skills/markdown-syntax-guide && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "markdown-syntax-guide" agent skill from https://github.com/antdigital-ai/agentic-ui/tree/main/.cursor/skills/markdown-syntax-guide into .claude/skills/markdown-syntax-guide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "markdown-syntax-guide", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/antdigital-ai/agentic-ui/tree/main/.cursor/skills/markdown-syntax-guideType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add antdigital-ai/agentic-ui --skill markdown-syntax-guide -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install antdigital-ai/agentic-ui markdown-syntax-guide --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/antdigital-ai/agentic-ui.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.cursor/skills/markdown-syntax-guide .agents/skills/markdown-syntax-guide && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "markdown-syntax-guide" agent skill from https://github.com/antdigital-ai/agentic-ui/tree/main/.cursor/skills/markdown-syntax-guide into .agents/skills/markdown-syntax-guide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "markdown-syntax-guide", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add antdigital-ai/agentic-ui --skill markdown-syntax-guide -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install antdigital-ai/agentic-ui markdown-syntax-guide --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/antdigital-ai/agentic-ui.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.cursor/skills/markdown-syntax-guide .cursor/skills/markdown-syntax-guide && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "markdown-syntax-guide" agent skill from https://github.com/antdigital-ai/agentic-ui/tree/main/.cursor/skills/markdown-syntax-guide into .cursor/skills/markdown-syntax-guide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "markdown-syntax-guide", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/antdigital-ai/agentic-ui.git --path .cursor/skills/markdown-syntax-guide--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add antdigital-ai/agentic-ui --skill markdown-syntax-guide -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install antdigital-ai/agentic-ui markdown-syntax-guide --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/antdigital-ai/agentic-ui.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.cursor/skills/markdown-syntax-guide .gemini/skills/markdown-syntax-guide && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "markdown-syntax-guide" agent skill from https://github.com/antdigital-ai/agentic-ui/tree/main/.cursor/skills/markdown-syntax-guide into .gemini/skills/markdown-syntax-guide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "markdown-syntax-guide", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install antdigital-ai/agentic-ui markdown-syntax-guideInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add antdigital-ai/agentic-ui --skill markdown-syntax-guide -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/antdigital-ai/agentic-ui.git skills-src && mkdir -p .github/skills && cp -r skills-src/.cursor/skills/markdown-syntax-guide .github/skills/markdown-syntax-guide && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "markdown-syntax-guide" agent skill from https://github.com/antdigital-ai/agentic-ui/tree/main/.cursor/skills/markdown-syntax-guide into .github/skills/markdown-syntax-guide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "markdown-syntax-guide", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add antdigital-ai/agentic-ui --skill markdown-syntax-guide -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install antdigital-ai/agentic-ui markdown-syntax-guide --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/antdigital-ai/agentic-ui.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.cursor/skills/markdown-syntax-guide .opencode/skills/markdown-syntax-guide && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "markdown-syntax-guide" agent skill from https://github.com/antdigital-ai/agentic-ui/tree/main/.cursor/skills/markdown-syntax-guide into .opencode/skills/markdown-syntax-guide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "markdown-syntax-guide", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
markdown-syntax-guide- GitHub stars
- 224
- Token cost
- ~3.1k tokens
- SKILL.md length
- 619 words
- Files
- 3 (incl. scripts)
- Skills in repo
- 22
- Repo updated
- First seen
- Licence
- MIT
At a glance
指导用户使用 @ant-design/agentic-ui 的 Markdown Editor / Renderer 扩展语法。图表场景优先使用内置 chart（HTML 注释 chartType + 表格），只有当内置 chartType 都不能表达诉求时才回退 Mermaid。Triggers on keywords like 表格, 视频, 图表, 卡片, 提示块, 流程图, 语法…
- Works in 7 steps: 表格 (Tables) → 视频 (Video) → 图表 (Charts) → …
- Keywords like 表格
- SKILL.md covers Skill 激活场景, 语法速查表, 指导原则 and 参考文档, plus 2 more sections
- Runs Python scripts from its folder; calls python; reaches tailwindcss.com and developer.mozilla.org
What it does
Markdown Syntax Guide is an agent skill from antdigital-ai/agentic-ui. 指导用户使用 @ant-design/agentic-ui 的 Markdown Editor / Renderer 扩展语法。图表场景优先使用内置 chart（HTML 注释 chartType + 表格），只有当内置 chartType 都不能表达诉求时才回退 Mermaid。Triggers on keywords like 表格, 视频, 图表, 卡片, 提示块, 流程图, 语法, 怎么写, how to write table chart video card mermaid.
Its SKILL.md is about 3.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 4 other files, including scripts (for example `data/syntax-snippets.json` and `scripts/lookup.py`).
It sits in Documents & Office, covering Markdown and Diagrams. It works with Mermaid and Ant Design. The licence is MIT.
When your agent uses it
- Keywords like 表格
- How to write table chart video card mermaid
Example prompts
- “/markdown-syntax-guide”
Requirements
- Python 3
Workflow steps
7 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit d0aed66. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships 1 file in scripts/ (Python), which the agent can run.
Shell commands in SKILL.md call:
python
From the folder's file list and the shell code blocks in SKILL.md.
Network
Hosts in commands or code, which the agent is likely to contact:
tailwindcss.comdeveloper.mozilla.org
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Markdown Syntax Guide loads about 3.1k tokens when it runs. Until then it costs about 70 tokens; SKILL.md has 619 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
SKILL.md
The full file from antdigital-ai/agentic-ui at commit d0aed66, republished under its MIT licence (© antdigital-ai). 619 words, ~3,135 tokens.
Download SKILL.mdSave it as
.claude/skills/markdown-syntax-guide/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.- name
- markdown-syntax-guide
- description
- 指导用户使用 @ant-design/agentic-ui 的 Markdown Editor / Renderer 扩展语法。图表场景**优先使用内置 chart**（HTML 注释 `chartType` + 表格），**只有当内置 chartType 都不能表达诉求时才回退 Mermaid**。Triggers on keywords like 表格, 视频, 图表, 卡片, 提示块, 流程图, 语法, 怎么写, how to write table chart video card mermaid.
Markdown 语法指导 Skill
当用户或 AI 需要生成可被 @ant-design/agentic-ui 的 MarkdownEditor / MarkdownRenderer 正确解析的内容时，使用本技能提供与代码实现严格对齐的语法指导。
核心原则（图表场景）：先看「图表选型决策表」 → 命中内置 chartType 就用 HTML 注释 + 表格 → 实在没有合适 chartType 才回退 Mermaid 代码块。
Skill 激活场景
| 触发关键词 | 指导内容 |
|---|---|
表格, table | 基础 Markdown 表格 + chartType: "table" 高级表格 + 图表化表格 |
视频, video | HTML <video> 标签 +  图片式语法 |
图表, chart, 柱状图, 饼图, 折线图, 散点, 雷达, 漏斗, 箱线, 直方 | 优先给 chartType HTML 注释 + 表格示例（见图表选型决策表） |
流程图, 时序图, 甘特图, mermaid | 回退方案：内置 chartType 无法表达流程关系时，才给 Mermaid 代码块 |
卡片, card, link-card | 链接卡片语法（{"type":"card", ...} + 链接） |
提示块, alert, info, warning, success, error | ::: 容器语法 |
附件, attachment |  语法 |
任务列表, task list | GFM - [x] / agentic-ui-task 代码块 |
工具栏, tool use bar | agentic-ui-toolusebar 代码块 |
文件列表, filemap | agentic-ui-filemap 代码块 |
MDX, 内嵌组件 | React 组件嵌入（依赖 MDX 渲染上下文） |
apaasify | aPaaS Schema 代码块 |
怎么写, 语法, 格式 | 综合语法速查 |
语法速查表
1. 表格 (Tables)
基础 Markdown 表格
| 标题 1 | 标题 2 | 标题 3 |
| :----- | :----: | -----: |
| 左对齐 | 居中 | 右对齐 |
| 内容 | 内容 | 内容 |高级表格（通过 HTML 注释启用）
<!-- {"chartType": "table"} -->
| 姓名 | 年龄 | 职业 |
| :--- | :--- | :----- |
| 张三 | 28 | 工程师 |
| 李四 | 32 | 设计师 |将表格渲染为图表（柱状图、饼图、折线图等）
<!-- {"chartType": "bar", "x": "产品", "y": "销量", "title": "销量对比"} -->
| 产品 | 销量 |
| :--- | :--- |
| A | 100 |
| B | 150 |
| C | 80 |支持的 chartType：bar（条形）、column（柱状）、line（折线）、area（面积）、pie（饼图）、donut（环形）、radar（雷达）、scatter（散点）、funnel（漏斗）、table（表格）、descriptions（定义列表）、docCards（卡片列表）、quadrant（四象限图）。
2. 视频 (Video)
方式一：HTML video 标签
<video src="https://example.com/video.mp4" controls width="400"></video>带完整属性：
<video src="video.mp4" controls autoplay loop muted poster="poster.jpg" width="640" height="360"></video>多格式源：
<video controls width="600">
<source src="https://example.com/video.mp4" type="video/mp4">
<source src="https://example.com/video.webm" type="video/webm">
Your browser does not support the video tag.
</video>方式二：图片式视频语法（扩展 Markdown，类似图片写法）
alt使用video:自定义名称格式，渲染时会识别为视频并嵌入播放器。
3. 图表 (Charts)
铁律：先查"图表选型决策表"。命中内置
chartType一律用 HTML 注释 + 表格；仅当找不到任何合适的内置 chartType（典型如"流程图、时序图、状态机、甘特图、ER 图"等关系/流程类）时，才回退 Mermaid。
3.1 图表选型决策表
| 用户诉求 | 推荐 chartType | 是否需要 Mermaid |
|---|---|---|
| 类目对比（横向） | bar | ❌ |
| 类目对比（纵向） | column | ❌ |
| 趋势 / 时间序列 | line | ❌ |
| 累积趋势 / 占比堆叠 | area | ❌ |
| 占比 / 构成 | pie | ❌ |
| 占比（中间留空） | donut | ❌ |
| 多维能力对比 | radar | ❌ |
| 二维点分布 / 相关性 | scatter | ❌ |
| 转化漏斗 | funnel | ❌ |
| 数据分布（五数概括） | boxplot | ❌ |
| 频数分布 | histogram | ❌ |
| 仅展示原始表格（不画图） | table | ❌ |
| 键值对定义列表 | descriptions | ❌ |
| 文档/网站/工具的卡片栅格（标题 + URL + 简介 + 标签） | docCards | ❌ |
| 优先级矩阵 / 二维分类（四象限） | quadrant | ❌ |
| 流程图 / 决策树 | — | ✅ Mermaid flowchart |
| 时序图 / 调用链 | — | ✅ Mermaid sequenceDiagram |
| 甘特图 / 时间安排 | — | ✅ Mermaid gantt |
| 状态机 | — | ✅ Mermaid stateDiagram |
| ER 图 / 类图 | — | ✅ Mermaid erDiagram / classDiagram |
3.2 内置图表语法（首选）
在 Markdown 表格的正上方紧贴一行 HTML 注释，注释体是合法 JSON：
<!-- {"chartType": "pie", "x": "类型", "y": "占比", "title": "类型分布"} -->
| 类型 | 占比 |
| :--- | ---: |
| A | 30 |
| B | 50 |
| C | 20 |配置字段速查：
| 字段 | 类型 | 说明 |
|---|---|---|
chartType | string | 图表类型，必填，见上方决策表 |
x | string | X 轴列名，对应表头 |
y | string | Y 轴列名，对应表头 |
title | string | 图表标题（可选） |
groupBy | string | 分组列名，用于 radar / scatter / funnel / boxplot / histogram 多组对比 |
colorLegend | string | 颜色图例列名（多系列染色） |
filterBy | string | 过滤维度列名 |
height | number | 图表高度，默认 400 |
3.3 多图表配置（一个表格画多种图）
注释体写成 JSON 数组：
<!-- [{"chartType": "bar", "x": "产品", "y": "销量"}, {"chartType": "pie", "x": "产品", "y": "销量"}] -->
| 产品 | 销量 |
| :--- | ---: |
| A | 100 |
| B | 150 |
| C | 80 |🔸 当数组里所有
chartType都为"table"时，插件会跳过转换，保留原始表格渲染。
3.3.1 卡片栅格（docCards）
当用户希望以「双列 / 单列卡片」呈现一组带 标题、URL、简介、标签 的条目时，使用
chartType: "docCards"。一行 Markdown 表格 = 一张卡片，与现有 chart 共用同一套契约。
<!-- {"chartType": "docCards", "title": "推荐文档站", "cardColumns": 2} -->
| 名称 | 地址 | 简介 | 亮点 |
| :---------------- | :---------------------------- | :------------------------- | :------------------------- |
| Tailwind CSS Docs | https://tailwindcss.com/docs | 结构清晰、搜索与导航强 | 交互式示例, 深链, 暗色模式 |
| MDN | https://developer.mozilla.org | 权威 Web 平台参考 | 多语言, 可折叠, 示例可编辑 |- 表头别名（默认匹配）：
名称/标题/name/title→title；地址/链接/URL→url；简介/描述→description；亮点/标签→tags。同样支持「列名 = 逻辑名 + 中英文括号单位」的宽松匹配。 - 标签拆分：
tags列允许半角逗号,、分号;、竖线|、斜杠/与全角，；、分隔。 - 可选配置：
cardColumns（默认2，传1即全宽列表）、fieldMap（显式覆盖列名映射）。 - 降级策略：注释中无法定位主标题列时，整表会降级为普通 Markdown 表格，避免空白卡片栅格。
3.4 内置 chart 的智能识别能力
当前实现已自动处理以下"用户书写不规范"的常见情况，生成示例时无需提醒用户改写数据：
- 列名模糊匹配：注释里
"y": "销售额"可自动匹配表头销售额(元)/销售额（元）（忽略括号单位后缀） - 数值自动识别（表格单元格 → number）：
- 千分位：
8,287.44/12,3456/1，234.5（中英文逗号皆可，末段需 ≥ 3 位数字） - 百分比：
12.5%/-3%/+12,345.6%（保留字面值，不做/100） - 紧凑后缀：
1.2k/3M/-2.5B/1.5e3k（k=1e3, m=1e6, b=1e9, t=1e12，大小写均可） - 科学计数法：
1.2e3/-3.14E+10/1e-5（裸形式由Number()直接处理） - 中文金额：
1.5万/2亿（由parseChineseCurrencyToNumber兜底） - 带正号：
+1,234/+3.14
- 千分位：
3.5 完整示例
柱状图（销量对比）
<!-- {"chartType": "column", "x": "品类", "y": "销售额", "title": "品类销售额排名"} -->
| 品类 | 销售额(元) |
| :--------- | ---------: |
| 休闲食品 | 29,337.76 |
| 酒水饮料 | 16,895.05 |
| 速冻日配 | 16,843.76 |折线图（趋势）
<!-- {"chartType": "line", "x": "时段", "y": "客单价", "title": "分时段客单价"} -->
| 时段 | 客单价(元) |
| :---- | ---------: |
| 8:00 | 56.76 |
| 9:00 | 87.94 |
| 10:00 | 78.35 |雷达图（多维对比）
<!-- {"chartType": "radar", "x": "维度", "y": "得分", "groupBy": "用户"} -->
| 用户 | 维度 | 得分 |
| :--- | :--- | ---: |
| 张三 | 性能 | 85 |
| 张三 | 体验 | 90 |
| 李四 | 性能 | 78 |
| 李四 | 体验 | 88 |漏斗图（转化）
<!-- {"chartType": "funnel", "x": "阶段", "y": "人数"} -->
| 阶段 | 人数 |
| :------- | ----: |
| 浏览 | 10000 |
| 加购 | 3500 |
| 下单 | 1800 |
| 支付完成 | 1500 |饼图 + 柱状图共存
<!-- [{"chartType": "pie", "x": "渠道", "y": "GMV"}, {"chartType": "bar", "x": "渠道", "y": "GMV"}] -->
| 渠道 | GMV |
| :---- | -----: |
| 直营 | 12.5万 |
| 分销 | 3亿 |
| 跨境 | 1.2k |Show full SKILL.md (254 more words)Show less
3.6 兜底：Mermaid（仅在内置 chartType 都不适用时使用）
出现以下信号时才考虑 Mermaid：用户提到
流程图 / 时序图 / 甘特图 / 状态机 / ER 图 / 类图，或要表达"节点之间的关系/调用顺序"。
mermaid 语言代码块在 MarkdownEditor 中受支持（流式解析也对其特殊处理，见 findMatchingClose.ts），MarkdownRenderer 通过通用代码块渲染：
```mermaid
flowchart TD
A[开始] --> B{判断}
B -- 是 --> C[执行]
B -- 否 --> D[结束]
C --> D
```💡 在
MarkdownEditor中可用快捷键Cmd/Ctrl + Option/Alt + M直接插入 Mermaid 代码块。
反例（不应该用 Mermaid 的场景）：
| ❌ 错误用法 | ✅ 应该用 |
|---|---|
用 Mermaid pie 画占比 | 内置 chartType: "pie" |
用 Mermaid xychart-beta 画柱状/折线 | 内置 chartType: "column" / "line" |
| 用 Mermaid 画散点图 | 内置 chartType: "scatter" |
4. 卡片 (Cards)
链接卡片（Link Card）
格式：HTML 注释 {"type": "card", ...} + 紧接着的 Markdown 链接。
<!-- {"type": "card", "icon": "https://example.com/icon.svg", "title": "卡片标题", "description": "卡片描述"} -->
[链接文本](https://example.com "悬停提示")简化示例：
<!-- {"type": "card", "title": "网易", "description": "Electronic Gaming & Multimedia"} -->
[网易](https://example.com/company/49 "公司信息")注释必须与链接在同一段落内，且
type必须为"card"。
内嵌 React 组件（MDX）
import { Card } from 'antd';
<Card title="卡片标题">
卡片内容
</Card>5. 提示块 (Alerts)
使用 ::: 语法（兼容 markdown-it-container）。注意：::: 与内容之间需用空行分隔。
:::info
这是信息提示块。
:::
:::warning
这是警告提示块。
:::
:::success
这是成功提示块。
:::
:::error
这是错误提示块。
:::6. 附件 (Attachments)
alt使用attachment:显示名称格式，渲染为可下载的附件链接。
7. 其他扩展
任务列表
- [x] 已完成任务
- [ ] 未完成任务aPaaSify Schema 组件
```apaasify
{
"type": "page",
"body": [
{
"type": "button",
"label": "点击我"
}
]
}
```Agentic UI 嵌入块（@ant-design/agentic-ui MarkdownEditor / MarkdownRenderer）
任务列表（渲染为 TaskList）：
```agentic-ui-task
{
"items": [
{ "key": "1", "title": "步骤", "content": "详情", "status": "loading" }
]
}
```（默认 variant 为 simple；需完整任务链样式时在 JSON 根级增加 "variant": "default"。）
工具使用栏（渲染为 ToolUseBar）：
```agentic-ui-toolusebar
{
"tools": [
{ "id": "1", "toolName": "web_search", "toolTarget": "example.com", "status": "loading" }
]
}
```文件列表（渲染为 FileMapView）：
```agentic-ui-filemap
{
"fileList": [
{ "uuid": "1", "name": "README.md", "size": 2048, "type": "text/markdown", "url": "https://example.com/README.md" },
{ "uuid": "2", "name": "package.json", "size": 512, "type": "application/json", "url": "https://example.com/package.json" }
]
}
```支持字段：
fileList（或别名files）：文件对象数组name：文件名（必填）uuid/id：唯一标识（可选，缺省时自动生成）size：文件大小（字节数，可选）type：MIME 类型（可选，用于显示文件图标）url：文件链接（可选）previewUrl：预览链接（可选）status："done"/"uploading"/"pending"/"error"（可选）errorMessage：错误说明（status === "error"时显示，可选）
className：自定义根元素类名（可选）
3D 模型（若项目支持）
```model
format: glb
source: https://example.com/3d/model.glb
camera:
position: [0, 2, 5]
target: [0, 0, 0]
```音频
```audio
source: https://example.com/audio/note.mp3
title: 功能说明
```指导原则
- 优先给出可直接复制的示例：用户通常需要「照着改」就能用，先示例后讲解。
- 图表回复决策顺序（最重要）：
- 先匹配「§3.1 图表选型决策表」→ 命中内置
chartType直接给注释 + 表格 - 仅当落到决策表最后几行（流程图 / 时序图 / 甘特图 / 状态机 / ER 图 / 类图）时，才给 Mermaid 代码块
- 绝对不要用 Mermaid 画饼图、柱状图、折线图、散点图等内置已支持的图——Mermaid 是兜底而非首选
- 先匹配「§3.1 图表选型决策表」→ 命中内置
- 说明必须紧邻：
chartType注释必须紧贴表格上方（中间不能有空行外的内容）；链接卡片的注释必须与链接在同一段落。 - 字段名与表格列一致：
x/y/groupBy/colorLegend/filterBy都对应表头列名。列名模糊匹配已生效——写"y": "销售额"能命中表头销售额(元)，无需特意写完整。 - 数值不需要预处理：表格里的
8,287.44/12.5%/1.2k/1.5万/1.5e3/+1,234都会自动转 number，不要让用户手工去掉单位/逗号/百分号。 - JSON 格式严格：HTML 注释内的 JSON 不能有尾逗号、不能有注释、字符串必须双引号，否则解析失败保留原表格。
- 多图共存用数组：同一表格画多种图时，注释体写
[{...}, {...}]；如果数组里全是chartType: "table"，插件会跳过转换。 - Mermaid 使用门槛：仅当用户明确要表达「节点之间的关系/调用顺序/状态变化」且没有任何内置 chartType 能表达时，才使用。
- 流程表达的非 Mermaid 替代：简单步骤优先用有序列表、
agentic-ui-task任务块；复杂关系才用 Mermaid。 - 区分渲染环境：MDX、
apaasify、model、audio等依赖具体项目配置，需说明「若项目支持」。
参考文档
| 文档 / 源码 | 内容 |
|---|---|
docs/utils/markdown-syntax.md | 完整 Markdown 语法（中文） |
docs/utils/markdown-syntax.en-US.md | 英文版语法 |
docs/utils/chart-config.md | 图表配置详解 |
docs/demos-pages/video.md | 视频支持说明 |
src/MarkdownRenderer/plugins/remarkChartFromComment.ts | HTML 注释 → chart 代码块的 mdast 转换 |
src/Plugins/chart/ChartRender.tsx | 11 种图表类型的运行时渲染 |
src/MarkdownRenderer/utils/chartAxisMatch.ts | 列名模糊匹配（忽略括号单位） |
src/MarkdownRenderer/utils/astExtract.ts | 表格单元格数值识别（千分位 / 百分比 / 紧凑后缀 / 科学计数） |
src/MarkdownEditor/editor/utils/findMatchingClose.ts | Mermaid 代码块的流式完整性判断 |
快速回复模板
当用户问「怎么在 Markdown 里加表格/视频/图表/卡片」时，可复用上述对应章节的示例，并附带一句说明（如「将示例中的 URL、列名换成你的数据即可」）。
命令行速查（可选）
如需快速获取某类语法的代码片段，可运行：
# 查看所有可用关键词
python .cursor/skills/markdown-syntax-guide/scripts/lookup.py -l
# 获取表格语法
python .cursor/skills/markdown-syntax-guide/scripts/lookup.py table.advanced
# 获取柱状图语法
python .cursor/skills/markdown-syntax-guide/scripts/lookup.py chart.bar
# 获取视频语法
python .cursor/skills/markdown-syntax-guide/scripts/lookup.py video.html语法片段数据位于 data/syntax-snippets.json。
© antdigital-ai, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 2 other files (scripts) in .cursor/skills/markdown-syntax-guide of antdigital-ai/agentic-ui.
- SKILL.md
- data/syntax-snippets.json
- scripts/lookup.py
Open the folder on GitHubat commit d0aed66
Compare with similar skills
Markdown Syntax Guide next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Markdown Syntax Guide this skillantdigital-ai/agentic-ui | 224 | — | ~3.1k | Automated safety check: Pass | MIT | |
| Markdown Report WritingNeuroAIHub/BrainPilot | 1.1k | — | ~2.6k | Automated safety check: Warn | AGPL-3.0 | |
| Axiom Explainerdigoal/blog | 8.6k | — | ~3.6k | Automated safety check: Pass | GPL-2.0 | |
| Bm Mdmiantiao-me/bm.md | 616 | — | ~2.1k | Automated safety check: Pass | LGPL-3.0 | |
| Chatbot Mvp Distillationpdsuwwz/chatgpt-vue3-light-mvp | 578 | — | ~722 | Automated safety check: Pass | MIT | |
| Chatbot Mvp Distillation Zhpdsuwwz/chatgpt-vue3-light-mvp | 578 | — | ~414 | Automated safety check: Pass | MIT |
Similar skills
Axiom Explainer
digoal/blog
Write Chinese Markdown articles for university students and adults with social experience that explain one viewpoint, axiom, theorem, law, principle, or theory system through "求真讲法、求存讲法、思考", with…
Bm Md
miantiao-me/bm.md
使用 bm.md 写作、改写、排版或渲染 Markdown；生成 Mermaid 与 AntV Infographic，设置图片尺寸、高亮重点，以及执行 HTML/纯文本转换和 Markdown lint
Chatbot Mvp Distillation
pdsuwwz/chatgpt-vue3-light-mvp
Distill the chatgpt-vue3-light-mvp project into reusable architecture for building similar ChatGPT-style web products in other repositories.
Chatbot Mvp Distillation Zh
pdsuwwz/chatgpt-vue3-light-mvp
将 chatgpt-vue3-light-mvp 项目蒸馏为可迁移到其他项目的中文架构指南。适用于设计或实现类似 ChatGPT 的 Web 对话产品，包括 SSE/fetch 流式响应、模型适配器契约、打字机渲染、Markdown/代码/KaTeX/Mermaid 渲染、推理过程展示，以及从本 Vue 3 MVP 迁移到其他项目的方案规划。
Markdown Mermaid Writing
K-Dense-AI/scientific-agent-skills
Writes scientific Markdown documentation and Mermaid diagrams for workflows, relationships, timelines, and schemas.
More from antdigital-ai/agentic-ui
All 22 skills in this repoAgentic UI Usage
antdigital-ai/agentic-ui
Guides how to use @ant-design/agentic-ui in applications (install, import, layout, chat, editor, i18n).
Component Bubble
antdigital-ai/agentic-ui
Develop and extend Bubble components (AIBubble, UserBubble, Bubble list) for AI chat messages in @ant-design/agentic-ui.
Component Schema
antdigital-ai/agentic-ui
Develop SchemaForm, SchemaEditor, SchemaRenderer and validator in @ant-design/agentic-ui for low-code and JSON Schema.
Agentic UI Development
antdigital-ai/agentic-ui
Guides development workflow, design system, scripts, and component inventory for @ant-design/agentic-ui.
Component Agentic Layout
antdigital-ai/agentic-ui
Develop AgenticLayout (left-center-right layout with header) in @ant-design/agentic-ui.
Gh Create PR
antdigital-ai/agentic-ui
使用 GitHub CLI (gh) 推送当前分支并创建或更新 PR。在用户说「提 PR」「新建 PR」「用 gh 建 PR」「submit PR」「create pull request」时使用。
Related
Works with
Categories
Questions about Markdown Syntax Guide
What does Markdown Syntax Guide do?
指导用户使用 @ant-design/agentic-ui 的 Markdown Editor / Renderer 扩展语法。图表场景优先使用内置 chart（HTML 注释 chartType + 表格），只有当内置 chartType 都不能表达诉求时才回退 Mermaid。Triggers on keywords like 表格, 视频, 图表, 卡片, 提示块, 流程图, 语法…. Markdown Syntax Guide is an agent skill from antdigital-ai/agentic-ui. 指导用户使用 @ant-design/agentic-ui 的 Markdown Editor / Renderer 扩展语法。图表场景优先使用内置 chart（HTML 注释 chartType + 表格），只有当内置 chartType 都不能表达诉求时才回退 Mermaid。Triggers on keywords like 表格, 视频, 图表, 卡片, 提示块, 流程图, 语法, 怎么写, how to write table chart video card mermaid.
When should I use Markdown Syntax Guide?
Markdown Syntax Guide fits situations like: keywords like 表格; how to write table chart video card mermaid.
How do I install Markdown Syntax Guide in Claude Code?
Run `npx skills add antdigital-ai/agentic-ui --skill markdown-syntax-guide -a claude-code`. Or copy the skill folder (.cursor/skills/markdown-syntax-guide in antdigital-ai/agentic-ui) into .claude/skills/markdown-syntax-guide in your project. Claude Code loads it when a task matches its description.
How do I install Markdown Syntax Guide in Codex?
Run `npx skills add antdigital-ai/agentic-ui --skill markdown-syntax-guide -a codex`. Or copy the skill folder (.cursor/skills/markdown-syntax-guide in antdigital-ai/agentic-ui) into .agents/skills/markdown-syntax-guide in your project. Codex loads it when a task matches its description.
Can I use Markdown Syntax Guide in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add antdigital-ai/agentic-ui --skill markdown-syntax-guide -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/markdown-syntax-guide, .gemini/skills/markdown-syntax-guide, .github/skills/markdown-syntax-guide and .opencode/skills/markdown-syntax-guide in your project.
What does Markdown Syntax Guide need to run?
Going by SKILL.md and its folder, Markdown Syntax Guide needs Python for the scripts in its folder and the command-line tools its instructions call (python). Our summary lists: Python 3.
Does Markdown Syntax Guide access the network?
SKILL.md names 2 domains. In commands or code: tailwindcss.com and developer.mozilla.org; the agent is likely to contact these when it follows the instructions. This is read from the text; nothing was executed.
Is Markdown Syntax Guide safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does Markdown Syntax Guide use?
Markdown Syntax Guide is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Markdown Syntax Guide use?
About 3.1k tokens (SKILL.md is roughly 13k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Markdown Syntax Guide?
Skills that share tags, products or a category with Markdown Syntax Guide: Markdown Report Writing (NeuroAIHub/BrainPilot, 1.1k stars), Axiom Explainer (digoal/blog, 8.6k stars), Bm Md (miantiao-me/bm.md, 616 stars) and Chatbot Mvp Distillation (pdsuwwz/chatgpt-vue3-light-mvp, 578 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Markdown Syntax Guide?
antdigital-ai (a GitHub organization) maintains it in antdigital-ai/agentic-ui, which has 224 GitHub stars. The repository holds 22 skills in this directory. The repository was last updated on October 6, 2026.
Source: antdigital-ai/agentic-ui on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.