feat: add agent skills (#823)

* feat: add agent skills

* chore: tweak

skills/README.md

@@ -0,0 +1,156 @@
+# VuePress Plume Skills
+
+This directory contains specialized skills for VuePress Plume theme, designed to enhance your development experience with AI agents.
+
+## 1. Skill Introduction
+
+The `skills` directory currently provides the following skills:
+
+### 🌟 Available Skills
+
+| Skill Name | Description | Key Features |
+| ---------- | ----------- | ------------ |
+| **vuepress-plume-config** | Theme Configuration Generator | • Generates `config.ts`, `plume.config.ts`<br>• Manages `themeConfig`, `navbar`, `sidebar`<br>• Supports `locales` and `plugins` configuration |
+| **vuepress-plume-markdown** | Markdown Writing Assistant | • Provides syntax for Plume's Markdown extensions<br>• Supports Charts (Mermaid, ECharts, etc.)<br>• Supports Embeds (YouTube, Bilibili, PDF) |
+
+### 🔍 Selection Guide
+
+- **Use `vuepress-plume-config` when:**
+  - You are initializing a new VuePress Plume project.
+  - You need to update the theme configuration, navbar, or sidebar.
+  - You want to configure complex settings like locales or plugins.
+
+- **Use `vuepress-plume-markdown` when:**
+  - You are writing content in Markdown files.
+  - You want to use advanced features like containers, code groups, or diagrams.
+  - You need to embed media or external content.
+
+---
+
+## 2. Installation and Configuration
+
+You can install these skills into your project or globally using the `skills` CLI tool.
+
+### Prerequisites
+
+- Node.js installed
+- `npx` available
+
+### Installation Steps
+
+1. **Install specific skills from this repository:**
+
+    ```bash
+    # Install into your current project (recommended for teams)
+    npx skills add https://github.com/pengzhanbo/vuepress-plume
+
+    # Install specific skill only
+    npx skills add https://github.com/pengzhanbo/vuepress-plume --skill vuepress-plume-config
+    ```
+
+2. **Verify Installation:**
+
+    ```bash
+    npx skills list
+    ```
+
+    You should see the installed skills listed in the output.
+
+---
+
+## 3. Integration Guide
+
+### 🤖 Claude Code Integration
+
+Claude Code automatically detects skills in the `.claude/skills` directory or the standard `skills` directory if configured.
+
+**Setup:**
+
+```bash
+# Install for Claude Code specifically
+npx skills add https://github.com/pengzhanbo/vuepress-plume -a claude-code
+```
+
+**Configuration:**
+Ensure your `~/.claude/config.json` or project configuration allows loading skills from the installed location.
+
+### 🌐 OpenCode Integration
+
+OpenCode supports the open agent skills standard.
+
+**Setup:**
+
+```bash
+# Install for OpenCode
+npx skills add https://github.com/pengzhanbo/vuepress-plume -a opencode
+```
+
+**Usage:**
+Once installed, OpenCode agents will automatically index the skills and can be invoked using natural language prompts.
+
+### 🚀 Trae Integration
+
+Trae is a powerful IDE that can utilize these skills to assist you better.
+
+**Setup:**
+
+1. **Project-level:** Clone or install the skills into your project's `skills/` directory. Trae can scan and utilize `SKILL.md` files located in the project workspace.
+2. **Usage:** Simply ask Trae to perform tasks related to the skills.
+
+**Example:**
+> "Help me configure the navbar for my VuePress site using the plume config skill."
+
+**Debugging:**
+If Trae doesn't recognize the skill, ensure the `SKILL.md` file is valid and contains the correct frontmatter (name, description).
+
+---
+
+## 4. Usage Examples
+
+### 🛠️ Using `vuepress-plume-config`
+
+**Scenario:** Initialize a new configuration file.
+
+**Prompt:**
+> "Generate a `config.ts` for my VuePress Plume site with a blog setup, English and Chinese locales, and the filesystem cache enabled."
+
+**Outcome:**
+The agent will use the skill to create a `src/.vuepress/config.ts` file with the requested configuration structure.
+
+### 📝 Using `vuepress-plume-markdown`
+
+**Scenario:** Add a complex diagram to a documentation page.
+
+**Prompt:**
+> "I want to add a timeline of VuePress release history to my markdown file using the Plume timeline extension."
+
+**Outcome:**
+The agent will reference the `vuepress-plume-markdown` skill to provide the correct syntax:
+
+```markdown
+::: timeline 2024
+2024-01-01: **VuePress Plume v1.0.0 Released**
+The first official release.
+
+2024-06-01: **Feature Update**
+Added support for new markdown extensions.
+:::
+```
+
+---
+
+## 5. Best Practices
+
+### Recommendations
+
+- **Version Control:** Commit your `skills/` directory to Git if you are using project-level skills. This ensures all team members have access to the same capabilities.
+- **Updates:** Regularly check for updates to the skills to get the latest features and fixes.
+
+    ```bash
+    npx skills update
+    ```
+
+### Performance & Security
+
+- **Review Changes:** Always review the configuration files generated by the `vuepress-plume-config` skill before deploying.
+- **Safe Execution:** These skills primarily generate text/code. They do not execute system commands directly without user confirmation in most agent environments.

skills/README.zh-CN.md

@@ -0,0 +1,158 @@
+# VuePress Plume Skills
+
+此目录包含为 VuePress Plume 主题定制的专用技能（Skills），旨在通过 AI 代理提升您的开发体验。
+
+## 1. 技能介绍
+
+`skills` 目录目前提供以下技能：
+
+### 🌟 可用技能
+
+| 技能名称 | 描述 | 主要特性 |
+| ---------- | ----------- | ------------ |
+| **vuepress-plume-config** | 主题配置生成器 | • 生成 `config.ts`, `plume.config.ts`<br>• 管理 `themeConfig`, `navbar`, `sidebar`<br>• 支持 `locales` 和 `plugins` 配置 |
+| **vuepress-plume-markdown** | Markdown 写作助手 | • 提供 Plume Markdown 扩展语法<br>• 支持图表 (Mermaid, ECharts 等)<br>• 支持嵌入 (YouTube, Bilibili, PDF) |
+
+### 🔍 选择指南
+
+- **使用 `vuepress-plume-config` 的场景：**
+  - 初始化一个新的 VuePress Plume 项目。
+  - 需要更新主题配置、导航栏或侧边栏。
+  - 需要配置复杂设置，如多语言或插件。
+
+- **使用 `vuepress-plume-markdown` 的场景：**
+  - 编写 Markdown 内容文件。
+  - 需要使用高级功能，如容器、代码组或图表。
+  - 需要嵌入媒体或外部内容。
+
+---
+
+## 2. 安装与配置
+
+您可以使用 `skills` CLI 工具将这些技能安装到您的项目中或全局安装。
+
+### 前置要求
+
+- 已安装 Node.js
+- `npx` 可用
+
+### 安装步骤
+
+1. **从本仓库安装特定技能：**
+
+    ```bash
+    # 安装到当前项目（团队协作推荐）
+    npx skills add https://github.com/pengzhanbo/vuepress-plume
+
+    # 仅安装特定技能
+    npx skills add https://github.com/pengzhanbo/vuepress-plume --skill vuepress-plume-config
+    ```
+
+2. **验证安装：**
+
+    ```bash
+    npx skills list
+    ```
+
+    您应该能看到已安装的技能列在输出中。
+
+---
+
+## 3. 集成指南
+
+### 🤖 Claude Code 集成
+
+Claude Code 会自动检测 `.claude/skills` 目录或配置的标准 `skills` 目录中的技能。
+
+**设置：**
+
+```bash
+# 专为 Claude Code 安装
+npx skills add https://github.com/pengzhanbo/vuepress-plume -a claude-code
+```
+
+**配置：**
+确保您的 `~/.claude/config.json` 或项目配置允许从安装位置加载技能。
+
+### 🌐 OpenCode 集成
+
+OpenCode 支持开放代理技能（open agent skills）标准。
+
+**设置：**
+
+```bash
+# 为 OpenCode 安装
+npx skills add https://github.com/pengzhanbo/vuepress-plume -a opencode
+```
+
+**使用：**
+安装后，OpenCode 代理将自动索引技能，并可通过自然语言提示调用。
+
+### 🚀 Trae 集成
+
+Trae 是一个强大的 IDE，可以利用这些技能更好地协助您。
+
+**设置：**
+
+1. **项目级：** 克隆或安装技能到您项目的 `skills/` 目录。Trae 可以扫描并利用项目工作区中的 `SKILL.md` 文件。
+2. **使用：** 直接要求 Trae 执行与技能相关的任务。
+
+**示例：**
+> "帮我使用 plume config skill 配置 VuePress 站点的导航栏。"
+
+**调试：**
+如果 Trae 无法识别技能，请确保 `SKILL.md` 文件有效且包含正确的 frontmatter（name, description）。
+
+---
+
+## 4. 使用示例
+
+### 🛠️ 使用 `vuepress-plume-config`
+
+**场景：** 初始化一个新的配置文件。
+
+**提示词：**
+> "Generate a `config.ts` for my VuePress Plume site with a blog setup, English and Chinese locales, and the filesystem cache enabled."
+> （"为我的 VuePress Plume 站点生成一个 `config.ts`，包含博客设置、中英文多语言支持，并启用文件系统缓存。"）
+
+**结果：**
+代理将使用技能创建一个包含请求配置结构的 `src/.vuepress/config.ts` 文件。
+
+### 📝 使用 `vuepress-plume-markdown`
+
+**场景：** 向文档页面添加复杂图表。
+
+**提示词：**
+> "I want to add a timeline of VuePress release history to my markdown file using the Plume timeline extension."
+> （"我想使用 Plume 时间轴扩展在 Markdown 文件中添加 VuePress 发布历史的时间轴。"）
+
+**结果：**
+代理将引用 `vuepress-plume-markdown` 技能提供正确的语法：
+
+```markdown
+::: timeline 2024
+2024-01-01: **VuePress Plume v1.0.0 Released**
+The first official release.
+
+2024-06-01: **Feature Update**
+Added support for new markdown extensions.
+:::
+```
+
+---
+
+## 5. 最佳实践
+
+### 建议
+
+- **版本控制：** 如果使用项目级技能，请将 `skills/` 目录提交到 Git。这确保所有团队成员都能使用相同的功能。
+- **更新：** 定期检查技能更新以获取最新功能和修复。
+
+    ```bash
+    npx skills update
+    ```
+
+### 性能与安全
+
+- **审查更改：** 在部署之前，始终审查由 `vuepress-plume-config` 技能生成的配置文件。
+- **安全执行：** 这些技能主要生成文本/代码。在大多数代理环境中，未经用户确认，它们不会直接执行系统命令。

skills/vuepress-plume-config/SKILL.md

@@ -0,0 +1,361 @@
+---
+name: vuepress-plume-config
+description: Generate and write VuePress Plume theme config. Invoke when user asks to init or update theme config.
+---
+
+# VuePress Plume Config Skill
+
+This skill generates, manages, and writes VuePress Plume theme configuration files based on the official documentation. It supports `.vuepress/config.ts`, `.vuepress/config.js`, and `.vuepress/plume.config.ts`.
+
+**When to Invoke**
+
+- Initialize or update Plume theme configuration
+- Dynamically generate themeConfig, collections, navbar, sidebar, locales according to input
+- Write the generated configuration into a specified target file
+
+**Documentation Sources**
+
+- [Theme Configuration](https://theme-plume.vuejs.press/config/theme/index.md)
+- [Locales Configuration](https://theme-plume.vuejs.press/config/locales/index.md)
+- [Collections Configuration](https://theme-plume.vuejs.press/config/collections/index.md)
+- [Navbar](https://theme-plume.vuejs.press/config/navigation/index.md)
+- [Sidebar](https://theme-plume.vuejs.press/config/sidebar/index.md)
+- [Markdown](https://theme-plume.vuejs.press/config/markdown/index.md)
+- [Plugins](https://theme-plume.vuejs.press/config/plugins/index.md)
+
+## Input Schema
+
+```json
+{
+  "type": "object",
+  "required": ["format", "target_file"],
+  "properties": {
+    "format": {
+      "type": "string",
+      "enum": ["plume-config-ts", "vuepress-config-ts", "vuepress-config-js"],
+      "description": "Output file type and configuration style"
+    },
+    "target_file": {
+      "type": "string",
+      "description": "Target file path to write (relative to project root or absolute)"
+    },
+    "site": {
+      "type": "object",
+      "description": "VuePress site-level config (config.ts/js only)",
+      "properties": {
+        "lang": { "type": "string", "description": "Default language" },
+        "title": { "type": "string", "description": "Site title" },
+        "description": { "type": "string", "description": "Site description" },
+        "base": { "type": "string", "description": "Deployment base path like /subpath/" },
+        "head": { "type": "array", "description": "Extra <head> tags", "items": { "type": "array" } },
+        "locales": {
+          "type": "object",
+          "description": "Site locales (config.ts/js only)",
+          "additionalProperties": {
+            "type": "object",
+            "properties": {
+              "lang": { "type": "string" },
+              "title": { "type": "string" },
+              "description": { "type": "string" }
+            }
+          }
+        }
+      }
+    },
+    "theme": {
+      "type": "object",
+      "description": "Plume theme configuration (themeConfig)",
+      "properties": {
+        "hostname": { "type": "string", "default": "", "description": "Deployment hostname (for sitemap/SEO)" },
+        "autoFrontmatter": {
+          "type": ["object", "boolean"],
+          "default": { "permalink": true, "createTime": true, "title": true },
+          "properties": {
+            "permalink": { "type": "boolean", "default": true },
+            "createTime": { "type": "boolean", "default": true },
+            "title": { "type": "boolean", "default": true }
+          },
+          "description": "Automatically add frontmatter to Markdown"
+        },
+        "cache": {
+          "type": ["string", "boolean"],
+          "enum": ["memory", "filesystem", false],
+          "default": "filesystem",
+          "description": "Compilation cache (config.ts/js only)"
+        },
+        "docsRepo": { "type": "string", "default": "", "description": "Docs repository url" },
+        "docsBranch": { "type": "string", "default": "", "description": "Docs repository branch" },
+        "docsDir": { "type": "string", "default": "", "description": "Docs directory (relative to repo root)" },
+        "editLink": { "type": "boolean", "default": true, "description": "Enable edit link (config.ts/js only)" },
+        "lastUpdated": {
+          "type": ["object", "boolean"],
+          "default": { "formatOptions": { "dateStyle": "short", "timeStyle": "short" } },
+          "properties": {
+            "formatOptions": { "type": "object", "description": "Intl.DateTimeFormatOptions & { forceLocale?: boolean }" }
+          },
+          "description": "Last updated time (config.ts/js only)"
+        },
+        "contributors": { "type": ["boolean", "object"], "default": true, "description": "Show contributors (config.ts/js only)" },
+        "changelog": { "type": ["boolean", "object"], "default": false, "description": "Show page change history (config.ts/js only)" },
+        "home": { "type": ["string", "boolean"], "default": "/", "description": "Home path" },
+        "logo": { "type": ["string", "boolean"], "default": false, "description": "Navbar logo" },
+        "logoDark": { "type": ["string", "boolean"], "default": false, "description": "Navbar logo for dark mode" },
+        "appearance": {
+          "type": ["string", "boolean"],
+          "enum": [true, false, "dark", "force-dark"],
+          "default": true,
+          "description": "Dark mode toggle and default mode"
+        },
+        "profile": {
+          "type": "object",
+          "default": {},
+          "description": "Site profile info",
+          "properties": {
+            "avatar": { "type": "string" },
+            "name": { "type": "string" },
+            "description": { "type": "string" },
+            "circle": { "type": "boolean" },
+            "location": { "type": "string" },
+            "organization": { "type": "string" },
+            "layout": { "type": "string", "enum": ["left", "right"], "default": "right" }
+          }
+        },
+        "social": {
+          "type": ["array", "boolean"],
+          "default": false,
+          "description": "Social links (Iconify name or custom SVG)",
+          "items": {
+            "type": "object",
+            "properties": {
+              "icon": { "type": ["string", "object"] },
+              "link": { "type": "string" },
+              "ariaLabel": { "type": "string" }
+            },
+            "required": ["icon", "link"]
+          }
+        },
+        "navbarSocialInclude": {
+          "type": "array",
+          "default": ["github", "twitter", "discord", "facebook"],
+          "items": { "type": "string" },
+          "description": "Social links allowed to display in navbar (PC)"
+        },
+        "navbar": {
+          "type": "array",
+          "default": [],
+          "description": "Navbar configuration",
+          "items": {
+            "type": ["string", "object"],
+            "properties": {
+              "text": { "type": "string" },
+              "link": { "type": "string" },
+              "prefix": { "type": "string" },
+              "items": { "type": "array" },
+              "icon": { "type": ["string", "object"] },
+              "activeMatch": { "type": "string" }
+            }
+          }
+        },
+        "collections": {
+          "type": "array",
+          "default": [],
+          "description": "Content collections (post/doc)",
+          "items": {
+            "type": "object",
+            "required": ["type", "dir", "title"],
+            "properties": {
+              "type": { "type": "string", "enum": ["post", "doc"] },
+              "dir": { "type": "string" },
+              "title": { "type": "string" },
+              "linkPrefix": { "type": "string" },
+              "tagsTheme": { "type": "string", "enum": ["colored", "gray", "brand"], "default": "colored" },
+              "autoFrontmatter": { "type": ["object", "boolean"] },
+              "include": { "type": "array", "items": { "type": "string" } },
+              "exclude": { "type": "array", "items": { "type": "string" } },
+              "pagination": {
+                "type": ["boolean", "number", "object"],
+                "properties": { "perPage": { "type": "number", "default": 15 } }
+              },
+              "link": { "type": "string" },
+              "postList": { "type": "boolean" },
+              "tags": { "type": "boolean" },
+              "tagsLink": { "type": "string" },
+              "tagsText": { "type": "string" },
+              "archives": { "type": "boolean" },
+              "archivesLink": { "type": "string" },
+              "archivesText": { "type": "string" },
+              "categories": { "type": "boolean" },
+              "categoriesLink": { "type": "string" },
+              "categoriesText": { "type": "string" },
+              "categoriesExpand": { "type": ["number", "string"], "enum": ["deep"] },
+              "postCover": {
+                "type": ["string", "object"],
+                "description": "Layout or style",
+                "properties": {
+                  "layout": { "type": "string", "enum": ["left", "right", "odd-left", "odd-right", "top"] },
+                  "ratio": { "type": "string" },
+                  "width": { "type": "number" },
+                  "compact": { "type": "boolean" }
+                }
+              },
+              "profile": { "type": ["object", "boolean"] },
+              "social": { "type": ["array", "boolean"] },
+              "sidebar": { "type": ["string", "array"], "description": "Doc type only" },
+              "sidebarScrollbar": { "type": "boolean" },
+              "sidebarCollapsed": { "type": "boolean" }
+            }
+          }
+        },
+        "sidebar": {
+          "type": ["object", "boolean"],
+          "description": "Global sidebar (prefer configuring in collections)"
+        },
+        "sidebarScrollbar": { "type": "boolean", "default": true },
+        "aside": { "type": ["boolean", "string"], "enum": [true, false, "left"], "default": true },
+        "outline": { "type": ["boolean", "number", "array", "string"], "default": [2, 3], "description": "false|n|[min,max]|'deep'" },
+        "transition": {
+          "type": ["boolean", "object"],
+          "default": true,
+          "properties": { "page": { "type": "boolean", "default": true } }
+        },
+        "locales": {
+          "type": "object",
+          "description": "Theme locales (texts and per-locale theme config)",
+          "additionalProperties": {
+            "type": "object",
+            "properties": {
+              "selectLanguageName": { "type": "string" },
+              "selectLanguageText": { "type": "string" },
+              "selectLanguageAriaLabel": { "type": "string" },
+              "appearanceText": { "type": "string" },
+              "homeText": { "type": "string" },
+              "postsText": { "type": "string" },
+              "tagText": { "type": "string" },
+              "categoryText": { "type": "string" },
+              "archiveText": { "type": "string" },
+              "archiveTotalText": { "type": "string" },
+              "sidebarMenuLabel": { "type": "string" },
+              "returnToTopLabel": { "type": "string" },
+              "outlineLabel": { "type": "string" },
+              "editLinkText": { "type": "string" },
+              "latestUpdatedText": { "type": "string" },
+              "contributorsText": { "type": "string" },
+              "changelogText": { "type": "string" },
+              "changelogOnText": { "type": "string" },
+              "changelogButtonText": { "type": "string" },
+              "copyrightText": { "type": "string" },
+              "copyrightAuthorText": { "type": "string" },
+              "copyrightCreationOriginalText": { "type": "string" },
+              "copyrightCreationTranslateText": { "type": "string" },
+              "copyrightCreationReprintText": { "type": "string" },
+              "copyrightLicenseText": { "type": "string" },
+              "prevPageLabel": { "type": "string" },
+              "nextPageLabel": { "type": "string" },
+              "notFound": {
+                "type": "object",
+                "properties": {
+                  "code": { "type": "string" },
+                  "title": { "type": "string" },
+                  "quote": { "type": "string" },
+                  "linkLabel": { "type": "string" },
+                  "linkText": { "type": "string" }
+                }
+              },
+              "collections": { "type": "array" }
+            }
+          }
+        },
+        "plugins": {
+          "type": "object",
+          "description": "Built-in plugin options for the theme (config.ts/js only)"
+        },
+        "markdown": { "type": "object", "description": "Markdown options (config.ts/js only)" },
+        "codeHighlighter": { "type": ["object", "boolean"], "description": "Code highlighter (config.ts/js only)" },
+        "search": { "type": ["object", "boolean"], "description": "Search (config.ts/js only)" },
+        "comment": { "type": ["object", "boolean"], "description": "Comments (config.ts/js only)" },
+        "watermark": { "type": ["object", "boolean"], "description": "Watermark (config.ts/js only)" },
+        "readingTime": { "type": ["object", "boolean"], "description": "Reading time (config.ts/js only)" },
+        "copyCode": { "type": ["object", "boolean"], "description": "Copy code (config.ts/js only)" },
+        "replaceAssets": { "type": ["object", "boolean"], "description": "Replace assets (config.ts/js only)" }
+      }
+    }
+  }
+}
+```
+
+## Execution Logic
+
+- Parse input and validate `format` and fields
+- If `format=plume-config-ts`:
+  - Only write fields supported in `.vuepress/plume.config.ts` (ignore and report fields like `plugins`, `markdown`, `search`, etc.)
+  - Generate `defineThemeConfig({ ...theme })`
+- If `format=vuepress-config-ts`:
+  - Generate `defineUserConfig({ site..., theme: plumeTheme({ ...theme }) })`
+- If `format=vuepress-config-js`:
+  - Generate equivalent JavaScript version (remove types and `import type`)
+- Write generated text to `target_file` (create parent dirs if missing)
+- Output feedback: path, format, field summary, and ignored fields
+
+## Templates
+
+### plume.config.ts
+
+```ts
+import { defineThemeConfig } from 'vuepress-theme-plume'
+
+export default defineThemeConfig({
+  // Supported fields in plume.config.ts: hostname, home, logo, logoDark, appearance, profile, social,
+  // navbarSocialInclude, navbar, collections, sidebar, sidebarScrollbar,
+  // aside, outline, transition, locales, docsRepo/docsBranch/docsDir, autoFrontmatter
+})
+```
+
+### .vuepress/config.ts
+
+```ts
+import { defineUserConfig } from 'vuepress'
+import { plumeTheme } from 'vuepress-theme-plume'
+
+export default defineUserConfig({
+  // Optional site-level config: lang, title, description, base, head, locales
+  theme: plumeTheme({
+    // Full theme config available, including plugins/markdown/search/comment etc.
+  })
+})
+```
+
+### .vuepress/config.js
+
+```js
+const { defineUserConfig } = require('vuepress')
+const { plumeTheme } = require('vuepress-theme-plume')
+
+module.exports = defineUserConfig({
+  theme: plumeTheme({
+    // Same as TS version
+  })
+})
+```
+
+## Validation and Hints
+
+- Check consistency between `format` and `target_file` extension
+- If `format=plume-config-ts` and input contains `plugins/markdown/codeHighlighter/search/comment/watermark/readingTime/copyCode/replaceAssets/editLink/lastUpdated/contributors/changelog/cache`:
+  - Exclude these fields from output
+  - Report they are only supported in `.vuepress/config.ts`/`.js`
+- In `collections`, `type` must be `post` or `doc`; `dir` and `title` are required
+- `navbar` accepts strings (paths) and objects (with `text/link`)
+- Keys in `locales` should be path prefixes like `'/'`, `'/en/'`, `'/zh/'`
+
+## Execution Feedback
+
+- Written file path and format type
+- Summary of generated fields (collections count, navbar items, locales count)
+- Ignored fields list with reasons
+- For cache to take effect, remind removing `--clean-cache` from dev script
+
+## References
+
+- Theme: [theme.md](https://theme-plume.vuejs.press/config/theme/index.md)
+- Locales: [locales.md](https://theme-plume.vuejs.press/config/locales/index.md)
+- Collections: [collections.md](https://theme-plume.vuejs.press/config/collections/index.md)

skills/vuepress-plume-markdown/SKILL.md

@@ -0,0 +1,50 @@
+---
+name: vuepress-plume-markdown
+description: Help users write markdown files with VuePress Plume theme extensions, charts, and embeds.
+---
+
+# VuePress Plume Markdown Skill
+
+This skill provides assistance with VuePress Plume markdown extensions, charts, and embeds.
+It helps users write rich content using the features provided by the theme.
+
+## Markdown Extensions
+
+- [Abbreviation](resources/abbreviation.md) - Define abbreviations with tooltips.
+- [Annotation](resources/annotation.md) - Add inline annotations.
+- [Attributes](resources/attrs.md) - Add custom attributes to elements.
+- [Card](resources/card.md) - Create card-style layouts.
+- [Chat](resources/chat.md) - Simulate chat conversations.
+- [Code Tree](resources/code-tree.md) - Display file trees alongside code blocks.
+- [Collapse](resources/collapse.md) - Create collapsible details/summary blocks.
+- [Container](resources/container.md) - Custom containers (info, tip, warning, etc.).
+- [File Tree](resources/file-tree.md) - Display file directory structures.
+- [Flex](resources/flex.md) - Create flexible column layouts.
+- [GitHub Alerts](resources/github-alerts.md) - Use GitHub-style alerts.
+- [Icons](resources/icons.md) - Embed icons from Iconify.
+- [Include](resources/include.md) - Include content from other files.
+- [Mark](resources/mark.md) - Highlight text.
+- [Math](resources/math.md) - Render mathematical formulas using KaTeX.
+- [NPM To](resources/npm-to.md) - Switch between npm, yarn, pnpm, etc.
+- [QR Code](resources/qrcode.md) - Generate QR codes.
+- [Steps](resources/steps.md) - Create step-by-step guides.
+- [Tabs](resources/tabs.md) - Create tabbed content.
+- [Timeline](resources/timeline.md) - Create timelines.
+
+## Charts
+
+- [Chart.js](resources/chart.md) - Embed Chart.js charts.
+- [ECharts](resources/echarts.md) - Embed ECharts visualizations.
+- [Flowchart](resources/flowchart.md) - Create flowcharts.
+- [Markmap](resources/markmap.md) - Create mind maps.
+- [Mermaid](resources/mermaid.md) - Create diagrams using Mermaid.
+- [PlantUML](resources/plantuml.md) - Create UML diagrams.
+
+## Embeds
+
+- [AcFun Video](resources/acfun.md) - Embed AcFun videos.
+- [ArtPlayer](resources/artplayer.md) - Embed custom videos with ArtPlayer.
+- [Audio Reader](resources/audio-reader.md) - Embed audio clips/pronunciation guides.
+- [Bilibili Video](resources/bilibili.md) - Embed Bilibili videos.
+- [PDF Reader](resources/pdf.md) - Embed PDF files.
+- [YouTube Video](resources/youtube.md) - Embed YouTube videos.

skills/vuepress-plume-markdown/resources/abbreviation.md

@@ -0,0 +1,19 @@
+# Abbreviation
+
+Use `*[Abbreviation]: Description` to define an abbreviation.
+The definition can be placed anywhere in the document, usually at the bottom.
+
+## Syntax
+
+```md
+*[Abbreviation]: Description
+```
+
+## Example
+
+```md
+The HTML specification is maintained by the W3C.
+
+*[HTML]: Hyper Text Markup Language
+*[W3C]:  World Wide Web Consortium
+```

skills/vuepress-plume-markdown/resources/acfun.md

@@ -0,0 +1,42 @@
+# AcFun Video
+
+Embed AcFun videos in your markdown.
+
+## Configuration
+
+Enable the feature in `.vuepress/config.ts`:
+
+```ts title=".vuepress/config.ts"
+export default defineUserConfig({
+  theme: plumeTheme({
+    markdown: {
+      acfun: true,
+    },
+  })
+})
+```
+
+## Syntax
+
+```md
+@[acfun](id)
+```
+
+With options:
+
+```md
+@[acfun width="100%" height="400px" ratio="16:9"](id)
+```
+
+**Parameters:**
+
+- `id`: Video ID
+- `width`: Video width
+- `height`: Video height
+- `ratio`: Video aspect ratio (default `16:9`)
+
+## Example
+
+```md
+@[acfun](ac47431669)
+```

skills/vuepress-plume-markdown/resources/annotation.md

@@ -0,0 +1,18 @@
+# Annotation
+
+Annotation allows adding extra information or hints that are revealed on click.
+
+## Syntax
+
+1. **Inline Marker**: `[+label]` (must have a space before `[+`)
+2. **Definition**: `[+label]: content` (can be multiline with indentation)
+
+## Example
+
+```md
+This site is powered by VuePress [+vuepress].
+
+[+vuepress]:
+  VuePress is a [Static Site Generator](https://en.wikipedia.org/wiki/Static_site_generator) (SSG).
+  It is specifically designed for building fast, content-centric sites.
+```

skills/vuepress-plume-markdown/resources/artplayer.md

@@ -0,0 +1,60 @@
+# ArtPlayer Video
+
+Embed custom source videos using ArtPlayer.
+
+## Configuration
+
+Enable the feature in `.vuepress/config.ts`:
+
+```ts title=".vuepress/config.ts"
+export default defineUserConfig({
+  theme: plumeTheme({
+    markdown: {
+      artPlayer: true,
+    },
+  })
+})
+```
+
+You must install `artplayer`. Additional dependencies may be needed for specific formats:
+
+- `dashjs` for `.mpd`, `.dash`
+- `hls.js` for `.m3u8`, `.hls`
+- `mpegts.js` for `.ts`, `.flv`
+
+```sh
+npm i artplayer
+# Optional
+npm i dashjs hls.js mpegts.js
+```
+
+## Syntax
+
+```md
+@[artPlayer](src)
+```
+
+With options:
+
+```md
+@[artPlayer muted autoplay loop width="100%" height="400px" ratio="16:9"](src)
+```
+
+**Parameters:**
+
+- `src`: Video source URL
+- `width`: Video width
+- `height`: Video height
+- `ratio`: Video aspect ratio (default `16:9`)
+- `type`: Video format (auto-detected)
+- `autoplay`: Enable autoplay
+- `muted`: Mute video (default `true` if autoplay)
+- `volume`: Volume (0-1)
+- `poster`: Poster image URL
+- `auto-mini`: Auto mini-player on scroll
+
+## Example
+
+```md
+@[artPlayer](https://example.com/video.mp4)
+```

skills/vuepress-plume-markdown/resources/attrs.md

@@ -0,0 +1,43 @@
+# Attributes
+
+Add classes, IDs, and attributes to Markdown elements using `{ }`.
+
+## Syntax
+
+- **Inline**: Place `{.class #id attr=value}` immediately after the element.
+- **Block**: Place `{.class #id attr=value}` on the line immediately following the block.
+
+## Examples
+
+### Inline
+
+```md
+__bold__{.red}
+[link](https://example.com){target=_blank}
+```
+
+### Headers
+
+```md
+## Heading{#custom-id}
+```
+
+### Blocks (List/Table)
+
+```md
+- list item
+
+{.red}
+
+| header |
+| ------ |
+| cell   |
+
+{.table-class}
+```
+
+### Table Cells (Merge)
+
+```md
+| 1 | 2 {colspan=2} |
+```

skills/vuepress-plume-markdown/resources/audio-reader.md

@@ -0,0 +1,55 @@
+# Audio Reader
+
+Embed a simple audio player button, useful for pronunciation guides.
+
+## Configuration
+
+Enable the feature in `.vuepress/config.ts`:
+
+```ts title=".vuepress/config.ts"
+export default defineUserConfig({
+  theme: plumeTheme({
+    markdown: {
+      audioReader: true,
+    },
+  })
+})
+```
+
+## Syntax
+
+Inline syntax:
+
+```md
+@[audioReader](src)
+```
+
+With options:
+
+```md
+@[audioReader type="audio/mpeg" title="title" autoplay start-time="0" end-time="10" volume="0.7"](src)
+```
+
+**Parameters:**
+
+- `src`: Audio source URL
+- `type`: Audio MIME type (e.g., `audio/mpeg`)
+- `title`: Title displayed before the icon
+- `autoplay`: Enable autoplay
+- `start-time`: Start time in seconds
+- `end-time`: End time in seconds
+- `volume`: Volume (0-1)
+
+## Global Component
+
+You can also use the `<AudioReader />` component.
+
+```md
+<AudioReader src="/audio/audio.mp3">[ˈɔːdioʊ]</AudioReader>
+```
+
+## Example
+
+```md
+audio 美 [ˈɔːdioʊ] @[audioReader](/audio/audio.mp3)
+```

skills/vuepress-plume-markdown/resources/bilibili.md

@@ -0,0 +1,49 @@
+# Bilibili Video
+
+Embed Bilibili videos in your markdown.
+
+## Configuration
+
+Enable the feature in `.vuepress/config.ts`:
+
+```ts title=".vuepress/config.ts"
+export default defineUserConfig({
+  theme: plumeTheme({
+    markdown: {
+      bilibili: true,
+    },
+  })
+})
+```
+
+## Syntax
+
+Simple syntax (using BVID):
+
+```md
+@[bilibili](bvid)
+```
+
+With options:
+
+```md
+@[bilibili p1 autoplay time="0" width="100%" height="400px" ratio="16:9"](bvid aid cid)
+```
+
+**Parameters:**
+
+- `bvid`: Video BV ID (can be omitted if `aid` and `cid` are provided)
+- `aid`: Video AID
+- `cid`: Video CID
+- `pX`: Page number (e.g., `p1`, `p2`)
+- `autoplay`: Enable autoplay
+- `time`: Start time (seconds or `mm:ss` / `hh:mm:ss`)
+- `width`: Video width
+- `height`: Video height
+- `ratio`: Video aspect ratio (default `16:9`)
+
+## Example
+
+```md
+@[bilibili](BV1EZ42187Hg)
+```

skills/vuepress-plume-markdown/resources/card.md

@@ -0,0 +1,30 @@
+# Card
+
+Create highlighted content cards using `::: card`. Wrap multiple cards in `:::: card-grid` for layout.
+
+## Syntax
+
+```md
+::: card title="Title" icon="icon-name"
+Content
+:::
+```
+
+## Props
+
+- `title`: String, card title.
+- `icon`: String, iconify name or image URL.
+
+## Example
+
+```md
+:::: card-grid
+::: card title="Feature A" icon="mdi:star"
+Description of feature A.
+:::
+
+::: card title="Feature B" icon="mdi:check"
+Description of feature B.
+:::
+::::
+```

skills/vuepress-plume-markdown/resources/chart.md

@@ -0,0 +1,68 @@
+# Chart.js
+
+The theme supports embedding [chart.js] charts within articles.
+
+## Configuration
+
+Enable the feature in `.vuepress/config.ts`:
+
+```ts title=".vuepress/config.ts"
+export default defineUserConfig({
+  theme: plumeTheme({
+    markdown: {
+      chartjs: true,
+    },
+  })
+})
+```
+
+You also need to install the `chart.js` library:
+
+```sh
+npm install chart.js
+```
+
+## Syntax
+
+Use the `chartjs` container with a JSON code block:
+
+````md
+::: chartjs Title
+```json
+{
+  "type": "bar",
+  "data": {
+    "labels": ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
+    "datasets": [{
+      "label": "# of Votes",
+      "data": [12, 19, 3, 5, 2, 3],
+      "backgroundColor": [
+        "rgba(255, 99, 132, 0.2)",
+        "rgba(54, 162, 235, 0.2)",
+        "rgba(255, 206, 86, 0.2)",
+        "rgba(75, 192, 192, 0.2)",
+        "rgba(153, 102, 255, 0.2)",
+        "rgba(255, 159, 64, 0.2)"
+      ],
+      "borderColor": [
+        "rgba(255, 99, 132, 1)",
+        "rgba(54, 162, 235, 1)",
+        "rgba(255, 206, 86, 1)",
+        "rgba(75, 192, 192, 1)",
+        "rgba(153, 102, 255, 1)",
+        "rgba(255, 159, 64, 1)"
+      ],
+      "borderWidth": 1
+    }]
+  },
+  "options": {
+    "scales": {
+      "y": {
+        "beginAtZero": true
+      }
+    }
+  }
+}
+```
+:::
+````

skills/vuepress-plume-markdown/resources/chat.md

@@ -0,0 +1,27 @@
+# Chat
+
+Display chat records using `::: chat` container.
+
+## Syntax
+
+- Container: `::: chat title="Title"`
+- Timestamp: `{:timestamp}`
+- Other User: `{username}`
+- Current User: `{.}`
+
+## Example
+
+```md
+::: chat title="Conversation"
+{:2023-10-01 12:00}
+
+{Alice}
+Hello there!
+
+{.}
+Hi Alice! How are you?
+
+{Alice}
+I'm good, thanks.
+:::
+```

skills/vuepress-plume-markdown/resources/code-tree.md

@@ -0,0 +1,26 @@
+# Code Tree
+
+Display a file tree alongside code blocks.
+
+## Syntax
+
+````md
+::: code-tree title="Project Name" height="400px" entry="src/main.ts"
+```lang title="src/main.ts"
+// code
+```
+
+```lang title="package.json"
+// code
+```
+:::
+````
+
+- `entry`: Default expanded file path.
+- `title` on code blocks: Defines the file path in the tree.
+
+## Import from Directory
+
+```md
+@[code-tree](dir_path)
+```

skills/vuepress-plume-markdown/resources/collapse.md

@@ -0,0 +1,32 @@
+# Collapse
+
+Create collapsible panels using `::: collapse`.
+
+## Syntax
+
+```md
+::: collapse [accordion] [expand]
+- Title 1
+  Content 1
+
+- Title 2
+  Content 2
+:::
+```
+
+- `accordion`: Only one panel expanded at a time.
+- `expand`: Expand all by default.
+- `:+ Title`: Mark specific item as expanded.
+- `:- Title`: Mark specific item as collapsed.
+
+## Example
+
+```md
+::: collapse accordion
+- Panel 1
+  Content 1
+
+- :+ Panel 2 (Initially Expanded)
+  Content 2
+:::
+```

skills/vuepress-plume-markdown/resources/container.md

@@ -0,0 +1,32 @@
+# Containers
+
+Use `::: type [title]` to create alert boxes or collapsible details.
+
+## Supported Types
+
+- `note`, `info`, `tip`, `warning`, `caution` (Alerts)
+- `details` (Collapsible)
+
+## Syntax
+
+```md
+::: type [Optional Title]
+Content
+:::
+```
+
+## Examples
+
+```md
+::: tip
+This is a tip.
+:::
+
+::: warning CAUTION
+Custom title for warning.
+:::
+
+::: details Click to expand
+Hidden content.
+:::
+```

skills/vuepress-plume-markdown/resources/echarts.md

@@ -0,0 +1,73 @@
+# ECharts
+
+The theme supports embedding [ECharts](https://echarts.apache.org/zh/index.html) charts within articles.
+
+## Configuration
+
+Enable the feature in `.vuepress/config.ts`:
+
+```ts title=".vuepress/config.ts"
+export default defineUserConfig({
+  theme: plumeTheme({
+    markdown: {
+      echarts: true,
+    },
+  })
+})
+```
+
+You also need to install the `echarts` library:
+
+```sh
+npm install echarts
+```
+
+## Syntax
+
+### JSON Configuration
+
+````md
+::: echarts Title
+```json
+{
+  "xAxis": {
+    "type": "category",
+    "data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
+  },
+  "yAxis": {
+    "type": "value"
+  },
+  "series": [
+    {
+      "data": [150, 230, 224, 218, 135, 147, 260],
+      "type": "line"
+    }
+  ]
+}
+```
+:::
+````
+
+### JavaScript Configuration
+
+````md
+::: echarts Title
+```js
+const option = {
+  xAxis: {
+    type: 'category',
+    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+  },
+  yAxis: {
+    type: 'value'
+  },
+  series: [
+    {
+      data: [150, 230, 224, 218, 135, 147, 260],
+      type: 'line'
+    }
+  ]
+}
+```
+:::
+````

skills/vuepress-plume-markdown/resources/file-tree.md

@@ -0,0 +1,27 @@
+# File Tree
+
+Display directory structure using `::: file-tree`.
+
+## Syntax
+
+Use unordered lists.
+
+- `++`: Added file/dir.
+- `--`: Deleted file/dir.
+- `**name**`: Bold name.
+- `/` at end of dir name: Hide contents (if not listed).
+- `...` or `…`: Placeholder.
+
+## Example
+
+```md
+::: file-tree title="Structure" icon="simple"
+- root
+  - .vuepress
+    - ++ config.ts
+  - -- old-file.md
+  - src/
+  - README.md
+  - ...
+:::
+```

skills/vuepress-plume-markdown/resources/flex.md

@@ -0,0 +1,29 @@
+# Flex Container
+
+Apply Flexbox layout using `::: flex`.
+
+## Syntax
+
+```md
+::: flex [justify] [align] [gap="20"] [column]
+Block 1
+
+Block 2
+:::
+```
+
+- Justify: `center`, `between`, `around`
+- Align: `start`, `center`, `end`
+- `column`: Vertical direction.
+
+## Example
+
+```md
+::: flex between center
+| Table 1 |
+| ------- |
+
+| Table 2 |
+| ------- |
+:::
+```

skills/vuepress-plume-markdown/resources/flowchart.md

@@ -0,0 +1,46 @@
+# Flowchart
+
+The theme supports embedding [flowchart](http://flowchart.js.org/) diagrams within articles.
+
+## Configuration
+
+Enable the feature in `.vuepress/config.ts`:
+
+```ts title=".vuepress/config.ts"
+export default defineUserConfig({
+  theme: plumeTheme({
+    markdown: {
+      flowchart: true,
+    },
+  })
+})
+```
+
+You also need to install the `flowchart.ts` library:
+
+```sh
+npm install flowchart.ts
+```
+
+## Syntax
+
+Use the `flow` code block with an optional preset (default `vue`, `ant`, `pie`).
+
+````md
+```flow:preset
+st=>start: Start|past:>http://www.google.com[blank]
+e=>end: End|future:>http://www.google.com
+op1=>operation: Operation 1|past
+op2=>operation: Operation 2|current
+sub1=>subroutine: Subroutine|invalid
+cond=>condition: Yes/No?|approved:>http://www.google.com
+c2=>condition: Condition 2|rejected
+io=>inputoutput: Process input...|future
+
+st->op1(right)->cond
+cond(yes, right)->c2
+cond(no)->sub1(left)->op1
+c2(yes)->io->e
+c2(no)->op2->e
+```
+````

skills/vuepress-plume-markdown/resources/github-alerts.md

@@ -0,0 +1,22 @@
+# GitHub Alerts
+
+Use GitHub-style alerts.
+
+## Syntax
+
+```md
+> [!NOTE]
+> Note content.
+
+> [!TIP]
+> Tip content.
+
+> [!IMPORTANT]
+> Important content.
+
+> [!WARNING]
+> Warning content.
+
+> [!CAUTION]
+> Caution content.
+```

skills/vuepress-plume-markdown/resources/icons.md

@@ -0,0 +1,17 @@
+# Icons
+
+Insert icons using `::name::`.
+
+## Syntax
+
+- Basic: `::name::` (e.g. `::mdi:home::`)
+- Size: `::name =size::` (e.g. `::mdi:home =24px::`)
+- Color: `::name /color::` (e.g. `::mdi:home /#f00::`)
+- Collection: `::collection:name::` (e.g. `::mdi:home::`)
+
+## Example
+
+```md
+::mdi:home::
+::mdi:home =24px /#ff0000::
+```

skills/vuepress-plume-markdown/resources/include.md

@@ -0,0 +1,21 @@
+# File Include
+
+Include content from other files.
+
+## Syntax
+
+```md
+<!-- @include: filename -->
+```
+
+- **Lines**: `<!-- @include: filename{1-10} -->`
+- **Region**: `<!-- @include: filename#region-name -->`
+  - In source file: `<!-- region region-name -->` ... `<!-- endregion region-name -->`
+
+## Example
+
+```md
+<!-- @include: ./snippet.md -->
+<!-- @include: ./snippet.md{1-5} -->
+<!-- @include: ./snippet.md#snippet-name -->
+```

skills/vuepress-plume-markdown/resources/mark.md

@@ -0,0 +1,19 @@
+# Mark
+
+Highlight text using `==text==`.
+
+## Syntax
+
+- **Basic**: `==text==`
+- **Custom Color**: `==text=={.class}`
+
+## Built-in Classes
+
+`info`, `note`, `tip`, `warning`, `danger`, `caution`, `important`.
+
+## Example
+
+```md
+This is ==highlighted==.
+This is ==warning=={.warning}.
+```

skills/vuepress-plume-markdown/resources/markmap.md

@@ -0,0 +1,57 @@
+# Markmap
+
+The theme supports embedding [markmap](https://markmap.js.org/) mind maps within articles.
+
+## Configuration
+
+Enable the feature in `.vuepress/config.ts`:
+
+```ts title=".vuepress/config.ts"
+export default defineUserConfig({
+  theme: plumeTheme({
+    markdown: {
+      markmap: true,
+    },
+  })
+})
+```
+
+You also need to install `markmap-lib`, `markmap-toolbar`, and `markmap-view`:
+
+```sh
+npm i markmap-lib markmap-toolbar markmap-view
+```
+
+## Syntax
+
+Use the `markmap` code block. Frontmatter configuration is supported within the block.
+
+````md
+```markmap
+---
+markmap:
+  colorFreezeLevel: 2
+---
+
+# markmap
+
+## Links
+
+- <https://markmap.js.org/>
+- [GitHub](https://github.com/markmap/markmap)
+
+## Features
+
+- Links
+- **Strong** ~~Strikethrough~~ *Italic* ==Highlight==
+- Multi-line
+  text
+- `Inline code`
+-
+    ```js
+    console.log('code block');
+    ```
+- Katex
+  - $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
+```
+````

skills/vuepress-plume-markdown/resources/math.md

@@ -0,0 +1,19 @@
+# Math
+
+Render mathematical formulas.
+
+## Syntax
+
+- **Inline**: `$formula$`
+- **Block**: `$$formula$$`
+
+## Example
+
+```md
+Inline: $E=mc^2$
+
+Block:
+$$
+\sum_{i=1}^n i = \frac{n(n+1)}{2}
+$$
+```

skills/vuepress-plume-markdown/resources/mermaid.md

@@ -0,0 +1,68 @@
+# Mermaid
+
+The theme supports embedding diagrams generated by [Mermaid](https://mermaid.js.org/) within articles.
+
+## Configuration
+
+Enable the feature in `.vuepress/config.ts`:
+
+```ts title=".vuepress/config.ts"
+export default defineUserConfig({
+  theme: plumeTheme({
+    markdown: {
+      mermaid: true,
+    },
+  })
+})
+```
+
+You also need to install the `mermaid` library:
+
+```sh
+npm install mermaid
+```
+
+## Syntax
+
+Use the `mermaid` code block or specific diagram type code blocks (e.g., `sequence`, `class`, `flow`, etc.).
+
+````md
+```mermaid
+flowchart TD
+    A[Start] --> B{Is it?}
+    B -- Yes --> C[OK]
+    C --> D[Rethink]
+    D --> B
+    B -- No --> E[End]
+```
+````
+
+### Supported Diagram Types
+
+You can use these aliases directly:
+
+- `class` -> `classDiagram`
+- `c4c` -> `C4Context`
+- `er` -> `erDiagram`
+- `gantt` -> `gantt`
+- `git-graph` -> `gitGraph`
+- `journey` -> `journey`
+- `mindmap` -> `mindmap`
+- `pie` -> `pie`
+- `quadrant` -> `quadrantChart`
+- `requirement` -> `requirementDiagram`
+- `sankey` -> `sankey-beta`
+- `sequence` -> `sequenceDiagram`
+- `state` -> `stateDiagram-v2`
+- `timeline` -> `timeline`
+- `xy` -> `xychart-beta`
+
+Example with title:
+
+````md
+```sequence Diagram Title
+Alice->>John: Hello John, how are you?
+John-->>Alice: Great!
+Alice-)John: See you later!
+```
+````

skills/vuepress-plume-markdown/resources/npm-to.md

@@ -0,0 +1,19 @@
+# Npm To
+
+Convert `npm` commands to `pnpm`, `yarn`, `bun`, `deno`.
+
+## Syntax
+
+Wrap an `npm` code block in `::: npm-to`.
+
+````md
+::: npm-to
+```sh
+npm install vuepress
+```
+:::
+````
+
+## Supported Commands
+
+`install`, `run`, `init`, `create`, `uninstall`, `ci`, `npx`.

skills/vuepress-plume-markdown/resources/pdf.md

@@ -0,0 +1,47 @@
+# PDF Reader
+
+Embed PDF files directly in your markdown.
+
+## Configuration
+
+Enable the feature in `.vuepress/config.ts`:
+
+```ts title=".vuepress/config.ts"
+export default defineUserConfig({
+  theme: plumeTheme({
+    markdown: {
+      pdf: true,
+    },
+  })
+})
+```
+
+## Syntax
+
+Simple syntax:
+
+```md
+@[pdf](url)
+```
+
+With options:
+
+```md
+@[pdf 2 no-toolbar width="100%" height="400px" ratio="16:9" zoom="100"](url)
+```
+
+**Parameters:**
+
+- `url`: PDF URL
+- `page`: Page number (e.g., `2` in `@[pdf 2]`)
+- `no-toolbar`: Hide the toolbar
+- `width`: Width (default `100%`)
+- `height`: Height (default `auto`)
+- `ratio`: Aspect ratio (default `16:9` if height not set)
+- `zoom`: Zoom level percentage
+
+## Example
+
+```md
+@[pdf 2 no-toolbar](https://plume.pengzhanbo.cn/files/sample.pdf)
+```

skills/vuepress-plume-markdown/resources/plantuml.md

@@ -0,0 +1,50 @@
+# PlantUML
+
+The theme supports embedding [PlantUML](https://plantuml.com/) diagrams within articles.
+
+## Configuration
+
+Enable the feature in `.vuepress/config.ts`:
+
+```ts title=".vuepress/config.ts"
+export default defineUserConfig({
+  theme: plumeTheme({
+    markdown: {
+      plantuml: true,
+    },
+  })
+})
+```
+
+## Syntax
+
+Use the `plantuml` syntax within a markdown file. Note: The example uses a raw code block,
+but typically you would use the `@startuml` and `@enduml` tags directly or inside a code block if the plugin supports it.
+The documentation shows:
+
+```md
+@startuml
+Alice -> Bob: Authentication Request
+
+alt successful case
+
+    Bob -> Alice: Authentication Accepted
+
+else some failure case
+
+    Bob -> Alice: Authentication Failed
+    group My own label
+    Alice -> Log : Log attack start
+        loop 1000 times
+            Alice -> Bob: DNS Attack
+        end
+    Alice -> Log : Log attack end
+    end
+
+else Another failure
+
+   Bob -> Alice: Please repeat
+
+end
+@enduml
+```

skills/vuepress-plume-markdown/resources/qrcode.md

@@ -0,0 +1,28 @@
+# QR Code
+
+Generate QR codes from text.
+
+## Syntax
+
+- **Inline**: `@[qrcode](text)`
+- **Container**:
+
+  ```md
+  ::: qrcode [card] [title="..."]
+  text
+  :::
+  ```
+
+## Attributes
+
+`card`, `svg`, `title="name"`, `align="center"`.
+
+## Example
+
+```md
+@[qrcode](https://example.com)
+
+::: qrcode card title="Scan Me"
+https://example.com
+:::
+```

skills/vuepress-plume-markdown/resources/steps.md

@@ -0,0 +1,17 @@
+# Steps
+
+Display sequential steps using `::: steps`.
+
+## Syntax
+
+Use ordered or unordered lists inside.
+
+```md
+::: steps
+1. Step 1
+   Content for step 1.
+
+2. Step 2
+   Content for step 2.
+:::
+```

skills/vuepress-plume-markdown/resources/tabs.md

@@ -0,0 +1,25 @@
+# Tabs
+
+Create tabbed content using `::: tabs`.
+
+## Syntax
+
+- `::: tabs[#id]`: Container.
+- `@tab Title`: Tab separator.
+- `@tab:active Title`: Default active tab.
+
+## Example
+
+````md
+::: tabs
+@tab npm
+```sh
+npm install
+```
+
+@tab:active pnpm
+```sh
+pnpm install
+```
+:::
+````

skills/vuepress-plume-markdown/resources/timeline.md

@@ -0,0 +1,24 @@
+# Timeline
+
+Create a timeline using `::: timeline`.
+
+## Syntax
+
+- Container config: `horizontal`, `card`, `line="style"`, `placement="right|between"`.
+- Item config (line after title): `time="date"`, `type="info|success|..."`, `icon=""`.
+
+## Example
+
+```md
+::: timeline
+- Event 1
+  time=2023-01-01 type=success
+
+  Content 1
+
+- Event 2
+  time=2023-02-01 type=warning icon=mdi:alert
+
+  Content 2
+:::
+```

skills/vuepress-plume-markdown/resources/youtube.md

@@ -0,0 +1,48 @@
+# YouTube Video
+
+Embed YouTube videos in your markdown.
+
+## Configuration
+
+Enable the feature in `.vuepress/config.ts`:
+
+```ts title=".vuepress/config.ts"
+export default defineUserConfig({
+  theme: plumeTheme({
+    markdown: {
+      youtube: true,
+    },
+  })
+})
+```
+
+## Syntax
+
+Simple syntax:
+
+```md
+@[youtube](id)
+```
+
+With options:
+
+```md
+@[youtube autoplay loop start="0" end="0" width="100%" height="400px" ratio="16:9"](id)
+```
+
+**Parameters:**
+
+- `id`: Video ID
+- `autoplay`: Enable autoplay
+- `loop`: Enable loop playback
+- `start`: Start time
+- `end`: End time
+- `width`: Video width
+- `height`: Video height
+- `ratio`: Video aspect ratio (default `16:9`)
+
+## Example
+
+```md
+@[youtube](0JJPfz5dg20)
+```