Implement support for the #Skill keyword to reference and embed installed agent skills within prompts

Author: robertpiosik

packages/ui/src/components/editor/panel/PromptField/PromptField.module.scss

@@ -216,6 +216,10 @@
     }
   }
 
+  &--skill &__icon::before {
+    content: '\ec59';
+  }
+
   &--changes &__icon::before {
     content: '\ebdb';
   }

packages/ui/src/components/editor/panel/PromptField/hooks/use-handlers.ts

@@ -21,7 +21,7 @@ const getKeywordRanges = (
   const ranges: { start: number; end: number }[] = []
   // This regex is a combination of all keyword types
   const regex =
-    /`([^\s`]*\.[^\s`]+)`|(#Changes:[^\s,;:!?]+)|(#Selection)|(#SavedContext:(?:WorkspaceState|JSON)\s+"[^"]+")|(#(?:Commit|ContextAtCommit):[^:]+:[^\s"]+\s+"(?:\\.|[^"\\])*")|(<fragment path="[^"]+"(?: [^>]+)?>\n[\s\S]*?\n<\/fragment>)/g
+    /`([^\s`]*\.[^\s`]+)`|(#Changes:[^\s,;:!?]+)|(#Selection)|(#SavedContext:(?:WorkspaceState|JSON)\s+"[^"]+")|(#(?:Commit|ContextAtCommit):[^:]+:[^\s"]+\s+"(?:\\.|[^"\\])*")|(<fragment path="[^"]+"(?: [^>]+)?>\n[\s\S]*?\n<\/fragment>)|(#Skill:[^:]+:[^:]+:[^\s]+)/g
 
   let match
   while ((match = regex.exec(text)) !== null) {
@@ -149,6 +149,18 @@ const reconstruct_raw_value_from_node = (node: Node): string => {
       }
 
       return `<fragment ${attributes}>\n${content}\n</fragment>`
+    } else if (el.dataset.type == 'skill-keyword') {
+      const agent = el.dataset.agent
+      const repo = el.dataset.repo
+      const skillName = el.dataset.skillName
+      if (!agent || !repo || !skillName) return ''
+
+      const index = inner_content.indexOf(skillName)
+      if (index != -1) {
+        const prefix = inner_content.substring(0, index)
+        const suffix = inner_content.substring(index + skillName.length)
+        return `${prefix}#Skill:${agent}:${repo}:${skillName}${suffix}`
+      }
     }
 
     return inner_content
@@ -310,6 +322,18 @@ export const use_handlers = (
       const search_pattern = `#ContextAtCommit:${repo_name}:${commit_hash} "${commit_message.replace(/"/g, '\\"')}"`
       const start_index = props.value.indexOf(search_pattern)
 
+      if (start_index !== -1) {
+        apply_keyword_deletion(start_index, start_index + search_pattern.length)
+      }
+    } else if (keyword_type == 'skill-keyword') {
+      const agent = keyword_element.dataset.agent
+      const repo = keyword_element.dataset.repo
+      const skillName = keyword_element.dataset.skillName
+      if (!agent || !repo || !skillName) return
+
+      const search_pattern = `#Skill:${agent}:${repo}:${skillName}`
+      const start_index = props.value.indexOf(search_pattern)
+
       if (start_index !== -1) {
         apply_keyword_deletion(start_index, start_index + search_pattern.length)
       }
@@ -658,6 +682,22 @@ export const use_handlers = (
     return false
   }
 
+  const handle_skill_keyword_deletion = (raw_pos: number): boolean => {
+    const text_before_cursor = props.value.substring(0, raw_pos)
+    const match = text_before_cursor.match(/#Skill:[^:]+:[^:]+:[^\s]+$/)
+
+    if (match) {
+      const start_of_match = raw_pos - match[0].length
+      const new_value =
+        props.value.substring(0, start_of_match) +
+        props.value.substring(raw_pos)
+      const new_raw_cursor_pos = start_of_match
+      update_value(new_value, new_raw_cursor_pos)
+      return true
+    }
+    return false
+  }
+
   const handle_pasted_lines_keyword_deletion = (raw_pos: number): boolean => {
     const text_before_cursor = props.value.substring(0, raw_pos)
 
@@ -718,6 +758,10 @@ export const use_handlers = (
       return handle_commit_keyword_deletion(raw_pos, context_file_paths)
     }
 
+    if (el.dataset.type == 'skill-keyword') {
+      return handle_skill_keyword_deletion(raw_pos)
+    }
+
     if (el.dataset.type == 'pasted-lines-keyword') {
       return handle_pasted_lines_keyword_deletion(raw_pos)
     }
@@ -760,7 +804,8 @@ export const use_handlers = (
           parent.dataset.type == 'saved-context-keyword' ||
           parent.dataset.type == 'commit-keyword' ||
           parent.dataset.type == 'contextatcommit-keyword' ||
-          parent.dataset.type == 'pasted-lines-keyword'
+          parent.dataset.type == 'pasted-lines-keyword' ||
+          parent.dataset.type == 'skill-keyword'
         ) {
           const rangeAfter = document.createRange()
           rangeAfter.selectNodeContents(parent)
@@ -786,7 +831,8 @@ export const use_handlers = (
         el.dataset.type == 'saved-context-keyword' ||
         el.dataset.type == 'commit-keyword' ||
         el.dataset.type == 'contextatcommit-keyword' ||
-        el.dataset.type == 'pasted-lines-keyword'
+        el.dataset.type == 'pasted-lines-keyword' ||
+        el.dataset.type == 'skill-keyword'
       ) {
         const display_pos = get_caret_position_from_div(input_ref.current)
         if (handle_keyword_deletion_by_backspace(el, display_pos)) {

packages/ui/src/components/editor/panel/PromptField/utils/get-highlighted-text.tsx

@@ -59,8 +59,10 @@ export const get_highlighted_text = (params: {
   const fragment_regex_part =
     '<fragment path="[^"]+"(?: [^>]+)?>\\n[\\s\\S]*?\\n<\\/fragment>'
 
+  const skill_regex_part = '#Skill:[^:]+:[^:]+:[^\\s]+'
+
   const regex = new RegExp(
-    `(${fragment_regex_part}|#Selection|#Changes:[^\\s,;:!?]+|${saved_context_regex_part}|${commit_regex_part})`,
+    `(${fragment_regex_part}|#Selection|#Changes:[^\\s,;:!?]+|${saved_context_regex_part}|${commit_regex_part}|${skill_regex_part})`,
     'g'
   )
   const parts = params.text.split(regex)
@@ -168,6 +170,27 @@ export const get_highlighted_text = (params: {
         }" data-role="keyword-text">${escape_html(short_hash)}</span></span>`
       }
 
+      const skill_match = part.match(/^#Skill:([^:]+):(.+):([^\s:]+)$/)
+      if (part && skill_match) {
+        const agent = skill_match[1]
+        const repo = skill_match[2]
+        const skill_name = skill_match[3]
+        return `<span class="${cn(
+          styles['keyword'],
+          styles['keyword--skill']
+        )}" data-type="skill-keyword" data-agent="${escape_html(
+          agent
+        )}" data-repo="${escape_html(repo)}" data-skill-name="${escape_html(
+          skill_name
+        )}" title="Skill: ${escape_html(skill_name)} (${escape_html(
+          agent
+        )})"><span class="${
+          styles['keyword__icon']
+        }" data-role="keyword-icon"></span><span class="${
+          styles['keyword__text']
+        }" data-role="keyword-text">${escape_html(skill_name)}</span></span>`
+      }
+
       return process_text_part_for_files(part, params.context_file_paths)
     })
     .join('')

packages/ui/src/components/editor/panel/PromptField/utils/position-mapping.ts

@@ -8,7 +8,7 @@ export const map_display_pos_to_raw_pos = (
   let last_raw_index = 0
 
   const regex =
-    /`([^\s`]*\.[^\s`]+)`|(#Changes:[^\s,;:!?]+)|(#Selection)|(#SavedContext:(?:WorkspaceState|JSON)\s+"([^"]+)")|(#(?:Commit|ContextAtCommit):[^:]+:([^\s"]+)\s+"(?:\\.|[^"\\])*")|(<fragment path="[^"]+"(?: [^>]+)?>\n([\s\S]*?)\n<\/fragment>)/g
+    /`([^\s`]*\.[^\s`]+)`|(#Changes:[^\s,;:!?]+)|(#Selection)|(#SavedContext:(?:WorkspaceState|JSON)\s+"([^"]+)")|(#(?:Commit|ContextAtCommit):[^:]+:([^\s"]+)\s+"(?:\\.|[^"\\])*")|(<fragment path="[^"]+"(?: [^>]+)?>\n([\s\S]*?)\n<\/fragment>)|(#Skill:[^:]+:[^:]+:[^\s]+)/g
   let match
 
   while ((match = regex.exec(raw_text)) !== null) {
@@ -21,6 +21,7 @@ export const map_display_pos_to_raw_pos = (
     const commit_hash = match[7]
     const fragment_keyword = match[8]
     const fragment_content = match[9]
+    const skill_keyword = match[10]
 
     let is_replacement_match = false
     let display_match_length = 0
@@ -48,6 +49,11 @@ export const map_display_pos_to_raw_pos = (
       const lines_text = line_count === 1 ? 'line' : 'lines'
       display_match_length = `Pasted ${line_count} ${lines_text}`.length
       is_replacement_match = true
+    } else if (skill_keyword) {
+      const parts = skill_keyword.split(':')
+      const skill_name = parts[parts.length - 1]
+      display_match_length = skill_name.length
+      is_replacement_match = true
     }
 
     if (!is_replacement_match) {
@@ -78,7 +84,6 @@ export const map_display_pos_to_raw_pos = (
     last_raw_index = regex.lastIndex
   }
 
-  // Cursor is in the text after all matches
   return raw_pos + (display_pos - current_display_pos)
 }
 
@@ -92,7 +97,7 @@ export const map_raw_pos_to_display_pos = (
   let last_raw_index = 0
 
   const regex =
-    /`([^\s`]*\.[^\s`]+)`|(#Changes:[^\s,;:!?]+)|(#Selection)|(#SavedContext:(?:WorkspaceState|JSON)\s+"([^"]+)")|(#(?:Commit|ContextAtCommit):[^:]+:([^\s"]+)\s+"(?:\\.|[^"\\])*")|(<fragment path="[^"]+"(?: [^>]+)?>\n([\s\S]*?)\n<\/fragment>)/g
+    /`([^\s`]*\.[^\s`]+)`|(#Changes:[^\s,;:!?]+)|(#Selection)|(#SavedContext:(?:WorkspaceState|JSON)\s+"([^"]+)")|(#(?:Commit|ContextAtCommit):[^:]+:([^\s"]+)\s+"(?:\\.|[^"\\])*")|(<fragment path="[^"]+"(?: [^>]+)?>\n([\s\S]*?)\n<\/fragment>)|(#Skill:[^:]+:[^:]+:[^\s]+)/g
   let match
 
   while ((match = regex.exec(raw_text)) !== null) {
@@ -105,6 +110,7 @@ export const map_raw_pos_to_display_pos = (
     const commit_hash = match[7]
     const fragment_keyword = match[8]
     const fragment_content = match[9]
+    const skill_keyword = match[10]
 
     let is_replacement_match = false
     let display_match_length = 0
@@ -132,6 +138,11 @@ export const map_raw_pos_to_display_pos = (
       const lines_text = line_count === 1 ? 'line' : 'lines'
       display_match_length = `Pasted ${line_count} ${lines_text}`.length
       is_replacement_match = true
+    } else if (skill_keyword) {
+      const parts = skill_keyword.split(':')
+      const skill_name = parts[parts.length - 1]
+      display_match_length = skill_name.length
+      is_replacement_match = true
     }
 
     if (!is_replacement_match) {

packages/vscode/src/views/panel/backend/message-handlers/handle-code-completion.ts

@@ -25,6 +25,7 @@ import {
   replace_context_at_commit_symbol
 } from '../utils/replace-git-symbols'
 import { replace_saved_context_placeholder } from '@/utils/replace-saved-context-placeholder'
+import { replace_skill_symbol } from '../utils/replace-skill-symbol'
 
 const get_code_completion_config = async (
   api_providers_manager: ModelProvidersManager,
@@ -388,6 +389,12 @@ export const handle_code_completion = async (
         })
     }
 
+    if (processed_completion_instructions.includes('#Skill:')) {
+      processed_completion_instructions = await replace_skill_symbol({
+        instruction: processed_completion_instructions
+      })
+    }
+
     const files_collector = new FilesCollector(
       panel_provider.workspace_provider,
       panel_provider.open_editors_provider

packages/vscode/src/views/panel/backend/message-handlers/handle-copy-prompt.ts

@@ -8,6 +8,7 @@ import {
   replace_context_at_commit_symbol
 } from '@/views/panel/backend/utils/replace-git-symbols'
 import { replace_saved_context_placeholder } from '@/utils/replace-saved-context-placeholder'
+import { replace_skill_symbol } from '@/views/panel/backend/utils/replace-skill-symbol'
 import {
   code_completion_instructions_for_panel,
   prune_context_instructions_prefix,
@@ -125,6 +126,12 @@ export const handle_copy_prompt = async (params: {
         })
     }
 
+    if (processed_completion_instructions.includes('#Skill:')) {
+      processed_completion_instructions = await replace_skill_symbol({
+        instruction: processed_completion_instructions
+      })
+    }
+
     const missing_text_tag = processed_completion_instructions
       ? `<missing_text>${processed_completion_instructions}</missing_text>`
       : '<missing_text>'
@@ -175,6 +182,12 @@ export const handle_copy_prompt = async (params: {
       })
     }
 
+    if (processed_instructions.includes('#Skill:')) {
+      processed_instructions = await replace_skill_symbol({
+        instruction: processed_instructions
+      })
+    }
+
     let system_instructions_xml = ''
 
     if (params.panel_provider.web_prompt_type == 'edit-context') {

packages/vscode/src/views/panel/backend/message-handlers/handle-edit-context.ts

@@ -23,6 +23,7 @@ import {
 import { replace_saved_context_placeholder } from '@/utils/replace-saved-context-placeholder'
 import { replace_selection_placeholder } from '@/views/panel/backend/utils/replace-selection-symbol'
 import { PanelProvider } from '@/views/panel/backend/panel-provider'
+import { replace_skill_symbol } from '@/views/panel/backend/utils/replace-skill-symbol'
 import { apply_reasoning_effort } from '@/utils/apply-reasoning-effort'
 import { EditContextMessage } from '@/views/panel/types/messages'
 import { dictionary } from '@shared/constants/dictionary'
@@ -337,6 +338,12 @@ export const handle_edit_context = async (
     })
   }
 
+  if (processed_instructions.includes('#Skill:')) {
+    processed_instructions = await replace_skill_symbol({
+      instruction: processed_instructions
+    })
+  }
+
   const is_prune_context = panel_provider.api_prompt_type == 'prune-context'
   const collected_files = await files_collector.collect_files({
     compact: is_prune_context