[Feature] Support Agent Skills Standard Integration

[zerob13]

What do you need? / 你需要什么？

What do you need?

DeepChat should support the Agent Skills standard to enable loading and using reusable procedural knowledge and domain expertise.

What is Agent Skills?

Agent Skills is an open standard for packaging AI agent capabilities into portable, reusable "skills" that any compatible agent can discover and load on demand. Instead of repeating context or instructions in every conversation, skills provide a standardized way to share workflows, checklists, templates, and domain expertise across different AI assistants.

Why this matters

• Portability: Skills created for one agent can be used in DeepChat without modification
• Organizational Knowledge: Teams can version-control and share expertise as skills
• Reduced Context: Skills load only when needed, avoiding bloated prompts
• Open Ecosystem: Compatible with Claude Code, VS Code Copilot, and other skills-enabled agents

Reference Links

• Agent Skills Homepage: https://agentskills.io/home
• Documentation: https://agentskills.io/docs
• Specification: https://agentskills.io/spec
• Integration Guide: https://agentskills.io/docs/integration
• Example Skills: https://github.com/agentskills/skills

Suggested Implementation

1. Allow users to configure local skill directories
2. Load skill metadata (SKILL.md) at startup
3. Inject available skills into the system prompt
4. Load full skill instructions when the model determines relevance
5. Provide a UI to view, enable/disable, and manage installed skills

[coderabbitai]

📝 CodeRabbit Plan Mode

Generate an implementation plan and prompts that you can use with your favorite coding agent.

✅ Successfully generated implementation plan.

💡 Use @coderabbitai <feedback> to replan

Examples

• Example 1
• Example 2

---

🔗 Similar Issues

Related Issues

• [Feature] Add ACP Support #1100
• [Feature] Knowledge Base Integration Proposal #104
• [Feature] DeepChat设计的系统提示词内容的准确性、是否使用系统通用系统提示词 需要斟酌 #1047
• [Feature] Add Straico as AI Provider #959

👤 Suggested Assignees

• zerob13
• astaxie
• BaseBlank
• luisblop

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord or schedule a call!

[coderabbitai]

Coding Plan

Approach

Add support for the Agent Skills open standard in DeepChat, enabling users to configure skill directories, load skill metadata at startup, and dynamically inject skill instructions into the system prompt when the AI model determines relevance.

Observations

DeepChat is an Electron-based AI chat application built with Vue 3 and TypeScript. The architecture follows a presenter pattern with domain-specific configuration helpers (using electron-store for persistence), a centralized system prompt management system, and dynamic context injection patterns (like browser context augmentation). The MCP (Model Context Protocol) implementation provides a comprehensive reference for managing external resources with discovery, activation, and context injection phases. System prompts are dynamically enriched in promptBuilder.ts where message formatting and token management occur before sending to AI providers.

Assumptions

Assumption 1: Skill directory configuration approach

Options Considered:

• Single global directory (like ~/.deepchat/skills/)
• Multiple configurable directories to match the Agent Skills ecosystem pattern

Chosen Option: Multiple configurable directories

Rationale: This aligns with the Agent Skills standard where skills can be personal (global) or project-specific, and allows users flexibility to organize skills by source (personal, team, vendor). This matches DeepChat's existing pattern of supporting multiple configuration sources (e.g., multiple MCP servers).

Assumption 2: Skill activation timing

Options Considered:

• Load all skill instructions at startup into system prompt
• Progressive disclosure: inject only skill metadata into system prompt, load full instructions when model requests

Chosen Option: Progressive disclosure: inject only skill metadata into system prompt, load full instructions when model requests

Rationale: Progressive disclosure following the Agent Skills specification where metadata is preloaded at startup and full SKILL.md body is loaded when relevant. This prevents context window bloat and matches the standard's design. Implementation will inject metadata summaries into the system prompt and provide a mechanism for the model to request full skill content.

Assumption 3: Integration pattern architecture

Options Considered:

• Lightweight: Simple helper class with directory scanning
• Full MCP-style framework: Complete presenter with managers, clients, lifecycle
• Hybrid: Presenter + config helper pattern adapted to skills' simpler needs

Chosen Option: Hybrid: Presenter + config helper pattern adapted to skills' simpler needs

Rationale: Skills are simpler than MCP servers (static markdown files vs. active processes), so a full framework is over-engineering. However, the presenter + config helper pattern provides clean separation of concerns, aligns with DeepChat's architecture (matching McpConfHelper, KnowledgeConfHelper patterns), and allows extensibility. Developers familiar with the existing codebase will immediately understand the structure.

💡 User Tips

Regenerate the plan with different choices with @coderabbitai <feedback>.

Implementation Steps

Phase 1: Configuration and Storage Layer

Establish the configuration infrastructure for managing skill directories and per-skill settings using DeepChat's existing electron-store pattern.

Task 1: Create skills configuration store

Add a new ElectronStore for persistent skills settings in the configuration presenter layer.

• Create src/main/presenter/configPresenter/skillsConfHelper.ts following the pattern of mcpConfHelper.ts
• Define a typed store schema containing: array of skill directory paths, per-skill enabled/disabled states, and metadata cache
• Implement methods for adding/removing skill directories, toggling skill enabled state, and retrieving all skill configurations
• Provide default configuration with an empty skills directories array

Task 2: Define shared type definitions

Create TypeScript interfaces for skills data structures accessible to both main and renderer processes.

• Add skill types to src/shared/config.dict.ts or create src/shared/skills.types.ts
• Define interfaces for: SkillMetadata (name, description, license, author, version), SkillConfig (directory path, enabled state), and ParsedSkill (metadata + full content)
• Include type definitions for skill directory configuration and skill state management

🤖 Prompt for AI agents

This phase creates the configuration foundation for the Agent Skills integration
by adding persistent storage for skill directory paths and per-skill settings.

Create `src/main/presenter/configPresenter/skillsConfHelper.ts` following the
pattern of `mcpConfHelper.ts`:
- Initialize an ElectronStore with a typed schema
- Schema should include: skill directory paths array, per-skill enabled/disabled
states, metadata cache
- Implement methods: addSkillDirectory, removeSkillDirectory,
toggleSkillEnabled, getAllSkillConfigs
- Set default configuration with empty directories array

Define shared TypeScript interfaces in `src/shared/config.dict.ts` or
`src/shared/skills.types.ts`:
- SkillMetadata interface: name, description, license, author, version
- SkillConfig interface: directory path, enabled state
- ParsedSkill interface: metadata + full content
- Include types for skill directory configuration and state management

Phase 2: Skills Discovery and Parsing

Implement the core logic for discovering skill directories, parsing SKILL.md files, and caching skill metadata.

Task 1: Build skill directory scanner

Create file system utilities to discover and validate skills in configured directories.

• Add scanning logic in src/main/presenter/skillsPresenter/skillScanner.ts
• Recursively scan configured directories for folders containing SKILL.md files
• Validate skill directory structure and file presence
• Return array of discovered skill paths with basic validation status

Task 2: Implement SKILL.md parser

Parse YAML frontmatter and markdown content from SKILL.md files.

• Create src/main/presenter/skillsPresenter/skillParser.ts with YAML frontmatter extraction
• Use a YAML parsing library (check if one exists in dependencies, otherwise add yaml or gray-matter)
• Extract required metadata fields (name, description) and optional fields (license, author, version, metadata)
• Parse markdown body containing skill instructions
• Handle parsing errors gracefully and return structured ParsedSkill objects

Task 3: Create skills presenter orchestrator

Coordinate skill loading, caching, and lifecycle management.

• Create src/main/presenter/skillsPresenter/index.ts as the main orchestrator following the presenter pattern
• Initialize during app startup via the presenter initialization hook
• Load configured directories from SkillsConfHelper
• Scan directories and parse all discovered skills using skillScanner and skillParser
• Cache parsed skills in memory with metadata indexes for quick lookup
• Implement refresh logic to reload skills when configuration changes
• Expose IPC methods for renderer to retrieve skill lists and individual skill content

🤖 Prompt for AI agents

This phase implements the core skill discovery and parsing system to load
SKILL.md files from configured directories.

Create `src/main/presenter/skillsPresenter/skillScanner.ts`:
- Implement recursive directory scanning to find folders containing `SKILL.md`
files
- Validate skill directory structure and file presence
- Return array of discovered skill paths with validation status

Create `src/main/presenter/skillsPresenter/skillParser.ts`:
- Use a YAML parsing library (gray-matter or yaml) to extract frontmatter from
SKILL.md
- Extract required fields (name, description) and optional fields (license,
author, version, metadata)
- Parse markdown body containing skill instructions
- Handle parsing errors gracefully, return structured ParsedSkill objects

Create `src/main/presenter/skillsPresenter/index.ts` as main orchestrator:
- Initialize during app startup
- Load configured directories from SkillsConfHelper
- Scan and parse skills using skillScanner and skillParser
- Cache parsed skills in memory with metadata indexes
- Implement refresh logic for configuration changes
- Expose IPC methods for renderer: retrieving skill lists and individual skill
content

Phase 3: System Prompt Integration

Inject skill metadata into system prompts and provide a mechanism for loading full skill instructions on demand.

Task 1: Build skill context generator

Create a builder to format skill metadata for system prompt injection.

• Add src/main/presenter/skillsPresenter/SkillContextBuilder.ts following the pattern of BrowserContextBuilder.ts
• Implement buildSkillMetadataSummary() to generate a formatted list of enabled skills with names and descriptions
• Format the summary to clearly indicate available skills and when they should be used
• Keep the summary concise to minimize token usage in the base system prompt

Task 2: Integrate with prompt builder

Augment the system prompt construction to include skill metadata.

• Modify src/main/presenter/threadPresenter/utils/promptBuilder.ts to incorporate skill metadata
• Add skill metadata retrieval before system prompt enhancement
• Append skill metadata summary to the system prompt using the same pattern as browser context injection
• Ensure skill metadata appears after the base system prompt but before datetime enhancement
• Include instructions in the augmented prompt explaining how the model can request full skill instructions

Task 3: Implement skill loading mechanism

Provide a way for the AI model to request and receive full skill instructions when needed.

• Extend the message handling in promptBuilder.ts or messageManager.ts to detect skill loading requests
• When a skill is referenced (by name) in conversation context, inject the full SKILL.md body into the message history
• Consider skill content as context messages that count toward token limits
• Implement caching to avoid re-parsing when the same skill is loaded multiple times in a conversation

🤖 Prompt for AI agents

This phase integrates skill metadata into the system prompt and enables dynamic
loading of full skill instructions.

Create `src/main/presenter/skillsPresenter/SkillContextBuilder.ts` following the
pattern of `BrowserContextBuilder.ts`:
- Implement `buildSkillMetadataSummary()` to generate a concise formatted list
of enabled skills
- Include skill names and descriptions
- Format clearly to indicate available skills and usage context
- Keep token usage minimal

Modify `src/main/presenter/threadPresenter/utils/promptBuilder.ts`:
- Retrieve skill metadata before system prompt enhancement
- Append skill metadata summary using the browser context injection pattern
- Position metadata after base system prompt but before datetime enhancement
- Add instructions explaining how the model can request full skill instructions

Extend message handling in `promptBuilder.ts` or `messageManager.ts`:
- Detect skill loading requests by name in conversation context
- Inject full SKILL.md body into message history when referenced
- Treat skill content as context messages counting toward token limits
- Implement caching to avoid re-parsing the same skill multiple times in a
conversation

Phase 4: User Interface for Skills Management

Build a settings page for users to configure skill directories, view discovered skills, and enable/disable individual skills.

Task 1: Create skills settings page component

Add a new settings page following DeepChat's existing settings UI patterns.

• Create src/renderer/settings/components/SkillsSettings.vue following the pattern of McpSettings.vue or DataSettings.vue
• Use Vue 3 composition API with shadcn/vue components (Button, Label, Input, Accordion, Dialog)
• Display a list of configured skill directories with add/remove controls
• Show discovered skills grouped by directory using Accordion or list components
• Include skill metadata display (name, description, author, version) for each skill

Task 2: Add skill directory management UI

Provide controls for adding and removing skill directories.

• Add a directory input field with a "Browse" button to trigger native directory picker (via IPC to main process)
• Display configured directories with remove buttons
• Use shadcn Dialog for directory selection confirmation
• Implement add/remove operations using Pinia store to communicate with main process via IPC

Task 3: Add skill enable/disable toggles

Allow users to selectively enable or disable individual skills.

• Add toggle switches (using shadcn Switch component) next to each skill in the list
• Persist enabled/disabled state to SkillsConfHelper when toggled
• Show visual indicators (icons, badges) for skill status (enabled, disabled, error)
• Include skill metadata preview (description) when hovering or expanding skill entries

Task 4: Implement skills state management

Create Pinia store for managing skills state in the renderer process.

• Add src/renderer/src/stores/skillsStore.ts following the pattern of existing stores
• Define state for: configured directories, discovered skills, loading states, error states
• Implement actions to: fetch skills list, add/remove directories, toggle skill enabled state, refresh skills
• Use PiniaColada for IPC data caching similar to other stores
• Connect store to SkillsSettings component for reactive UI updates

Task 5: Wire up settings navigation

Add the skills settings page to the settings sidebar navigation.

• Modify src/renderer/settings/App.vue to include a "Skills" menu item in the sidebar navigation
• Add appropriate icon from @iconify/vue (e.g., "lucide:brain" or "lucide:puzzle")
• Configure route for SkillsSettings component in the settings router
• Position skills menu item logically in the settings menu (perhaps after MCP/ACP sections)

🤖 Prompt for AI agents

This phase builds the user interface for managing skills, including
configuration, discovery display, and enable/disable controls.

Create `src/renderer/settings/components/SkillsSettings.vue` following the
pattern of `McpSettings.vue` or `DataSettings.vue`:
- Use Vue 3 composition API with shadcn/vue components (Button, Label, Input,
Accordion, Dialog)
- Display configured skill directories with add/remove controls
- Show discovered skills grouped by directory using Accordion
- Display skill metadata: name, description, author, version

Add skill directory management UI:
- Directory input field with "Browse" button triggering native directory picker
via IPC
- Display configured directories with remove buttons
- Use shadcn Dialog for directory selection confirmation
- Implement add/remove operations via Pinia store and IPC

Add skill enable/disable toggles:
- Use shadcn Switch component next to each skill
- Persist enabled/disabled state to SkillsConfHelper
- Show visual indicators (icons, badges) for skill status
- Include metadata preview on hover or expansion

Create `src/renderer/src/stores/skillsStore.ts` following existing store
patterns:
- Define state: configured directories, discovered skills, loading states, error
states
- Implement actions: fetch skills list, add/remove directories, toggle skill
enabled state, refresh skills
- Use PiniaColada for IPC data caching
- Connect store to SkillsSettings component for reactive updates

Modify `src/renderer/settings/App.vue`:
- Add "Skills" menu item to sidebar navigation
- Add icon from @iconify/vue (lucide:brain or lucide:puzzle)
- Configure route for SkillsSettings component
- Position after MCP/ACP sections in settings menu

Phase 5: Testing and Polish

Validate the skills integration with real skill files and ensure proper error handling.

Task 1: Add error handling and validation

Ensure robust error handling throughout the skills system.

• Add try-catch blocks in skill parsing with meaningful error messages
• Validate SKILL.md frontmatter for required fields (name, description)
• Handle missing or malformed skill files gracefully without crashing
• Display error states in the UI when skills fail to load
• Log skill loading errors for debugging

Task 2: Implement skill refresh functionality

Allow users to reload skills without restarting the application.

• Add a "Refresh Skills" button in the SkillsSettings UI
• Trigger skill directory rescan and re-parse all discovered skills
• Update cached skill data and refresh UI display
• Broadcast skill refresh events to update system prompt context

Task 3: Add skill metadata preview

Enhance the UI to show full skill details on demand.

• Implement expandable skill cards or a detail panel showing full skill metadata
• Display the SKILL.md markdown body preview (truncated or scrollable)
• Show file path, last modified date, and file size
• Consider adding a "Copy Skill Path" button for developer convenience

🤖 Prompt for AI agents

This phase adds robust error handling, refresh functionality, and enhanced skill
metadata preview to complete the integration.

Add comprehensive error handling:
- Add try-catch blocks in skill parsing with meaningful error messages
- Validate SKILL.md frontmatter for required fields (name, description)
- Handle missing or malformed skill files gracefully
- Display error states in UI when skills fail to load
- Log skill loading errors for debugging

Implement skill refresh functionality:
- Add "Refresh Skills" button in SkillsSettings UI
- Trigger skill directory rescan and re-parse all discovered skills
- Update cached skill data and refresh UI display
- Broadcast skill refresh events to update system prompt context

Add skill metadata preview:
- Implement expandable skill cards or detail panel showing full skill metadata
- Display SKILL.md markdown body preview (truncated or scrollable)
- Show file path, last modified date, file size
- Add "Copy Skill Path" button for developer convenience

---

🚀 Next Steps

🤖 All AI agent prompts combined

Task: 1

This phase creates the configuration foundation for the Agent Skills integration
by adding persistent storage for skill directory paths and per-skill settings.

Create `src/main/presenter/configPresenter/skillsConfHelper.ts` following the
pattern of `mcpConfHelper.ts`:
- Initialize an ElectronStore with a typed schema
- Schema should include: skill directory paths array, per-skill enabled/disabled
states, metadata cache
- Implement methods: addSkillDirectory, removeSkillDirectory,
toggleSkillEnabled, getAllSkillConfigs
- Set default configuration with empty directories array

Define shared TypeScript interfaces in `src/shared/config.dict.ts` or
`src/shared/skills.types.ts`:
- SkillMetadata interface: name, description, license, author, version
- SkillConfig interface: directory path, enabled state
- ParsedSkill interface: metadata + full content
- Include types for skill directory configuration and state management
===============================================================================

Task: 2

This phase implements the core skill discovery and parsing system to load
SKILL.md files from configured directories.

Create `src/main/presenter/skillsPresenter/skillScanner.ts`:
- Implement recursive directory scanning to find folders containing `SKILL.md`
files
- Validate skill directory structure and file presence
- Return array of discovered skill paths with validation status

Create `src/main/presenter/skillsPresenter/skillParser.ts`:
- Use a YAML parsing library (gray-matter or yaml) to extract frontmatter from
SKILL.md
- Extract required fields (name, description) and optional fields (license,
author, version, metadata)
- Parse markdown body containing skill instructions
- Handle parsing errors gracefully, return structured ParsedSkill objects

Create `src/main/presenter/skillsPresenter/index.ts` as main orchestrator:
- Initialize during app startup
- Load configured directories from SkillsConfHelper
- Scan and parse skills using skillScanner and skillParser
- Cache parsed skills in memory with metadata indexes
- Implement refresh logic for configuration changes
- Expose IPC methods for renderer: retrieving skill lists and individual skill
content
===============================================================================

Task: 3

This phase integrates skill metadata into the system prompt and enables dynamic
loading of full skill instructions.

Create `src/main/presenter/skillsPresenter/SkillContextBuilder.ts` following the
pattern of `BrowserContextBuilder.ts`:
- Implement `buildSkillMetadataSummary()` to generate a concise formatted list
of enabled skills
- Include skill names and descriptions
- Format clearly to indicate available skills and usage context
- Keep token usage minimal

Modify `src/main/presenter/threadPresenter/utils/promptBuilder.ts`:
- Retrieve skill metadata before system prompt enhancement
- Append skill metadata summary using the browser context injection pattern
- Position metadata after base system prompt but before datetime enhancement
- Add instructions explaining how the model can request full skill instructions

Extend message handling in `promptBuilder.ts` or `messageManager.ts`:
- Detect skill loading requests by name in conversation context
- Inject full SKILL.md body into message history when referenced
- Treat skill content as context messages counting toward token limits
- Implement caching to avoid re-parsing the same skill multiple times in a
conversation
===============================================================================

Task: 4

This phase builds the user interface for managing skills, including
configuration, discovery display, and enable/disable controls.

Create `src/renderer/settings/components/SkillsSettings.vue` following the
pattern of `McpSettings.vue` or `DataSettings.vue`:
- Use Vue 3 composition API with shadcn/vue components (Button, Label, Input,
Accordion, Dialog)
- Display configured skill directories with add/remove controls
- Show discovered skills grouped by directory using Accordion
- Display skill metadata: name, description, author, version

Add skill directory management UI:
- Directory input field with "Browse" button triggering native directory picker
via IPC
- Display configured directories with remove buttons
- Use shadcn Dialog for directory selection confirmation
- Implement add/remove operations via Pinia store and IPC

Add skill enable/disable toggles:
- Use shadcn Switch component next to each skill
- Persist enabled/disabled state to SkillsConfHelper
- Show visual indicators (icons, badges) for skill status
- Include metadata preview on hover or expansion

Create `src/renderer/src/stores/skillsStore.ts` following existing store
patterns:
- Define state: configured directories, discovered skills, loading states, error
states
- Implement actions: fetch skills list, add/remove directories, toggle skill
enabled state, refresh skills
- Use PiniaColada for IPC data caching
- Connect store to SkillsSettings component for reactive updates

Modify `src/renderer/settings/App.vue`:
- Add "Skills" menu item to sidebar navigation
- Add icon from @iconify/vue (lucide:brain or lucide:puzzle)
- Configure route for SkillsSettings component
- Position after MCP/ACP sections in settings menu
===============================================================================

Task: 5

This phase adds robust error handling, refresh functionality, and enhanced skill
metadata preview to complete the integration.

Add comprehensive error handling:
- Add try-catch blocks in skill parsing with meaningful error messages
- Validate SKILL.md frontmatter for required fields (name, description)
- Handle missing or malformed skill files gracefully
- Display error states in UI when skills fail to load
- Log skill loading errors for debugging

Implement skill refresh functionality:
- Add "Refresh Skills" button in SkillsSettings UI
- Trigger skill directory rescan and re-parse all discovered skills
- Update cached skill data and refresh UI display
- Broadcast skill refresh events to update system prompt context

Add skill metadata preview:
- Implement expandable skill cards or detail panel showing full skill metadata
- Display SKILL.md markdown body preview (truncated or scrollable)
- Show file path, last modified date, file size
- Add "Copy Skill Path" button for developer convenience

💡 Iterate on the plan with: @coderabbitai <feedback>

Example Feedback
- @coderabbitai You can skip phase 3. Add a simple unit test case for phase 2.
- @coderabbitai For assumption 1 go ahead with option 3 and replan.

---

💬 Have feedback or questions? Drop into our discord or schedule a call!

[eric8810]

Things need to be done.
Working Directory for skills files like assets , scripts, references.
Installation method for zip or git url.
File tool and Interpretor tool to interact with scripts and all the static files.
Also, skills should be easy to swith on/off.

@coderabbitai

[coderabbitai]

Oops, something went wrong! Please try again later. 🐰 💔

[eric8810]

Oops, something went wrong! Please try again later. 🐰 💔

@coderabbitai

retry

[coderabbitai]

Oops, something went wrong! Please try again later. 🐰 💔