vuepress-theme-plume/skills

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:

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

   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:

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

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

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

  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.