157 lines
4.8 KiB
Markdown
157 lines
4.8 KiB
Markdown
# 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.
|