diff --git a/skills/README.md b/skills/README.md
new file mode 100644
index 00000000..ff26feda
--- /dev/null
+++ b/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`
• Manages `themeConfig`, `navbar`, `sidebar`
• Supports `locales` and `plugins` configuration |
+| **vuepress-plume-markdown** | Markdown Writing Assistant | • Provides syntax for Plume's Markdown extensions
• Supports Charts (Mermaid, ECharts, etc.)
• 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.
diff --git a/skills/README.zh-CN.md b/skills/README.zh-CN.md
new file mode 100644
index 00000000..2a0ea031
--- /dev/null
+++ b/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`
• 管理 `themeConfig`, `navbar`, `sidebar`
• 支持 `locales` 和 `plugins` 配置 |
+| **vuepress-plume-markdown** | Markdown 写作助手 | • 提供 Plume Markdown 扩展语法
• 支持图表 (Mermaid, ECharts 等)
• 支持嵌入 (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` 技能生成的配置文件。
+- **安全执行:** 这些技能主要生成文本/代码。在大多数代理环境中,未经用户确认,它们不会直接执行系统命令。
diff --git a/skills/vuepress-plume-config/SKILL.md b/skills/vuepress-plume-config/SKILL.md
new file mode 100644
index 00000000..95fbe896
--- /dev/null
+++ b/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
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)
diff --git a/skills/vuepress-plume-markdown/SKILL.md b/skills/vuepress-plume-markdown/SKILL.md
new file mode 100644
index 00000000..29644584
--- /dev/null
+++ b/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.
diff --git a/skills/vuepress-plume-markdown/resources/abbreviation.md b/skills/vuepress-plume-markdown/resources/abbreviation.md
new file mode 100644
index 00000000..bf18ae09
--- /dev/null
+++ b/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
+```
diff --git a/skills/vuepress-plume-markdown/resources/acfun.md b/skills/vuepress-plume-markdown/resources/acfun.md
new file mode 100644
index 00000000..e5a7ca56
--- /dev/null
+++ b/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)
+```
diff --git a/skills/vuepress-plume-markdown/resources/annotation.md b/skills/vuepress-plume-markdown/resources/annotation.md
new file mode 100644
index 00000000..ec40beff
--- /dev/null
+++ b/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.
+```
diff --git a/skills/vuepress-plume-markdown/resources/artplayer.md b/skills/vuepress-plume-markdown/resources/artplayer.md
new file mode 100644
index 00000000..b9d4fbef
--- /dev/null
+++ b/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)
+```
diff --git a/skills/vuepress-plume-markdown/resources/attrs.md b/skills/vuepress-plume-markdown/resources/attrs.md
new file mode 100644
index 00000000..8149999d
--- /dev/null
+++ b/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} |
+```
diff --git a/skills/vuepress-plume-markdown/resources/audio-reader.md b/skills/vuepress-plume-markdown/resources/audio-reader.md
new file mode 100644
index 00000000..436e28a0
--- /dev/null
+++ b/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 `` component.
+
+```md
+[ˈɔːdioʊ]
+```
+
+## Example
+
+```md
+audio 美 [ˈɔːdioʊ] @[audioReader](/audio/audio.mp3)
+```
diff --git a/skills/vuepress-plume-markdown/resources/bilibili.md b/skills/vuepress-plume-markdown/resources/bilibili.md
new file mode 100644
index 00000000..8a447c05
--- /dev/null
+++ b/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)
+```
diff --git a/skills/vuepress-plume-markdown/resources/card.md b/skills/vuepress-plume-markdown/resources/card.md
new file mode 100644
index 00000000..75982151
--- /dev/null
+++ b/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.
+:::
+::::
+```
diff --git a/skills/vuepress-plume-markdown/resources/chart.md b/skills/vuepress-plume-markdown/resources/chart.md
new file mode 100644
index 00000000..4c173caf
--- /dev/null
+++ 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
+ }
+ }
+ }
+}
+```
+:::
+````
diff --git a/skills/vuepress-plume-markdown/resources/chat.md b/skills/vuepress-plume-markdown/resources/chat.md
new file mode 100644
index 00000000..1e492ec6
--- /dev/null
+++ b/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.
+:::
+```
diff --git a/skills/vuepress-plume-markdown/resources/code-tree.md b/skills/vuepress-plume-markdown/resources/code-tree.md
new file mode 100644
index 00000000..082774a3
--- /dev/null
+++ b/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)
+```
diff --git a/skills/vuepress-plume-markdown/resources/collapse.md b/skills/vuepress-plume-markdown/resources/collapse.md
new file mode 100644
index 00000000..6d23422c
--- /dev/null
+++ b/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
+:::
+```
diff --git a/skills/vuepress-plume-markdown/resources/container.md b/skills/vuepress-plume-markdown/resources/container.md
new file mode 100644
index 00000000..42ccc709
--- /dev/null
+++ b/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.
+:::
+```
diff --git a/skills/vuepress-plume-markdown/resources/echarts.md b/skills/vuepress-plume-markdown/resources/echarts.md
new file mode 100644
index 00000000..97a88d97
--- /dev/null
+++ b/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'
+ }
+ ]
+}
+```
+:::
+````
diff --git a/skills/vuepress-plume-markdown/resources/file-tree.md b/skills/vuepress-plume-markdown/resources/file-tree.md
new file mode 100644
index 00000000..2aa33114
--- /dev/null
+++ b/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
+ - ...
+:::
+```
diff --git a/skills/vuepress-plume-markdown/resources/flex.md b/skills/vuepress-plume-markdown/resources/flex.md
new file mode 100644
index 00000000..13f8136c
--- /dev/null
+++ b/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 |
+| ------- |
+:::
+```
diff --git a/skills/vuepress-plume-markdown/resources/flowchart.md b/skills/vuepress-plume-markdown/resources/flowchart.md
new file mode 100644
index 00000000..d59bcdb3
--- /dev/null
+++ b/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
+```
+````
diff --git a/skills/vuepress-plume-markdown/resources/github-alerts.md b/skills/vuepress-plume-markdown/resources/github-alerts.md
new file mode 100644
index 00000000..d10d4685
--- /dev/null
+++ b/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.
+```
diff --git a/skills/vuepress-plume-markdown/resources/icons.md b/skills/vuepress-plume-markdown/resources/icons.md
new file mode 100644
index 00000000..8a4bf9c5
--- /dev/null
+++ b/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::
+```
diff --git a/skills/vuepress-plume-markdown/resources/include.md b/skills/vuepress-plume-markdown/resources/include.md
new file mode 100644
index 00000000..11a6054b
--- /dev/null
+++ b/skills/vuepress-plume-markdown/resources/include.md
@@ -0,0 +1,21 @@
+# File Include
+
+Include content from other files.
+
+## Syntax
+
+```md
+
+```
+
+- **Lines**: ``
+- **Region**: ``
+ - In source file: `` ... ``
+
+## Example
+
+```md
+
+
+
+```
diff --git a/skills/vuepress-plume-markdown/resources/mark.md b/skills/vuepress-plume-markdown/resources/mark.md
new file mode 100644
index 00000000..8c83cd86
--- /dev/null
+++ b/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}.
+```
diff --git a/skills/vuepress-plume-markdown/resources/markmap.md b/skills/vuepress-plume-markdown/resources/markmap.md
new file mode 100644
index 00000000..b362e684
--- /dev/null
+++ b/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
+
+-
+- [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}$
+```
+````
diff --git a/skills/vuepress-plume-markdown/resources/math.md b/skills/vuepress-plume-markdown/resources/math.md
new file mode 100644
index 00000000..064e80e4
--- /dev/null
+++ b/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}
+$$
+```
diff --git a/skills/vuepress-plume-markdown/resources/mermaid.md b/skills/vuepress-plume-markdown/resources/mermaid.md
new file mode 100644
index 00000000..6476fbc2
--- /dev/null
+++ b/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!
+```
+````
diff --git a/skills/vuepress-plume-markdown/resources/npm-to.md b/skills/vuepress-plume-markdown/resources/npm-to.md
new file mode 100644
index 00000000..dbc1a57e
--- /dev/null
+++ b/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`.
diff --git a/skills/vuepress-plume-markdown/resources/pdf.md b/skills/vuepress-plume-markdown/resources/pdf.md
new file mode 100644
index 00000000..5ef7f70b
--- /dev/null
+++ b/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)
+```
diff --git a/skills/vuepress-plume-markdown/resources/plantuml.md b/skills/vuepress-plume-markdown/resources/plantuml.md
new file mode 100644
index 00000000..2869387e
--- /dev/null
+++ b/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
+```
diff --git a/skills/vuepress-plume-markdown/resources/qrcode.md b/skills/vuepress-plume-markdown/resources/qrcode.md
new file mode 100644
index 00000000..f223f38f
--- /dev/null
+++ b/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
+:::
+```
diff --git a/skills/vuepress-plume-markdown/resources/steps.md b/skills/vuepress-plume-markdown/resources/steps.md
new file mode 100644
index 00000000..18492e03
--- /dev/null
+++ b/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.
+:::
+```
diff --git a/skills/vuepress-plume-markdown/resources/tabs.md b/skills/vuepress-plume-markdown/resources/tabs.md
new file mode 100644
index 00000000..593d8a1a
--- /dev/null
+++ b/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
+```
+:::
+````
diff --git a/skills/vuepress-plume-markdown/resources/timeline.md b/skills/vuepress-plume-markdown/resources/timeline.md
new file mode 100644
index 00000000..9a72f60c
--- /dev/null
+++ b/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
+:::
+```
diff --git a/skills/vuepress-plume-markdown/resources/youtube.md b/skills/vuepress-plume-markdown/resources/youtube.md
new file mode 100644
index 00000000..9327eccb
--- /dev/null
+++ b/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)
+```