# 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.