Add skills list display to CLI interface

packages/cli/src/ui/commands/skillsCommand.ts

@@ -10,7 +10,7 @@ import {
   type CommandContext,
   type SlashCommand,
 } from './types.js';
-import { MessageType } from '../types.js';
+import { MessageType, type HistoryItemSkillsList } from '../types.js';
 import { t } from '../../i18n/index.js';
 import { AsyncFzf } from 'fzf';
 import type { SkillConfig } from '@qwen-code/qwen-code-core';
@@ -41,7 +41,7 @@ export const skillsCommand: SlashCommand = {
     if (skills.length === 0) {
       context.ui.addItem(
         {
-          type: MessageType.WARNING,
+          type: MessageType.INFO,
           text: t('No skills are currently available.'),
         },
         Date.now(),
@@ -50,13 +50,14 @@ export const skillsCommand: SlashCommand = {
     }
 
     if (!skillName) {
-      context.ui.addItem(
-        {
-          type: MessageType.INFO,
-          text: t('Use /skills <name> to select a skill'),
-        },
-        Date.now(),
+      const sortedSkills = [...skills].sort((left, right) =>
+        left.name.localeCompare(right.name),
       );
+      const skillsListItem: HistoryItemSkillsList = {
+        type: MessageType.SKILLS_LIST,
+        skills: sortedSkills.map((skill) => ({ name: skill.name })),
+      };
+      context.ui.addItem(skillsListItem, Date.now());
       return;
     }
     const normalizedName = skillName.toLowerCase();

packages/cli/src/ui/components/HistoryItemDisplay.tsx

@@ -30,6 +30,7 @@ import { Help } from './Help.js';
 import type { SlashCommand } from '../commands/types.js';
 import { ExtensionsList } from './views/ExtensionsList.js';
 import { getMCPServerStatus } from '@qwen-code/qwen-code-core';
+import { SkillsList } from './views/SkillsList.js';
 import { ToolsList } from './views/ToolsList.js';
 import { McpStatus } from './views/McpStatus.js';
 
@@ -153,6 +154,9 @@ const HistoryItemDisplayComponent: React.FC<HistoryItemDisplayProps> = ({
           showDescriptions={itemForDisplay.showDescriptions}
         />
       )}
+      {itemForDisplay.type === 'skills_list' && (
+        <SkillsList skills={itemForDisplay.skills} />
+      )}
       {itemForDisplay.type === 'mcp_status' && (
         <McpStatus {...itemForDisplay} serverStatus={getMCPServerStatus} />
       )}

packages/cli/src/ui/components/messages/InfoMessage.tsx

@@ -23,7 +23,7 @@ export const InfoMessage: React.FC<InfoMessageProps> = ({ text }) => {
   const prefixWidth = prefix.length;
 
   return (
-    <Box flexDirection="row" marginTop={1}>
+    <Box flexDirection="row" marginBottom={1}>
       <Box width={prefixWidth}>
         <Text color={theme.status.warning}>{prefix}</Text>
       </Box>

packages/cli/src/ui/components/messages/WarningMessage.tsx

@@ -18,7 +18,7 @@ export const WarningMessage: React.FC<WarningMessageProps> = ({ text }) => {
   const prefixWidth = 3;
 
   return (
-    <Box flexDirection="row" marginTop={1}>
+    <Box flexDirection="row" marginBottom={1}>
       <Box width={prefixWidth}>
         <Text color={Colors.AccentYellow}>{prefix}</Text>
       </Box>

packages/cli/src/ui/components/views/SkillsList.tsx

@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright 2025 Qwen
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type React from 'react';
+import { Box, Text } from 'ink';
+import { theme } from '../../semantic-colors.js';
+import { type SkillDefinition } from '../../types.js';
+import { t } from '../../../i18n/index.js';
+
+interface SkillsListProps {
+  skills: readonly SkillDefinition[];
+}
+
+export const SkillsList: React.FC<SkillsListProps> = ({ skills }) => (
+  <Box flexDirection="column" marginBottom={1}>
+    <Text bold color={theme.text.primary}>
+      {t('Available skills:')}
+    </Text>
+    <Box height={1} />
+    {skills.length > 0 ? (
+      skills.map((skill) => (
+        <Box key={skill.name} flexDirection="row">
+          <Text color={theme.text.primary}>{'  '}- </Text>
+          <Text bold color={theme.text.accent}>
+            {skill.name}
+          </Text>
+        </Box>
+      ))
+    ) : (
+      <Text color={theme.text.primary}> {t('No skills available')}</Text>
+    )}
+  </Box>
+);

packages/cli/src/ui/types.ts

@@ -201,12 +201,21 @@ export interface ToolDefinition {
   description?: string;
 }
 
+export interface SkillDefinition {
+  name: string;
+}
+
 export type HistoryItemToolsList = HistoryItemBase & {
   type: 'tools_list';
   tools: ToolDefinition[];
   showDescriptions: boolean;
 };
 
+export type HistoryItemSkillsList = HistoryItemBase & {
+  type: 'skills_list';
+  skills: SkillDefinition[];
+};
+
 // JSON-friendly types for using as a simple data model showing info about an
 // MCP Server.
 export interface JsonMcpTool {
@@ -268,6 +277,7 @@ export type HistoryItemWithoutId =
   | HistoryItemCompression
   | HistoryItemExtensionsList
   | HistoryItemToolsList
+  | HistoryItemSkillsList
   | HistoryItemMcpStatus;
 
 export type HistoryItem = HistoryItemWithoutId & { id: number };
@@ -289,6 +299,7 @@ export enum MessageType {
   SUMMARY = 'summary',
   EXTENSIONS_LIST = 'extensions_list',
   TOOLS_LIST = 'tools_list',
+  SKILLS_LIST = 'skills_list',
   MCP_STATUS = 'mcp_status',
 }