From c228a41f1bf5911442871e62544c1a579e36530e Mon Sep 17 00:00:00 2001
From: huaiju <huaiju@dtstack.com>
Date: Sat, 21 Feb 2026 22:42:51 +0800
Subject: [PATCH 01/43] feat: add backend list, detail, and related APIs for
 skills

---
 app/controller/skills.js |  26 +++
 app/router.js            |   7 +
 app/service/skills.js    | 354 +++++++++++++++++++++++++++++++++++++++
 3 files changed, 387 insertions(+)
 create mode 100644 app/controller/skills.js
 create mode 100644 app/service/skills.js

diff --git a/app/controller/skills.js b/app/controller/skills.js
new file mode 100644
index 0000000..bfcf7f3
--- /dev/null
+++ b/app/controller/skills.js
@@ -0,0 +1,26 @@
+const Controller = require('egg').Controller;
+
+class SkillsController extends Controller {
+    async getSkillList() {
+        const { app, ctx } = this;
+        const params = ctx.query;
+        const data = await ctx.service.skills.querySkillList(params);
+        ctx.body = app.utils.response(true, data);
+    }
+
+    async getSkillDetail() {
+        const { app, ctx } = this;
+        const { slug } = ctx.query;
+        const data = await ctx.service.skills.getSkillDetail(slug);
+        ctx.body = app.utils.response(true, data);
+    }
+
+    async getRelatedSkills() {
+        const { app, ctx } = this;
+        const { slug, limit = 6 } = ctx.query;
+        const data = await ctx.service.skills.getRelatedSkills(slug, limit);
+        ctx.body = app.utils.response(true, data);
+    }
+}
+
+module.exports = SkillsController;
diff --git a/app/router.js b/app/router.js
index 5622be6..cf9b7df 100644
--- a/app/router.js
+++ b/app/router.js
@@ -146,6 +146,13 @@ module.exports = (app) => {
     app.post('/api/mcp-servers/health/:serverId', app.controller.mcp.checkMCPServerHealth);
     app.post('/api/mcp-servers/health/all', app.controller.mcp.checkAllMCPServersHealth);
 
+    /**
+     * Skills 市场
+     */
+    app.get('/api/skills/list', app.controller.skills.getSkillList);
+    app.get('/api/skills/detail', app.controller.skills.getSkillDetail);
+    app.get('/api/skills/related', app.controller.skills.getRelatedSkills);
+
     // io.of('/').route('getShellCommand',  io.controller.home.getShellCommand)
     // 暂时close Terminal相关功能
     // io.of('/').route('loginServer',  io.controller.home.loginServer)
diff --git a/app/service/skills.js b/app/service/skills.js
new file mode 100644
index 0000000..e6cddb5
--- /dev/null
+++ b/app/service/skills.js
@@ -0,0 +1,354 @@
+const Service = require('egg').Service;
+const fs = require('fs');
+const path = require('path');
+
+const CACHE_TTL_MS = 60 * 1000;
+const MAX_FILE_LIST_COUNT = 300;
+
+class SkillsService extends Service {
+    constructor(ctx) {
+        super(ctx);
+        this.skillCache = null;
+    }
+
+    getSkillRootDirs() {
+        const homeDir = process.env.HOME || '';
+        const codexHome = process.env.CODEX_HOME || path.join(homeDir, '.codex');
+        const agentHome = path.join(homeDir, '.agents');
+        return [path.join(codexHome, 'skills'), path.join(agentHome, 'skills')];
+    }
+
+    isCacheValid() {
+        return (
+            this.skillCache &&
+            this.skillCache.loadedAt &&
+            Date.now() - this.skillCache.loadedAt < CACHE_TTL_MS
+        );
+    }
+
+    async ensureSkillCache() {
+        if (this.isCacheValid()) return this.skillCache;
+
+        const rootDirs = this.getSkillRootDirs();
+        const skills = [];
+
+        rootDirs.forEach((rootDir) => {
+            if (!fs.existsSync(rootDir)) return;
+            const skillFiles = this.findSkillFiles(rootDir);
+            skillFiles.forEach((skillFilePath) => {
+                try {
+                    const skill = this.parseSkillMeta(skillFilePath, rootDir);
+                    if (skill) {
+                        skills.push(skill);
+                    }
+                } catch (error) {
+                    this.ctx.logger.warn(
+                        `[skills] 解析技能失败: ${skillFilePath}, ${error.message}`
+                    );
+                }
+            });
+        });
+
+        const categories = Array.from(new Set(skills.map((item) => item.category))).sort();
+        this.skillCache = {
+            loadedAt: Date.now(),
+            skills,
+            categories,
+        };
+        return this.skillCache;
+    }
+
+    findSkillFiles(rootDir) {
+        const result = [];
+        const stack = [rootDir];
+
+        while (stack.length > 0) {
+            const currentDir = stack.pop();
+            let entries = [];
+            try {
+                entries = fs.readdirSync(currentDir, { withFileTypes: true });
+            } catch (error) {
+                continue;
+            }
+
+            entries.forEach((entry) => {
+                const fullPath = path.join(currentDir, entry.name);
+                if (entry.isDirectory()) {
+                    if (entry.name === 'node_modules' || entry.name === '.git') return;
+                    stack.push(fullPath);
+                    return;
+                }
+                if (entry.isFile() && entry.name === 'SKILL.md') {
+                    result.push(fullPath);
+                }
+            });
+        }
+
+        return result;
+    }
+
+    parseSkillMeta(skillFilePath, rootDir) {
+        const content = fs.readFileSync(skillFilePath, 'utf8');
+        const stat = fs.statSync(skillFilePath);
+        const skillDir = path.dirname(skillFilePath);
+        const relativeDir = path.relative(rootDir, skillDir);
+        const slug = relativeDir.split(path.sep).join('-').toLowerCase();
+        const frontmatter = this.parseFrontmatter(content);
+
+        const packageJsonPath = path.join(skillDir, 'package.json');
+        let packageJson = {};
+        if (fs.existsSync(packageJsonPath)) {
+            try {
+                packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+            } catch (error) {
+                packageJson = {};
+            }
+        }
+
+        const metaJsonPath = path.join(skillDir, '_meta.json');
+        let metaJson = {};
+        if (fs.existsSync(metaJsonPath)) {
+            try {
+                metaJson = JSON.parse(fs.readFileSync(metaJsonPath, 'utf8'));
+            } catch (error) {
+                metaJson = {};
+            }
+        }
+
+        const name = frontmatter.name || path.basename(skillDir);
+        const description = frontmatter.description || this.extractDescription(content);
+        const tags = this.parseArrayLike(frontmatter.tags);
+        const allowedTools = this.parseArrayLike(frontmatter['allowed-tools']);
+        const stars = Number(metaJson.stars || metaJson.star || metaJson.github_stars || 0);
+
+        const installCommand = this.getInstallCommand({
+            sourceRepo: this.extractSourceRepo(packageJson),
+            name,
+            skillDir,
+        });
+
+        return {
+            slug,
+            name,
+            description,
+            category: this.getCategoryFromRelativePath(relativeDir),
+            tags,
+            allowedTools,
+            stars: Number.isNaN(stars) ? 0 : stars,
+            updatedAt: stat.mtime.toISOString(),
+            sourceRepo: this.extractSourceRepo(packageJson),
+            sourcePath: skillDir,
+            skillFilePath,
+            installCommand,
+        };
+    }
+
+    parseFrontmatter(content) {
+        const result = {};
+        if (!content.startsWith('---')) return result;
+        const endIndex = content.indexOf('\n---', 3);
+        if (endIndex === -1) return result;
+
+        const frontmatterText = content.slice(3, endIndex).trim();
+        const lines = frontmatterText.split('\n');
+        lines.forEach((line) => {
+            const match = line.match(/^([a-zA-Z0-9_-]+):\s*(.*)$/);
+            if (!match) return;
+            const key = match[1];
+            let value = match[2].trim();
+            if (
+                (value.startsWith('"') && value.endsWith('"')) ||
+                (value.startsWith("'") && value.endsWith("'"))
+            ) {
+                value = value.slice(1, -1);
+            }
+            result[key] = value;
+        });
+        return result;
+    }
+
+    extractDescription(content) {
+        const stripped = content
+            .split('\n')
+            .map((line) => line.trim())
+            .filter((line) => line && !line.startsWith('#') && !line.startsWith('---'));
+        return stripped[0] || '';
+    }
+
+    parseArrayLike(value) {
+        if (!value) return [];
+        if (Array.isArray(value)) return value;
+        if (typeof value !== 'string') return [];
+        const trimmed = value.trim();
+
+        if (trimmed.startsWith('[') && trimmed.endsWith(']')) {
+            try {
+                const normalized = trimmed.replace(/'/g, '"');
+                const parsed = JSON.parse(normalized);
+                return Array.isArray(parsed) ? parsed.map((item) => String(item)) : [];
+            } catch (error) {
+                return trimmed
+                    .slice(1, -1)
+                    .split(',')
+                    .map((item) => item.trim().replace(/^['"]|['"]$/g, ''))
+                    .filter(Boolean);
+            }
+        }
+
+        return trimmed
+            .split(',')
+            .map((item) => item.trim())
+            .filter(Boolean);
+    }
+
+    getCategoryFromRelativePath(relativeDir) {
+        const parts = relativeDir.split(path.sep).filter(Boolean);
+        if (parts.length === 0) return '未分类';
+        if (parts.length === 1) return '通用';
+        return parts[0];
+    }
+
+    extractSourceRepo(packageJson = {}) {
+        if (!packageJson.repository) return '';
+        if (typeof packageJson.repository === 'string') return packageJson.repository;
+        return packageJson.repository.url || '';
+    }
+
+    getInstallCommand({ sourceRepo, name, skillDir }) {
+        if (sourceRepo) {
+            return `npx skills add ${sourceRepo} --skill "${name}"`;
+        }
+        return `mkdir -p "$CODEX_HOME/skills" && cp -R "${skillDir}" "$CODEX_HOME/skills/${name}"`;
+    }
+
+    getSkillList(params = {}) {
+        const {
+            keyword = '',
+            sortBy = 'stars',
+            category = '',
+            pageNum = 1,
+            pageSize = 20,
+        } = params;
+        const safePageNum = Math.max(parseInt(pageNum, 10) || 1, 1);
+        const safePageSize = Math.max(parseInt(pageSize, 10) || 20, 1);
+
+        const { skills, categories } = this.skillCache;
+        let list = [...skills];
+
+        if (keyword) {
+            const value = String(keyword).toLowerCase();
+            list = list.filter(
+                (item) =>
+                    item.name.toLowerCase().includes(value) ||
+                    item.description.toLowerCase().includes(value) ||
+                    item.sourceRepo.toLowerCase().includes(value) ||
+                    item.tags.some((tag) => tag.toLowerCase().includes(value))
+            );
+        }
+
+        if (category) {
+            list = list.filter((item) => item.category === category);
+        }
+
+        list.sort((a, b) => {
+            if (sortBy === 'recent') {
+                return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime();
+            }
+            if (b.stars !== a.stars) return b.stars - a.stars;
+            return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime();
+        });
+
+        const total = list.length;
+        const offset = (safePageNum - 1) * safePageSize;
+        const pageList = list.slice(offset, offset + safePageSize);
+
+        return {
+            list: pageList,
+            total,
+            pageNum: safePageNum,
+            pageSize: safePageSize,
+            categories,
+        };
+    }
+
+    async querySkillList(params = {}) {
+        await this.ensureSkillCache();
+        return this.getSkillList(params);
+    }
+
+    async getSkillDetail(slug) {
+        await this.ensureSkillCache();
+        const skill = this.skillCache.skills.find((item) => item.slug === slug);
+        if (!skill) {
+            this.ctx.throw(404, '技能不存在');
+        }
+
+        const content = fs.readFileSync(skill.skillFilePath, 'utf8');
+        const fileList = this.listSkillFiles(skill.sourcePath);
+
+        return {
+            ...skill,
+            skillMd: content,
+            fileList,
+        };
+    }
+
+    listSkillFiles(skillDir) {
+        const files = [];
+        const stack = [skillDir];
+        while (stack.length > 0) {
+            const currentDir = stack.pop();
+            let entries = [];
+            try {
+                entries = fs.readdirSync(currentDir, { withFileTypes: true });
+            } catch (error) {
+                continue;
+            }
+
+            entries.forEach((entry) => {
+                const fullPath = path.join(currentDir, entry.name);
+                if (entry.isDirectory()) {
+                    stack.push(fullPath);
+                    return;
+                }
+                if (!entry.isFile()) return;
+                const relativePath = path.relative(skillDir, fullPath).split(path.sep).join('/');
+                files.push(relativePath);
+            });
+
+            if (files.length >= MAX_FILE_LIST_COUNT) break;
+        }
+
+        return files.sort();
+    }
+
+    async getRelatedSkills(slug, limit = 6) {
+        await this.ensureSkillCache();
+        const target = this.skillCache.skills.find((item) => item.slug === slug);
+        if (!target) {
+            this.ctx.throw(404, '技能不存在');
+        }
+
+        const targetTags = new Set((target.tags || []).map((item) => item.toLowerCase()));
+        const related = this.skillCache.skills
+            .filter((item) => item.slug !== slug)
+            .map((item) => {
+                const itemTags = (item.tags || []).map((tag) => tag.toLowerCase());
+                const overlap = itemTags.filter((tag) => targetTags.has(tag)).length;
+                const categoryScore = item.category === target.category ? 3 : 0;
+                const score = overlap * 10 + categoryScore + Math.min(item.stars, 10);
+                return { ...item, _score: score };
+            })
+            .filter((item) => item._score > 0)
+            .sort((a, b) => b._score - a._score || b.stars - a.stars)
+            .slice(0, parseInt(limit, 10) || 6)
+            .map((item) => {
+                const { _score, ...rest } = item;
+                return rest;
+            });
+
+        return related;
+    }
+}
+
+module.exports = SkillsService;

From d6669d0c85194a5ddc8c2433b004776ad1636816 Mon Sep 17 00:00:00 2001
From: huaiju <huaiju@dtstack.com>
Date: Sat, 21 Feb 2026 22:44:11 +0800
Subject: [PATCH 02/43] feat: wire skills nav entry and frontend routes

---
 app/web/api/url.ts                    | 19 +++++++++++++++++++
 app/web/layouts/header/header.tsx     |  7 +++++++
 app/web/pages/skills/detail/index.tsx | 12 ++++++++++++
 app/web/pages/skills/index.tsx        | 12 ++++++++++++
 app/web/router/index.ts               | 10 ++++++++++
 5 files changed, 60 insertions(+)
 create mode 100644 app/web/pages/skills/detail/index.tsx
 create mode 100644 app/web/pages/skills/index.tsx

diff --git a/app/web/api/url.ts b/app/web/api/url.ts
index 1f6cb9b..6c6c58b 100644
--- a/app/web/api/url.ts
+++ b/app/web/api/url.ts
@@ -337,4 +337,23 @@ export default {
         method: 'post',
         url: '/api/mcp-servers/sync-info',
     },
+
+    /**
+     * Skills 市场
+     */
+    // 获取 Skills 列表
+    getSkillList: {
+        method: 'get',
+        url: '/api/skills/list',
+    },
+    // 获取 Skill 详情
+    getSkillDetail: {
+        method: 'get',
+        url: '/api/skills/detail',
+    },
+    // 获取相关 Skills
+    getRelatedSkills: {
+        method: 'get',
+        url: '/api/skills/related',
+    },
 };
diff --git a/app/web/layouts/header/header.tsx b/app/web/layouts/header/header.tsx
index 7e200f6..41849e1 100644
--- a/app/web/layouts/header/header.tsx
+++ b/app/web/layouts/header/header.tsx
@@ -3,6 +3,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
 import {
     AppstoreOutlined,
+    BookOutlined,
     CloudOutlined,
     CloudServerOutlined,
     DesktopOutlined,
@@ -49,6 +50,12 @@ const navMenuList: any = [
             'mcp-server-inspector',
         ],
     },
+    {
+        name: 'Skills',
+        path: '/page/skills',
+        icon: <BookOutlined />,
+        routers: ['skills'],
+    },
     {
         name: '主机管理',
         path: '/page/host-management',
diff --git a/app/web/pages/skills/detail/index.tsx b/app/web/pages/skills/detail/index.tsx
new file mode 100644
index 0000000..dee4588
--- /dev/null
+++ b/app/web/pages/skills/detail/index.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { Empty } from 'antd';
+
+const SkillDetail: React.FC = () => {
+    return (
+        <div style={{ padding: 24 }}>
+            <Empty description="Skill 详情页开发中" />
+        </div>
+    );
+};
+
+export default SkillDetail;
diff --git a/app/web/pages/skills/index.tsx b/app/web/pages/skills/index.tsx
new file mode 100644
index 0000000..3b64825
--- /dev/null
+++ b/app/web/pages/skills/index.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { Empty } from 'antd';
+
+const SkillsMarket: React.FC = () => {
+    return (
+        <div style={{ padding: 24 }}>
+            <Empty description="Skills 页面开发中" />
+        </div>
+    );
+};
+
+export default SkillsMarket;
diff --git a/app/web/router/index.ts b/app/web/router/index.ts
index 443b577..fdbe1d1 100644
--- a/app/web/router/index.ts
+++ b/app/web/router/index.ts
@@ -20,6 +20,8 @@ import McpServerInspector from '@/pages/mcpServer/inspector';
 import McpServerManagement from '@/pages/mcpServer/management';
 import McpServerMarket from '@/pages/mcpServer/mcpMarket';
 import McpServerRegistryCenter from '@/pages/mcpServer/registryCenter';
+import SkillDetail from '@/pages/skills/detail';
+import SkillsMarket from '@/pages/skills';
 // 代理服务
 import ProxyServer from '@/pages/proxyServer';
 // hosts列表
@@ -112,6 +114,14 @@ const routes: any = [
                 path: `${urlPrefix}/mcp-server-management`,
                 component: McpServerManagement,
             },
+            {
+                path: `${urlPrefix}/skills/:slug`,
+                component: SkillDetail,
+            },
+            {
+                path: `${urlPrefix}/skills`,
+                component: SkillsMarket,
+            },
             {
                 path: '*',
                 component: NotFound,

From 2a33b6cccdc0b9a68b50a73861ab70d4d7af98e0 Mon Sep 17 00:00:00 2001
From: huaiju <huaiju@dtstack.com>
Date: Sat, 21 Feb 2026 22:45:33 +0800
Subject: [PATCH 03/43] feat: build skills list page with filters, sorting, and
 cards

---
 app/web/pages/skills/index.tsx  | 223 +++++++++++++++++++++++++++++++-
 app/web/pages/skills/style.scss |  97 ++++++++++++++
 app/web/pages/skills/types.ts   |  21 +++
 3 files changed, 336 insertions(+), 5 deletions(-)
 create mode 100644 app/web/pages/skills/style.scss
 create mode 100644 app/web/pages/skills/types.ts

diff --git a/app/web/pages/skills/index.tsx b/app/web/pages/skills/index.tsx
index 3b64825..36163e9 100644
--- a/app/web/pages/skills/index.tsx
+++ b/app/web/pages/skills/index.tsx
@@ -1,10 +1,223 @@
-import React from 'react';
-import { Empty } from 'antd';
+import React, { useEffect, useState } from 'react';
+import {
+    CopyOutlined,
+    EyeOutlined,
+    FilterOutlined,
+    SearchOutlined,
+    StarOutlined,
+} from '@ant-design/icons';
+import {
+    Button,
+    Card,
+    Col,
+    Divider,
+    Empty,
+    Input,
+    Pagination,
+    Row,
+    Select,
+    Space,
+    Spin,
+    Tag,
+    Typography,
+    message,
+} from 'antd';
+
+import { API } from '@/api';
+import { copyToClipboard } from '@/utils/copyUtils';
+import { SkillItem, SkillListResponse } from './types';
+import './style.scss';
+
+const { Search } = Input;
+const { Option } = Select;
+const { Paragraph, Text } = Typography;
+
+const SkillsMarket: React.FC<any> = ({ history }) => {
+    const [loading, setLoading] = useState(false);
+    const [skills, setSkills] = useState<SkillItem[]>([]);
+    const [categories, setCategories] = useState<string[]>([]);
+    const [total, setTotal] = useState(0);
+    const [query, setQuery] = useState({
+        keyword: '',
+        sortBy: 'stars',
+        category: '',
+        pageNum: 1,
+        pageSize: 12,
+    });
+
+    const fetchSkills = async (nextQuery = query) => {
+        setLoading(true);
+        try {
+            const response = await API.getSkillList(nextQuery);
+            if (response.success) {
+                const data: SkillListResponse = response.data;
+                setSkills(data.list || []);
+                setCategories(data.categories || []);
+                setTotal(data.total || 0);
+            } else {
+                message.error(response.msg || '获取 Skills 列表失败');
+            }
+        } catch (error) {
+            message.error('获取 Skills 列表失败');
+            console.error('获取 Skills 列表失败:', error);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        fetchSkills(query);
+    }, []);
+
+    const updateQueryAndFetch = (patch: Partial<typeof query>) => {
+        const next = { ...query, ...patch };
+        setQuery(next);
+        fetchSkills(next);
+    };
+
+    const handleOpenDetail = (slug: string) => {
+        history.push(`/page/skills/${slug}`);
+    };
 
-const SkillsMarket: React.FC = () => {
     return (
-        <div style={{ padding: 24 }}>
-            <Empty description="Skills 页面开发中" />
+        <div className="page-skills">
+            <div className="skills-header">
+                <div className="title-group">
+                    <h1 className="page-title">Skills 市场</h1>
+                    <p className="page-subtitle">发现、筛选并导入本地可用的 Skills 能力</p>
+                </div>
+            </div>
+
+            <div className="search-filter-row">
+                <Search
+                    allowClear
+                    value={query.keyword}
+                    className="keyword-search"
+                    placeholder="搜索名称、描述、标签或来源..."
+                    enterButton={<SearchOutlined />}
+                    onChange={(e) => setQuery({ ...query, keyword: e.target.value })}
+                    onSearch={(value) => updateQueryAndFetch({ keyword: value, pageNum: 1 })}
+                />
+                <Space size={12}>
+                    <Select
+                        value={query.sortBy}
+                        style={{ width: 160 }}
+                        onChange={(value) => updateQueryAndFetch({ sortBy: value, pageNum: 1 })}
+                    >
+                        <Option value="stars">按 Stars 排序</Option>
+                        <Option value="recent">按最近更新</Option>
+                    </Select>
+                    <Select
+                        allowClear
+                        value={query.category || undefined}
+                        placeholder="分类筛选"
+                        style={{ width: 180 }}
+                        suffixIcon={<FilterOutlined />}
+                        onChange={(value) =>
+                            updateQueryAndFetch({ category: value || '', pageNum: 1 })
+                        }
+                    >
+                        {categories.map((item) => (
+                            <Option key={item} value={item}>
+                                {item}
+                            </Option>
+                        ))}
+                    </Select>
+                </Space>
+            </div>
+
+            <Divider />
+
+            <Spin spinning={loading}>
+                {skills.length === 0 ? (
+                    <Empty description="没有符合条件的 Skills" />
+                ) : (
+                    <>
+                        <Row gutter={[16, 16]}>
+                            {skills.map((skill) => (
+                                <Col key={skill.slug} xs={24} sm={12} lg={8}>
+                                    <Card
+                                        className="skill-card"
+                                        hoverable
+                                        onClick={() => handleOpenDetail(skill.slug)}
+                                    >
+                                        <div className="card-header">
+                                            <span className="skill-name">{skill.name}</span>
+                                            <span className="meta-stars">
+                                                <StarOutlined /> {skill.stars || 0}
+                                            </span>
+                                        </div>
+                                        <Paragraph className="skill-desc" ellipsis={{ rows: 3 }}>
+                                            {skill.description || '暂无描述'}
+                                        </Paragraph>
+                                        <div className="meta-row">
+                                            <Text type="secondary">来源:</Text>
+                                            <Text className="meta-value" ellipsis>
+                                                {skill.sourceRepo || skill.sourcePath}
+                                            </Text>
+                                        </div>
+                                        <div className="meta-row">
+                                            <Text type="secondary">更新:</Text>
+                                            <Text className="meta-value">
+                                                {new Date(skill.updatedAt).toLocaleDateString(
+                                                    'zh-CN'
+                                                )}
+                                            </Text>
+                                        </div>
+                                        <div className="tag-row">
+                                            <Tag color="blue">{skill.category || '未分类'}</Tag>
+                                            {skill.tags.slice(0, 3).map((tag) => (
+                                                <Tag key={tag}>{tag}</Tag>
+                                            ))}
+                                        </div>
+                                        <div className="action-row">
+                                            <Button
+                                                type="link"
+                                                icon={<EyeOutlined />}
+                                                onClick={(e) => {
+                                                    e.stopPropagation();
+                                                    handleOpenDetail(skill.slug);
+                                                }}
+                                            >
+                                                查看详情
+                                            </Button>
+                                            <Button
+                                                type="link"
+                                                icon={<CopyOutlined />}
+                                                onClick={(e) => {
+                                                    e.stopPropagation();
+                                                    copyToClipboard(
+                                                        skill.installCommand,
+                                                        '安装命令已复制'
+                                                    );
+                                                }}
+                                            >
+                                                复制安装命令
+                                            </Button>
+                                        </div>
+                                    </Card>
+                                </Col>
+                            ))}
+                        </Row>
+
+                        <div className="pagination-wrap">
+                            <Pagination
+                                showSizeChanger
+                                showQuickJumper
+                                current={query.pageNum}
+                                pageSize={query.pageSize}
+                                total={total}
+                                onChange={(page, pageSize) =>
+                                    updateQueryAndFetch({ pageNum: page, pageSize: pageSize || 12 })
+                                }
+                                onShowSizeChange={(_, size) =>
+                                    updateQueryAndFetch({ pageNum: 1, pageSize: size })
+                                }
+                            />
+                        </div>
+                    </>
+                )}
+            </Spin>
         </div>
     );
 };
diff --git a/app/web/pages/skills/style.scss b/app/web/pages/skills/style.scss
new file mode 100644
index 0000000..50ad184
--- /dev/null
+++ b/app/web/pages/skills/style.scss
@@ -0,0 +1,97 @@
+.page-skills {
+    padding: 20px 24px;
+
+    .skills-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .title-group {
+        .page-title {
+            margin: 0;
+            color: #1f2d3d;
+            font-size: 28px;
+            font-weight: 700;
+        }
+
+        .page-subtitle {
+            margin: 8px 0 0;
+            color: #667085;
+        }
+    }
+
+    .search-filter-row {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 16px;
+        margin-top: 18px;
+
+        .keyword-search {
+            width: 620px;
+            max-width: 100%;
+        }
+    }
+
+    .skill-card {
+        height: 100%;
+        border-radius: 10px;
+        border: 1px solid #edf2f7;
+
+        .card-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 10px;
+        }
+
+        .skill-name {
+            color: #1f2d3d;
+            font-size: 16px;
+            font-weight: 600;
+        }
+
+        .meta-stars {
+            color: #e6a23c;
+            font-weight: 600;
+        }
+
+        .skill-desc {
+            min-height: 66px;
+            margin-bottom: 12px;
+            color: #475467;
+        }
+
+        .meta-row {
+            display: flex;
+            align-items: center;
+            margin-bottom: 8px;
+            gap: 8px;
+
+            .meta-value {
+                flex: 1;
+                color: #344054;
+            }
+        }
+
+        .tag-row {
+            min-height: 28px;
+            margin-bottom: 10px;
+        }
+
+        .action-row {
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            margin-top: 6px;
+            gap: 8px;
+        }
+    }
+
+    .pagination-wrap {
+        display: flex;
+        justify-content: flex-end;
+        margin-top: 20px;
+    }
+}
diff --git a/app/web/pages/skills/types.ts b/app/web/pages/skills/types.ts
new file mode 100644
index 0000000..6c2d872
--- /dev/null
+++ b/app/web/pages/skills/types.ts
@@ -0,0 +1,21 @@
+export interface SkillItem {
+    slug: string;
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+    allowedTools: string[];
+    stars: number;
+    updatedAt: string;
+    sourceRepo: string;
+    sourcePath: string;
+    installCommand: string;
+}
+
+export interface SkillListResponse {
+    list: SkillItem[];
+    total: number;
+    pageNum: number;
+    pageSize: number;
+    categories: string[];
+}

From d00db5b56206309598720d43049e7e7881fcf9b2 Mon Sep 17 00:00:00 2001
From: huaiju <huaiju@dtstack.com>
Date: Sat, 21 Feb 2026 22:47:00 +0800
Subject: [PATCH 04/43] feat: build skills detail page with SKILL.md file list
 and related items

---
 app/web/pages/skills/detail/index.tsx  | 224 ++++++++++++++++++++++++-
 app/web/pages/skills/detail/style.scss |  51 ++++++
 app/web/pages/skills/types.ts          |   5 +
 3 files changed, 275 insertions(+), 5 deletions(-)
 create mode 100644 app/web/pages/skills/detail/style.scss

diff --git a/app/web/pages/skills/detail/index.tsx b/app/web/pages/skills/detail/index.tsx
index dee4588..89317fe 100644
--- a/app/web/pages/skills/detail/index.tsx
+++ b/app/web/pages/skills/detail/index.tsx
@@ -1,10 +1,224 @@
-import React from 'react';
-import { Empty } from 'antd';
+import React, { useEffect, useState } from 'react';
+import {
+    ArrowLeftOutlined,
+    CopyOutlined,
+    EyeOutlined,
+    FolderOpenOutlined,
+    ProfileOutlined,
+    ReadOutlined,
+    StarOutlined,
+} from '@ant-design/icons';
+import { Button, Card, Col, Divider, Empty, List, Row, Space, Spin, Tabs, Tag, Typography } from 'antd';
+
+import { API } from '@/api';
+import MarkdownRenderer from '@/components/markdownRenderer';
+import { copyToClipboard } from '@/utils/copyUtils';
+import { SkillDetail as SkillDetailType, SkillItem } from '../types';
+import './style.scss';
+
+const { Title, Text, Paragraph } = Typography;
+const { TabPane } = Tabs;
+
+const SkillDetail: React.FC<any> = ({ history, match }) => {
+    const { slug } = match.params;
+    const [loading, setLoading] = useState(true);
+    const [detail, setDetail] = useState<SkillDetailType | null>(null);
+    const [related, setRelated] = useState<SkillItem[]>([]);
+
+    const fetchDetail = async () => {
+        setLoading(true);
+        try {
+            const [detailRes, relatedRes] = await Promise.all([
+                API.getSkillDetail({ slug }),
+                API.getRelatedSkills({ slug, limit: 6 }),
+            ]);
+
+            if (detailRes.success) {
+                setDetail(detailRes.data);
+            } else {
+                setDetail(null);
+            }
+
+            if (relatedRes.success) {
+                setRelated(relatedRes.data || []);
+            }
+        } catch (error) {
+            console.error('获取 Skill 详情失败:', error);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        fetchDetail();
+    }, [slug]);
+
+    if (loading) {
+        return (
+            <div className="page-skill-detail loading-wrap">
+                <Spin size="large" />
+            </div>
+        );
+    }
+
+    if (!detail) {
+        return (
+            <div className="page-skill-detail">
+                <Empty description="Skill 不存在或已被删除">
+                    <Button onClick={() => history.push('/page/skills')}>返回 Skills 列表</Button>
+                </Empty>
+            </div>
+        );
+    }
 
-const SkillDetail: React.FC = () => {
     return (
-        <div style={{ padding: 24 }}>
-            <Empty description="Skill 详情页开发中" />
+        <div className="page-skill-detail">
+            <div className="detail-header">
+                <Button
+                    icon={<ArrowLeftOutlined />}
+                    className="back-btn"
+                    onClick={() => history.push('/page/skills')}
+                >
+                    返回列表
+                </Button>
+                <div className="title-group">
+                    <Title level={2}>{detail.name}</Title>
+                    <Paragraph type="secondary" style={{ marginBottom: 0 }}>
+                        {detail.description || '暂无描述'}
+                    </Paragraph>
+                </div>
+                <Space>
+                    <Button
+                        icon={<CopyOutlined />}
+                        onClick={() => copyToClipboard(detail.installCommand, '安装命令已复制')}
+                    >
+                        复制安装命令
+                    </Button>
+                </Space>
+            </div>
+
+            <Card className="meta-card">
+                <Space size={20} wrap>
+                    <Text>
+                        <StarOutlined /> Stars: {detail.stars || 0}
+                    </Text>
+                    <Text>分类: {detail.category || '未分类'}</Text>
+                    <Text>更新: {new Date(detail.updatedAt).toLocaleString('zh-CN')}</Text>
+                    <Text>来源: {detail.sourceRepo || detail.sourcePath}</Text>
+                </Space>
+                <div className="tags-wrap">
+                    {(detail.tags || []).map((tag) => (
+                        <Tag key={tag}>{tag}</Tag>
+                    ))}
+                </div>
+            </Card>
+
+            <Tabs defaultActiveKey="overview">
+                <TabPane
+                    key="overview"
+                    tab={
+                        <span>
+                            <EyeOutlined />
+                            概览
+                        </span>
+                    }
+                >
+                    <Card>
+                        <Paragraph>
+                            <Text strong>技能名称：</Text>
+                            {detail.name}
+                        </Paragraph>
+                        <Paragraph>
+                            <Text strong>技能描述：</Text>
+                            {detail.description || '-'}
+                        </Paragraph>
+                        <Paragraph>
+                            <Text strong>可用工具：</Text>
+                            {(detail.allowedTools && detail.allowedTools.length > 0
+                                ? detail.allowedTools.join(', ')
+                                : '未声明') || '未声明'}
+                        </Paragraph>
+                        <Paragraph>
+                            <Text strong>安装命令：</Text>
+                        </Paragraph>
+                        <Paragraph code copyable={{ text: detail.installCommand }}>
+                            {detail.installCommand}
+                        </Paragraph>
+                    </Card>
+                </TabPane>
+
+                <TabPane
+                    key="skill-md"
+                    tab={
+                        <span>
+                            <ReadOutlined />
+                            SKILL.md
+                        </span>
+                    }
+                >
+                    <Card className="markdown-card">
+                        <MarkdownRenderer content={detail.skillMd || ''} />
+                    </Card>
+                </TabPane>
+
+                <TabPane
+                    key="files"
+                    tab={
+                        <span>
+                            <FolderOpenOutlined />
+                            文件列表
+                        </span>
+                    }
+                >
+                    <Card>
+                        <List
+                            size="small"
+                            dataSource={detail.fileList || []}
+                            renderItem={(file) => (
+                                <List.Item>
+                                    <Text code>{file}</Text>
+                                </List.Item>
+                            )}
+                        />
+                    </Card>
+                </TabPane>
+
+                <TabPane
+                    key="related"
+                    tab={
+                        <span>
+                            <ProfileOutlined />
+                            相关技能
+                        </span>
+                    }
+                >
+                    {related.length === 0 ? (
+                        <Empty description="暂无相关技能推荐" />
+                    ) : (
+                        <Row gutter={[16, 16]}>
+                            {related.map((item) => (
+                                <Col key={item.slug} xs={24} sm={12} lg={8}>
+                                    <Card
+                                        className="related-card"
+                                        hoverable
+                                        onClick={() => history.push(`/page/skills/${item.slug}`)}
+                                    >
+                                        <div className="related-title">{item.name}</div>
+                                        <Paragraph ellipsis={{ rows: 2 }}>
+                                            {item.description || '暂无描述'}
+                                        </Paragraph>
+                                        <Text type="secondary">
+                                            <StarOutlined /> {item.stars || 0}
+                                        </Text>
+                                    </Card>
+                                </Col>
+                            ))}
+                        </Row>
+                    )}
+                </TabPane>
+            </Tabs>
+
+            <Divider />
         </div>
     );
 };
diff --git a/app/web/pages/skills/detail/style.scss b/app/web/pages/skills/detail/style.scss
new file mode 100644
index 0000000..cae0127
--- /dev/null
+++ b/app/web/pages/skills/detail/style.scss
@@ -0,0 +1,51 @@
+.page-skill-detail {
+    padding: 20px 24px;
+
+    &.loading-wrap {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        min-height: 420px;
+    }
+
+    .detail-header {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        gap: 14px;
+        margin-bottom: 16px;
+
+        .back-btn {
+            margin-top: 4px;
+        }
+
+        .title-group {
+            flex: 1;
+            min-width: 0;
+        }
+    }
+
+    .meta-card {
+        margin-bottom: 16px;
+
+        .tags-wrap {
+            margin-top: 12px;
+        }
+    }
+
+    .markdown-card {
+        max-height: 70vh;
+        overflow: auto;
+    }
+
+    .related-card {
+        height: 100%;
+
+        .related-title {
+            margin-bottom: 8px;
+            color: #1f2d3d;
+            font-size: 16px;
+            font-weight: 600;
+        }
+    }
+}
diff --git a/app/web/pages/skills/types.ts b/app/web/pages/skills/types.ts
index 6c2d872..43bdedd 100644
--- a/app/web/pages/skills/types.ts
+++ b/app/web/pages/skills/types.ts
@@ -19,3 +19,8 @@ export interface SkillListResponse {
     pageSize: number;
     categories: string[];
 }
+
+export interface SkillDetail extends SkillItem {
+    fileList: string[];
+    skillMd: string;
+}

From caebe7c25c09d437873dbb2a291d235856038855 Mon Sep 17 00:00:00 2001
From: huaiju <huaiju@dtstack.com>
Date: Mon, 23 Feb 2026 09:37:07 +0800
Subject: [PATCH 05/43] feat: add skills file content API with path safety
 checks

---
 app/controller/skills.js |   7 +++
 app/router.js            |   1 +
 app/service/skills.js    | 122 +++++++++++++++++++++++++++++++++++++--
 3 files changed, 126 insertions(+), 4 deletions(-)

diff --git a/app/controller/skills.js b/app/controller/skills.js
index bfcf7f3..c436bee 100644
--- a/app/controller/skills.js
+++ b/app/controller/skills.js
@@ -21,6 +21,13 @@ class SkillsController extends Controller {
         const data = await ctx.service.skills.getRelatedSkills(slug, limit);
         ctx.body = app.utils.response(true, data);
     }
+
+    async getSkillFileContent() {
+        const { app, ctx } = this;
+        const { slug, path: filePath } = ctx.query;
+        const data = await ctx.service.skills.getSkillFileContent(slug, filePath);
+        ctx.body = app.utils.response(true, data);
+    }
 }
 
 module.exports = SkillsController;
diff --git a/app/router.js b/app/router.js
index cf9b7df..a23bf26 100644
--- a/app/router.js
+++ b/app/router.js
@@ -152,6 +152,7 @@ module.exports = (app) => {
     app.get('/api/skills/list', app.controller.skills.getSkillList);
     app.get('/api/skills/detail', app.controller.skills.getSkillDetail);
     app.get('/api/skills/related', app.controller.skills.getRelatedSkills);
+    app.get('/api/skills/file-content', app.controller.skills.getSkillFileContent);
 
     // io.of('/').route('getShellCommand',  io.controller.home.getShellCommand)
     // 暂时close Terminal相关功能
diff --git a/app/service/skills.js b/app/service/skills.js
index e6cddb5..b255b9f 100644
--- a/app/service/skills.js
+++ b/app/service/skills.js
@@ -4,6 +4,43 @@ const path = require('path');
 
 const CACHE_TTL_MS = 60 * 1000;
 const MAX_FILE_LIST_COUNT = 300;
+const MAX_FILE_CONTENT_SIZE = 2 * 1024 * 1024;
+
+const EXTENSION_LANGUAGE_MAP = {
+    '.md': 'markdown',
+    '.markdown': 'markdown',
+    '.js': 'javascript',
+    '.mjs': 'javascript',
+    '.cjs': 'javascript',
+    '.jsx': 'javascript',
+    '.ts': 'typescript',
+    '.tsx': 'typescript',
+    '.json': 'json',
+    '.yml': 'yaml',
+    '.yaml': 'yaml',
+    '.html': 'html',
+    '.css': 'css',
+    '.scss': 'scss',
+    '.less': 'less',
+    '.sh': 'bash',
+    '.bash': 'bash',
+    '.zsh': 'bash',
+    '.py': 'python',
+    '.go': 'go',
+    '.java': 'java',
+    '.kt': 'kotlin',
+    '.rb': 'ruby',
+    '.php': 'php',
+    '.rs': 'rust',
+    '.swift': 'swift',
+    '.xml': 'xml',
+    '.sql': 'sql',
+    '.toml': 'toml',
+    '.ini': 'ini',
+    '.conf': 'ini',
+    '.txt': 'text',
+    '.log': 'text',
+};
 
 class SkillsService extends Service {
     constructor(ctx) {
@@ -278,10 +315,7 @@ class SkillsService extends Service {
 
     async getSkillDetail(slug) {
         await this.ensureSkillCache();
-        const skill = this.skillCache.skills.find((item) => item.slug === slug);
-        if (!skill) {
-            this.ctx.throw(404, '技能不存在');
-        }
+        const skill = this.getSkillBySlug(slug);
 
         const content = fs.readFileSync(skill.skillFilePath, 'utf8');
         const fileList = this.listSkillFiles(skill.sourcePath);
@@ -293,6 +327,46 @@ class SkillsService extends Service {
         };
     }
 
+    async getSkillFileContent(slug, filePath) {
+        await this.ensureSkillCache();
+        const skill = this.getSkillBySlug(slug);
+        const normalizedPath = this.normalizeRelativePath(filePath);
+        const rootPath = path.resolve(skill.sourcePath);
+        const targetPath = path.resolve(rootPath, normalizedPath);
+
+        if (!this.isPathInsideRoot(rootPath, targetPath)) {
+            this.ctx.throw(400, '非法文件路径');
+        }
+
+        if (!fs.existsSync(targetPath)) {
+            this.ctx.throw(404, '文件不存在');
+        }
+
+        const stat = fs.statSync(targetPath);
+        if (!stat.isFile()) {
+            this.ctx.throw(400, '仅支持读取文件内容');
+        }
+
+        if (stat.size > MAX_FILE_CONTENT_SIZE) {
+            this.ctx.throw(413, '文件过大，无法在线预览');
+        }
+
+        const fileBuffer = fs.readFileSync(targetPath);
+        const isBinary = this.isLikelyBinary(fileBuffer);
+        const extension = path.extname(normalizedPath).toLowerCase();
+
+        return {
+            slug: skill.slug,
+            path: normalizedPath,
+            language: EXTENSION_LANGUAGE_MAP[extension] || 'text',
+            size: stat.size,
+            readonly: true,
+            isBinary,
+            encoding: isBinary ? 'base64' : 'utf8',
+            content: isBinary ? fileBuffer.toString('base64') : fileBuffer.toString('utf8'),
+        };
+    }
+
     listSkillFiles(skillDir) {
         const files = [];
         const stack = [skillDir];
@@ -322,6 +396,46 @@ class SkillsService extends Service {
         return files.sort();
     }
 
+    getSkillBySlug(slug) {
+        const skill = this.skillCache.skills.find((item) => item.slug === slug);
+        if (!skill) {
+            this.ctx.throw(404, '技能不存在');
+        }
+        return skill;
+    }
+
+    normalizeRelativePath(filePath) {
+        const value = String(filePath || '').trim();
+        if (!value) {
+            this.ctx.throw(400, '缺少文件路径');
+        }
+
+        const normalized = path
+            .normalize(value)
+            .replace(/\\/g, '/')
+            .replace(/^\/+/, '');
+
+        if (!normalized || normalized === '.' || normalized.startsWith('..')) {
+            this.ctx.throw(400, '非法文件路径');
+        }
+
+        return normalized;
+    }
+
+    isPathInsideRoot(rootPath, targetPath) {
+        if (targetPath === rootPath) return false;
+        return targetPath.startsWith(`${rootPath}${path.sep}`);
+    }
+
+    isLikelyBinary(buffer) {
+        if (!buffer || buffer.length === 0) return false;
+        const sampleLength = Math.min(buffer.length, 1024);
+        for (let i = 0; i < sampleLength; i += 1) {
+            if (buffer[i] === 0) return true;
+        }
+        return false;
+    }
+
     async getRelatedSkills(slug, limit = 6) {
         await this.ensureSkillCache();
         const target = this.skillCache.skills.find((item) => item.slug === slug);

From 982027c4d7b81735b068f795be1f5c06c0ed5f22 Mon Sep 17 00:00:00 2001
From: huaiju <huaiju@dtstack.com>
Date: Mon, 23 Feb 2026 09:38:03 +0800
Subject: [PATCH 06/43] feat: add skills zip download API for wget

---
 app/controller/skills.js |  9 +++++++
 app/router.js            |  1 +
 app/service/skills.js    | 57 ++++++++++++++++++++++++++++++++++++++++
 3 files changed, 67 insertions(+)

diff --git a/app/controller/skills.js b/app/controller/skills.js
index c436bee..d1f0cab 100644
--- a/app/controller/skills.js
+++ b/app/controller/skills.js
@@ -28,6 +28,15 @@ class SkillsController extends Controller {
         const data = await ctx.service.skills.getSkillFileContent(slug, filePath);
         ctx.body = app.utils.response(true, data);
     }
+
+    async downloadSkillArchive() {
+        const { ctx } = this;
+        const { slug } = ctx.query;
+        const { fileName, content } = await ctx.service.skills.getSkillArchive(slug);
+        ctx.set('Content-Type', 'application/zip');
+        ctx.set('Content-Disposition', `attachment; filename="${encodeURIComponent(fileName)}"`);
+        ctx.body = content;
+    }
 }
 
 module.exports = SkillsController;
diff --git a/app/router.js b/app/router.js
index a23bf26..a85585f 100644
--- a/app/router.js
+++ b/app/router.js
@@ -153,6 +153,7 @@ module.exports = (app) => {
     app.get('/api/skills/detail', app.controller.skills.getSkillDetail);
     app.get('/api/skills/related', app.controller.skills.getRelatedSkills);
     app.get('/api/skills/file-content', app.controller.skills.getSkillFileContent);
+    app.get('/api/skills/download', app.controller.skills.downloadSkillArchive);
 
     // io.of('/').route('getShellCommand',  io.controller.home.getShellCommand)
     // 暂时close Terminal相关功能
diff --git a/app/service/skills.js b/app/service/skills.js
index b255b9f..a5214ca 100644
--- a/app/service/skills.js
+++ b/app/service/skills.js
@@ -1,4 +1,5 @@
 const Service = require('egg').Service;
+const AdmZip = require('adm-zip');
 const fs = require('fs');
 const path = require('path');
 
@@ -367,6 +368,25 @@ class SkillsService extends Service {
         };
     }
 
+    async getSkillArchive(slug) {
+        await this.ensureSkillCache();
+        const skill = this.getSkillBySlug(slug);
+        const files = this.collectSkillFiles(skill.sourcePath);
+        const zip = new AdmZip();
+        const rootFolder = this.sanitizeFileName(skill.name || skill.slug || 'skill');
+
+        files.forEach((relativePath) => {
+            const absolutePath = path.resolve(skill.sourcePath, relativePath);
+            const content = fs.readFileSync(absolutePath);
+            zip.addFile(path.posix.join(rootFolder, relativePath), content);
+        });
+
+        return {
+            fileName: `${rootFolder}.zip`,
+            content: zip.toBuffer(),
+        };
+    }
+
     listSkillFiles(skillDir) {
         const files = [];
         const stack = [skillDir];
@@ -396,6 +416,35 @@ class SkillsService extends Service {
         return files.sort();
     }
 
+    collectSkillFiles(skillDir, maxCount = 2000) {
+        const files = [];
+        const stack = [skillDir];
+        while (stack.length > 0) {
+            const currentDir = stack.pop();
+            let entries = [];
+            try {
+                entries = fs.readdirSync(currentDir, { withFileTypes: true });
+            } catch (error) {
+                continue;
+            }
+
+            entries.forEach((entry) => {
+                if (entry.name === '.git' || entry.name === 'node_modules') return;
+                const fullPath = path.join(currentDir, entry.name);
+                if (entry.isDirectory()) {
+                    stack.push(fullPath);
+                    return;
+                }
+                if (!entry.isFile()) return;
+                files.push(path.relative(skillDir, fullPath).split(path.sep).join('/'));
+            });
+
+            if (files.length >= maxCount) break;
+        }
+
+        return files.sort();
+    }
+
     getSkillBySlug(slug) {
         const skill = this.skillCache.skills.find((item) => item.slug === slug);
         if (!skill) {
@@ -436,6 +485,14 @@ class SkillsService extends Service {
         return false;
     }
 
+    sanitizeFileName(fileName) {
+        return String(fileName || 'skill')
+            .trim()
+            .replace(/[^a-zA-Z0-9._-]+/g, '-')
+            .replace(/^-+|-+$/g, '')
+            .toLowerCase();
+    }
+
     async getRelatedSkills(slug, limit = 6) {
         await this.ensureSkillCache();
         const target = this.skillCache.skills.find((item) => item.slug === slug);

From da284b1427ee156ff7b9212b588b5de2d6451684 Mon Sep 17 00:00:00 2001
From: huaiju <huaiju@dtstack.com>
Date: Mon, 23 Feb 2026 09:40:43 +0800
Subject: [PATCH 07/43] feat: redesign skills detail page with file tree and
 linked preview

---
 app/web/api/url.ts                     |   5 +
 app/web/pages/skills/detail/index.tsx  | 401 ++++++++++++++++---------
 app/web/pages/skills/detail/style.scss |  49 ++-
 app/web/pages/skills/types.ts          |  11 +
 4 files changed, 315 insertions(+), 151 deletions(-)

diff --git a/app/web/api/url.ts b/app/web/api/url.ts
index 6c6c58b..996f25a 100644
--- a/app/web/api/url.ts
+++ b/app/web/api/url.ts
@@ -356,4 +356,9 @@ export default {
         method: 'get',
         url: '/api/skills/related',
     },
+    // 获取 Skill 文件内容
+    getSkillFileContent: {
+        method: 'get',
+        url: '/api/skills/file-content',
+    },
 };
diff --git a/app/web/pages/skills/detail/index.tsx b/app/web/pages/skills/detail/index.tsx
index 89317fe..d0424f2 100644
--- a/app/web/pages/skills/detail/index.tsx
+++ b/app/web/pages/skills/detail/index.tsx
@@ -1,57 +1,209 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
+import SyntaxHighlighter from 'react-syntax-highlighter';
+import { atomOneLight } from 'react-syntax-highlighter/dist/cjs/styles/hljs';
 import {
     ArrowLeftOutlined,
-    CopyOutlined,
-    EyeOutlined,
     FolderOpenOutlined,
-    ProfileOutlined,
     ReadOutlined,
     StarOutlined,
 } from '@ant-design/icons';
-import { Button, Card, Col, Divider, Empty, List, Row, Space, Spin, Tabs, Tag, Typography } from 'antd';
+import { Button, Card, Col, Empty, Row, Space, Spin, Tag, Tree, Typography } from 'antd';
+import type { DataNode } from 'antd/lib/tree';
 
 import { API } from '@/api';
 import MarkdownRenderer from '@/components/markdownRenderer';
-import { copyToClipboard } from '@/utils/copyUtils';
-import { SkillDetail as SkillDetailType, SkillItem } from '../types';
+import { SkillDetail as SkillDetailType, SkillFileContent, SkillItem } from '../types';
 import './style.scss';
 
 const { Title, Text, Paragraph } = Typography;
-const { TabPane } = Tabs;
+
+interface SkillTreeNode extends DataNode {
+    children?: SkillTreeNode[];
+    isFile?: boolean;
+}
+
+const formatFileSize = (size = 0) => {
+    if (size < 1024) return `${size} B`;
+    if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`;
+    return `${(size / 1024 / 1024).toFixed(1)} MB`;
+};
+
+const sortTreeNodes = (nodes: SkillTreeNode[]) => {
+    nodes.sort((a, b) => {
+        const aIsLeaf = Boolean(a.isLeaf);
+        const bIsLeaf = Boolean(b.isLeaf);
+        if (aIsLeaf !== bIsLeaf) return aIsLeaf ? 1 : -1;
+        return String(a.title).localeCompare(String(b.title));
+    });
+    nodes.forEach((node) => {
+        if (node.children && node.children.length > 0) {
+            sortTreeNodes(node.children);
+        }
+    });
+};
+
+const buildFileTreeData = (fileList: string[]): SkillTreeNode[] => {
+    const treeData: SkillTreeNode[] = [];
+
+    fileList.forEach((filePath) => {
+        const segments = filePath.split('/').filter(Boolean);
+        let currentNodes = treeData;
+        let currentPath = '';
+
+        segments.forEach((segment, index) => {
+            currentPath = currentPath ? `${currentPath}/${segment}` : segment;
+            const isLeaf = index === segments.length - 1;
+            let node = currentNodes.find((item) => item.key === currentPath);
+
+            if (!node) {
+                node = {
+                    key: currentPath,
+                    title: segment,
+                    isLeaf,
+                    isFile: isLeaf,
+                    children: isLeaf ? undefined : [],
+                };
+                currentNodes.push(node);
+            }
+
+            if (!isLeaf) {
+                node.children = node.children || [];
+                currentNodes = node.children;
+            }
+        });
+    });
+
+    sortTreeNodes(treeData);
+    return treeData;
+};
 
 const SkillDetail: React.FC<any> = ({ history, match }) => {
     const { slug } = match.params;
     const [loading, setLoading] = useState(true);
+    const [fileLoading, setFileLoading] = useState(false);
     const [detail, setDetail] = useState<SkillDetailType | null>(null);
     const [related, setRelated] = useState<SkillItem[]>([]);
+    const [selectedFilePath, setSelectedFilePath] = useState('');
+    const [fileContent, setFileContent] = useState<SkillFileContent | null>(null);
 
-    const fetchDetail = async () => {
-        setLoading(true);
-        try {
-            const [detailRes, relatedRes] = await Promise.all([
-                API.getSkillDetail({ slug }),
-                API.getRelatedSkills({ slug, limit: 6 }),
-            ]);
-
-            if (detailRes.success) {
-                setDetail(detailRes.data);
-            } else {
-                setDetail(null);
+    const fileTreeData = useMemo(() => buildFileTreeData(detail?.fileList || []), [detail?.fileList]);
+
+    useEffect(() => {
+        let cancelled = false;
+
+        const loadDetail = async () => {
+            setLoading(true);
+            try {
+                const [detailRes, relatedRes] = await Promise.all([
+                    API.getSkillDetail({ slug }),
+                    API.getRelatedSkills({ slug, limit: 6 }),
+                ]);
+
+                if (cancelled) return;
+
+                if (detailRes.success) {
+                    const detailData = detailRes.data as SkillDetailType;
+                    setDetail(detailData);
+                    const defaultFile = detailData.fileList.includes('SKILL.md')
+                        ? 'SKILL.md'
+                        : detailData.fileList[0] || '';
+                    setSelectedFilePath(defaultFile);
+                } else {
+                    setDetail(null);
+                    setSelectedFilePath('');
+                }
+
+                if (relatedRes.success) {
+                    setRelated(relatedRes.data || []);
+                }
+            } catch (error) {
+                console.error('获取 Skill 详情失败:', error);
+            } finally {
+                if (!cancelled) {
+                    setLoading(false);
+                }
             }
+        };
 
-            if (relatedRes.success) {
-                setRelated(relatedRes.data || []);
+        loadDetail();
+
+        return () => {
+            cancelled = true;
+        };
+    }, [slug]);
+
+    useEffect(() => {
+        if (!selectedFilePath) {
+            setFileContent(null);
+            return;
+        }
+
+        let cancelled = false;
+        const loadFileContent = async () => {
+            setFileLoading(true);
+            try {
+                const response = await API.getSkillFileContent({
+                    slug,
+                    path: selectedFilePath,
+                });
+                if (!cancelled) {
+                    if (response.success) {
+                        setFileContent(response.data as SkillFileContent);
+                    } else {
+                        setFileContent(null);
+                    }
+                }
+            } catch (error) {
+                console.error('获取文件内容失败:', error);
+                if (!cancelled) {
+                    setFileContent(null);
+                }
+            } finally {
+                if (!cancelled) {
+                    setFileLoading(false);
+                }
             }
-        } catch (error) {
-            console.error('获取 Skill 详情失败:', error);
-        } finally {
-            setLoading(false);
+        };
+
+        loadFileContent();
+
+        return () => {
+            cancelled = true;
+        };
+    }, [slug, selectedFilePath]);
+
+    const renderFileViewer = () => {
+        if (fileLoading) {
+            return (
+                <div className="file-viewer-loading">
+                    <Spin size="large" />
+                </div>
+            );
         }
-    };
 
-    useEffect(() => {
-        fetchDetail();
-    }, [slug]);
+        if (!fileContent) {
+            return <Empty description="请选择需要查看的文件" />;
+        }
+
+        if (fileContent.isBinary) {
+            return <Empty description="二进制文件暂不支持在线预览" />;
+        }
+
+        if (fileContent.language === 'markdown') {
+            return <MarkdownRenderer content={fileContent.content || ''} />;
+        }
+
+        return (
+            <SyntaxHighlighter
+                style={atomOneLight}
+                language={fileContent.language || 'text'}
+                customStyle={{ margin: 0, borderRadius: 6, minHeight: 420 }}
+                showLineNumbers
+            >
+                {fileContent.content || ''}
+            </SyntaxHighlighter>
+        );
+    };
 
     if (loading) {
         return (
@@ -87,14 +239,6 @@ const SkillDetail: React.FC<any> = ({ history, match }) => {
                         {detail.description || '暂无描述'}
                     </Paragraph>
                 </div>
-                <Space>
-                    <Button
-                        icon={<CopyOutlined />}
-                        onClick={() => copyToClipboard(detail.installCommand, '安装命令已复制')}
-                    >
-                        复制安装命令
-                    </Button>
-                </Space>
             </div>
 
             <Card className="meta-card">
@@ -113,112 +257,85 @@ const SkillDetail: React.FC<any> = ({ history, match }) => {
                 </div>
             </Card>
 
-            <Tabs defaultActiveKey="overview">
-                <TabPane
-                    key="overview"
-                    tab={
-                        <span>
-                            <EyeOutlined />
-                            概览
-                        </span>
-                    }
-                >
-                    <Card>
-                        <Paragraph>
-                            <Text strong>技能名称：</Text>
-                            {detail.name}
-                        </Paragraph>
-                        <Paragraph>
-                            <Text strong>技能描述：</Text>
-                            {detail.description || '-'}
-                        </Paragraph>
-                        <Paragraph>
-                            <Text strong>可用工具：</Text>
-                            {(detail.allowedTools && detail.allowedTools.length > 0
-                                ? detail.allowedTools.join(', ')
-                                : '未声明') || '未声明'}
-                        </Paragraph>
-                        <Paragraph>
-                            <Text strong>安装命令：</Text>
-                        </Paragraph>
-                        <Paragraph code copyable={{ text: detail.installCommand }}>
-                            {detail.installCommand}
-                        </Paragraph>
-                    </Card>
-                </TabPane>
-
-                <TabPane
-                    key="skill-md"
-                    tab={
-                        <span>
-                            <ReadOutlined />
-                            SKILL.md
-                        </span>
-                    }
-                >
-                    <Card className="markdown-card">
-                        <MarkdownRenderer content={detail.skillMd || ''} />
+            <Row gutter={[16, 16]} className="detail-main-row">
+                <Col xs={24} md={8} lg={7}>
+                    <Card
+                        className="file-tree-card"
+                        title={
+                            <Space>
+                                <FolderOpenOutlined />
+                                文件浏览
+                            </Space>
+                        }
+                        bodyStyle={{ padding: '8px 0' }}
+                    >
+                        {fileTreeData.length === 0 ? (
+                            <Empty description="暂无文件" />
+                        ) : (
+                            <Tree
+                                treeData={fileTreeData}
+                                selectedKeys={selectedFilePath ? [selectedFilePath] : []}
+                                defaultExpandAll
+                                onSelect={(keys, info) => {
+                                    if (!info.node.isLeaf) return;
+                                    const targetPath = String(keys[0] || '');
+                                    if (targetPath) {
+                                        setSelectedFilePath(targetPath);
+                                    }
+                                }}
+                            />
+                        )}
                     </Card>
-                </TabPane>
-
-                <TabPane
-                    key="files"
-                    tab={
-                        <span>
-                            <FolderOpenOutlined />
-                            文件列表
-                        </span>
-                    }
-                >
-                    <Card>
-                        <List
-                            size="small"
-                            dataSource={detail.fileList || []}
-                            renderItem={(file) => (
-                                <List.Item>
-                                    <Text code>{file}</Text>
-                                </List.Item>
-                            )}
-                        />
+                </Col>
+
+                <Col xs={24} md={16} lg={17}>
+                    <Card
+                        className="file-viewer-card"
+                        title={
+                            <Space>
+                                <ReadOutlined />
+                                <Text>{selectedFilePath || '文件预览'}</Text>
+                            </Space>
+                        }
+                        extra={
+                            fileContent ? (
+                                <Space>
+                                    <Tag>{fileContent.language}</Tag>
+                                    <Text type="secondary">{formatFileSize(fileContent.size)}</Text>
+                                </Space>
+                            ) : null
+                        }
+                    >
+                        {renderFileViewer()}
                     </Card>
-                </TabPane>
-
-                <TabPane
-                    key="related"
-                    tab={
-                        <span>
-                            <ProfileOutlined />
-                            相关技能
-                        </span>
-                    }
-                >
-                    {related.length === 0 ? (
-                        <Empty description="暂无相关技能推荐" />
-                    ) : (
-                        <Row gutter={[16, 16]}>
-                            {related.map((item) => (
-                                <Col key={item.slug} xs={24} sm={12} lg={8}>
-                                    <Card
-                                        className="related-card"
-                                        hoverable
-                                        onClick={() => history.push(`/page/skills/${item.slug}`)}
-                                    >
-                                        <div className="related-title">{item.name}</div>
-                                        <Paragraph ellipsis={{ rows: 2 }}>
-                                            {item.description || '暂无描述'}
-                                        </Paragraph>
-                                        <Text type="secondary">
-                                            <StarOutlined /> {item.stars || 0}
-                                        </Text>
-                                    </Card>
-                                </Col>
-                            ))}
-                        </Row>
-                    )}
-                </TabPane>
-            </Tabs>
-
-            <Divider />
+                </Col>
+            </Row>
+
+            <Card className="related-card-list" title="相关技能推荐">
+                {related.length === 0 ? (
+                    <Empty description="暂无相关技能推荐" />
+                ) : (
+                    <Row gutter={[16, 16]}>
+                        {related.map((item) => (
+                            <Col key={item.slug} xs={24} sm={12} lg={8}>
+                                <Card
+                                    className="related-item-card"
+                                    hoverable
+                                    onClick={() => history.push(`/page/skills/${item.slug}`)}
+                                >
+                                    <div className="related-title">{item.name}</div>
+                                    <Paragraph ellipsis={{ rows: 2 }}>
+                                        {item.description || '暂无描述'}
+                                    </Paragraph>
+                                    <Text type="secondary">
+                                        <StarOutlined /> {item.stars || 0}
+                                    </Text>
+                                </Card>
+                            </Col>
+                        ))}
+                    </Row>
+                )}
+            </Card>
         </div>
     );
 };
diff --git a/app/web/pages/skills/detail/style.scss b/app/web/pages/skills/detail/style.scss
index cae0127..2a1e346 100644
--- a/app/web/pages/skills/detail/style.scss
+++ b/app/web/pages/skills/detail/style.scss
@@ -33,19 +33,50 @@
         }
     }
 
-    .markdown-card {
-        max-height: 70vh;
-        overflow: auto;
+    .detail-main-row {
+        margin-bottom: 16px;
     }
 
-    .related-card {
+    .file-tree-card {
         height: 100%;
+        min-height: 560px;
+
+        .ant-card-body {
+            max-height: 500px;
+            overflow: auto;
+        }
+
+        .ant-tree {
+            padding: 4px 8px 8px;
+        }
+    }
+
+    .file-viewer-card {
+        min-height: 560px;
+
+        .ant-card-body {
+            max-height: 500px;
+            overflow: auto;
+        }
+    }
+
+    .file-viewer-loading {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        min-height: 420px;
+    }
+
+    .related-card-list {
+        .related-item-card {
+            height: 100%;
 
-        .related-title {
-            margin-bottom: 8px;
-            color: #1f2d3d;
-            font-size: 16px;
-            font-weight: 600;
+            .related-title {
+                margin-bottom: 8px;
+                color: #1f2d3d;
+                font-size: 16px;
+                font-weight: 600;
+            }
         }
     }
 }
diff --git a/app/web/pages/skills/types.ts b/app/web/pages/skills/types.ts
index 43bdedd..4438b56 100644
--- a/app/web/pages/skills/types.ts
+++ b/app/web/pages/skills/types.ts
@@ -24,3 +24,14 @@ export interface SkillDetail extends SkillItem {
     fileList: string[];
     skillMd: string;
 }
+
+export interface SkillFileContent {
+    slug: string;
+    path: string;
+    language: string;
+    size: number;
+    readonly: boolean;
+    isBinary: boolean;
+    encoding: 'utf8' | 'base64';
+    content: string;
+}

From 7ab8c747312be46d02784f93cfdb8d99a008d807 Mon Sep 17 00:00:00 2001
From: huaiju <huaiju@dtstack.com>
Date: Mon, 23 Feb 2026 09:43:49 +0800
Subject: [PATCH 08/43] feat: add conversion panel and wget download on skills
 detail page

---
 app/web/api/url.ts                     |   5 +
 app/web/pages/skills/detail/index.tsx  | 164 +++++++++++++++++++++++--
 app/web/pages/skills/detail/style.scss |  56 +++++----
 3 files changed, 194 insertions(+), 31 deletions(-)

diff --git a/app/web/api/url.ts b/app/web/api/url.ts
index 996f25a..53ac624 100644
--- a/app/web/api/url.ts
+++ b/app/web/api/url.ts
@@ -361,4 +361,9 @@ export default {
         method: 'get',
         url: '/api/skills/file-content',
     },
+    // 下载 Skill 目录压缩包
+    downloadSkillArchive: {
+        method: 'get',
+        url: '/api/skills/download',
+    },
 };
diff --git a/app/web/pages/skills/detail/index.tsx b/app/web/pages/skills/detail/index.tsx
index d0424f2..4b859de 100644
--- a/app/web/pages/skills/detail/index.tsx
+++ b/app/web/pages/skills/detail/index.tsx
@@ -3,15 +3,22 @@ import SyntaxHighlighter from 'react-syntax-highlighter';
 import { atomOneLight } from 'react-syntax-highlighter/dist/cjs/styles/hljs';
 import {
     ArrowLeftOutlined,
+    CopyOutlined,
+    DownloadOutlined,
     FolderOpenOutlined,
+    HeartFilled,
+    HeartOutlined,
+    LinkOutlined,
     ReadOutlined,
+    ShareAltOutlined,
     StarOutlined,
 } from '@ant-design/icons';
-import { Button, Card, Col, Empty, Row, Space, Spin, Tag, Tree, Typography } from 'antd';
+import { Button, Card, Col, Empty, Radio, Row, Space, Spin, Tag, Tree, Typography } from 'antd';
 import type { DataNode } from 'antd/lib/tree';
 
 import { API } from '@/api';
 import MarkdownRenderer from '@/components/markdownRenderer';
+import { copyToClipboard } from '@/utils/copyUtils';
 import { SkillDetail as SkillDetailType, SkillFileContent, SkillItem } from '../types';
 import './style.scss';
 
@@ -19,9 +26,10 @@ const { Title, Text, Paragraph } = Typography;
 
 interface SkillTreeNode extends DataNode {
     children?: SkillTreeNode[];
-    isFile?: boolean;
 }
 
+type InstallRuntime = 'npx' | 'bunx' | 'pnpm';
+
 const formatFileSize = (size = 0) => {
     if (size < 1024) return `${size} B`;
     if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`;
@@ -60,7 +68,6 @@ const buildFileTreeData = (fileList: string[]): SkillTreeNode[] => {
                     key: currentPath,
                     title: segment,
                     isLeaf,
-                    isFile: isLeaf,
                     children: isLeaf ? undefined : [],
                 };
                 currentNodes.push(node);
@@ -77,6 +84,43 @@ const buildFileTreeData = (fileList: string[]): SkillTreeNode[] => {
     return treeData;
 };
 
+const normalizeSourceUrl = (sourceRepo: string) => {
+    if (!sourceRepo) return '';
+    const normalized = sourceRepo.replace(/^git\+/, '').trim();
+    const sshMatch = normalized.match(/^git@([^:]+):(.+?)(?:\.git)?$/);
+    if (sshMatch) {
+        return `https://${sshMatch[1]}/${sshMatch[2]}`;
+    }
+    if (/^https?:\/\//.test(normalized)) {
+        return normalized.replace(/\.git$/, '');
+    }
+    return '';
+};
+
+const getInstallArgs = (detail: SkillDetailType) => {
+    const installCommand = detail.installCommand || '';
+    const addPattern = /(?:npx|bunx|pnpm\s+dlx)\s+skills\s+add\s+(.+)$/i;
+    const addMatch = installCommand.match(addPattern);
+    if (addMatch && addMatch[1]) {
+        return addMatch[1].trim();
+    }
+    if (detail.sourceRepo) {
+        return `${detail.sourceRepo} --skill "${detail.name}"`;
+    }
+    return '';
+};
+
+const getInstallCommandByRuntime = (
+    runtime: InstallRuntime,
+    detail: SkillDetailType,
+    installArgs: string
+) => {
+    if (!installArgs) return detail.installCommand || '';
+    if (runtime === 'bunx') return `bunx skills add ${installArgs}`;
+    if (runtime === 'pnpm') return `pnpm dlx skills add ${installArgs}`;
+    return `npx skills add ${installArgs}`;
+};
+
 const SkillDetail: React.FC<any> = ({ history, match }) => {
     const { slug } = match.params;
     const [loading, setLoading] = useState(true);
@@ -85,8 +129,30 @@ const SkillDetail: React.FC<any> = ({ history, match }) => {
     const [related, setRelated] = useState<SkillItem[]>([]);
     const [selectedFilePath, setSelectedFilePath] = useState('');
     const [fileContent, setFileContent] = useState<SkillFileContent | null>(null);
+    const [installRuntime, setInstallRuntime] = useState<InstallRuntime>('npx');
+    const [favorited, setFavorited] = useState(false);
 
     const fileTreeData = useMemo(() => buildFileTreeData(detail?.fileList || []), [detail?.fileList]);
+    const sourceUrl = useMemo(() => normalizeSourceUrl(detail?.sourceRepo || ''), [detail?.sourceRepo]);
+    const installArgs = useMemo(() => (detail ? getInstallArgs(detail) : ''), [detail]);
+    const installCommand = useMemo(() => {
+        if (!detail) return '';
+        return getInstallCommandByRuntime(installRuntime, detail, installArgs);
+    }, [detail, installArgs, installRuntime]);
+
+    const downloadPath = useMemo(() => `/api/skills/download?slug=${encodeURIComponent(slug)}`, [slug]);
+    const archiveFileName = useMemo(() => {
+        const rawName = detail?.name || slug || 'skill';
+        const normalized = rawName
+            .toLowerCase()
+            .replace(/[^a-z0-9._-]+/g, '-')
+            .replace(/^-+|-+$/g, '');
+        return `${normalized || 'skill'}.zip`;
+    }, [detail?.name, slug]);
+    const wgetCommand = useMemo(() => {
+        if (typeof window === 'undefined') return '';
+        return `wget "${window.location.origin}${downloadPath}" -O ${archiveFileName}`;
+    }, [archiveFileName, downloadPath]);
 
     useEffect(() => {
         let cancelled = false;
@@ -197,7 +263,7 @@ const SkillDetail: React.FC<any> = ({ history, match }) => {
             <SyntaxHighlighter
                 style={atomOneLight}
                 language={fileContent.language || 'text'}
-                customStyle={{ margin: 0, borderRadius: 6, minHeight: 420 }}
+                customStyle={{ margin: 0, borderRadius: 6, minHeight: 460 }}
                 showLineNumbers
             >
                 {fileContent.content || ''}
@@ -258,7 +324,7 @@ const SkillDetail: React.FC<any> = ({ history, match }) => {
             </Card>
 
             <Row gutter={[16, 16]} className="detail-main-row">
-                <Col xs={24} md={8} lg={7}>
+                <Col xs={24} xl={16}>
                     <Card
                         className="file-tree-card"
                         title={
@@ -267,7 +333,7 @@ const SkillDetail: React.FC<any> = ({ history, match }) => {
                                 文件浏览
                             </Space>
                         }
-                        bodyStyle={{ padding: '8px 0' }}
+                        bodyStyle={{ padding: '8px 0', maxHeight: 280, overflow: 'auto' }}
                     >
                         {fileTreeData.length === 0 ? (
                             <Empty description="暂无文件" />
@@ -286,9 +352,7 @@ const SkillDetail: React.FC<any> = ({ history, match }) => {
                             />
                         )}
                     </Card>
-                </Col>
 
-                <Col xs={24} md={16} lg={17}>
                     <Card
                         className="file-viewer-card"
                         title={
@@ -309,6 +373,90 @@ const SkillDetail: React.FC<any> = ({ history, match }) => {
                         {renderFileViewer()}
                     </Card>
                 </Col>
+
+                <Col xs={24} xl={8}>
+                    <Card className="action-card" title="$ install --global" extra={<Text>skills.sh</Text>}>
+                        <Radio.Group
+                            value={installRuntime}
+                            onChange={(event) => setInstallRuntime(event.target.value)}
+                            buttonStyle="solid"
+                            className="runtime-switch"
+                        >
+                            <Radio.Button value="npx">npx</Radio.Button>
+                            <Radio.Button value="bunx">bunx</Radio.Button>
+                            <Radio.Button value="pnpm">pnpm</Radio.Button>
+                        </Radio.Group>
+                        <div className="command-block">
+                            <code>{installCommand || '暂无可用安装命令'}</code>
+                            <Button
+                                type="text"
+                                icon={<CopyOutlined />}
+                                onClick={() =>
+                                    copyToClipboard(installCommand || '', '安装命令已复制到剪贴板')
+                                }
+                                disabled={!installCommand}
+                            />
+                        </div>
+                    </Card>
+
+                    <Card className="action-card" title="$ download --local" extra={<Text>man</Text>}>
+                        <div className="download-buttons">
+                            <Button
+                                type="primary"
+                                block
+                                icon={<DownloadOutlined />}
+                                onClick={() => window.open(downloadPath, '_blank')}
+                            >
+                                下载 skill.zip
+                            </Button>
+                            <div className="command-block">
+                                <code>{wgetCommand || `wget "${downloadPath}" -O ${archiveFileName}`}</code>
+                                <Button
+                                    type="text"
+                                    icon={<CopyOutlined />}
+                                    onClick={() =>
+                                        copyToClipboard(
+                                            wgetCommand || `wget "${downloadPath}" -O ${archiveFileName}`,
+                                            'wget 命令已复制到剪贴板'
+                                        )
+                                    }
+                                />
+                            </div>
+                            <Text type="secondary">
+                                下载完整技能目录，包含 SKILL.md 与所有相关文件
+                            </Text>
+                        </div>
+                    </Card>
+
+                    <Card className="action-card" title="源码与分享">
+                        <Space direction="vertical" style={{ width: '100%' }}>
+                            <Button
+                                block
+                                icon={<LinkOutlined />}
+                                onClick={() => window.open(sourceUrl, '_blank')}
+                                disabled={!sourceUrl}
+                            >
+                                源码跳转
+                            </Button>
+                            <Button
+                                block
+                                icon={favorited ? <HeartFilled /> : <HeartOutlined />}
+                                onClick={() => setFavorited(!favorited)}
+                            >
+                                {favorited ? '已收藏' : '收藏'}
+                            </Button>
+                            <Button
+                                block
+                                icon={<ShareAltOutlined />}
+                                onClick={() =>
+                                    copyToClipboard(window.location.href, '详情页链接已复制到剪贴板')
+                                }
+                            >
+                                分享
+                            </Button>
+                        </Space>
+                    </Card>
+                </Col>
             </Row>
 
             <Card className="related-card-list" title="相关技能推荐">
diff --git a/app/web/pages/skills/detail/style.scss b/app/web/pages/skills/detail/style.scss
index 2a1e346..be65bab 100644
--- a/app/web/pages/skills/detail/style.scss
+++ b/app/web/pages/skills/detail/style.scss
@@ -1,79 +1,89 @@
 .page-skill-detail {
     padding: 20px 24px;
-
     &.loading-wrap {
         display: flex;
         justify-content: center;
         align-items: center;
         min-height: 420px;
     }
-
     .detail-header {
         display: flex;
         align-items: flex-start;
         justify-content: space-between;
         gap: 14px;
         margin-bottom: 16px;
-
         .back-btn {
             margin-top: 4px;
         }
-
         .title-group {
             flex: 1;
             min-width: 0;
         }
     }
-
     .meta-card {
         margin-bottom: 16px;
-
         .tags-wrap {
             margin-top: 12px;
         }
     }
-
     .detail-main-row {
         margin-bottom: 16px;
     }
-
     .file-tree-card {
-        height: 100%;
-        min-height: 560px;
-
-        .ant-card-body {
-            max-height: 500px;
-            overflow: auto;
-        }
-
+        margin-bottom: 16px;
         .ant-tree {
             padding: 4px 8px 8px;
         }
     }
-
     .file-viewer-card {
         min-height: 560px;
-
         .ant-card-body {
-            max-height: 500px;
+            max-height: 640px;
             overflow: auto;
         }
     }
-
     .file-viewer-loading {
         display: flex;
         justify-content: center;
         align-items: center;
         min-height: 420px;
     }
-
+    .action-card {
+        margin-bottom: 16px;
+        &:last-child {
+            margin-bottom: 0;
+        }
+        .runtime-switch {
+            margin-bottom: 12px;
+        }
+        .download-buttons {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+        }
+    }
+    .command-block {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        gap: 8px;
+        padding: 10px 12px;
+        border-radius: 6px;
+        border: 1px solid #E5E7EB;
+        background: #F8FAFC;
+        code {
+            flex: 1;
+            white-space: pre-wrap;
+            word-break: break-all;
+            color: #1F2D3D;
+        }
+    }
     .related-card-list {
         .related-item-card {
             height: 100%;
-
             .related-title {
                 margin-bottom: 8px;
-                color: #1f2d3d;
+                color: #1F2D3D;
                 font-size: 16px;
                 font-weight: 600;
             }

From 9f5fe23cf79e94d9e9de0e27bf2da5869b6dbd2c Mon Sep 17 00:00:00 2001
From: huaiju <huaiju@dtstack.com>
Date: Mon, 23 Feb 2026 10:10:09 +0800
Subject: [PATCH 09/43] feat: add skills import entry on list page and import
 API

---
 app/controller/skills.js        |   7 +++
 app/router.js                   |   1 +
 app/service/skills.js           | 101 +++++++++++++++++++++++++++++++
 app/web/api/url.ts              |   5 ++
 app/web/pages/skills/index.tsx  | 102 +++++++++++++++++++++++++++-----
 app/web/pages/skills/style.scss |  26 +++-----
 6 files changed, 209 insertions(+), 33 deletions(-)

diff --git a/app/controller/skills.js b/app/controller/skills.js
index d1f0cab..8f269a5 100644
--- a/app/controller/skills.js
+++ b/app/controller/skills.js
@@ -37,6 +37,13 @@ class SkillsController extends Controller {
         ctx.set('Content-Disposition', `attachment; filename="${encodeURIComponent(fileName)}"`);
         ctx.body = content;
     }
+
+    async importSkill() {
+        const { app, ctx } = this;
+        const params = ctx.request.body || {};
+        const data = await ctx.service.skills.importSkill(params);
+        ctx.body = app.utils.response(true, data);
+    }
 }
 
 module.exports = SkillsController;
diff --git a/app/router.js b/app/router.js
index a85585f..738f763 100644
--- a/app/router.js
+++ b/app/router.js
@@ -154,6 +154,7 @@ module.exports = (app) => {
     app.get('/api/skills/related', app.controller.skills.getRelatedSkills);
     app.get('/api/skills/file-content', app.controller.skills.getSkillFileContent);
     app.get('/api/skills/download', app.controller.skills.downloadSkillArchive);
+    app.post('/api/skills/import', app.controller.skills.importSkill);
 
     // io.of('/').route('getShellCommand',  io.controller.home.getShellCommand)
     // 暂时close Terminal相关功能
diff --git a/app/service/skills.js b/app/service/skills.js
index a5214ca..06fd514 100644
--- a/app/service/skills.js
+++ b/app/service/skills.js
@@ -1,11 +1,13 @@
 const Service = require('egg').Service;
 const AdmZip = require('adm-zip');
+const { spawn } = require('child_process');
 const fs = require('fs');
 const path = require('path');
 
 const CACHE_TTL_MS = 60 * 1000;
 const MAX_FILE_LIST_COUNT = 300;
 const MAX_FILE_CONTENT_SIZE = 2 * 1024 * 1024;
+const IMPORT_TIMEOUT_MS = 60 * 1000;
 
 const EXTENSION_LANGUAGE_MAP = {
     '.md': 'markdown',
@@ -520,6 +522,105 @@ class SkillsService extends Service {
 
         return related;
     }
+
+    async importSkill(params = {}) {
+        const source = String(params.source || '').trim();
+        const skillName = String(params.skillName || '').trim();
+        if (!source) {
+            this.ctx.throw(400, '缺少导入来源地址');
+        }
+
+        await this.ensureSkillCache();
+        const beforeSlugs = new Set(this.skillCache.skills.map((item) => item.slug));
+        const args = [ '-y', 'skills@latest', 'add', source, '-g', '--agent', 'codex', '--copy', '--yes' ];
+        if (skillName) {
+            args.push('--skill', skillName);
+        }
+
+        let commandResult = null;
+        try {
+            commandResult = await this.runCommand('npx', args, IMPORT_TIMEOUT_MS);
+        } catch (error) {
+            this.ctx.throw(500, `导入失败: ${error.message}`);
+        }
+
+        this.skillCache = null;
+        await this.ensureSkillCache();
+        const importedSkills = this.skillCache.skills
+            .filter((item) => !beforeSlugs.has(item.slug))
+            .map((item) => ({
+                slug: item.slug,
+                name: item.name,
+                sourceRepo: item.sourceRepo,
+                sourcePath: item.sourcePath,
+            }));
+
+        return {
+            source,
+            skillName,
+            importedCount: importedSkills.length,
+            importedSkills,
+            command: `npx ${args.join(' ')}`,
+            logs: {
+                stdout: this.trimCommandOutput(commandResult.stdout),
+                stderr: this.trimCommandOutput(commandResult.stderr),
+            },
+        };
+    }
+
+    runCommand(command, args = [], timeout = IMPORT_TIMEOUT_MS) {
+        return new Promise((resolve, reject) => {
+            const child = spawn(command, args, {
+                cwd: process.cwd(),
+                env: process.env,
+            });
+            let stdout = '';
+            let stderr = '';
+            let timedOut = false;
+
+            const timer = setTimeout(() => {
+                timedOut = true;
+                child.kill('SIGTERM');
+            }, timeout);
+
+            child.stdout.on('data', (chunk) => {
+                stdout += chunk.toString();
+            });
+
+            child.stderr.on('data', (chunk) => {
+                stderr += chunk.toString();
+            });
+
+            child.on('error', (error) => {
+                clearTimeout(timer);
+                reject(error);
+            });
+
+            child.on('close', (code) => {
+                clearTimeout(timer);
+                if (timedOut) {
+                    reject(new Error(`导入命令执行超时（${timeout}ms）`));
+                    return;
+                }
+
+                if (code !== 0) {
+                    const detail = this.trimCommandOutput(stderr || stdout);
+                    reject(new Error(detail || `命令退出码: ${code}`));
+                    return;
+                }
+
+                resolve({ stdout, stderr });
+            });
+        });
+    }
+
+    trimCommandOutput(content = '') {
+        const value = String(content || '').trim();
+        if (!value) return '';
+        const maxLength = 3000;
+        if (value.length <= maxLength) return value;
+        return value.slice(value.length - maxLength);
+    }
 }
 
 module.exports = SkillsService;
diff --git a/app/web/api/url.ts b/app/web/api/url.ts
index 53ac624..c986ecc 100644
--- a/app/web/api/url.ts
+++ b/app/web/api/url.ts
@@ -366,4 +366,9 @@ export default {
         method: 'get',
         url: '/api/skills/download',
     },
+    // 导入 Skill
+    importSkill: {
+        method: 'post',
+        url: '/api/skills/import',
+    },
 };
diff --git a/app/web/pages/skills/index.tsx b/app/web/pages/skills/index.tsx
index 36163e9..922196d 100644
--- a/app/web/pages/skills/index.tsx
+++ b/app/web/pages/skills/index.tsx
@@ -1,8 +1,9 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import {
     CopyOutlined,
     EyeOutlined,
     FilterOutlined,
+    ImportOutlined,
     SearchOutlined,
     StarOutlined,
 } from '@ant-design/icons';
@@ -12,7 +13,10 @@ import {
     Col,
     Divider,
     Empty,
+    Form,
     Input,
+    message,
+    Modal,
     Pagination,
     Row,
     Select,
@@ -20,7 +24,6 @@ import {
     Spin,
     Tag,
     Typography,
-    message,
 } from 'antd';
 
 import { API } from '@/api';
@@ -31,21 +34,25 @@ import './style.scss';
 const { Search } = Input;
 const { Option } = Select;
 const { Paragraph, Text } = Typography;
+const INITIAL_QUERY = {
+    keyword: '',
+    sortBy: 'stars',
+    category: '',
+    pageNum: 1,
+    pageSize: 12,
+};
 
 const SkillsMarket: React.FC<any> = ({ history }) => {
     const [loading, setLoading] = useState(false);
     const [skills, setSkills] = useState<SkillItem[]>([]);
     const [categories, setCategories] = useState<string[]>([]);
     const [total, setTotal] = useState(0);
-    const [query, setQuery] = useState({
-        keyword: '',
-        sortBy: 'stars',
-        category: '',
-        pageNum: 1,
-        pageSize: 12,
-    });
-
-    const fetchSkills = async (nextQuery = query) => {
+    const [importVisible, setImportVisible] = useState(false);
+    const [importing, setImporting] = useState(false);
+    const [importForm] = Form.useForm();
+    const [query, setQuery] = useState(INITIAL_QUERY);
+
+    const fetchSkills = useCallback(async (nextQuery) => {
         setLoading(true);
         try {
             const response = await API.getSkillList(nextQuery);
@@ -63,22 +70,59 @@ const SkillsMarket: React.FC<any> = ({ history }) => {
         } finally {
             setLoading(false);
         }
-    };
+    }, []);
 
     useEffect(() => {
         fetchSkills(query);
-    }, []);
+    }, [fetchSkills, query]);
 
     const updateQueryAndFetch = (patch: Partial<typeof query>) => {
         const next = { ...query, ...patch };
         setQuery(next);
-        fetchSkills(next);
     };
 
     const handleOpenDetail = (slug: string) => {
         history.push(`/page/skills/${slug}`);
     };
 
+    const openImportModal = () => {
+        setImportVisible(true);
+    };
+
+    const closeImportModal = () => {
+        if (importing) return;
+        setImportVisible(false);
+        importForm.resetFields();
+    };
+
+    const handleImportSkill = async () => {
+        try {
+            const values = await importForm.validateFields();
+            setImporting(true);
+            const response = await API.importSkill(values);
+            if (!response.success) {
+                message.error(response.msg || '导入失败');
+                return;
+            }
+
+            const importedCount = Number(response.data?.importedCount || 0);
+            if (importedCount > 0) {
+                message.success(`导入成功，新增 ${importedCount} 个技能`);
+            } else {
+                message.success('导入完成，技能可能已存在');
+            }
+            setImportVisible(false);
+            importForm.resetFields();
+            fetchSkills({ ...query });
+        } catch (error) {
+            if (error?.errorFields) return;
+            message.error('导入失败，请检查来源地址或网络权限');
+            console.error('导入 Skill 失败:', error);
+        } finally {
+            setImporting(false);
+        }
+    };
+
     return (
         <div className="page-skills">
             <div className="skills-header">
@@ -99,6 +143,9 @@ const SkillsMarket: React.FC<any> = ({ history }) => {
                     onSearch={(value) => updateQueryAndFetch({ keyword: value, pageNum: 1 })}
                 />
                 <Space size={12}>
+                    <Button icon={<ImportOutlined />} className="import-btn" onClick={openImportModal}>
+                        导入技能
+                    </Button>
                     <Select
                         value={query.sortBy}
                         style={{ width: 160 }}
@@ -218,6 +265,33 @@ const SkillsMarket: React.FC<any> = ({ history }) => {
                     </>
                 )}
             </Spin>
+
+            <Modal
+                title="导入 Skill"
+                visible={importVisible}
+                confirmLoading={importing}
+                okText="开始导入"
+                cancelText="取消"
+                onCancel={closeImportModal}
+                onOk={handleImportSkill}
+                destroyOnClose
+            >
+                <Form form={importForm} layout="vertical">
+                    <Form.Item
+                        name="source"
+                        label="来源地址"
+                        rules={[{ required: true, message: '请输入来源地址' }]}
+                    >
+                        <Input placeholder="支持 GitHub / GitLab / 内网 GitLab / tree 子目录 URL" />
+                    </Form.Item>
+                    <Form.Item name="skillName" label="Skill 名称（可选）">
+                        <Input placeholder="可选，等价于 --skill <name>" />
+                    </Form.Item>
+                </Form>
+                <Text type="secondary">
+                    示例：`https://github.com/openclaw/openclaw/tree/main/skills/himalaya`
+                </Text>
+            </Modal>
         </div>
     );
 };
diff --git a/app/web/pages/skills/style.scss b/app/web/pages/skills/style.scss
index 50ad184..d9f1704 100644
--- a/app/web/pages/skills/style.scss
+++ b/app/web/pages/skills/style.scss
@@ -1,85 +1,74 @@
 .page-skills {
     padding: 20px 24px;
-
     .skills-header {
         display: flex;
         align-items: center;
         justify-content: space-between;
     }
-
     .title-group {
         .page-title {
             margin: 0;
-            color: #1f2d3d;
+            color: #1F2D3D;
             font-size: 28px;
             font-weight: 700;
         }
-
         .page-subtitle {
             margin: 8px 0 0;
             color: #667085;
         }
     }
-
     .search-filter-row {
         display: flex;
         justify-content: space-between;
         align-items: center;
         gap: 16px;
         margin-top: 18px;
-
         .keyword-search {
             width: 620px;
             max-width: 100%;
         }
+        .import-btn {
+            min-width: 100px;
+        }
     }
-
     .skill-card {
         height: 100%;
         border-radius: 10px;
-        border: 1px solid #edf2f7;
-
+        border: 1px solid #EDF2F7;
         .card-header {
             display: flex;
             align-items: center;
             justify-content: space-between;
             margin-bottom: 10px;
         }
-
         .skill-name {
-            color: #1f2d3d;
+            color: #1F2D3D;
             font-size: 16px;
             font-weight: 600;
         }
-
         .meta-stars {
-            color: #e6a23c;
+            color: #E6A23C;
             font-weight: 600;
         }
-
         .skill-desc {
             min-height: 66px;
             margin-bottom: 12px;
             color: #475467;
         }
-
         .meta-row {
             display: flex;
             align-items: center;
             margin-bottom: 8px;
             gap: 8px;
-
             .meta-value {
                 flex: 1;
                 color: #344054;
             }
         }
-
         .tag-row {
             min-height: 28px;
             margin-bottom: 10px;
         }
-
         .action-row {
             display: flex;
             align-items: center;
@@ -88,7 +77,6 @@
             gap: 8px;
         }
     }
-
     .pagination-wrap {
         display: flex;
         justify-content: flex-end;

From 032d645818588cc137c8c27acc5d300ca4bed81f Mon Sep 17 00:00:00 2001
From: huaiju <huaiju@dtstack.com>
Date: Mon, 23 Feb 2026 10:21:30 +0800
Subject: [PATCH 10/43] fix: parse skills source from skill-lock and generate
 remote install command

---
 app/service/skills.js | 42 ++++++++++++++++++++++++++++++++++++++----
 1 file changed, 38 insertions(+), 4 deletions(-)

diff --git a/app/service/skills.js b/app/service/skills.js
index 06fd514..a2ece3b 100644
--- a/app/service/skills.js
+++ b/app/service/skills.js
@@ -49,6 +49,7 @@ class SkillsService extends Service {
     constructor(ctx) {
         super(ctx);
         this.skillCache = null;
+        this.skillSourceCache = {};
     }
 
     getSkillRootDirs() {
@@ -75,9 +76,10 @@ class SkillsService extends Service {
         rootDirs.forEach((rootDir) => {
             if (!fs.existsSync(rootDir)) return;
             const skillFiles = this.findSkillFiles(rootDir);
+            const sourceMap = this.getSkillSourceMapByRoot(rootDir);
             skillFiles.forEach((skillFilePath) => {
                 try {
-                    const skill = this.parseSkillMeta(skillFilePath, rootDir);
+                    const skill = this.parseSkillMeta(skillFilePath, rootDir, sourceMap);
                     if (skill) {
                         skills.push(skill);
                     }
@@ -127,7 +129,7 @@ class SkillsService extends Service {
         return result;
     }
 
-    parseSkillMeta(skillFilePath, rootDir) {
+    parseSkillMeta(skillFilePath, rootDir, sourceMap = {}) {
         const content = fs.readFileSync(skillFilePath, 'utf8');
         const stat = fs.statSync(skillFilePath);
         const skillDir = path.dirname(skillFilePath);
@@ -160,9 +162,14 @@ class SkillsService extends Service {
         const tags = this.parseArrayLike(frontmatter.tags);
         const allowedTools = this.parseArrayLike(frontmatter['allowed-tools']);
         const stars = Number(metaJson.stars || metaJson.star || metaJson.github_stars || 0);
+        const skillDirName = path.basename(skillDir);
+        const sourceRepo =
+            this.extractSourceRepo(packageJson) ||
+            String(metaJson.sourceRepo || '').trim() ||
+            String(sourceMap[skillDirName] || sourceMap[name] || '').trim();
 
         const installCommand = this.getInstallCommand({
-            sourceRepo: this.extractSourceRepo(packageJson),
+            sourceRepo,
             name,
             skillDir,
         });
@@ -176,7 +183,7 @@ class SkillsService extends Service {
             allowedTools,
             stars: Number.isNaN(stars) ? 0 : stars,
             updatedAt: stat.mtime.toISOString(),
-            sourceRepo: this.extractSourceRepo(packageJson),
+            sourceRepo,
             sourcePath: skillDir,
             skillFilePath,
             installCommand,
@@ -621,6 +628,33 @@ class SkillsService extends Service {
         if (value.length <= maxLength) return value;
         return value.slice(value.length - maxLength);
     }
+
+    getSkillSourceMapByRoot(rootDir) {
+        if (this.skillSourceCache[rootDir]) {
+            return this.skillSourceCache[rootDir];
+        }
+
+        const sourceMap = {};
+        const parentDir = path.dirname(rootDir);
+        const lockFilePath = path.join(parentDir, '.skill-lock.json');
+        if (fs.existsSync(lockFilePath)) {
+            try {
+                const lockData = JSON.parse(fs.readFileSync(lockFilePath, 'utf8'));
+                const skills = lockData && lockData.skills ? lockData.skills : {};
+                Object.keys(skills).forEach((skillName) => {
+                    const sourceUrl = skills[skillName] && skills[skillName].sourceUrl;
+                    if (sourceUrl) {
+                        sourceMap[skillName] = String(sourceUrl);
+                    }
+                });
+            } catch (error) {
+                this.ctx.logger.warn(`[skills] 读取锁文件失败: ${lockFilePath}, ${error.message}`);
+            }
+        }
+
+        this.skillSourceCache[rootDir] = sourceMap;
+        return sourceMap;
+    }
 }
 
 module.exports = SkillsService;

From 101dae2f0c4c798c3acd937429359e49ba981bb9 Mon Sep 17 00:00:00 2001
From: huaiju <huaiju@dtstack.com>
Date: Mon, 23 Feb 2026 10:31:00 +0800
Subject: [PATCH 11/43] feat: parse skills frontmatter as structured table

---
 app/web/pages/skills/detail/index.tsx  | 100 ++++++++++++++++++++++++-
 app/web/pages/skills/detail/style.scss |  47 ++++++++++++
 2 files changed, 146 insertions(+), 1 deletion(-)

diff --git a/app/web/pages/skills/detail/index.tsx b/app/web/pages/skills/detail/index.tsx
index 4b859de..f9e6241 100644
--- a/app/web/pages/skills/detail/index.tsx
+++ b/app/web/pages/skills/detail/index.tsx
@@ -30,6 +30,11 @@ interface SkillTreeNode extends DataNode {
 
 type InstallRuntime = 'npx' | 'bunx' | 'pnpm';
 
+interface FrontmatterItem {
+    key: string;
+    value: string;
+}
+
 const formatFileSize = (size = 0) => {
     if (size < 1024) return `${size} B`;
     if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`;
@@ -121,6 +126,64 @@ const getInstallCommandByRuntime = (
     return `npx skills add ${installArgs}`;
 };
 
+const normalizeFrontmatterValue = (value: string) => {
+    const trimmed = String(value || '').trim();
+    if (!trimmed) return '-';
+    if (
+        (trimmed.startsWith('"') && trimmed.endsWith('"')) ||
+        (trimmed.startsWith("'") && trimmed.endsWith("'"))
+    ) {
+        return trimmed.slice(1, -1);
+    }
+    return trimmed;
+};
+
+const parseMarkdownFrontmatter = (markdown = ''): { frontmatter: FrontmatterItem[]; body: string } => {
+    const content = String(markdown || '');
+    const match = content.match(/^---\r?\n([\s\S]*?)\r?\n---\r?\n?/);
+    if (!match) {
+        return {
+            frontmatter: [],
+            body: content,
+        };
+    }
+
+    const block = match[1] || '';
+    const lines = block.split(/\r?\n/);
+    const frontmatter: FrontmatterItem[] = [];
+    let currentKey = '';
+    let currentValueLines: string[] = [];
+
+    const pushCurrent = () => {
+        if (!currentKey) return;
+        const value = normalizeFrontmatterValue(currentValueLines.join('\n'));
+        frontmatter.push({ key: currentKey, value });
+    };
+
+    lines.forEach((line) => {
+        const keyMatch = line.match(/^([a-zA-Z0-9_-]+):\s*(.*)$/);
+        const isTopLevelKey = Boolean(keyMatch) && !/^\s/.test(line);
+
+        if (isTopLevelKey && keyMatch) {
+            pushCurrent();
+            currentKey = keyMatch[1];
+            currentValueLines = [keyMatch[2] || ''];
+            return;
+        }
+
+        if (currentKey) {
+            currentValueLines.push(line);
+        }
+    });
+
+    pushCurrent();
+
+    return {
+        frontmatter,
+        body: content.slice(match[0].length),
+    };
+};
+
 const SkillDetail: React.FC<any> = ({ history, match }) => {
     const { slug } = match.params;
     const [loading, setLoading] = useState(true);
@@ -256,7 +319,42 @@ const SkillDetail: React.FC<any> = ({ history, match }) => {
         }
 
         if (fileContent.language === 'markdown') {
-            return <MarkdownRenderer content={fileContent.content || ''} />;
+            const parsedMarkdown = parseMarkdownFrontmatter(fileContent.content || '');
+            return (
+                <div className="markdown-file-viewer">
+                    {parsedMarkdown.frontmatter.length > 0 ? (
+                        <div className="frontmatter-table-wrap">
+                            <table className="frontmatter-table">
+                                <tbody>
+                                    {parsedMarkdown.frontmatter.map((item) => {
+                                        const isCodeStyle =
+                                            item.value.includes('\n') ||
+                                            item.value.startsWith('{') ||
+                                            item.value.startsWith('[');
+                                        return (
+                                            <tr key={item.key}>
+                                                <th>{item.key}</th>
+                                                <td>
+                                                    {isCodeStyle ? (
+                                                        <pre className="frontmatter-code">
+                                                            {item.value}
+                                                        </pre>
+                                                    ) : (
+                                                        <span>{item.value}</span>
+                                                    )}
+                                                </td>
+                                            </tr>
+                                        );
+                                    })}
+                                </tbody>
+                            </table>
+                        </div>
+                    ) : null}
+                    {parsedMarkdown.body.trim() ? (
+                        <MarkdownRenderer content={parsedMarkdown.body} />
+                    ) : null}
+                </div>
+            );
         }
 
         return (
diff --git a/app/web/pages/skills/detail/style.scss b/app/web/pages/skills/detail/style.scss
index be65bab..96d70d3 100644
--- a/app/web/pages/skills/detail/style.scss
+++ b/app/web/pages/skills/detail/style.scss
@@ -42,6 +42,53 @@
             overflow: auto;
         }
     }
+    .markdown-file-viewer {
+        .frontmatter-table-wrap {
+            margin-bottom: 16px;
+            border: 1px solid #F1DFD7;
+            border-radius: 8px;
+            overflow: hidden;
+            background: #FEFAF8;
+        }
+        .frontmatter-table {
+            width: 100%;
+            border-collapse: collapse;
+            table-layout: fixed;
+            th,
+            td {
+                padding: 14px 16px;
+                vertical-align: top;
+                border-bottom: 1px solid #F1DFD7;
+            }
+            tr:last-child {
+                th,
+                td {
+                    border-bottom: none;
+                }
+            }
+            th {
+                width: 180px;
+                color: #C56F4E;
+                font-size: 18px;
+                font-weight: 600;
+                text-align: left;
+                background: rgba(230, 200, 186, 0.16);
+            }
+            td {
+                font-size: 16px;
+                color: #2A3441;
+                line-height: 1.75;
+                word-break: break-word;
+            }
+            .frontmatter-code {
+                margin: 0;
+                font-size: 14px;
+                line-height: 1.55;
+                white-space: pre-wrap;
+                word-break: break-word;
+            }
+        }
+    }
     .file-viewer-loading {
         display: flex;
         justify-content: center;

From 1e642791805a04988408a39ccae4b22f02310729 Mon Sep 17 00:00:00 2001
From: huaiju <huaiju@dtstack.com>
Date: Mon, 23 Feb 2026 10:34:08 +0800
Subject: [PATCH 12/43] style: align skills frontmatter table with project
 visual style

---
 app/web/pages/skills/detail/style.scss | 40 +++++++++++++++++++-------
 1 file changed, 29 insertions(+), 11 deletions(-)

diff --git a/app/web/pages/skills/detail/style.scss b/app/web/pages/skills/detail/style.scss
index 96d70d3..2a015fc 100644
--- a/app/web/pages/skills/detail/style.scss
+++ b/app/web/pages/skills/detail/style.scss
@@ -45,20 +45,31 @@
     .markdown-file-viewer {
         .frontmatter-table-wrap {
             margin-bottom: 16px;
-            border: 1px solid #F1DFD7;
-            border-radius: 8px;
+            border: 1px solid #E5EDF6;
+            border-radius: 10px;
             overflow: hidden;
-            background: #FEFAF8;
+            background: #FFF;
+            box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
         }
         .frontmatter-table {
             width: 100%;
             border-collapse: collapse;
             table-layout: fixed;
+            position: relative;
+            &::before {
+                content: "";
+                position: absolute;
+                left: 0;
+                top: 0;
+                right: 0;
+                height: 3px;
+                background: linear-gradient(90deg, #2F7BFF 0%, #56A1FF 100%);
+            }
             th,
             td {
-                padding: 14px 16px;
+                padding: 14px 18px;
                 vertical-align: top;
-                border-bottom: 1px solid #F1DFD7;
+                border-bottom: 1px solid #EEF3F8;
             }
             tr:last-child {
                 th,
@@ -67,18 +78,20 @@
                 }
             }
             th {
-                width: 180px;
-                color: #C56F4E;
-                font-size: 18px;
+                width: 176px;
+                color: #2D4A6A;
+                font-size: 15px;
                 font-weight: 600;
                 text-align: left;
-                background: rgba(230, 200, 186, 0.16);
+                background: linear-gradient(180deg, #F7FAFF 0%, #F2F7FF 100%);
+                border-right: 1px solid #E8EEF7;
             }
             td {
                 font-size: 16px;
-                color: #2A3441;
-                line-height: 1.75;
+                color: #344054;
+                line-height: 1.7;
                 word-break: break-word;
+                background: #FFF;
             }
             .frontmatter-code {
                 margin: 0;
@@ -86,6 +99,11 @@
                 line-height: 1.55;
                 white-space: pre-wrap;
                 word-break: break-word;
+                color: #1F2D3D;
+                background: #F7FAFC;
+                border: 1px solid #E4EAF1;
+                border-radius: 8px;
+                padding: 10px 12px;
             }
         }
     }

From 7fc50a4a5fe84310b92a7cbb9337db862fc0e84a Mon Sep 17 00:00:00 2001
From: huaiju <huaiju@dtstack.com>
Date: Mon, 23 Feb 2026 20:44:02 +0800
Subject: [PATCH 13/43] feat: use platform category and tags from skills import
 metadata

---
 app/service/skills.js | 84 ++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 80 insertions(+), 4 deletions(-)

diff --git a/app/service/skills.js b/app/service/skills.js
index a2ece3b..fd27d04 100644
--- a/app/service/skills.js
+++ b/app/service/skills.js
@@ -8,6 +8,18 @@ const CACHE_TTL_MS = 60 * 1000;
 const MAX_FILE_LIST_COUNT = 300;
 const MAX_FILE_CONTENT_SIZE = 2 * 1024 * 1024;
 const IMPORT_TIMEOUT_MS = 60 * 1000;
+const MAX_PLATFORM_TAGS = 5;
+const MAX_TAG_LENGTH = 20;
+const SKILL_CATEGORY_OPTIONS = [
+    '通用',
+    '前端',
+    '后端',
+    '数据与AI',
+    '运维与系统',
+    '工程效率',
+    '安全',
+    '其他',
+];
 
 const EXTENSION_LANGUAGE_MAP = {
     '.md': 'markdown',
@@ -52,6 +64,10 @@ class SkillsService extends Service {
         this.skillSourceCache = {};
     }
 
+    getSkillCategoryOptions() {
+        return [ ...SKILL_CATEGORY_OPTIONS ];
+    }
+
     getSkillRootDirs() {
         const homeDir = process.env.HOME || '';
         const codexHome = process.env.CODEX_HOME || path.join(homeDir, '.codex');
@@ -91,7 +107,7 @@ class SkillsService extends Service {
             });
         });
 
-        const categories = Array.from(new Set(skills.map((item) => item.category))).sort();
+        const categories = this.getSkillCategoryOptions();
         this.skillCache = {
             loadedAt: Date.now(),
             skills,
@@ -159,7 +175,9 @@ class SkillsService extends Service {
 
         const name = frontmatter.name || path.basename(skillDir);
         const description = frontmatter.description || this.extractDescription(content);
-        const tags = this.parseArrayLike(frontmatter.tags);
+        const categoryByPath = this.getCategoryFromRelativePath(relativeDir);
+        const category = this.normalizeCategory(metaJson.category || categoryByPath);
+        const tags = this.normalizePlatformTags(metaJson.platformTags || metaJson.tags);
         const allowedTools = this.parseArrayLike(frontmatter['allowed-tools']);
         const stars = Number(metaJson.stars || metaJson.star || metaJson.github_stars || 0);
         const skillDirName = path.basename(skillDir);
@@ -178,7 +196,7 @@ class SkillsService extends Service {
             slug,
             name,
             description,
-            category: this.getCategoryFromRelativePath(relativeDir),
+            category,
             tags,
             allowedTools,
             stars: Number.isNaN(stars) ? 0 : stars,
@@ -255,6 +273,24 @@ class SkillsService extends Service {
         return parts[0];
     }
 
+    normalizeCategory(rawCategory) {
+        const category = String(rawCategory || '').trim();
+        if (!category) return '通用';
+        if (SKILL_CATEGORY_OPTIONS.includes(category)) {
+            return category;
+        }
+        return '其他';
+    }
+
+    normalizePlatformTags(rawTags) {
+        const values = this.parseArrayLike(rawTags)
+            .map((item) => String(item || '').trim())
+            .map((item) => item.replace(/\s+/g, ' '))
+            .filter(Boolean)
+            .map((item) => item.slice(0, MAX_TAG_LENGTH));
+        return Array.from(new Set(values)).slice(0, MAX_PLATFORM_TAGS);
+    }
+
     extractSourceRepo(packageJson = {}) {
         if (!packageJson.repository) return '';
         if (typeof packageJson.repository === 'string') return packageJson.repository;
@@ -523,7 +559,8 @@ class SkillsService extends Service {
             .sort((a, b) => b._score - a._score || b.stars - a.stars)
             .slice(0, parseInt(limit, 10) || 6)
             .map((item) => {
-                const { _score, ...rest } = item;
+                const rest = { ...item };
+                delete rest._score;
                 return rest;
             });
 
@@ -533,6 +570,8 @@ class SkillsService extends Service {
     async importSkill(params = {}) {
         const source = String(params.source || '').trim();
         const skillName = String(params.skillName || '').trim();
+        const category = this.normalizeCategory(params.category);
+        const tags = this.normalizePlatformTags(params.tags);
         if (!source) {
             this.ctx.throw(400, '缺少导入来源地址');
         }
@@ -562,9 +601,20 @@ class SkillsService extends Service {
                 sourcePath: item.sourcePath,
             }));
 
+        if (importedSkills.length > 0) {
+            this.persistSkillMeta(importedSkills, {
+                category,
+                tags,
+            });
+            this.skillCache = null;
+            await this.ensureSkillCache();
+        }
+
         return {
             source,
             skillName,
+            category,
+            tags,
             importedCount: importedSkills.length,
             importedSkills,
             command: `npx ${args.join(' ')}`,
@@ -575,6 +625,32 @@ class SkillsService extends Service {
         };
     }
 
+    persistSkillMeta(skills = [], meta = {}) {
+        const nextCategory = this.normalizeCategory(meta.category);
+        const nextTags = this.normalizePlatformTags(meta.tags);
+        skills.forEach((item) => {
+            const skillDir = item.sourcePath;
+            if (!skillDir || !fs.existsSync(skillDir)) return;
+            const metaFilePath = path.join(skillDir, '_meta.json');
+            let currentMeta = {};
+            if (fs.existsSync(metaFilePath)) {
+                try {
+                    currentMeta = JSON.parse(fs.readFileSync(metaFilePath, 'utf8'));
+                } catch (error) {
+                    currentMeta = {};
+                }
+            }
+
+            const nextMeta = {
+                ...currentMeta,
+                category: nextCategory,
+                platformTags: nextTags,
+                tags: nextTags,
+            };
+            fs.writeFileSync(metaFilePath, `${JSON.stringify(nextMeta, null, 2)}\n`, 'utf8');
+        });
+    }
+
     runCommand(command, args = [], timeout = IMPORT_TIMEOUT_MS) {
         return new Promise((resolve, reject) => {
             const child = spawn(command, args, {

From 83481934cc76add31273ba06aef92dc8b96e4b0f Mon Sep 17 00:00:00 2001
From: huaiju <huaiju@dtstack.com>
Date: Mon, 23 Feb 2026 20:44:44 +0800
Subject: [PATCH 14/43] feat: add fixed category and custom tags in skills
 import form

---
 app/web/pages/skills/index.tsx | 51 ++++++++++++++++++++++++++++++++++
 1 file changed, 51 insertions(+)

diff --git a/app/web/pages/skills/index.tsx b/app/web/pages/skills/index.tsx
index 922196d..34085eb 100644
--- a/app/web/pages/skills/index.tsx
+++ b/app/web/pages/skills/index.tsx
@@ -34,6 +34,16 @@ import './style.scss';
 const { Search } = Input;
 const { Option } = Select;
 const { Paragraph, Text } = Typography;
+const FIXED_CATEGORY_OPTIONS = [
+    '通用',
+    '前端',
+    '后端',
+    '数据与AI',
+    '运维与系统',
+    '工程效率',
+    '安全',
+    '其他',
+];
 const INITIAL_QUERY = {
     keyword: '',
     sortBy: 'stars',
@@ -87,6 +97,10 @@ const SkillsMarket: React.FC<any> = ({ history }) => {
 
     const openImportModal = () => {
         setImportVisible(true);
+        importForm.setFieldsValue({
+            category: '通用',
+            tags: [],
+        });
     };
 
     const closeImportModal = () => {
@@ -287,6 +301,43 @@ const SkillsMarket: React.FC<any> = ({ history }) => {
                     <Form.Item name="skillName" label="Skill 名称（可选）">
                         <Input placeholder="可选，等价于 --skill <name>" />
                     </Form.Item>
+                    <Form.Item
+                        name="category"
+                        label="分类"
+                        initialValue="通用"
+                        rules={[{ required: true, message: '请选择分类' }]}
+                    >
+                        <Select placeholder="请选择分类">
+                            {FIXED_CATEGORY_OPTIONS.map((item) => (
+                                <Option key={item} value={item}>
+                                    {item}
+                                </Option>
+                            ))}
+                        </Select>
+                    </Form.Item>
+                    <Form.Item
+                        name="tags"
+                        label="标签（可选）"
+                        extra="最多 5 个标签，可自定义输入，回车或逗号分隔"
+                        rules={[
+                            {
+                                validator: (_, value = []) => {
+                                    if (!Array.isArray(value)) return Promise.resolve();
+                                    if (value.length > 5) {
+                                        return Promise.reject(new Error('标签最多 5 个'));
+                                    }
+                                    return Promise.resolve();
+                                },
+                            },
+                        ]}
+                    >
+                        <Select
+                            mode="tags"
+                            tokenSeparators={[ ',', '，' ]}
+                            placeholder="例如：邮件, 效率, 命令行"
+                            maxTagCount={5}
+                        />
+                    </Form.Item>
                 </Form>
                 <Text type="secondary">
                     示例：`https://github.com/openclaw/openclaw/tree/main/skills/himalaya`

From 3902ed9574317c9e26c56e022ee576b55970401c Mon Sep 17 00:00:00 2001
From: huaiju <huaiju@dtstack.com>
Date: Mon, 23 Feb 2026 21:01:23 +0800
Subject: [PATCH 15/43] feat: refresh github stars once after skills import

---
 app/service/skills.js | 120 +++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 119 insertions(+), 1 deletion(-)

diff --git a/app/service/skills.js b/app/service/skills.js
index fd27d04..b58cf92 100644
--- a/app/service/skills.js
+++ b/app/service/skills.js
@@ -3,11 +3,13 @@ const AdmZip = require('adm-zip');
 const { spawn } = require('child_process');
 const fs = require('fs');
 const path = require('path');
+const fetch = require('node-fetch');
 
 const CACHE_TTL_MS = 60 * 1000;
 const MAX_FILE_LIST_COUNT = 300;
 const MAX_FILE_CONTENT_SIZE = 2 * 1024 * 1024;
 const IMPORT_TIMEOUT_MS = 60 * 1000;
+const GITHUB_API_TIMEOUT_MS = 10 * 1000;
 const MAX_PLATFORM_TAGS = 5;
 const MAX_TAG_LENGTH = 20;
 const SKILL_CATEGORY_OPTIONS = [
@@ -572,6 +574,7 @@ class SkillsService extends Service {
         const skillName = String(params.skillName || '').trim();
         const category = this.normalizeCategory(params.category);
         const tags = this.normalizePlatformTags(params.tags);
+        const sourceRepoFallback = this.extractSourceRepoFromImportSource(source);
         if (!source) {
             this.ctx.throw(400, '缺少导入来源地址');
         }
@@ -591,22 +594,26 @@ class SkillsService extends Service {
         }
 
         this.skillCache = null;
+        this.skillSourceCache = {};
         await this.ensureSkillCache();
         const importedSkills = this.skillCache.skills
             .filter((item) => !beforeSlugs.has(item.slug))
             .map((item) => ({
                 slug: item.slug,
                 name: item.name,
-                sourceRepo: item.sourceRepo,
+                sourceRepo: item.sourceRepo || sourceRepoFallback,
                 sourcePath: item.sourcePath,
             }));
 
         if (importedSkills.length > 0) {
+            const starsBySlug = await this.fetchStarsForImportedSkills(importedSkills);
             this.persistSkillMeta(importedSkills, {
                 category,
                 tags,
+                starsBySlug,
             });
             this.skillCache = null;
+            this.skillSourceCache = {};
             await this.ensureSkillCache();
         }
 
@@ -628,6 +635,7 @@ class SkillsService extends Service {
     persistSkillMeta(skills = [], meta = {}) {
         const nextCategory = this.normalizeCategory(meta.category);
         const nextTags = this.normalizePlatformTags(meta.tags);
+        const starsBySlug = meta.starsBySlug || {};
         skills.forEach((item) => {
             const skillDir = item.sourcePath;
             if (!skillDir || !fs.existsSync(skillDir)) return;
@@ -647,10 +655,120 @@ class SkillsService extends Service {
                 platformTags: nextTags,
                 tags: nextTags,
             };
+            const stars = starsBySlug[item.slug];
+            if (typeof stars === 'number' && Number.isFinite(stars) && stars >= 0) {
+                nextMeta.stars = stars;
+                nextMeta['github_stars'] = stars;
+                nextMeta.starsFetchedAt = new Date().toISOString();
+            }
             fs.writeFileSync(metaFilePath, `${JSON.stringify(nextMeta, null, 2)}\n`, 'utf8');
         });
     }
 
+    async fetchStarsForImportedSkills(skills = []) {
+        const repoToStars = {};
+        const uniqueRepos = Array.from(
+            new Set(
+                skills
+                    .map((item) => this.extractGitHubRepoFullName(item.sourceRepo))
+                    .filter(Boolean)
+            )
+        );
+
+        for (const repoFullName of uniqueRepos) {
+            // 顺序请求，减少被限流概率；一次导入通常仓库数很少
+            const stars = await this.fetchGitHubRepoStars(repoFullName);
+            if (typeof stars === 'number' && Number.isFinite(stars) && stars >= 0) {
+                repoToStars[repoFullName] = stars;
+            }
+        }
+
+        const starsBySlug = {};
+        skills.forEach((item) => {
+            const repoFullName = this.extractGitHubRepoFullName(item.sourceRepo);
+            if (!repoFullName) return;
+            const stars = repoToStars[repoFullName];
+            if (typeof stars === 'number') {
+                starsBySlug[item.slug] = stars;
+            }
+        });
+
+        return starsBySlug;
+    }
+
+    extractGitHubRepoFullName(sourceRepo = '') {
+        const raw = String(sourceRepo || '').trim();
+        if (!raw) return '';
+        const normalized = raw.replace(/^git\+/, '').replace(/\.git$/, '');
+        const sshMatch = normalized.match(/^git@github\.com:([^/]+)\/([^/]+)$/i);
+        if (sshMatch) {
+            return `${sshMatch[1]}/${sshMatch[2]}`;
+        }
+        const httpsMatch = normalized.match(/^https?:\/\/github\.com\/([^/]+)\/([^/#?]+)/i);
+        if (httpsMatch) {
+            return `${httpsMatch[1]}/${httpsMatch[2]}`;
+        }
+        return '';
+    }
+
+    async fetchGitHubRepoStars(repoFullName) {
+        if (!repoFullName) return null;
+        const url = `https://api.github.com/repos/${repoFullName}`;
+        const headers = {
+            Accept: 'application/vnd.github+json',
+            'User-Agent': 'doraemon-skills-market',
+        };
+        const token = String(process.env.GITHUB_TOKEN || '').trim();
+        if (token) {
+            headers.Authorization = `Bearer ${token}`;
+        }
+
+        const controller = new AbortController();
+        const timer = setTimeout(() => controller.abort(), GITHUB_API_TIMEOUT_MS);
+        try {
+            const response = await fetch(url, {
+                method: 'GET',
+                headers,
+                signal: controller.signal,
+            });
+            if (!response.ok) {
+                this.ctx.logger.warn(
+                    `[skills] 获取 GitHub stars 失败: ${repoFullName}, status=${response.status}`
+                );
+                return null;
+            }
+            const data = await response.json();
+            const stars = Number(data.stargazers_count);
+            if (Number.isNaN(stars) || stars < 0) return null;
+            return stars;
+        } catch (error) {
+            this.ctx.logger.warn(
+                `[skills] 获取 GitHub stars 异常: ${repoFullName}, ${error.message}`
+            );
+            return null;
+        } finally {
+            clearTimeout(timer);
+        }
+    }
+
+    extractSourceRepoFromImportSource(source = '') {
+        const raw = String(source || '').trim();
+        if (!raw) return '';
+
+        // 支持 GitHub tree URL：/owner/repo/tree/branch/path
+        const treeMatch = raw.match(/^https?:\/\/github\.com\/([^/]+)\/([^/]+)\/tree\/[^/]+\/?.*$/i);
+        if (treeMatch) {
+            return `https://github.com/${treeMatch[1]}/${treeMatch[2]}.git`;
+        }
+
+        const repoMatch = raw.match(/^https?:\/\/github\.com\/([^/]+)\/([^/#?]+)/i);
+        if (repoMatch) {
+            return `https://github.com/${repoMatch[1]}/${repoMatch[2].replace(/\.git$/i, '')}.git`;
+        }
+
+        return '';
+    }
+
     runCommand(command, args = [], timeout = IMPORT_TIMEOUT_MS) {
         return new Promise((resolve, reject) => {
             const child = spawn(command, args, {

From 197bc588b9e5f878c5ad5628a58f37dabab01c66 Mon Sep 17 00:00:00 2001
From: huaiju <huaiju@dtstack.com>
Date: Mon, 23 Feb 2026 21:04:19 +0800
Subject: [PATCH 16/43] feat: import all skills from root source by default

---
 app/service/skills.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/app/service/skills.js b/app/service/skills.js
index b58cf92..bc09419 100644
--- a/app/service/skills.js
+++ b/app/service/skills.js
@@ -584,6 +584,9 @@ class SkillsService extends Service {
         const args = [ '-y', 'skills@latest', 'add', source, '-g', '--agent', 'codex', '--copy', '--yes' ];
         if (skillName) {
             args.push('--skill', skillName);
+        } else {
+            // 未指定 skillName 时显式导入源中的全部 skills，避免依赖 CLI 默认选择行为
+            args.push('--skill', '*');
         }
 
         let commandResult = null;

From a58a36d80fd27f5eb11ed2cc96fc1cfe5c80b31a Mon Sep 17 00:00:00 2001
From: huaiju <huaiju@dtstack.com>
Date: Mon, 23 Feb 2026 21:31:07 +0800
Subject: [PATCH 17/43] fix: fallback stars fetch and refresh on reimport

---
 app/service/skills.js | 131 ++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 126 insertions(+), 5 deletions(-)

diff --git a/app/service/skills.js b/app/service/skills.js
index bc09419..e40f8eb 100644
--- a/app/service/skills.js
+++ b/app/service/skills.js
@@ -608,6 +608,7 @@ class SkillsService extends Service {
                 sourcePath: item.sourcePath,
             }));
 
+        let refreshedCount = 0;
         if (importedSkills.length > 0) {
             const starsBySlug = await this.fetchStarsForImportedSkills(importedSkills);
             this.persistSkillMeta(importedSkills, {
@@ -615,9 +616,37 @@ class SkillsService extends Service {
                 tags,
                 starsBySlug,
             });
+            refreshedCount = importedSkills.length;
             this.skillCache = null;
             this.skillSourceCache = {};
             await this.ensureSkillCache();
+        } else {
+            // 重复导入同仓库时也刷新一次 stars，避免历史 0 值无法更新。
+            const sourceRepoFullName = this.extractGitHubRepoFullName(sourceRepoFallback);
+            if (sourceRepoFullName) {
+                const existingRepoSkills = this.skillCache.skills
+                    .filter(
+                        (item) =>
+                            this.extractGitHubRepoFullName(item.sourceRepo) === sourceRepoFullName
+                    )
+                    .map((item) => ({
+                        slug: item.slug,
+                        name: item.name,
+                        sourceRepo: item.sourceRepo,
+                        sourcePath: item.sourcePath,
+                    }));
+
+                if (existingRepoSkills.length > 0) {
+                    const starsBySlug = await this.fetchStarsForImportedSkills(existingRepoSkills);
+                    this.persistSkillMeta(existingRepoSkills, {
+                        starsBySlug,
+                    });
+                    refreshedCount = existingRepoSkills.length;
+                    this.skillCache = null;
+                    this.skillSourceCache = {};
+                    await this.ensureSkillCache();
+                }
+            }
         }
 
         return {
@@ -626,6 +655,7 @@ class SkillsService extends Service {
             category,
             tags,
             importedCount: importedSkills.length,
+            refreshedCount,
             importedSkills,
             command: `npx ${args.join(' ')}`,
             logs: {
@@ -636,8 +666,10 @@ class SkillsService extends Service {
     }
 
     persistSkillMeta(skills = [], meta = {}) {
-        const nextCategory = this.normalizeCategory(meta.category);
-        const nextTags = this.normalizePlatformTags(meta.tags);
+        const hasCategory = Object.prototype.hasOwnProperty.call(meta, 'category');
+        const hasTags = Object.prototype.hasOwnProperty.call(meta, 'tags');
+        const nextCategory = hasCategory ? this.normalizeCategory(meta.category) : '';
+        const nextTags = hasTags ? this.normalizePlatformTags(meta.tags) : [];
         const starsBySlug = meta.starsBySlug || {};
         skills.forEach((item) => {
             const skillDir = item.sourcePath;
@@ -654,10 +686,14 @@ class SkillsService extends Service {
 
             const nextMeta = {
                 ...currentMeta,
-                category: nextCategory,
-                platformTags: nextTags,
-                tags: nextTags,
             };
+            if (hasCategory) {
+                nextMeta.category = nextCategory;
+            }
+            if (hasTags) {
+                nextMeta.platformTags = nextTags;
+                nextMeta.tags = nextTags;
+            }
             const stars = starsBySlug[item.slug];
             if (typeof stars === 'number' && Number.isFinite(stars) && stars >= 0) {
                 nextMeta.stars = stars;
@@ -714,6 +750,87 @@ class SkillsService extends Service {
         return '';
     }
 
+    parseCompactNumber(input) {
+        const raw = String(input || '')
+            .trim()
+            .replace(/,/g, '')
+            .toLowerCase();
+        if (!raw) return null;
+
+        const match = raw.match(/^(\d+(?:\.\d+)?)\s*([kmb])?$/i);
+        if (!match) return null;
+
+        const value = Number(match[1]);
+        if (!Number.isFinite(value)) return null;
+        const suffix = (match[2] || '').toLowerCase();
+        if (!suffix) return Math.round(value);
+        if (suffix === 'k') return Math.round(value * 1000);
+        if (suffix === 'm') return Math.round(value * 1000 * 1000);
+        if (suffix === 'b') return Math.round(value * 1000 * 1000 * 1000);
+        return null;
+    }
+
+    extractStarsFromGitHubHtml(html = '') {
+        const content = String(html || '');
+        if (!content) return null;
+
+        const titleMatch = content.match(/id="repo-stars-counter-star"[^>]*title="([^"]+)"/i);
+        if (titleMatch) {
+            const stars = this.parseCompactNumber(titleMatch[1]);
+            if (typeof stars === 'number' && Number.isFinite(stars) && stars >= 0) return stars;
+        }
+
+        const ariaMatch = content.match(
+            /id="repo-stars-counter-star"[^>]*aria-label="([^"]+)"/i
+        );
+        if (ariaMatch) {
+            const numberLike = ariaMatch[1].match(/[\d,.]+\s*[kmb]?/i);
+            if (numberLike) {
+                const stars = this.parseCompactNumber(numberLike[0]);
+                if (typeof stars === 'number' && Number.isFinite(stars) && stars >= 0) return stars;
+            }
+        }
+
+        const textMatch = content.match(/id="repo-stars-counter-star"[^>]*>([^<]+)</i);
+        if (textMatch) {
+            const stars = this.parseCompactNumber(textMatch[1]);
+            if (typeof stars === 'number' && Number.isFinite(stars) && stars >= 0) return stars;
+        }
+
+        return null;
+    }
+
+    async fetchGitHubRepoStarsFromHtml(repoFullName) {
+        const url = `https://github.com/${repoFullName}`;
+        const controller = new AbortController();
+        const timer = setTimeout(() => controller.abort(), GITHUB_API_TIMEOUT_MS);
+        try {
+            const response = await fetch(url, {
+                method: 'GET',
+                headers: {
+                    'User-Agent': 'doraemon-skills-market',
+                    Accept: 'text/html',
+                },
+                signal: controller.signal,
+            });
+            if (!response.ok) {
+                this.ctx.logger.warn(
+                    `[skills] HTML兜底获取 stars 失败: ${repoFullName}, status=${response.status}`
+                );
+                return null;
+            }
+            const html = await response.text();
+            return this.extractStarsFromGitHubHtml(html);
+        } catch (error) {
+            this.ctx.logger.warn(
+                `[skills] HTML兜底获取 stars 异常: ${repoFullName}, ${error.message}`
+            );
+            return null;
+        } finally {
+            clearTimeout(timer);
+        }
+    }
+
     async fetchGitHubRepoStars(repoFullName) {
         if (!repoFullName) return null;
         const url = `https://api.github.com/repos/${repoFullName}`;
@@ -738,6 +855,10 @@ class SkillsService extends Service {
                 this.ctx.logger.warn(
                     `[skills] 获取 GitHub stars 失败: ${repoFullName}, status=${response.status}`
                 );
+                // GitHub API 限流时，尝试从仓库页面兜底解析 stars。
+                if (response.status === 403 || response.status === 429) {
+                    return await this.fetchGitHubRepoStarsFromHtml(repoFullName);
+                }
                 return null;
             }
             const data = await response.json();

From 47fa1281d62035d963a747106328ab6d4b6ea0c3 Mon Sep 17 00:00:00 2001
From: huaiju <huaiju@dtstack.com>
Date: Mon, 23 Feb 2026 21:41:45 +0800
Subject: [PATCH 18/43] feat: remove favorite action and polish copy button
 style

---
 app/web/pages/skills/detail/index.tsx  | 12 ++----------
 app/web/pages/skills/detail/style.scss | 22 +++++++++++++++++++++-
 2 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/app/web/pages/skills/detail/index.tsx b/app/web/pages/skills/detail/index.tsx
index f9e6241..7080008 100644
--- a/app/web/pages/skills/detail/index.tsx
+++ b/app/web/pages/skills/detail/index.tsx
@@ -6,8 +6,6 @@ import {
     CopyOutlined,
     DownloadOutlined,
     FolderOpenOutlined,
-    HeartFilled,
-    HeartOutlined,
     LinkOutlined,
     ReadOutlined,
     ShareAltOutlined,
@@ -193,7 +191,6 @@ const SkillDetail: React.FC<any> = ({ history, match }) => {
     const [selectedFilePath, setSelectedFilePath] = useState('');
     const [fileContent, setFileContent] = useState<SkillFileContent | null>(null);
     const [installRuntime, setInstallRuntime] = useState<InstallRuntime>('npx');
-    const [favorited, setFavorited] = useState(false);
 
     const fileTreeData = useMemo(() => buildFileTreeData(detail?.fileList || []), [detail?.fileList]);
     const sourceUrl = useMemo(() => normalizeSourceUrl(detail?.sourceRepo || ''), [detail?.sourceRepo]);
@@ -488,6 +485,7 @@ const SkillDetail: React.FC<any> = ({ history, match }) => {
                             <code>{installCommand || '暂无可用安装命令'}</code>
                             <Button
                                 type="text"
+                                className="command-copy-btn"
                                 icon={<CopyOutlined />}
                                 onClick={() =>
                                     copyToClipboard(installCommand || '', '安装命令已复制到剪贴板')
@@ -511,6 +509,7 @@ const SkillDetail: React.FC<any> = ({ history, match }) => {
                                 <code>{wgetCommand || `wget "${downloadPath}" -O ${archiveFileName}`}</code>
                                 <Button
                                     type="text"
+                                    className="command-copy-btn"
                                     icon={<CopyOutlined />}
                                     onClick={() =>
                                         copyToClipboard(
@@ -536,13 +535,6 @@ const SkillDetail: React.FC<any> = ({ history, match }) => {
                             >
                                 源码跳转
                             </Button>
-                            <Button
-                                block
-                                icon={favorited ? <HeartFilled /> : <HeartOutlined />}
-                                onClick={() => setFavorited(!favorited)}
-                            >
-                                {favorited ? '已收藏' : '收藏'}
-                            </Button>
                             <Button
                                 block
                                 icon={<ShareAltOutlined />}
diff --git a/app/web/pages/skills/detail/style.scss b/app/web/pages/skills/detail/style.scss
index 2a015fc..1d6543e 100644
--- a/app/web/pages/skills/detail/style.scss
+++ b/app/web/pages/skills/detail/style.scss
@@ -129,7 +129,7 @@
     }
     .command-block {
         display: flex;
-        align-items: flex-start;
+        align-items: stretch;
         justify-content: space-between;
         gap: 8px;
         padding: 10px 12px;
@@ -142,6 +142,26 @@
             word-break: break-all;
             color: #1F2D3D;
         }
+        .command-copy-btn {
+            flex: 0 0 auto;
+            align-self: center;
+            min-width: 40px;
+            height: 40px;
+            border: 1px solid #D7E1EC;
+            border-radius: 8px;
+            background: #FFF;
+            color: #1F2D3D;
+            &:hover,
+            &:focus {
+                color: #2F7BFF;
+                border-color: #2F7BFF;
+                background: #F4F9FF;
+            }
+            &[disabled] {
+                border-color: #E5E7EB;
+                background: #F8FAFC;
+            }
+        }
     }
     .related-card-list {
         .related-item-card {

From 7c636f141bd8313420ebcb2ccae57eb41ca8b234 Mon Sep 17 00:00:00 2001
From: huaiju <huaiju@dtstack.com>
Date: Mon, 23 Feb 2026 22:25:39 +0800
Subject: [PATCH 19/43] fix: clamp card description to prevent layout overlap

---
 app/web/pages/skills/index.tsx  |  2 +-
 app/web/pages/skills/style.scss | 17 +++++++++++++++--
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/app/web/pages/skills/index.tsx b/app/web/pages/skills/index.tsx
index 34085eb..b570b94 100644
--- a/app/web/pages/skills/index.tsx
+++ b/app/web/pages/skills/index.tsx
@@ -208,7 +208,7 @@ const SkillsMarket: React.FC<any> = ({ history }) => {
                                                 <StarOutlined /> {skill.stars || 0}
                                             </span>
                                         </div>
-                                        <Paragraph className="skill-desc" ellipsis={{ rows: 3 }}>
+                                        <Paragraph className="skill-desc">
                                             {skill.description || '暂无描述'}
                                         </Paragraph>
                                         <div className="meta-row">
diff --git a/app/web/pages/skills/style.scss b/app/web/pages/skills/style.scss
index d9f1704..4e6de19 100644
--- a/app/web/pages/skills/style.scss
+++ b/app/web/pages/skills/style.scss
@@ -35,6 +35,11 @@
         height: 100%;
         border-radius: 10px;
         border: 1px solid #EDF2F7;
+        .ant-card-body {
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+        }
         .card-header {
             display: flex;
             align-items: center;
@@ -51,9 +56,16 @@
             font-weight: 600;
         }
         .skill-desc {
-            min-height: 66px;
             margin-bottom: 12px;
             color: #475467;
+            line-height: 1.6;
+            min-height: calc(1.6em * 3);
+            max-height: calc(1.6em * 3);
+            overflow: hidden;
+            display: -webkit-box;
+            -webkit-line-clamp: 3;
+            -webkit-box-orient: vertical;
+            word-break: break-word;
         }
         .meta-row {
             display: flex;
@@ -73,7 +85,8 @@
             display: flex;
             align-items: center;
             justify-content: flex-start;
-            margin-top: 6px;
+            margin-top: auto;
+            padding-top: 6px;
             gap: 8px;
         }
     }

From 61d0dfce2c19dd4481d208edf317cd2fa9e084a3 Mon Sep 17 00:00:00 2001
From: huaiju <huaiju@dtstack.com>
Date: Mon, 23 Feb 2026 22:32:20 +0800
Subject: [PATCH 20/43] fix: increase left padding for search input

---
 app/web/pages/skills/style.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/app/web/pages/skills/style.scss b/app/web/pages/skills/style.scss
index 4e6de19..73fe7f8 100644
--- a/app/web/pages/skills/style.scss
+++ b/app/web/pages/skills/style.scss
@@ -26,6 +26,12 @@
         .keyword-search {
             width: 620px;
             max-width: 100%;
+            .ant-input-group > .ant-input-affix-wrapper:not(:last-child) {
+                padding-left: 14px;
+            }
+            .ant-input-group > .ant-input-affix-wrapper:not(:last-child) .ant-input {
+                padding-left: 0;
+            }
         }
         .import-btn {
             min-width: 100px;

From 04f4cd1c0a934a04e8dbaf138da0c38a919afabd Mon Sep 17 00:00:00 2001
From: huaiju <huaiju@dtstack.com>
Date: Tue, 24 Feb 2026 14:25:24 +0800
Subject: [PATCH 21/43] feat: add db models for skills source storage

---
 app/model/skills_file.js   |  80 ++++++++++++++++++++++++++++
 app/model/skills_item.js   | 106 +++++++++++++++++++++++++++++++++++++
 app/model/skills_source.js |  96 +++++++++++++++++++++++++++++++++
 3 files changed, 282 insertions(+)
 create mode 100644 app/model/skills_file.js
 create mode 100644 app/model/skills_item.js
 create mode 100644 app/model/skills_source.js

diff --git a/app/model/skills_file.js b/app/model/skills_file.js
new file mode 100644
index 0000000..614d793
--- /dev/null
+++ b/app/model/skills_file.js
@@ -0,0 +1,80 @@
+module.exports = (app) => {
+    const { INTEGER, STRING, TEXT, DATE, TINYINT } = app.Sequelize;
+
+    const SkillsFile = app.model.define(
+        'skills_file',
+        {
+            id: {
+                type: INTEGER,
+                primaryKey: true,
+                autoIncrement: true,
+            },
+            skill_id: {
+                type: INTEGER,
+                allowNull: false,
+                comment: 'skills_items.id',
+            },
+            file_path: {
+                type: STRING(1000),
+                allowNull: false,
+                comment: '文件相对路径',
+            },
+            language: {
+                type: STRING(64),
+                allowNull: false,
+                defaultValue: 'text',
+            },
+            size: {
+                type: INTEGER,
+                allowNull: false,
+                defaultValue: 0,
+            },
+            is_binary: {
+                type: TINYINT,
+                allowNull: false,
+                defaultValue: 0,
+            },
+            encoding: {
+                type: STRING(16),
+                allowNull: false,
+                defaultValue: 'utf8',
+            },
+            content: {
+                type: TEXT('long'),
+                comment: '文本内容或base64内容',
+            },
+            updated_at_remote: {
+                type: DATE,
+                comment: '源仓库文件更新时间',
+            },
+            is_delete: {
+                type: TINYINT,
+                allowNull: false,
+                defaultValue: 0,
+            },
+            created_at: {
+                type: DATE,
+                allowNull: false,
+                defaultValue: app.Sequelize.literal('CURRENT_TIMESTAMP'),
+            },
+            updated_at: {
+                type: DATE,
+                allowNull: false,
+                defaultValue: app.Sequelize.literal('CURRENT_TIMESTAMP'),
+            },
+        },
+        {
+            freezeTableName: true,
+            tableName: 'skills_files',
+            timestamps: true,
+            createdAt: 'created_at',
+            updatedAt: 'updated_at',
+            indexes: [
+                { fields: ['skill_id'] },
+                { unique: true, fields: ['skill_id', 'file_path'] },
+            ],
+        }
+    );
+
+    return SkillsFile;
+};
diff --git a/app/model/skills_item.js b/app/model/skills_item.js
new file mode 100644
index 0000000..26fc209
--- /dev/null
+++ b/app/model/skills_item.js
@@ -0,0 +1,106 @@
+module.exports = (app) => {
+    const { INTEGER, STRING, TEXT, DATE, TINYINT } = app.Sequelize;
+
+    const SkillsItem = app.model.define(
+        'skills_item',
+        {
+            id: {
+                type: INTEGER,
+                primaryKey: true,
+                autoIncrement: true,
+            },
+            source_id: {
+                type: INTEGER,
+                allowNull: false,
+                comment: '来源记录ID',
+            },
+            slug: {
+                type: STRING(255),
+                allowNull: false,
+                unique: true,
+                comment: '详情页唯一标识',
+            },
+            name: {
+                type: STRING(255),
+                allowNull: false,
+            },
+            description: {
+                type: TEXT,
+            },
+            category: {
+                type: STRING(64),
+                allowNull: false,
+                defaultValue: '通用',
+            },
+            tags: {
+                type: TEXT('long'),
+                comment: 'JSON字符串数组',
+            },
+            allowed_tools: {
+                type: TEXT('long'),
+                comment: 'JSON字符串数组',
+            },
+            stars: {
+                type: INTEGER,
+                allowNull: false,
+                defaultValue: 0,
+            },
+            updated_at_remote: {
+                type: DATE,
+                comment: '源仓库文件更新时间',
+            },
+            source_repo: {
+                type: STRING(1000),
+                comment: '仓库地址',
+            },
+            source_path: {
+                type: STRING(1000),
+                comment: '仓库内 skill 相对路径',
+            },
+            skill_md: {
+                type: TEXT('long'),
+                comment: 'SKILL.md 原文',
+            },
+            install_command: {
+                type: TEXT,
+                comment: '推荐安装命令',
+            },
+            file_count: {
+                type: INTEGER,
+                allowNull: false,
+                defaultValue: 0,
+            },
+            is_delete: {
+                type: TINYINT,
+                allowNull: false,
+                defaultValue: 0,
+            },
+            created_at: {
+                type: DATE,
+                allowNull: false,
+                defaultValue: app.Sequelize.literal('CURRENT_TIMESTAMP'),
+            },
+            updated_at: {
+                type: DATE,
+                allowNull: false,
+                defaultValue: app.Sequelize.literal('CURRENT_TIMESTAMP'),
+            },
+        },
+        {
+            freezeTableName: true,
+            tableName: 'skills_items',
+            timestamps: true,
+            createdAt: 'created_at',
+            updatedAt: 'updated_at',
+            indexes: [
+                { unique: true, fields: ['slug'] },
+                { fields: ['source_id'] },
+                { fields: ['category'] },
+                { fields: ['stars'] },
+                { fields: ['updated_at_remote'] },
+            ],
+        }
+    );
+
+    return SkillsItem;
+};
diff --git a/app/model/skills_source.js b/app/model/skills_source.js
new file mode 100644
index 0000000..183fc66
--- /dev/null
+++ b/app/model/skills_source.js
@@ -0,0 +1,96 @@
+module.exports = (app) => {
+    const { INTEGER, STRING, TEXT, DATE, TINYINT } = app.Sequelize;
+
+    const SkillsSource = app.model.define(
+        'skills_source',
+        {
+            id: {
+                type: INTEGER,
+                primaryKey: true,
+                autoIncrement: true,
+            },
+            source_url: {
+                type: STRING(1000),
+                allowNull: false,
+                unique: true,
+                comment: '用户输入的来源地址',
+            },
+            source_type: {
+                type: STRING(32),
+                allowNull: false,
+                defaultValue: 'git',
+                comment: '来源类型 github/gitlab/git/local',
+            },
+            clone_url: {
+                type: STRING(1000),
+                allowNull: false,
+                comment: '用于 clone 的仓库地址',
+            },
+            source_repo: {
+                type: STRING(1000),
+                allowNull: false,
+                comment: '用于安装命令展示的仓库地址',
+            },
+            ref: {
+                type: STRING(255),
+                comment: '分支或标签',
+            },
+            subpath: {
+                type: STRING(1000),
+                comment: '仓库内相对子目录',
+            },
+            repo_host: {
+                type: STRING(255),
+                comment: '仓库域名',
+            },
+            repo_path: {
+                type: STRING(500),
+                comment: '仓库路径 owner/repo 或 group/subgroup/repo',
+            },
+            sync_status: {
+                type: STRING(32),
+                allowNull: false,
+                defaultValue: 'idle',
+                comment: '同步状态 idle/syncing/failed',
+            },
+            sync_error: {
+                type: TEXT,
+                comment: '最近一次同步错误',
+            },
+            last_synced_at: {
+                type: DATE,
+                comment: '最近同步时间',
+            },
+            is_delete: {
+                type: TINYINT,
+                allowNull: false,
+                defaultValue: 0,
+            },
+            created_at: {
+                type: DATE,
+                allowNull: false,
+                defaultValue: app.Sequelize.literal('CURRENT_TIMESTAMP'),
+            },
+            updated_at: {
+                type: DATE,
+                allowNull: false,
+                defaultValue: app.Sequelize.literal('CURRENT_TIMESTAMP'),
+            },
+        },
+        {
+            freezeTableName: true,
+            tableName: 'skills_sources',
+            timestamps: true,
+            createdAt: 'created_at',
+            updatedAt: 'updated_at',
+            indexes: [
+                { unique: true, fields: ['source_url'] },
+                { fields: ['repo_host'] },
+                { fields: ['repo_path'] },
+                { fields: ['sync_status'] },
+            ],
+        }
+    );
+
+    return SkillsSource;
+};

From 8cd209e0582008d49a6328c321de4b17faf27af7 Mon Sep 17 00:00:00 2001
From: huaiju <huaiju@dtstack.com>
Date: Tue, 24 Feb 2026 18:02:11 +0800
Subject: [PATCH 22/43] feat: migrate import and read flow to db storage

---
 app/service/skills.js | 1572 +++++++++++++++++++++++++++--------------
 1 file changed, 1045 insertions(+), 527 deletions(-)

diff --git a/app/service/skills.js b/app/service/skills.js
index e40f8eb..4eaf803 100644
--- a/app/service/skills.js
+++ b/app/service/skills.js
@@ -2,16 +2,21 @@ const Service = require('egg').Service;
 const AdmZip = require('adm-zip');
 const { spawn } = require('child_process');
 const fs = require('fs');
+const os = require('os');
 const path = require('path');
 const fetch = require('node-fetch');
 
 const CACHE_TTL_MS = 60 * 1000;
-const MAX_FILE_LIST_COUNT = 300;
+const MAX_FILE_LIST_COUNT = 2000;
 const MAX_FILE_CONTENT_SIZE = 2 * 1024 * 1024;
-const IMPORT_TIMEOUT_MS = 60 * 1000;
+const MAX_STORED_FILE_CONTENT_SIZE = 8 * 1024 * 1024;
+const GIT_COMMAND_TIMEOUT_MS = 120 * 1000;
 const GITHUB_API_TIMEOUT_MS = 10 * 1000;
 const MAX_PLATFORM_TAGS = 5;
 const MAX_TAG_LENGTH = 20;
+const DISCOVER_DEPTH_LIMIT = 2;
+const DISCOVER_MAX_DIR_COUNT = 3000;
+
 const SKILL_CATEGORY_OPTIONS = [
     '通用',
     '前端',
@@ -63,18 +68,16 @@ class SkillsService extends Service {
     constructor(ctx) {
         super(ctx);
         this.skillCache = null;
-        this.skillSourceCache = {};
+        this.storageReady = false;
+        this.storageReadyPromise = null;
     }
 
     getSkillCategoryOptions() {
         return [ ...SKILL_CATEGORY_OPTIONS ];
     }
 
-    getSkillRootDirs() {
-        const homeDir = process.env.HOME || '';
-        const codexHome = process.env.CODEX_HOME || path.join(homeDir, '.codex');
-        const agentHome = path.join(homeDir, '.agents');
-        return [path.join(codexHome, 'skills'), path.join(agentHome, 'skills')];
+    invalidateCache() {
+        this.skillCache = null;
     }
 
     isCacheValid() {
@@ -85,161 +88,383 @@ class SkillsService extends Service {
         );
     }
 
+    async ensureStorageReady() {
+        if (this.storageReady) return;
+        if (this.storageReadyPromise) {
+            await this.storageReadyPromise;
+            return;
+        }
+
+        this.storageReadyPromise = (async () => {
+            const { SkillsSource, SkillsItem, SkillsFile } = this.app.model;
+            if (!SkillsSource || !SkillsItem || !SkillsFile) {
+                this.ctx.throw(500, 'Skills 数据模型未加载');
+            }
+
+            await SkillsSource.sync();
+            await SkillsItem.sync();
+            await SkillsFile.sync();
+            this.storageReady = true;
+        })();
+
+        try {
+            await this.storageReadyPromise;
+        } finally {
+            this.storageReadyPromise = null;
+        }
+    }
+
+    parseJsonArray(value) {
+        if (!value) return [];
+        if (Array.isArray(value)) return value;
+        if (typeof value !== 'string') return [];
+
+        try {
+            const parsed = JSON.parse(value);
+            return Array.isArray(parsed) ? parsed.map((item) => String(item)) : [];
+        } catch (error) {
+            return [];
+        }
+    }
+
+    toPublicSkill(skill) {
+        return {
+            slug: skill.slug,
+            name: skill.name,
+            description: skill.description,
+            category: skill.category,
+            tags: skill.tags,
+            allowedTools: skill.allowedTools,
+            stars: skill.stars,
+            updatedAt: skill.updatedAt,
+            sourceRepo: skill.sourceRepo,
+            sourcePath: skill.sourcePath,
+            installCommand: skill.installCommand,
+        };
+    }
+
+    toSkillDto(row) {
+        return {
+            id: row.id,
+            sourceId: row.source_id,
+            slug: row.slug,
+            name: row.name || '',
+            description: row.description || '',
+            category: row.category || '通用',
+            tags: this.parseJsonArray(row.tags),
+            allowedTools: this.parseJsonArray(row.allowed_tools),
+            stars: Number(row.stars) || 0,
+            updatedAt: (row.updated_at_remote || row.updated_at || row.created_at || new Date()).toISOString(),
+            sourceRepo: row.source_repo || '',
+            sourcePath: row.source_path || '',
+            skillMd: row.skill_md || '',
+            installCommand: row.install_command || '',
+            fileCount: Number(row.file_count) || 0,
+        };
+    }
+
     async ensureSkillCache() {
         if (this.isCacheValid()) return this.skillCache;
 
-        const rootDirs = this.getSkillRootDirs();
-        const skills = [];
-
-        rootDirs.forEach((rootDir) => {
-            if (!fs.existsSync(rootDir)) return;
-            const skillFiles = this.findSkillFiles(rootDir);
-            const sourceMap = this.getSkillSourceMapByRoot(rootDir);
-            skillFiles.forEach((skillFilePath) => {
-                try {
-                    const skill = this.parseSkillMeta(skillFilePath, rootDir, sourceMap);
-                    if (skill) {
-                        skills.push(skill);
-                    }
-                } catch (error) {
-                    this.ctx.logger.warn(
-                        `[skills] 解析技能失败: ${skillFilePath}, ${error.message}`
-                    );
-                }
-            });
+        await this.ensureStorageReady();
+        const { SkillsItem } = this.app.model;
+        const rows = await SkillsItem.findAll({
+            where: { is_delete: 0 },
+            order: [
+                [ 'stars', 'DESC' ],
+                [ 'updated_at_remote', 'DESC' ],
+                [ 'updated_at', 'DESC' ],
+                [ 'id', 'DESC' ],
+            ],
         });
 
+        const skills = rows.map((row) => this.toSkillDto(row));
         const categories = this.getSkillCategoryOptions();
         this.skillCache = {
             loadedAt: Date.now(),
             skills,
             categories,
+            bySlug: new Map(skills.map((item) => [ item.slug, item ])),
         };
+
         return this.skillCache;
     }
 
-    findSkillFiles(rootDir) {
-        const result = [];
-        const stack = [rootDir];
+    getSkillList(params = {}) {
+        const {
+            keyword = '',
+            sortBy = 'stars',
+            category = '',
+            pageNum = 1,
+            pageSize = 20,
+        } = params;
 
-        while (stack.length > 0) {
-            const currentDir = stack.pop();
-            let entries = [];
-            try {
-                entries = fs.readdirSync(currentDir, { withFileTypes: true });
-            } catch (error) {
-                continue;
-            }
+        const safePageNum = Math.max(parseInt(pageNum, 10) || 1, 1);
+        const safePageSize = Math.max(parseInt(pageSize, 10) || 20, 1);
+        const { skills, categories } = this.skillCache;
 
-            entries.forEach((entry) => {
-                const fullPath = path.join(currentDir, entry.name);
-                if (entry.isDirectory()) {
-                    if (entry.name === 'node_modules' || entry.name === '.git') return;
-                    stack.push(fullPath);
-                    return;
-                }
-                if (entry.isFile() && entry.name === 'SKILL.md') {
-                    result.push(fullPath);
-                }
-            });
+        let list = [ ...skills ];
+        if (keyword) {
+            const value = String(keyword).toLowerCase();
+            list = list.filter(
+                (item) =>
+                    item.name.toLowerCase().includes(value) ||
+                    item.description.toLowerCase().includes(value) ||
+                    item.sourceRepo.toLowerCase().includes(value) ||
+                    item.tags.some((tag) => tag.toLowerCase().includes(value))
+            );
         }
 
-        return result;
+        if (category) {
+            list = list.filter((item) => item.category === category);
+        }
+
+        list.sort((a, b) => {
+            if (sortBy === 'recent') {
+                return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime();
+            }
+            if (b.stars !== a.stars) return b.stars - a.stars;
+            return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime();
+        });
+
+        const total = list.length;
+        const offset = (safePageNum - 1) * safePageSize;
+        const pageList = list.slice(offset, offset + safePageSize).map((item) => this.toPublicSkill(item));
+
+        return {
+            list: pageList,
+            total,
+            pageNum: safePageNum,
+            pageSize: safePageSize,
+            categories,
+        };
     }
 
-    parseSkillMeta(skillFilePath, rootDir, sourceMap = {}) {
-        const content = fs.readFileSync(skillFilePath, 'utf8');
-        const stat = fs.statSync(skillFilePath);
-        const skillDir = path.dirname(skillFilePath);
-        const relativeDir = path.relative(rootDir, skillDir);
-        const slug = relativeDir.split(path.sep).join('-').toLowerCase();
-        const frontmatter = this.parseFrontmatter(content);
+    async querySkillList(params = {}) {
+        await this.ensureSkillCache();
+        return this.getSkillList(params);
+    }
 
-        const packageJsonPath = path.join(skillDir, 'package.json');
-        let packageJson = {};
-        if (fs.existsSync(packageJsonPath)) {
-            try {
-                packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
-            } catch (error) {
-                packageJson = {};
-            }
+    getSkillBySlug(slug) {
+        const value = String(slug || '').trim();
+        if (!value) {
+            this.ctx.throw(400, '缺少技能标识');
         }
 
-        const metaJsonPath = path.join(skillDir, '_meta.json');
-        let metaJson = {};
-        if (fs.existsSync(metaJsonPath)) {
-            try {
-                metaJson = JSON.parse(fs.readFileSync(metaJsonPath, 'utf8'));
-            } catch (error) {
-                metaJson = {};
-            }
+        const skill = this.skillCache.bySlug.get(value);
+        if (!skill) {
+            this.ctx.throw(404, '技能不存在');
         }
 
-        const name = frontmatter.name || path.basename(skillDir);
-        const description = frontmatter.description || this.extractDescription(content);
-        const categoryByPath = this.getCategoryFromRelativePath(relativeDir);
-        const category = this.normalizeCategory(metaJson.category || categoryByPath);
-        const tags = this.normalizePlatformTags(metaJson.platformTags || metaJson.tags);
-        const allowedTools = this.parseArrayLike(frontmatter['allowed-tools']);
-        const stars = Number(metaJson.stars || metaJson.star || metaJson.github_stars || 0);
-        const skillDirName = path.basename(skillDir);
-        const sourceRepo =
-            this.extractSourceRepo(packageJson) ||
-            String(metaJson.sourceRepo || '').trim() ||
-            String(sourceMap[skillDirName] || sourceMap[name] || '').trim();
+        return skill;
+    }
 
-        const installCommand = this.getInstallCommand({
-            sourceRepo,
-            name,
-            skillDir,
+    async getSkillDetail(slug) {
+        await this.ensureSkillCache();
+        const skill = this.getSkillBySlug(slug);
+        const { SkillsFile } = this.app.model;
+
+        const rows = await SkillsFile.findAll({
+            where: {
+                skill_id: skill.id,
+                is_delete: 0,
+            },
+            attributes: [ 'file_path' ],
+            order: [ [ 'file_path', 'ASC' ] ],
+            limit: MAX_FILE_LIST_COUNT,
         });
 
         return {
-            slug,
-            name,
-            description,
-            category,
-            tags,
-            allowedTools,
-            stars: Number.isNaN(stars) ? 0 : stars,
-            updatedAt: stat.mtime.toISOString(),
-            sourceRepo,
-            sourcePath: skillDir,
-            skillFilePath,
-            installCommand,
+            ...this.toPublicSkill(skill),
+            skillMd: skill.skillMd,
+            fileList: rows.map((row) => row.file_path),
         };
     }
 
-    parseFrontmatter(content) {
-        const result = {};
-        if (!content.startsWith('---')) return result;
-        const endIndex = content.indexOf('\n---', 3);
-        if (endIndex === -1) return result;
+    async getSkillFileContent(slug, filePath) {
+        await this.ensureSkillCache();
+        const skill = this.getSkillBySlug(slug);
+        const normalizedPath = this.normalizeRelativePath(filePath);
+        const { SkillsFile } = this.app.model;
 
-        const frontmatterText = content.slice(3, endIndex).trim();
-        const lines = frontmatterText.split('\n');
-        lines.forEach((line) => {
-            const match = line.match(/^([a-zA-Z0-9_-]+):\s*(.*)$/);
-            if (!match) return;
-            const key = match[1];
-            let value = match[2].trim();
-            if (
-                (value.startsWith('"') && value.endsWith('"')) ||
-                (value.startsWith("'") && value.endsWith("'"))
-            ) {
-                value = value.slice(1, -1);
-            }
-            result[key] = value;
+        const row = await SkillsFile.findOne({
+            where: {
+                skill_id: skill.id,
+                file_path: normalizedPath,
+                is_delete: 0,
+            },
         });
-        return result;
+
+        if (!row) {
+            this.ctx.throw(404, '文件不存在');
+        }
+
+        if (Number(row.size) > MAX_FILE_CONTENT_SIZE || !row.content) {
+            this.ctx.throw(413, '文件过大，无法在线预览');
+        }
+
+        return {
+            slug: skill.slug,
+            path: row.file_path,
+            language: row.language || 'text',
+            size: Number(row.size) || 0,
+            readonly: true,
+            isBinary: Boolean(row.is_binary),
+            encoding: row.encoding || 'utf8',
+            content: row.content || '',
+        };
     }
 
-    extractDescription(content) {
-        const stripped = content
-            .split('\n')
-            .map((line) => line.trim())
-            .filter((line) => line && !line.startsWith('#') && !line.startsWith('---'));
-        return stripped[0] || '';
+    async getSkillArchive(slug) {
+        await this.ensureSkillCache();
+        const skill = this.getSkillBySlug(slug);
+        const { SkillsFile } = this.app.model;
+        const rows = await SkillsFile.findAll({
+            where: {
+                skill_id: skill.id,
+                is_delete: 0,
+            },
+            order: [ [ 'file_path', 'ASC' ] ],
+            limit: MAX_FILE_LIST_COUNT,
+        });
+
+        const zip = new AdmZip();
+        const rootFolder = this.sanitizeFileName(skill.name || skill.slug || 'skill');
+        rows.forEach((row) => {
+            const safeRelativePath = this.normalizeRelativePath(row.file_path);
+            const zipPath = path.posix.join(rootFolder, safeRelativePath);
+            const buffer = this.decodeStoredFileContent(row.content, Boolean(row.is_binary));
+            zip.addFile(zipPath, buffer);
+        });
+
+        return {
+            fileName: `${rootFolder}.zip`,
+            content: zip.toBuffer(),
+        };
+    }
+
+    decodeStoredFileContent(content, isBinary) {
+        if (!content) return Buffer.from('');
+        if (isBinary) {
+            try {
+                return Buffer.from(content, 'base64');
+            } catch (error) {
+                return Buffer.from('');
+            }
+        }
+        return Buffer.from(content, 'utf8');
+    }
+
+    normalizeRelativePath(filePath) {
+        const value = String(filePath || '').trim();
+        if (!value) {
+            this.ctx.throw(400, '缺少文件路径');
+        }
+
+        const normalized = path
+            .normalize(value)
+            .replace(/\\/g, '/')
+            .replace(/^\/+/, '');
+
+        if (!normalized || normalized === '.' || normalized.startsWith('..')) {
+            this.ctx.throw(400, '非法文件路径');
+        }
+
+        return normalized;
+    }
+
+    isLikelyBinary(buffer) {
+        if (!buffer || buffer.length === 0) return false;
+        const sampleLength = Math.min(buffer.length, 1024);
+        for (let i = 0; i < sampleLength; i += 1) {
+            if (buffer[i] === 0) return true;
+        }
+        return false;
+    }
+
+    sanitizeFileName(fileName) {
+        return String(fileName || 'skill')
+            .trim()
+            .replace(/[^a-zA-Z0-9._-]+/g, '-')
+            .replace(/^-+|-+$/g, '')
+            .toLowerCase();
+    }
+
+    sanitizeSlugSegment(value) {
+        return String(value || '')
+            .toLowerCase()
+            .replace(/[^a-z0-9]+/g, '-')
+            .replace(/^-+|-+$/g, '')
+            .replace(/-{2,}/g, '-');
+    }
+
+    hashString(value) {
+        let hash = 0;
+        const text = String(value || '');
+        for (let i = 0; i < text.length; i += 1) {
+            hash = (hash * 31 + text.charCodeAt(i)) >>> 0;
+        }
+        return hash.toString(16);
+    }
+
+    buildSkillSlug(sourceMeta, relativeSkillPath, skillName, usedSlugs = new Set()) {
+        const sourceKey = `${sourceMeta.repoHost || 'local'}-${sourceMeta.repoPath || sourceMeta.sourceUrl || ''}-${sourceMeta.ref || 'default'}`;
+        const relativeKey = String(relativeSkillPath || skillName || 'skill').replace(/\\/g, '/');
+        const base = this.sanitizeSlugSegment(`${sourceKey}-${relativeKey}`) || 'skill';
+        let slug = base;
+
+        if (slug.length > 220) {
+            slug = `${slug.slice(0, 200)}-${this.hashString(base).slice(0, 12)}`;
+        }
+
+        let index = 2;
+        while (usedSlugs.has(slug)) {
+            const suffix = `-${index}`;
+            const head = slug.length + suffix.length > 255 ? slug.slice(0, 255 - suffix.length) : slug;
+            slug = `${head}${suffix}`;
+            index += 1;
+        }
+
+        usedSlugs.add(slug);
+        return slug;
+    }
+
+    async getRelatedSkills(slug, limit = 6) {
+        await this.ensureSkillCache();
+        const target = this.skillCache.bySlug.get(String(slug || '').trim());
+        if (!target) {
+            this.ctx.throw(404, '技能不存在');
+        }
+
+        const targetTags = new Set((target.tags || []).map((item) => item.toLowerCase()));
+        const related = this.skillCache.skills
+            .filter((item) => item.slug !== target.slug)
+            .map((item) => {
+                const itemTags = (item.tags || []).map((tag) => tag.toLowerCase());
+                const overlap = itemTags.filter((tag) => targetTags.has(tag)).length;
+                const categoryScore = item.category === target.category ? 3 : 0;
+                const score = overlap * 10 + categoryScore + Math.min(item.stars, 10);
+                return { ...item, _score: score };
+            })
+            .filter((item) => item._score > 0)
+            .sort((a, b) => b._score - a._score || b.stars - a.stars)
+            .slice(0, Math.max(parseInt(limit, 10) || 6, 1))
+            .map((item) => {
+                const rest = { ...item };
+                delete rest._score;
+                return this.toPublicSkill(rest);
+            });
+
+        return related;
+    }
+
+    normalizeCategory(rawCategory) {
+        const category = String(rawCategory || '').trim();
+        if (!category) return '通用';
+        if (SKILL_CATEGORY_OPTIONS.includes(category)) {
+            return category;
+        }
+        return '其他';
     }
 
     parseArrayLike(value) {
@@ -268,305 +493,610 @@ class SkillsService extends Service {
             .filter(Boolean);
     }
 
-    getCategoryFromRelativePath(relativeDir) {
-        const parts = relativeDir.split(path.sep).filter(Boolean);
-        if (parts.length === 0) return '未分类';
-        if (parts.length === 1) return '通用';
-        return parts[0];
-    }
-
-    normalizeCategory(rawCategory) {
-        const category = String(rawCategory || '').trim();
-        if (!category) return '通用';
-        if (SKILL_CATEGORY_OPTIONS.includes(category)) {
-            return category;
-        }
-        return '其他';
-    }
-
     normalizePlatformTags(rawTags) {
         const values = this.parseArrayLike(rawTags)
             .map((item) => String(item || '').trim())
             .map((item) => item.replace(/\s+/g, ' '))
             .filter(Boolean)
             .map((item) => item.slice(0, MAX_TAG_LENGTH));
+
         return Array.from(new Set(values)).slice(0, MAX_PLATFORM_TAGS);
     }
 
-    extractSourceRepo(packageJson = {}) {
-        if (!packageJson.repository) return '';
-        if (typeof packageJson.repository === 'string') return packageJson.repository;
-        return packageJson.repository.url || '';
+    getInstallCommand({ sourceRepo, sourceUrl, name }) {
+        const source = String(sourceRepo || sourceUrl || '').trim();
+        if (!source) return '';
+        return `npx skills add ${source} --skill "${name}"`;
     }
 
-    getInstallCommand({ sourceRepo, name, skillDir }) {
-        if (sourceRepo) {
-            return `npx skills add ${sourceRepo} --skill "${name}"`;
+    extractDescription(content) {
+        const stripped = content
+            .split('\n')
+            .map((line) => line.trim())
+            .filter((line) => line && !line.startsWith('#') && !line.startsWith('---'));
+        return stripped[0] || '';
+    }
+
+    parseFrontmatter(content) {
+        const result = {};
+        const text = String(content || '');
+        const normalized = text.replace(/\r\n/g, '\n');
+        if (!normalized.startsWith('---\n')) return result;
+
+        const endMarkerIndex = normalized.indexOf('\n---\n', 4);
+        const endMarkerLength = 5;
+        if (endMarkerIndex === -1) return result;
+
+        const frontmatterText = normalized.slice(4, endMarkerIndex);
+        const lines = frontmatterText.split('\n');
+        let activeKey = '';
+
+        lines.forEach((line) => {
+            const keyMatch = line.match(/^([a-zA-Z0-9_-]+):\s*(.*)$/);
+            if (keyMatch) {
+                const key = keyMatch[1];
+                const rawValue = keyMatch[2].trim();
+                activeKey = key;
+
+                if (!rawValue) {
+                    result[key] = [];
+                    return;
+                }
+
+                if (
+                    (rawValue.startsWith('"') && rawValue.endsWith('"')) ||
+                    (rawValue.startsWith("'") && rawValue.endsWith("'"))
+                ) {
+                    result[key] = rawValue.slice(1, -1);
+                    return;
+                }
+
+                if (rawValue.startsWith('[') && rawValue.endsWith(']')) {
+                    result[key] = this.parseArrayLike(rawValue);
+                    return;
+                }
+
+                result[key] = rawValue;
+                return;
+            }
+
+            if (!activeKey) return;
+            const listMatch = line.match(/^\s*-\s+(.*)$/);
+            if (!listMatch) {
+                activeKey = '';
+                return;
+            }
+
+            const listValue = listMatch[1].trim().replace(/^['"]|['"]$/g, '');
+            if (!Array.isArray(result[activeKey])) {
+                result[activeKey] = [];
+            }
+            result[activeKey].push(listValue);
+        });
+
+        if (normalized.length >= endMarkerIndex + endMarkerLength) {
+            result.__body = normalized.slice(endMarkerIndex + endMarkerLength);
         }
-        return `mkdir -p "$CODEX_HOME/skills" && cp -R "${skillDir}" "$CODEX_HOME/skills/${name}"`;
+
+        return result;
     }
 
-    getSkillList(params = {}) {
-        const {
-            keyword = '',
-            sortBy = 'stars',
-            category = '',
-            pageNum = 1,
-            pageSize = 20,
-        } = params;
-        const safePageNum = Math.max(parseInt(pageNum, 10) || 1, 1);
-        const safePageSize = Math.max(parseInt(pageSize, 10) || 20, 1);
+    isLocalPathSource(source) {
+        const value = String(source || '').trim();
+        if (!value) return false;
+        if (/^(https?:\/\/|git@|ssh:\/\/)/i.test(value)) return false;
+        return (
+            value.startsWith('/') ||
+            value.startsWith('./') ||
+            value.startsWith('../') ||
+            value.startsWith('~/')
+        );
+    }
 
-        const { skills, categories } = this.skillCache;
-        let list = [...skills];
+    resolveLocalPath(source) {
+        const value = String(source || '').trim();
+        if (value.startsWith('~/')) {
+            const home = process.env.HOME || '';
+            return path.join(home, value.slice(2));
+        }
+        return path.resolve(value);
+    }
 
-        if (keyword) {
-            const value = String(keyword).toLowerCase();
-            list = list.filter(
-                (item) =>
-                    item.name.toLowerCase().includes(value) ||
-                    item.description.toLowerCase().includes(value) ||
-                    item.sourceRepo.toLowerCase().includes(value) ||
-                    item.tags.some((tag) => tag.toLowerCase().includes(value))
-            );
+    inferSourceType(hostname = '', pathSegments = []) {
+        const host = String(hostname || '').toLowerCase();
+        if (host.includes('github')) return 'github';
+        if (host.includes('gitlab')) return 'gitlab';
+        if (Array.isArray(pathSegments) && pathSegments.includes('-')) return 'gitlab';
+        return 'git';
+    }
+
+    parseSshGitSource(source) {
+        const match = String(source || '').trim().match(/^git@([^:]+):(.+?)(?:\.git)?$/i);
+        if (!match) return null;
+        const host = match[1];
+        const repoPath = match[2].replace(/^\/+|\/+$/g, '');
+        const sourceType = this.inferSourceType(host, repoPath.split('/'));
+
+        return {
+            sourceUrl: source,
+            sourceType,
+            cloneUrl: source,
+            sourceRepo: `https://${host}/${repoPath}`,
+            ref: '',
+            subpath: '',
+            repoHost: host,
+            repoPath,
+            originalAction: '',
+        };
+    }
+
+    async parseImportSource(source) {
+        const value = String(source || '').trim();
+        if (!value) {
+            this.ctx.throw(400, '缺少导入来源地址');
         }
 
-        if (category) {
-            list = list.filter((item) => item.category === category);
+        if (this.isLocalPathSource(value)) {
+            const absolutePath = this.resolveLocalPath(value);
+            if (!fs.existsSync(absolutePath)) {
+                this.ctx.throw(400, `本地路径不存在: ${absolutePath}`);
+            }
+
+            const stat = fs.statSync(absolutePath);
+            if (stat.isFile()) {
+                return {
+                    sourceUrl: value,
+                    sourceType: 'local',
+                    cloneUrl: path.dirname(absolutePath),
+                    sourceRepo: value,
+                    ref: '',
+                    subpath: path.basename(absolutePath),
+                    repoHost: 'local',
+                    repoPath: path.basename(path.dirname(absolutePath)),
+                    originalAction: 'file',
+                };
+            }
+
+            return {
+                sourceUrl: value,
+                sourceType: 'local',
+                cloneUrl: absolutePath,
+                sourceRepo: value,
+                ref: '',
+                subpath: '',
+                repoHost: 'local',
+                repoPath: path.basename(absolutePath),
+                originalAction: '',
+            };
         }
 
-        list.sort((a, b) => {
-            if (sortBy === 'recent') {
-                return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime();
+        const sshSource = this.parseSshGitSource(value);
+        if (sshSource) {
+            return sshSource;
+        }
+
+        let url;
+        try {
+            url = new URL(value);
+        } catch (error) {
+            this.ctx.throw(400, `来源地址格式无效: ${value}`);
+        }
+
+        const segments = url.pathname.split('/').filter(Boolean);
+        if (segments.length < 2) {
+            this.ctx.throw(400, `无法识别仓库地址: ${value}`);
+        }
+
+        let repoSegments = [];
+        let action = '';
+        let actionTail = [];
+
+        const dashIndex = segments.indexOf('-');
+        if (dashIndex > 0 && [ 'tree', 'blob' ].includes(segments[dashIndex + 1])) {
+            repoSegments = segments.slice(0, dashIndex);
+            action = segments[dashIndex + 1];
+            actionTail = segments.slice(dashIndex + 2);
+        } else if ([ 'tree', 'blob' ].includes(segments[2])) {
+            repoSegments = segments.slice(0, 2);
+            action = segments[2];
+            actionTail = segments.slice(3);
+        } else if (String(url.hostname || '').toLowerCase().includes('github')) {
+            repoSegments = segments.slice(0, 2);
+        } else {
+            repoSegments = segments;
+        }
+
+        if (repoSegments.length < 2) {
+            this.ctx.throw(400, `无法识别仓库路径: ${value}`);
+        }
+
+        const normalizedRepoSegments = [ ...repoSegments ];
+        normalizedRepoSegments[normalizedRepoSegments.length - 1] = normalizedRepoSegments[
+            normalizedRepoSegments.length - 1
+        ].replace(/\.git$/i, '');
+
+        const repoPath = normalizedRepoSegments.join('/');
+        const origin = `${url.protocol}//${url.host}`;
+        const cloneUrl = `${origin}/${repoPath}.git`;
+        let ref = '';
+        let subpath = '';
+
+        if (action && actionTail.length > 0) {
+            const resolved = await this.resolveRefAndSubpath(cloneUrl, actionTail, action);
+            ref = resolved.ref;
+            subpath = resolved.subpath;
+        }
+
+        return {
+            sourceUrl: value,
+            sourceType: this.inferSourceType(url.hostname, segments),
+            cloneUrl,
+            sourceRepo: `${origin}/${repoPath}`,
+            ref,
+            subpath,
+            repoHost: url.host,
+            repoPath,
+            originalAction: action,
+        };
+    }
+
+    async resolveRefAndSubpath(cloneUrl, tailSegments = [], action = '') {
+        if (!Array.isArray(tailSegments) || tailSegments.length === 0) {
+            return { ref: '', subpath: '' };
+        }
+
+        const branches = await this.listRemoteHeadRefs(cloneUrl);
+        const branchSet = new Set(branches);
+
+        for (let i = tailSegments.length; i >= 1; i -= 1) {
+            const candidateRef = tailSegments.slice(0, i).join('/');
+            if (branchSet.has(candidateRef)) {
+                return {
+                    ref: candidateRef,
+                    subpath: tailSegments.slice(i).join('/'),
+                };
             }
-            if (b.stars !== a.stars) return b.stars - a.stars;
-            return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime();
-        });
+        }
 
-        const total = list.length;
-        const offset = (safePageNum - 1) * safePageSize;
-        const pageList = list.slice(offset, offset + safePageSize);
+        if (action === 'tree' && tailSegments.length >= 2) {
+            return {
+                ref: tailSegments.join('/'),
+                subpath: '',
+            };
+        }
 
         return {
-            list: pageList,
-            total,
-            pageNum: safePageNum,
-            pageSize: safePageSize,
-            categories,
+            ref: tailSegments[0],
+            subpath: tailSegments.slice(1).join('/'),
         };
     }
 
-    async querySkillList(params = {}) {
-        await this.ensureSkillCache();
-        return this.getSkillList(params);
+    async listRemoteHeadRefs(cloneUrl) {
+        if (!cloneUrl) return [];
+        try {
+            const { stdout } = await this.runCommand(
+                'git',
+                [ 'ls-remote', '--heads', cloneUrl ],
+                GIT_COMMAND_TIMEOUT_MS
+            );
+            return String(stdout || '')
+                .split('\n')
+                .map((line) => line.trim())
+                .filter(Boolean)
+                .map((line) => {
+                    const match = line.match(/\s+refs\/heads\/(.+)$/);
+                    return match ? match[1] : '';
+                })
+                .filter(Boolean);
+        } catch (error) {
+            this.ctx.logger.warn(`[skills] 获取远端分支失败，使用兜底解析: ${error.message}`);
+            return [];
+        }
     }
 
-    async getSkillDetail(slug) {
-        await this.ensureSkillCache();
-        const skill = this.getSkillBySlug(slug);
+    async cloneSourceRepo(parsedSource, targetDir) {
+        if (parsedSource.sourceType === 'local') {
+            return;
+        }
+
+        const cloneArgs = [ 'clone', '--depth', '1' ];
+        if (parsedSource.ref) {
+            cloneArgs.push('--branch', parsedSource.ref);
+        }
+        cloneArgs.push(parsedSource.cloneUrl, targetDir);
 
-        const content = fs.readFileSync(skill.skillFilePath, 'utf8');
-        const fileList = this.listSkillFiles(skill.sourcePath);
+        try {
+            await this.runCommand('git', cloneArgs, GIT_COMMAND_TIMEOUT_MS);
+        } catch (error) {
+            if (!parsedSource.ref) {
+                throw error;
+            }
 
-        return {
-            ...skill,
-            skillMd: content,
-            fileList,
-        };
+            // 分支解析异常时回退默认分支，尽量提升兼容性。
+            const fallbackArgs = [ 'clone', '--depth', '1', parsedSource.cloneUrl, targetDir ];
+            await this.runCommand('git', fallbackArgs, GIT_COMMAND_TIMEOUT_MS);
+        }
     }
 
-    async getSkillFileContent(slug, filePath) {
-        await this.ensureSkillCache();
-        const skill = this.getSkillBySlug(slug);
-        const normalizedPath = this.normalizeRelativePath(filePath);
-        const rootPath = path.resolve(skill.sourcePath);
-        const targetPath = path.resolve(rootPath, normalizedPath);
+    resolveSelectedPath(repoDir, subpath = '') {
+        const rootPath = path.resolve(repoDir);
+        if (!subpath) {
+            return rootPath;
+        }
 
-        if (!this.isPathInsideRoot(rootPath, targetPath)) {
-            this.ctx.throw(400, '非法文件路径');
+        const normalizedSubpath = this.normalizeRelativePath(subpath);
+        const targetPath = path.resolve(rootPath, normalizedSubpath);
+        if (!this.isPathInsideRoot(rootPath, targetPath) && targetPath !== rootPath) {
+            this.ctx.throw(400, '来源子路径非法');
         }
 
         if (!fs.existsSync(targetPath)) {
-            this.ctx.throw(404, '文件不存在');
+            this.ctx.throw(400, `来源子路径不存在: ${normalizedSubpath}`);
         }
 
-        const stat = fs.statSync(targetPath);
-        if (!stat.isFile()) {
-            this.ctx.throw(400, '仅支持读取文件内容');
-        }
+        return targetPath;
+    }
 
-        if (stat.size > MAX_FILE_CONTENT_SIZE) {
-            this.ctx.throw(413, '文件过大，无法在线预览');
-        }
+    isPathInsideRoot(rootPath, targetPath) {
+        if (targetPath === rootPath) return true;
+        return targetPath.startsWith(`${rootPath}${path.sep}`);
+    }
 
-        const fileBuffer = fs.readFileSync(targetPath);
-        const isBinary = this.isLikelyBinary(fileBuffer);
-        const extension = path.extname(normalizedPath).toLowerCase();
+    containsSkillMd(dirPath) {
+        const target = path.join(dirPath, 'SKILL.md');
+        return fs.existsSync(target) && fs.statSync(target).isFile();
+    }
 
-        return {
-            slug: skill.slug,
-            path: normalizedPath,
-            language: EXTENSION_LANGUAGE_MAP[extension] || 'text',
-            size: stat.size,
-            readonly: true,
-            isBinary,
-            encoding: isBinary ? 'base64' : 'utf8',
-            content: isBinary ? fileBuffer.toString('base64') : fileBuffer.toString('utf8'),
-        };
+    shouldSkipDirName(dirName) {
+        return dirName === '.git' || dirName === 'node_modules' || dirName === '.idea' || dirName === '.vscode';
     }
 
-    async getSkillArchive(slug) {
-        await this.ensureSkillCache();
-        const skill = this.getSkillBySlug(slug);
-        const files = this.collectSkillFiles(skill.sourcePath);
-        const zip = new AdmZip();
-        const rootFolder = this.sanitizeFileName(skill.name || skill.slug || 'skill');
+    findSkillsRootDirs(baseDir, maxDepth = DISCOVER_DEPTH_LIMIT) {
+        const roots = [];
+        const queue = [ { dir: baseDir, depth: 0 } ];
+        const visited = new Set();
+        let visitCount = 0;
+
+        while (queue.length > 0) {
+            const { dir, depth } = queue.shift();
+            const normalizedDir = path.resolve(dir);
+            if (visited.has(normalizedDir)) continue;
+            visited.add(normalizedDir);
+            visitCount += 1;
+            if (visitCount > DISCOVER_MAX_DIR_COUNT) break;
+
+            if (path.basename(normalizedDir).toLowerCase() === 'skills') {
+                roots.push(normalizedDir);
+            }
 
-        files.forEach((relativePath) => {
-            const absolutePath = path.resolve(skill.sourcePath, relativePath);
-            const content = fs.readFileSync(absolutePath);
-            zip.addFile(path.posix.join(rootFolder, relativePath), content);
-        });
+            if (depth >= maxDepth) continue;
 
-        return {
-            fileName: `${rootFolder}.zip`,
-            content: zip.toBuffer(),
-        };
+            let entries = [];
+            try {
+                entries = fs.readdirSync(normalizedDir, { withFileTypes: true });
+            } catch (error) {
+                continue;
+            }
+
+            entries.forEach((entry) => {
+                if (!entry.isDirectory()) return;
+                if (this.shouldSkipDirName(entry.name)) return;
+                queue.push({ dir: path.join(normalizedDir, entry.name), depth: depth + 1 });
+            });
+        }
+
+        return Array.from(new Set(roots));
     }
 
-    listSkillFiles(skillDir) {
-        const files = [];
-        const stack = [skillDir];
-        while (stack.length > 0) {
-            const currentDir = stack.pop();
+    findSkillDirsWithin(baseDir, maxDepth = DISCOVER_DEPTH_LIMIT) {
+        const result = [];
+        const queue = [ { dir: baseDir, depth: 0 } ];
+        const visited = new Set();
+        let visitCount = 0;
+
+        while (queue.length > 0) {
+            const { dir, depth } = queue.shift();
+            const normalizedDir = path.resolve(dir);
+            if (visited.has(normalizedDir)) continue;
+            visited.add(normalizedDir);
+            visitCount += 1;
+            if (visitCount > DISCOVER_MAX_DIR_COUNT) break;
+
+            if (this.containsSkillMd(normalizedDir)) {
+                result.push(normalizedDir);
+            }
+
+            if (depth >= maxDepth) continue;
+
             let entries = [];
             try {
-                entries = fs.readdirSync(currentDir, { withFileTypes: true });
+                entries = fs.readdirSync(normalizedDir, { withFileTypes: true });
             } catch (error) {
                 continue;
             }
 
             entries.forEach((entry) => {
-                const fullPath = path.join(currentDir, entry.name);
-                if (entry.isDirectory()) {
-                    stack.push(fullPath);
-                    return;
-                }
-                if (!entry.isFile()) return;
-                const relativePath = path.relative(skillDir, fullPath).split(path.sep).join('/');
-                files.push(relativePath);
+                if (!entry.isDirectory()) return;
+                if (this.shouldSkipDirName(entry.name)) return;
+                queue.push({ dir: path.join(normalizedDir, entry.name), depth: depth + 1 });
+            });
+        }
+
+        return Array.from(new Set(result));
+    }
+
+    discoverSkillDirs(selectedPath) {
+        const stat = fs.statSync(selectedPath);
+        if (stat.isFile()) {
+            if (path.basename(selectedPath) !== 'SKILL.md') {
+                this.ctx.throw(400, '文件来源仅支持 SKILL.md');
+            }
+            return [ path.dirname(selectedPath) ];
+        }
+
+        const selectedDir = path.resolve(selectedPath);
+
+        if (this.containsSkillMd(selectedDir)) {
+            return [ selectedDir ];
+        }
+
+        const roots = this.findSkillsRootDirs(selectedDir, DISCOVER_DEPTH_LIMIT);
+        let skillDirs = [];
+
+        if (roots.length > 0) {
+            roots.forEach((rootDir) => {
+                const discovered = this.findSkillDirsWithin(rootDir, DISCOVER_DEPTH_LIMIT);
+                skillDirs = skillDirs.concat(discovered);
             });
+        }
 
-            if (files.length >= MAX_FILE_LIST_COUNT) break;
+        if (skillDirs.length === 0) {
+            skillDirs = this.findSkillDirsWithin(selectedDir, DISCOVER_DEPTH_LIMIT);
         }
 
-        return files.sort();
+        return Array.from(new Set(skillDirs.map((item) => path.resolve(item))));
+    }
+
+    buildFileLanguage(filePath) {
+        const extension = path.extname(filePath || '').toLowerCase();
+        return EXTENSION_LANGUAGE_MAP[extension] || 'text';
     }
 
-    collectSkillFiles(skillDir, maxCount = 2000) {
+    collectSkillFiles(skillDir) {
         const files = [];
-        const stack = [skillDir];
-        while (stack.length > 0) {
-            const currentDir = stack.pop();
+        const queue = [ skillDir ];
+        const visited = new Set();
+
+        while (queue.length > 0) {
+            const currentDir = queue.shift();
+            const normalizedDir = path.resolve(currentDir);
+            if (visited.has(normalizedDir)) continue;
+            visited.add(normalizedDir);
+
             let entries = [];
             try {
-                entries = fs.readdirSync(currentDir, { withFileTypes: true });
+                entries = fs.readdirSync(normalizedDir, { withFileTypes: true });
             } catch (error) {
                 continue;
             }
 
             entries.forEach((entry) => {
-                if (entry.name === '.git' || entry.name === 'node_modules') return;
-                const fullPath = path.join(currentDir, entry.name);
+                if (this.shouldSkipDirName(entry.name)) return;
+                const fullPath = path.join(normalizedDir, entry.name);
                 if (entry.isDirectory()) {
-                    stack.push(fullPath);
+                    queue.push(fullPath);
                     return;
                 }
+
                 if (!entry.isFile()) return;
-                files.push(path.relative(skillDir, fullPath).split(path.sep).join('/'));
+                const relativePath = path.relative(skillDir, fullPath).split(path.sep).join('/');
+                if (!relativePath || relativePath.startsWith('..')) return;
+
+                try {
+                    const stat = fs.statSync(fullPath);
+                    const size = Number(stat.size) || 0;
+                    const buffer = size > MAX_STORED_FILE_CONTENT_SIZE ? null : fs.readFileSync(fullPath);
+                    const isBinary = buffer ? this.isLikelyBinary(buffer) : false;
+                    const encoding = isBinary ? 'base64' : 'utf8';
+                    const content =
+                        !buffer ? null : isBinary ? buffer.toString('base64') : buffer.toString('utf8');
+
+                    files.push({
+                        filePath: relativePath,
+                        language: this.buildFileLanguage(relativePath),
+                        size,
+                        isBinary,
+                        encoding,
+                        content,
+                        updatedAt: stat.mtime,
+                    });
+                } catch (error) {
+                    // 忽略不可读取文件，避免单文件损坏阻塞整次导入。
+                }
             });
 
-            if (files.length >= maxCount) break;
+            if (files.length >= MAX_FILE_LIST_COUNT) {
+                break;
+            }
         }
 
-        return files.sort();
+        return files.sort((a, b) => a.filePath.localeCompare(b.filePath));
     }
 
-    getSkillBySlug(slug) {
-        const skill = this.skillCache.skills.find((item) => item.slug === slug);
-        if (!skill) {
-            this.ctx.throw(404, '技能不存在');
-        }
-        return skill;
-    }
+    prepareSkillRecord(skillDir, repoDir, sourceMeta, category, tags) {
+        const skillFilePath = path.join(skillDir, 'SKILL.md');
+        const content = fs.readFileSync(skillFilePath, 'utf8');
+        const stat = fs.statSync(skillFilePath);
+        const frontmatter = this.parseFrontmatter(content);
+        const body = frontmatter.__body || content;
 
-    normalizeRelativePath(filePath) {
-        const value = String(filePath || '').trim();
-        if (!value) {
-            this.ctx.throw(400, '缺少文件路径');
-        }
+        const name = String(frontmatter.name || path.basename(skillDir)).trim() || path.basename(skillDir);
+        const description =
+            String(frontmatter.description || this.extractDescription(body)).trim() || this.extractDescription(content);
+        const allowedTools = this.parseArrayLike(
+            frontmatter['allowed-tools'] || frontmatter.allowedTools || frontmatter.allowed_tools
+        );
 
-        const normalized = path
-            .normalize(value)
-            .replace(/\\/g, '/')
-            .replace(/^\/+/, '');
+        const sourcePath = path.relative(repoDir, skillDir).split(path.sep).join('/');
+        const installCommand = this.getInstallCommand({
+            sourceRepo: sourceMeta.sourceRepo,
+            sourceUrl: sourceMeta.sourceUrl,
+            name,
+        });
 
-        if (!normalized || normalized === '.' || normalized.startsWith('..')) {
-            this.ctx.throw(400, '非法文件路径');
-        }
+        const files = this.collectSkillFiles(skillDir);
 
-        return normalized;
+        return {
+            name,
+            description,
+            category,
+            tags,
+            allowedTools,
+            updatedAt: stat.mtime,
+            sourceRepo: sourceMeta.sourceRepo,
+            sourcePath,
+            skillMd: content,
+            installCommand,
+            files,
+        };
     }
 
-    isPathInsideRoot(rootPath, targetPath) {
-        if (targetPath === rootPath) return false;
-        return targetPath.startsWith(`${rootPath}${path.sep}`);
-    }
+    filterSkillByName(skills, skillName) {
+        const expected = String(skillName || '').trim().toLowerCase();
+        if (!expected) return skills;
 
-    isLikelyBinary(buffer) {
-        if (!buffer || buffer.length === 0) return false;
-        const sampleLength = Math.min(buffer.length, 1024);
-        for (let i = 0; i < sampleLength; i += 1) {
-            if (buffer[i] === 0) return true;
-        }
-        return false;
+        return skills.filter((item) => {
+            const name = String(item.name || '').trim().toLowerCase();
+            const folderName = String(path.basename(item.sourcePath || '')).trim().toLowerCase();
+            return name === expected || folderName === expected;
+        });
     }
 
-    sanitizeFileName(fileName) {
-        return String(fileName || 'skill')
-            .trim()
-            .replace(/[^a-zA-Z0-9._-]+/g, '-')
-            .replace(/^-+|-+$/g, '')
-            .toLowerCase();
-    }
+    async upsertSourceRecord(parsedSource, syncStatus, syncError = '') {
+        const { SkillsSource } = this.app.model;
+        const payload = {
+            source_url: parsedSource.sourceUrl,
+            source_type: parsedSource.sourceType,
+            clone_url: parsedSource.cloneUrl,
+            source_repo: parsedSource.sourceRepo || parsedSource.sourceUrl,
+            ref: parsedSource.ref || '',
+            subpath: parsedSource.subpath || '',
+            repo_host: parsedSource.repoHost || '',
+            repo_path: parsedSource.repoPath || '',
+            sync_status: syncStatus,
+            sync_error: syncError || '',
+        };
 
-    async getRelatedSkills(slug, limit = 6) {
-        await this.ensureSkillCache();
-        const target = this.skillCache.skills.find((item) => item.slug === slug);
-        if (!target) {
-            this.ctx.throw(404, '技能不存在');
-        }
+        const existing = await SkillsSource.findOne({
+            where: { source_url: parsedSource.sourceUrl },
+        });
 
-        const targetTags = new Set((target.tags || []).map((item) => item.toLowerCase()));
-        const related = this.skillCache.skills
-            .filter((item) => item.slug !== slug)
-            .map((item) => {
-                const itemTags = (item.tags || []).map((tag) => tag.toLowerCase());
-                const overlap = itemTags.filter((tag) => targetTags.has(tag)).length;
-                const categoryScore = item.category === target.category ? 3 : 0;
-                const score = overlap * 10 + categoryScore + Math.min(item.stars, 10);
-                return { ...item, _score: score };
-            })
-            .filter((item) => item._score > 0)
-            .sort((a, b) => b._score - a._score || b.stars - a.stars)
-            .slice(0, parseInt(limit, 10) || 6)
-            .map((item) => {
-                const rest = { ...item };
-                delete rest._score;
-                return rest;
-            });
+        if (existing) {
+            await existing.update(payload);
+            return existing;
+        }
 
-        return related;
+        return await SkillsSource.create(payload);
     }
 
     async importSkill(params = {}) {
@@ -574,165 +1104,194 @@ class SkillsService extends Service {
         const skillName = String(params.skillName || '').trim();
         const category = this.normalizeCategory(params.category);
         const tags = this.normalizePlatformTags(params.tags);
-        const sourceRepoFallback = this.extractSourceRepoFromImportSource(source);
+
         if (!source) {
             this.ctx.throw(400, '缺少导入来源地址');
         }
 
-        await this.ensureSkillCache();
-        const beforeSlugs = new Set(this.skillCache.skills.map((item) => item.slug));
-        const args = [ '-y', 'skills@latest', 'add', source, '-g', '--agent', 'codex', '--copy', '--yes' ];
-        if (skillName) {
-            args.push('--skill', skillName);
-        } else {
-            // 未指定 skillName 时显式导入源中的全部 skills，避免依赖 CLI 默认选择行为
-            args.push('--skill', '*');
-        }
+        await this.ensureStorageReady();
+
+        let parsedSource = null;
+        let sourceRecord = null;
+        let tempDir = '';
 
-        let commandResult = null;
         try {
-            commandResult = await this.runCommand('npx', args, IMPORT_TIMEOUT_MS);
-        } catch (error) {
-            this.ctx.throw(500, `导入失败: ${error.message}`);
-        }
+            parsedSource = await this.parseImportSource(source);
+            sourceRecord = await this.upsertSourceRecord(parsedSource, 'syncing');
 
-        this.skillCache = null;
-        this.skillSourceCache = {};
-        await this.ensureSkillCache();
-        const importedSkills = this.skillCache.skills
-            .filter((item) => !beforeSlugs.has(item.slug))
-            .map((item) => ({
-                slug: item.slug,
-                name: item.name,
-                sourceRepo: item.sourceRepo || sourceRepoFallback,
-                sourcePath: item.sourcePath,
-            }));
-
-        let refreshedCount = 0;
-        if (importedSkills.length > 0) {
-            const starsBySlug = await this.fetchStarsForImportedSkills(importedSkills);
-            this.persistSkillMeta(importedSkills, {
-                category,
-                tags,
-                starsBySlug,
+            if (parsedSource.sourceType !== 'local') {
+                tempDir = fs.mkdtempSync(path.join(os.tmpdir(), 'skills-import-'));
+                await this.cloneSourceRepo(parsedSource, tempDir);
+            }
+
+            const repoDir = parsedSource.sourceType === 'local' ? parsedSource.cloneUrl : tempDir;
+            const selectedPath = this.resolveSelectedPath(repoDir, parsedSource.subpath);
+            const discoveredSkillDirs = this.discoverSkillDirs(selectedPath);
+
+            if (discoveredSkillDirs.length === 0) {
+                this.ctx.throw(400, '未在来源中发现技能（SKILL.md）');
+            }
+
+            let skillRecords = discoveredSkillDirs.map((skillDir) =>
+                this.prepareSkillRecord(skillDir, repoDir, parsedSource, category, tags)
+            );
+
+            skillRecords = this.filterSkillByName(skillRecords, skillName);
+            if (skillRecords.length === 0) {
+                this.ctx.throw(400, '未匹配到指定技能，请检查 skillName 是否正确');
+            }
+
+            const importedSkills = await this.persistSkillsForSource(sourceRecord.id, parsedSource, skillRecords);
+
+            await sourceRecord.update({
+                sync_status: 'idle',
+                sync_error: '',
+                last_synced_at: new Date(),
             });
-            refreshedCount = importedSkills.length;
-            this.skillCache = null;
-            this.skillSourceCache = {};
+
+            this.invalidateCache();
             await this.ensureSkillCache();
-        } else {
-            // 重复导入同仓库时也刷新一次 stars，避免历史 0 值无法更新。
-            const sourceRepoFullName = this.extractGitHubRepoFullName(sourceRepoFallback);
-            if (sourceRepoFullName) {
-                const existingRepoSkills = this.skillCache.skills
-                    .filter(
-                        (item) =>
-                            this.extractGitHubRepoFullName(item.sourceRepo) === sourceRepoFullName
-                    )
-                    .map((item) => ({
-                        slug: item.slug,
-                        name: item.name,
-                        sourceRepo: item.sourceRepo,
-                        sourcePath: item.sourcePath,
-                    }));
 
-                if (existingRepoSkills.length > 0) {
-                    const starsBySlug = await this.fetchStarsForImportedSkills(existingRepoSkills);
-                    this.persistSkillMeta(existingRepoSkills, {
-                        starsBySlug,
+            return {
+                source,
+                skillName,
+                category,
+                tags,
+                importedCount: importedSkills.length,
+                refreshedCount: importedSkills.length,
+                importedSkills: importedSkills.map((item) => ({
+                    slug: item.slug,
+                    name: item.name,
+                    sourceRepo: item.sourceRepo,
+                    sourcePath: item.sourcePath,
+                })),
+            };
+        } catch (error) {
+            if (sourceRecord) {
+                try {
+                    await sourceRecord.update({
+                        sync_status: 'failed',
+                        sync_error: String(error.message || error),
                     });
-                    refreshedCount = existingRepoSkills.length;
-                    this.skillCache = null;
-                    this.skillSourceCache = {};
-                    await this.ensureSkillCache();
+                } catch (updateError) {
+                    this.ctx.logger.warn(`[skills] 写入同步失败状态异常: ${updateError.message}`);
                 }
             }
-        }
-
-        return {
-            source,
-            skillName,
-            category,
-            tags,
-            importedCount: importedSkills.length,
-            refreshedCount,
-            importedSkills,
-            command: `npx ${args.join(' ')}`,
-            logs: {
-                stdout: this.trimCommandOutput(commandResult.stdout),
-                stderr: this.trimCommandOutput(commandResult.stderr),
-            },
-        };
-    }
 
-    persistSkillMeta(skills = [], meta = {}) {
-        const hasCategory = Object.prototype.hasOwnProperty.call(meta, 'category');
-        const hasTags = Object.prototype.hasOwnProperty.call(meta, 'tags');
-        const nextCategory = hasCategory ? this.normalizeCategory(meta.category) : '';
-        const nextTags = hasTags ? this.normalizePlatformTags(meta.tags) : [];
-        const starsBySlug = meta.starsBySlug || {};
-        skills.forEach((item) => {
-            const skillDir = item.sourcePath;
-            if (!skillDir || !fs.existsSync(skillDir)) return;
-            const metaFilePath = path.join(skillDir, '_meta.json');
-            let currentMeta = {};
-            if (fs.existsSync(metaFilePath)) {
+            if (error.status && error.status >= 400 && error.status < 600) {
+                throw error;
+            }
+            this.ctx.throw(500, `导入失败: ${error.message}`);
+        } finally {
+            if (tempDir && fs.existsSync(tempDir)) {
                 try {
-                    currentMeta = JSON.parse(fs.readFileSync(metaFilePath, 'utf8'));
+                    fs.rmSync(tempDir, { recursive: true, force: true });
                 } catch (error) {
-                    currentMeta = {};
+                    this.ctx.logger.warn(`[skills] 清理临时目录失败: ${tempDir}, ${error.message}`);
                 }
             }
-
-            const nextMeta = {
-                ...currentMeta,
-            };
-            if (hasCategory) {
-                nextMeta.category = nextCategory;
-            }
-            if (hasTags) {
-                nextMeta.platformTags = nextTags;
-                nextMeta.tags = nextTags;
-            }
-            const stars = starsBySlug[item.slug];
-            if (typeof stars === 'number' && Number.isFinite(stars) && stars >= 0) {
-                nextMeta.stars = stars;
-                nextMeta['github_stars'] = stars;
-                nextMeta.starsFetchedAt = new Date().toISOString();
-            }
-            fs.writeFileSync(metaFilePath, `${JSON.stringify(nextMeta, null, 2)}\n`, 'utf8');
-        });
+        }
     }
 
-    async fetchStarsForImportedSkills(skills = []) {
-        const repoToStars = {};
-        const uniqueRepos = Array.from(
-            new Set(
-                skills
-                    .map((item) => this.extractGitHubRepoFullName(item.sourceRepo))
-                    .filter(Boolean)
-            )
-        );
+    async persistSkillsForSource(sourceId, sourceMeta, skillRecords = []) {
+        const { SkillsItem, SkillsFile } = this.app.model;
+        const { Op } = this.app.Sequelize;
+        const repoStars = await this.fetchStarsBySourceRepo(sourceMeta.sourceRepo);
+
+        return await this.app.model.transaction(async (transaction) => {
+            const oldRows = await SkillsItem.findAll({
+                where: {
+                    source_id: sourceId,
+                    is_delete: 0,
+                },
+                attributes: [ 'id', 'stars' ],
+                order: [ [ 'stars', 'DESC' ], [ 'id', 'DESC' ] ],
+                transaction,
+            });
 
-        for (const repoFullName of uniqueRepos) {
-            // 顺序请求，减少被限流概率；一次导入通常仓库数很少
-            const stars = await this.fetchGitHubRepoStars(repoFullName);
-            if (typeof stars === 'number' && Number.isFinite(stars) && stars >= 0) {
-                repoToStars[repoFullName] = stars;
+            const fallbackStars = oldRows[0] ? Number(oldRows[0].stars) || 0 : 0;
+            const resolvedStars =
+                typeof repoStars === 'number' && Number.isFinite(repoStars) && repoStars >= 0
+                    ? repoStars
+                    : fallbackStars;
+
+            if (oldRows.length > 0) {
+                const oldIds = oldRows.map((item) => item.id);
+                await SkillsFile.destroy({
+                    where: {
+                        skill_id: {
+                            [Op.in]: oldIds,
+                        },
+                    },
+                    transaction,
+                });
             }
-        }
 
-        const starsBySlug = {};
-        skills.forEach((item) => {
-            const repoFullName = this.extractGitHubRepoFullName(item.sourceRepo);
-            if (!repoFullName) return;
-            const stars = repoToStars[repoFullName];
-            if (typeof stars === 'number') {
-                starsBySlug[item.slug] = stars;
+            await SkillsItem.destroy({
+                where: {
+                    source_id: sourceId,
+                },
+                transaction,
+            });
+
+            const usedSlugs = new Set();
+            const createdSkills = [];
+
+            for (const record of skillRecords) {
+                const slug = this.buildSkillSlug(sourceMeta, record.sourcePath, record.name, usedSlugs);
+                const itemRow = await SkillsItem.create(
+                    {
+                        source_id: sourceId,
+                        slug,
+                        name: record.name,
+                        description: record.description,
+                        category: record.category,
+                        tags: JSON.stringify(record.tags || []),
+                        allowed_tools: JSON.stringify(record.allowedTools || []),
+                        stars: resolvedStars,
+                        updated_at_remote: record.updatedAt,
+                        source_repo: record.sourceRepo,
+                        source_path: record.sourcePath,
+                        skill_md: record.skillMd,
+                        install_command: record.installCommand,
+                        file_count: record.files.length,
+                        is_delete: 0,
+                    },
+                    { transaction }
+                );
+
+                if (record.files.length > 0) {
+                    const fileRows = record.files.map((fileItem) => ({
+                        skill_id: itemRow.id,
+                        file_path: fileItem.filePath,
+                        language: fileItem.language,
+                        size: fileItem.size,
+                        is_binary: fileItem.isBinary ? 1 : 0,
+                        encoding: fileItem.encoding,
+                        content: fileItem.content,
+                        updated_at_remote: fileItem.updatedAt,
+                        is_delete: 0,
+                    }));
+
+                    await SkillsFile.bulkCreate(fileRows, { transaction });
+                }
+
+                createdSkills.push({
+                    slug,
+                    name: record.name,
+                    sourceRepo: record.sourceRepo,
+                    sourcePath: record.sourcePath,
+                });
             }
+
+            return createdSkills;
         });
+    }
 
-        return starsBySlug;
+    async fetchStarsBySourceRepo(sourceRepo = '') {
+        const repoFullName = this.extractGitHubRepoFullName(sourceRepo);
+        if (!repoFullName) return null;
+        return await this.fetchGitHubRepoStars(repoFullName);
     }
 
     extractGitHubRepoFullName(sourceRepo = '') {
@@ -762,6 +1321,7 @@ class SkillsService extends Service {
 
         const value = Number(match[1]);
         if (!Number.isFinite(value)) return null;
+
         const suffix = (match[2] || '').toLowerCase();
         if (!suffix) return Math.round(value);
         if (suffix === 'k') return Math.round(value * 1000);
@@ -780,9 +1340,7 @@ class SkillsService extends Service {
             if (typeof stars === 'number' && Number.isFinite(stars) && stars >= 0) return stars;
         }
 
-        const ariaMatch = content.match(
-            /id="repo-stars-counter-star"[^>]*aria-label="([^"]+)"/i
-        );
+        const ariaMatch = content.match(/id="repo-stars-counter-star"[^>]*aria-label="([^"]+)"/i);
         if (ariaMatch) {
             const numberLike = ariaMatch[1].match(/[\d,.]+\s*[kmb]?/i);
             if (numberLike) {
@@ -804,6 +1362,7 @@ class SkillsService extends Service {
         const url = `https://github.com/${repoFullName}`;
         const controller = new AbortController();
         const timer = setTimeout(() => controller.abort(), GITHUB_API_TIMEOUT_MS);
+
         try {
             const response = await fetch(url, {
                 method: 'GET',
@@ -813,18 +1372,18 @@ class SkillsService extends Service {
                 },
                 signal: controller.signal,
             });
+
             if (!response.ok) {
                 this.ctx.logger.warn(
                     `[skills] HTML兜底获取 stars 失败: ${repoFullName}, status=${response.status}`
                 );
                 return null;
             }
+
             const html = await response.text();
             return this.extractStarsFromGitHubHtml(html);
         } catch (error) {
-            this.ctx.logger.warn(
-                `[skills] HTML兜底获取 stars 异常: ${repoFullName}, ${error.message}`
-            );
+            this.ctx.logger.warn(`[skills] HTML兜底获取 stars 异常: ${repoFullName}, ${error.message}`);
             return null;
         } finally {
             clearTimeout(timer);
@@ -833,11 +1392,13 @@ class SkillsService extends Service {
 
     async fetchGitHubRepoStars(repoFullName) {
         if (!repoFullName) return null;
+
         const url = `https://api.github.com/repos/${repoFullName}`;
         const headers = {
             Accept: 'application/vnd.github+json',
             'User-Agent': 'doraemon-skills-market',
         };
+
         const token = String(process.env.GITHUB_TOKEN || '').trim();
         if (token) {
             headers.Authorization = `Bearer ${token}`;
@@ -845,60 +1406,43 @@ class SkillsService extends Service {
 
         const controller = new AbortController();
         const timer = setTimeout(() => controller.abort(), GITHUB_API_TIMEOUT_MS);
+
         try {
             const response = await fetch(url, {
                 method: 'GET',
                 headers,
                 signal: controller.signal,
             });
+
             if (!response.ok) {
                 this.ctx.logger.warn(
                     `[skills] 获取 GitHub stars 失败: ${repoFullName}, status=${response.status}`
                 );
-                // GitHub API 限流时，尝试从仓库页面兜底解析 stars。
                 if (response.status === 403 || response.status === 429) {
                     return await this.fetchGitHubRepoStarsFromHtml(repoFullName);
                 }
                 return null;
             }
+
             const data = await response.json();
             const stars = Number(data.stargazers_count);
-            if (Number.isNaN(stars) || stars < 0) return null;
+            if (!Number.isFinite(stars) || stars < 0) return null;
             return stars;
         } catch (error) {
-            this.ctx.logger.warn(
-                `[skills] 获取 GitHub stars 异常: ${repoFullName}, ${error.message}`
-            );
+            this.ctx.logger.warn(`[skills] 获取 GitHub stars 异常: ${repoFullName}, ${error.message}`);
             return null;
         } finally {
             clearTimeout(timer);
         }
     }
 
-    extractSourceRepoFromImportSource(source = '') {
-        const raw = String(source || '').trim();
-        if (!raw) return '';
-
-        // 支持 GitHub tree URL：/owner/repo/tree/branch/path
-        const treeMatch = raw.match(/^https?:\/\/github\.com\/([^/]+)\/([^/]+)\/tree\/[^/]+\/?.*$/i);
-        if (treeMatch) {
-            return `https://github.com/${treeMatch[1]}/${treeMatch[2]}.git`;
-        }
-
-        const repoMatch = raw.match(/^https?:\/\/github\.com\/([^/]+)\/([^/#?]+)/i);
-        if (repoMatch) {
-            return `https://github.com/${repoMatch[1]}/${repoMatch[2].replace(/\.git$/i, '')}.git`;
-        }
-
-        return '';
-    }
-
-    runCommand(command, args = [], timeout = IMPORT_TIMEOUT_MS) {
+    runCommand(command, args = [], timeout = GIT_COMMAND_TIMEOUT_MS, cwd = process.cwd()) {
         return new Promise((resolve, reject) => {
             const child = spawn(command, args, {
-                cwd: process.cwd(),
+                cwd,
                 env: process.env,
             });
+
             let stdout = '';
             let stderr = '';
             let timedOut = false;
@@ -923,8 +1467,9 @@ class SkillsService extends Service {
 
             child.on('close', (code) => {
                 clearTimeout(timer);
+
                 if (timedOut) {
-                    reject(new Error(`导入命令执行超时（${timeout}ms）`));
+                    reject(new Error(`命令执行超时（${timeout}ms）: ${command}`));
                     return;
                 }
 
@@ -946,33 +1491,6 @@ class SkillsService extends Service {
         if (value.length <= maxLength) return value;
         return value.slice(value.length - maxLength);
     }
-
-    getSkillSourceMapByRoot(rootDir) {
-        if (this.skillSourceCache[rootDir]) {
-            return this.skillSourceCache[rootDir];
-        }
-
-        const sourceMap = {};
-        const parentDir = path.dirname(rootDir);
-        const lockFilePath = path.join(parentDir, '.skill-lock.json');
-        if (fs.existsSync(lockFilePath)) {
-            try {
-                const lockData = JSON.parse(fs.readFileSync(lockFilePath, 'utf8'));
-                const skills = lockData && lockData.skills ? lockData.skills : {};
-                Object.keys(skills).forEach((skillName) => {
-                    const sourceUrl = skills[skillName] && skills[skillName].sourceUrl;
-                    if (sourceUrl) {
-                        sourceMap[skillName] = String(sourceUrl);
-                    }
-                });
-            } catch (error) {
-                this.ctx.logger.warn(`[skills] 读取锁文件失败: ${lockFilePath}, ${error.message}`);
-            }
-        }
-
-        this.skillSourceCache[rootDir] = sourceMap;
-        return sourceMap;
-    }
 }
 
 module.exports = SkillsService;

From 740474a8bd2d8169e9ed4939de5496114ce6009f Mon Sep 17 00:00:00 2001
From: huaiju <huaiju@dtstack.com>
Date: Tue, 24 Feb 2026 18:02:35 +0800
Subject: [PATCH 23/43] fix: reduce model index length for mysql

---
 app/model/skills_file.js   | 3 +--
 app/model/skills_source.js | 3 +--
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/app/model/skills_file.js b/app/model/skills_file.js
index 614d793..fc22409 100644
--- a/app/model/skills_file.js
+++ b/app/model/skills_file.js
@@ -15,7 +15,7 @@ module.exports = (app) => {
                 comment: 'skills_items.id',
             },
             file_path: {
-                type: STRING(1000),
+                type: STRING(512),
                 allowNull: false,
                 comment: '文件相对路径',
             },
@@ -71,7 +71,6 @@ module.exports = (app) => {
             updatedAt: 'updated_at',
             indexes: [
                 { fields: ['skill_id'] },
-                { unique: true, fields: ['skill_id', 'file_path'] },
             ],
         }
     );
diff --git a/app/model/skills_source.js b/app/model/skills_source.js
index 183fc66..6adc277 100644
--- a/app/model/skills_source.js
+++ b/app/model/skills_source.js
@@ -10,7 +10,7 @@ module.exports = (app) => {
                 autoIncrement: true,
             },
             source_url: {
-                type: STRING(1000),
+                type: STRING(512),
                 allowNull: false,
                 unique: true,
                 comment: '用户输入的来源地址',
@@ -84,7 +84,6 @@ module.exports = (app) => {
             createdAt: 'created_at',
             updatedAt: 'updated_at',
             indexes: [
-                { unique: true, fields: ['source_url'] },
                 { fields: ['repo_host'] },
                 { fields: ['repo_path'] },
                 { fields: ['sync_status'] },

From 026f4273d4c6e222558612fefa8db6034d11fcb7 Mon Sep 17 00:00:00 2001
From: huaiju <huaiju@dtstack.com>
Date: Tue, 24 Feb 2026 22:39:49 +0800
Subject: [PATCH 24/43] fix: bypass proxy for internal git sources

---
 app/service/skills.js | 100 +++++++++++++++++++++++++++++++++++++++---
 1 file changed, 95 insertions(+), 5 deletions(-)

diff --git a/app/service/skills.js b/app/service/skills.js
index 4eaf803..fb8da4d 100644
--- a/app/service/skills.js
+++ b/app/service/skills.js
@@ -773,11 +773,14 @@ class SkillsService extends Service {
 
     async listRemoteHeadRefs(cloneUrl) {
         if (!cloneUrl) return [];
+        const env = this.buildCommandEnv({ remoteUrl: cloneUrl });
         try {
             const { stdout } = await this.runCommand(
                 'git',
                 [ 'ls-remote', '--heads', cloneUrl ],
-                GIT_COMMAND_TIMEOUT_MS
+                GIT_COMMAND_TIMEOUT_MS,
+                process.cwd(),
+                env
             );
             return String(stdout || '')
                 .split('\n')
@@ -799,6 +802,7 @@ class SkillsService extends Service {
             return;
         }
 
+        const env = this.buildCommandEnv({ remoteUrl: parsedSource.cloneUrl });
         const cloneArgs = [ 'clone', '--depth', '1' ];
         if (parsedSource.ref) {
             cloneArgs.push('--branch', parsedSource.ref);
@@ -806,7 +810,7 @@ class SkillsService extends Service {
         cloneArgs.push(parsedSource.cloneUrl, targetDir);
 
         try {
-            await this.runCommand('git', cloneArgs, GIT_COMMAND_TIMEOUT_MS);
+            await this.runCommand('git', cloneArgs, GIT_COMMAND_TIMEOUT_MS, process.cwd(), env);
         } catch (error) {
             if (!parsedSource.ref) {
                 throw error;
@@ -814,7 +818,7 @@ class SkillsService extends Service {
 
             // 分支解析异常时回退默认分支，尽量提升兼容性。
             const fallbackArgs = [ 'clone', '--depth', '1', parsedSource.cloneUrl, targetDir ];
-            await this.runCommand('git', fallbackArgs, GIT_COMMAND_TIMEOUT_MS);
+            await this.runCommand('git', fallbackArgs, GIT_COMMAND_TIMEOUT_MS, process.cwd(), env);
         }
     }
 
@@ -1436,11 +1440,97 @@ class SkillsService extends Service {
         }
     }
 
-    runCommand(command, args = [], timeout = GIT_COMMAND_TIMEOUT_MS, cwd = process.cwd()) {
+    extractHostFromRemote(remoteUrl = '') {
+        const value = String(remoteUrl || '').trim();
+        if (!value) return '';
+        try {
+            const target = new URL(value);
+            return String(target.hostname || '').toLowerCase();
+        } catch (error) {
+            return '';
+        }
+    }
+
+    isPrivateNetworkHost(host = '') {
+        const value = String(host || '').toLowerCase();
+        if (!value) return false;
+        if (value === 'localhost' || value.endsWith('.local')) return true;
+
+        const ipv4Match = value.match(/^(\d{1,3})(\.\d{1,3}){3}$/);
+        if (!ipv4Match) return false;
+
+        const segments = value.split('.').map((item) => parseInt(item, 10));
+        if (segments.some((item) => Number.isNaN(item) || item < 0 || item > 255)) {
+            return false;
+        }
+
+        if (segments[0] === 10) return true;
+        if (segments[0] === 127) return true;
+        if (segments[0] === 192 && segments[1] === 168) return true;
+        if (segments[0] === 172 && segments[1] >= 16 && segments[1] <= 31) return true;
+        return false;
+    }
+
+    shouldBypassProxyForHost(host = '') {
+        const value = String(host || '').toLowerCase();
+        if (!value) return false;
+        if (value.endsWith('.dtstack.cn')) return true;
+        return this.isPrivateNetworkHost(value);
+    }
+
+    appendNoProxyHost(rawNoProxy = '', host = '') {
+        const value = String(host || '').toLowerCase();
+        if (!value) return String(rawNoProxy || '').trim();
+
+        const entries = String(rawNoProxy || '')
+            .split(',')
+            .map((item) => item.trim())
+            .filter(Boolean);
+        const set = new Set(entries);
+
+        set.add(value);
+        set.add('localhost');
+        set.add('127.0.0.1');
+        if (value.includes('.')) {
+            const parts = value.split('.');
+            if (parts.length >= 2) {
+                set.add(`.${parts.slice(-2).join('.')}`);
+            }
+        }
+
+        return Array.from(set).join(',');
+    }
+
+    buildCommandEnv({ remoteUrl = '' } = {}) {
+        const env = { ...process.env };
+        const host = this.extractHostFromRemote(remoteUrl);
+        if (!host || !this.shouldBypassProxyForHost(host)) {
+            return env;
+        }
+
+        [ 'http_proxy', 'https_proxy', 'HTTP_PROXY', 'HTTPS_PROXY', 'all_proxy', 'ALL_PROXY' ].forEach(
+            (key) => {
+                delete env[key];
+            }
+        );
+
+        const noProxyValue = this.appendNoProxyHost(env.NO_PROXY || env.no_proxy || '', host);
+        env.NO_PROXY = noProxyValue;
+        env.no_proxy = noProxyValue;
+        return env;
+    }
+
+    runCommand(
+        command,
+        args = [],
+        timeout = GIT_COMMAND_TIMEOUT_MS,
+        cwd = process.cwd(),
+        env = process.env
+    ) {
         return new Promise((resolve, reject) => {
             const child = spawn(command, args, {
                 cwd,
-                env: process.env,
+                env,
             });
 
             let stdout = '';

From ab2f10de5271f9f614c23aac1065aeaddd147978 Mon Sep 17 00:00:00 2001
From: huaiju <huaiju@dtstack.com>
Date: Tue, 24 Feb 2026 22:54:02 +0800
Subject: [PATCH 25/43] feat: support internal gitlab token auth and nested
 skills discovery

---
 app/service/skills.js | 46 ++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 41 insertions(+), 5 deletions(-)

diff --git a/app/service/skills.js b/app/service/skills.js
index fb8da4d..3e7bb1f 100644
--- a/app/service/skills.js
+++ b/app/service/skills.js
@@ -15,7 +15,10 @@ const GITHUB_API_TIMEOUT_MS = 10 * 1000;
 const MAX_PLATFORM_TAGS = 5;
 const MAX_TAG_LENGTH = 20;
 const DISCOVER_DEPTH_LIMIT = 2;
+const SKILLS_ROOT_DISCOVER_DEPTH_LIMIT = 8;
 const DISCOVER_MAX_DIR_COUNT = 3000;
+// 临时测试用：优先走环境变量 GITLAB_TOKEN，缺失时回退该默认值（仅用于内网 GitLab 域名）。
+const DEFAULT_GITLAB_TOKEN = '[REDACTED]';
 
 const SKILL_CATEGORY_OPTIONS = [
     '通用',
@@ -774,10 +777,11 @@ class SkillsService extends Service {
     async listRemoteHeadRefs(cloneUrl) {
         if (!cloneUrl) return [];
         const env = this.buildCommandEnv({ remoteUrl: cloneUrl });
+        const authArgs = this.getGitAuthPrefixArgs(cloneUrl);
         try {
             const { stdout } = await this.runCommand(
                 'git',
-                [ 'ls-remote', '--heads', cloneUrl ],
+                [ ...authArgs, 'ls-remote', '--heads', cloneUrl ],
                 GIT_COMMAND_TIMEOUT_MS,
                 process.cwd(),
                 env
@@ -803,7 +807,8 @@ class SkillsService extends Service {
         }
 
         const env = this.buildCommandEnv({ remoteUrl: parsedSource.cloneUrl });
-        const cloneArgs = [ 'clone', '--depth', '1' ];
+        const authArgs = this.getGitAuthPrefixArgs(parsedSource.cloneUrl);
+        const cloneArgs = [ ...authArgs, 'clone', '--depth', '1' ];
         if (parsedSource.ref) {
             cloneArgs.push('--branch', parsedSource.ref);
         }
@@ -817,7 +822,14 @@ class SkillsService extends Service {
             }
 
             // 分支解析异常时回退默认分支，尽量提升兼容性。
-            const fallbackArgs = [ 'clone', '--depth', '1', parsedSource.cloneUrl, targetDir ];
+            const fallbackArgs = [
+                ...authArgs,
+                'clone',
+                '--depth',
+                '1',
+                parsedSource.cloneUrl,
+                targetDir,
+            ];
             await this.runCommand('git', fallbackArgs, GIT_COMMAND_TIMEOUT_MS, process.cwd(), env);
         }
     }
@@ -855,7 +867,7 @@ class SkillsService extends Service {
         return dirName === '.git' || dirName === 'node_modules' || dirName === '.idea' || dirName === '.vscode';
     }
 
-    findSkillsRootDirs(baseDir, maxDepth = DISCOVER_DEPTH_LIMIT) {
+    findSkillsRootDirs(baseDir, maxDepth = SKILLS_ROOT_DISCOVER_DEPTH_LIMIT) {
         const roots = [];
         const queue = [ { dir: baseDir, depth: 0 } ];
         const visited = new Set();
@@ -944,7 +956,7 @@ class SkillsService extends Service {
             return [ selectedDir ];
         }
 
-        const roots = this.findSkillsRootDirs(selectedDir, DISCOVER_DEPTH_LIMIT);
+        const roots = this.findSkillsRootDirs(selectedDir, SKILLS_ROOT_DISCOVER_DEPTH_LIMIT);
         let skillDirs = [];
 
         if (roots.length > 0) {
@@ -1520,6 +1532,30 @@ class SkillsService extends Service {
         return env;
     }
 
+    resolveGitlabToken() {
+        const runtimeToken = String(process.env.GITLAB_TOKEN || '').trim();
+        if (runtimeToken) return runtimeToken;
+        return String(DEFAULT_GITLAB_TOKEN || '').trim();
+    }
+
+    getGitAuthPrefixArgs(remoteUrl = '') {
+        const host = this.extractHostFromRemote(remoteUrl);
+        if (host !== 'gitlab.prod.dtstack.cn') {
+            return [];
+        }
+
+        const token = this.resolveGitlabToken();
+        if (!token) {
+            return [];
+        }
+
+        const basicToken = Buffer.from(`oauth2:${token}`).toString('base64');
+        return [
+            '-c',
+            `http.https://${host}/.extraHeader=Authorization: Basic ${basicToken}`,
+        ];
+    }
+
     runCommand(
         command,
         args = [],

From 5478fc5d4e6c216db6d48c3bc152a323ff5fd02a Mon Sep 17 00:00:00 2001
From: huaiju <huaiju@dtstack.com>
Date: Wed, 25 Feb 2026 18:24:08 +0800
Subject: [PATCH 26/43] feat: support .skill upload import flow

---
 app/controller/skills.js       |  29 +++++++
 app/router.js                  |   1 +
 app/service/skills.js          | 148 +++++++++++++++++++++++++++++++--
 app/web/api/index.ts           |  10 ++-
 app/web/api/url.ts             |   5 ++
 app/web/pages/skills/index.tsx |  79 ++++++++++++++++--
 app/web/router/index.ts        |  15 +++-
 config/config.default.js       |   8 +-
 8 files changed, 276 insertions(+), 19 deletions(-)

diff --git a/app/controller/skills.js b/app/controller/skills.js
index 8f269a5..35c8754 100644
--- a/app/controller/skills.js
+++ b/app/controller/skills.js
@@ -1,4 +1,5 @@
 const Controller = require('egg').Controller;
+const fs = require('fs');
 
 class SkillsController extends Controller {
     async getSkillList() {
@@ -44,6 +45,34 @@ class SkillsController extends Controller {
         const data = await ctx.service.skills.importSkill(params);
         ctx.body = app.utils.response(true, data);
     }
+
+    async importSkillFile() {
+        const { app, ctx } = this;
+        const params = ctx.request.body || {};
+        const files = ctx.request.files
+            ? Array.isArray(ctx.request.files)
+                ? ctx.request.files
+                : [ ctx.request.files ]
+            : [];
+        const file = files[0];
+
+        if (!file) {
+            ctx.throw(400, '缺少上传文件');
+        }
+
+        try {
+            const data = await ctx.service.skills.importSkillFile(params, file);
+            ctx.body = app.utils.response(true, data);
+        } finally {
+            if (file.filepath && fs.existsSync(file.filepath)) {
+                try {
+                    fs.unlinkSync(file.filepath);
+                } catch (error) {
+                    ctx.logger.warn(`[skills] 清理上传文件失败: ${error.message}`);
+                }
+            }
+        }
+    }
 }
 
 module.exports = SkillsController;
diff --git a/app/router.js b/app/router.js
index 738f763..9f9df62 100644
--- a/app/router.js
+++ b/app/router.js
@@ -155,6 +155,7 @@ module.exports = (app) => {
     app.get('/api/skills/file-content', app.controller.skills.getSkillFileContent);
     app.get('/api/skills/download', app.controller.skills.downloadSkillArchive);
     app.post('/api/skills/import', app.controller.skills.importSkill);
+    app.post('/api/skills/import-file', app.controller.skills.importSkillFile);
 
     // io.of('/').route('getShellCommand',  io.controller.home.getShellCommand)
     // 暂时close Terminal相关功能
diff --git a/app/service/skills.js b/app/service/skills.js
index 3e7bb1f..25b3893 100644
--- a/app/service/skills.js
+++ b/app/service/skills.js
@@ -17,8 +17,6 @@ const MAX_TAG_LENGTH = 20;
 const DISCOVER_DEPTH_LIMIT = 2;
 const SKILLS_ROOT_DISCOVER_DEPTH_LIMIT = 8;
 const DISCOVER_MAX_DIR_COUNT = 3000;
-// 临时测试用：优先走环境变量 GITLAB_TOKEN，缺失时回退该默认值（仅用于内网 GitLab 域名）。
-const DEFAULT_GITLAB_TOKEN = '[REDACTED]';
 
 const SKILL_CATEGORY_OPTIONS = [
     '通用',
@@ -79,6 +77,15 @@ class SkillsService extends Service {
         return [ ...SKILL_CATEGORY_OPTIONS ];
     }
 
+    getSkillsConfig() {
+        return this.app.config.skills || {};
+    }
+
+    resolveGitHubToken() {
+        const token = this.getSkillsConfig().githubToken;
+        return String(token || '').trim();
+    }
+
     invalidateCache() {
         this.skillCache = null;
     }
@@ -509,9 +516,26 @@ class SkillsService extends Service {
     getInstallCommand({ sourceRepo, sourceUrl, name }) {
         const source = String(sourceRepo || sourceUrl || '').trim();
         if (!source) return '';
+        if (/^upload:\/\//i.test(source)) return '';
         return `npx skills add ${source} --skill "${name}"`;
     }
 
+    buildUploadSourceMeta(fileName = '') {
+        const baseName = path.basename(String(fileName || '').trim(), '.skill');
+        const normalizedName = this.sanitizeSlugSegment(baseName) || 'uploaded-skill';
+        return {
+            sourceUrl: `upload://${normalizedName}.skill`,
+            sourceType: 'upload',
+            cloneUrl: '',
+            sourceRepo: '',
+            ref: '',
+            subpath: '',
+            repoHost: 'upload',
+            repoPath: normalizedName,
+            originalAction: 'upload',
+        };
+    }
+
     extractDescription(content) {
         const stripped = content
             .split('\n')
@@ -1209,6 +1233,110 @@ class SkillsService extends Service {
         }
     }
 
+    async importSkillFile(params = {}, file) {
+        const skillName = String(params.skillName || '').trim();
+        const category = this.normalizeCategory(params.category);
+        const tags = this.normalizePlatformTags(params.tags);
+        const fileName = String((file && file.filename) || '').trim();
+        const filePath = String((file && file.filepath) || '').trim();
+
+        if (!fileName || !filePath) {
+            this.ctx.throw(400, '上传文件无效');
+        }
+        if (!/\.skill$/i.test(fileName)) {
+            this.ctx.throw(400, '仅支持上传 .skill 文件');
+        }
+        if (!fs.existsSync(filePath)) {
+            this.ctx.throw(400, '上传文件不存在或已失效');
+        }
+
+        await this.ensureStorageReady();
+
+        const parsedSource = this.buildUploadSourceMeta(fileName);
+        let sourceRecord = null;
+        let tempDir = '';
+
+        try {
+            sourceRecord = await this.upsertSourceRecord(parsedSource, 'syncing');
+            tempDir = fs.mkdtempSync(path.join(os.tmpdir(), 'skills-upload-'));
+
+            try {
+                const zip = new AdmZip(filePath);
+                zip.extractAllTo(tempDir, true);
+            } catch (error) {
+                this.ctx.throw(400, `解析 .skill 文件失败: ${error.message}`);
+            }
+
+            const discoveredSkillDirs = this.discoverSkillDirs(tempDir);
+            if (discoveredSkillDirs.length === 0) {
+                this.ctx.throw(400, '.skill 包内未发现有效技能（缺少 SKILL.md）');
+            }
+
+            let skillRecords = discoveredSkillDirs.map((skillDir) =>
+                this.prepareSkillRecord(skillDir, tempDir, parsedSource, category, tags)
+            );
+
+            skillRecords = this.filterSkillByName(skillRecords, skillName);
+            if (skillRecords.length === 0) {
+                this.ctx.throw(400, '未匹配到指定技能，请检查 skillName 是否正确');
+            }
+
+            const importedSkills = await this.persistSkillsForSource(
+                sourceRecord.id,
+                parsedSource,
+                skillRecords
+            );
+
+            await sourceRecord.update({
+                sync_status: 'idle',
+                sync_error: '',
+                last_synced_at: new Date(),
+            });
+
+            this.invalidateCache();
+            await this.ensureSkillCache();
+
+            return {
+                source: parsedSource.sourceUrl,
+                skillName,
+                category,
+                tags,
+                importedCount: importedSkills.length,
+                refreshedCount: importedSkills.length,
+                importedSkills: importedSkills.map((item) => ({
+                    slug: item.slug,
+                    name: item.name,
+                    sourceRepo: item.sourceRepo,
+                    sourcePath: item.sourcePath,
+                })),
+            };
+        } catch (error) {
+            if (sourceRecord) {
+                try {
+                    await sourceRecord.update({
+                        sync_status: 'failed',
+                        sync_error: String(error.message || error),
+                    });
+                } catch (updateError) {
+                    this.ctx.logger.warn(`[skills] 写入上传失败状态异常: ${updateError.message}`);
+                }
+            }
+
+            if (error.status && error.status >= 400 && error.status < 600) {
+                throw error;
+            }
+            this.ctx.throw(500, `导入失败: ${error.message}`);
+        } finally {
+            if (tempDir && fs.existsSync(tempDir)) {
+                try {
+                    fs.rmSync(tempDir, { recursive: true, force: true });
+                } catch (error) {
+                    this.ctx.logger.warn(`[skills] 清理上传解压目录失败: ${tempDir}, ${error.message}`);
+                }
+            }
+        }
+    }
+
     async persistSkillsForSource(sourceId, sourceMeta, skillRecords = []) {
         const { SkillsItem, SkillsFile } = this.app.model;
         const { Op } = this.app.Sequelize;
@@ -1415,7 +1543,7 @@ class SkillsService extends Service {
             'User-Agent': 'doraemon-skills-market',
         };
 
-        const token = String(process.env.GITHUB_TOKEN || '').trim();
+        const token = this.resolveGitHubToken();
         if (token) {
             headers.Authorization = `Bearer ${token}`;
         }
@@ -1533,14 +1661,20 @@ class SkillsService extends Service {
     }
 
     resolveGitlabToken() {
-        const runtimeToken = String(process.env.GITLAB_TOKEN || '').trim();
-        if (runtimeToken) return runtimeToken;
-        return String(DEFAULT_GITLAB_TOKEN || '').trim();
+        const token = this.getSkillsConfig().gitlabToken;
+        return String(token || '').trim();
+    }
+
+    resolveGitlabHostWhitelist() {
+        const list = this.getSkillsConfig().gitlabHostWhitelist;
+        if (!Array.isArray(list)) return [];
+        return list.map((item) => String(item || '').trim().toLowerCase()).filter(Boolean);
     }
 
     getGitAuthPrefixArgs(remoteUrl = '') {
         const host = this.extractHostFromRemote(remoteUrl);
-        if (host !== 'gitlab.prod.dtstack.cn') {
+        const whitelist = this.resolveGitlabHostWhitelist();
+        if (!host || !whitelist.includes(host)) {
             return [];
         }
 
diff --git a/app/web/api/index.ts b/app/web/api/index.ts
index e03e923..fc7bbef 100644
--- a/app/web/api/index.ts
+++ b/app/web/api/index.ts
@@ -9,8 +9,16 @@ function mapUrlObjToFuncObj(urlObj: any) {
         const item = urlObj[key];
         URL[key] = item.url;
         API[key] = async function (params: any) {
+            const rawMethod = String(item.method || 'get');
+            const methodName =
+                typeof (http as any)[rawMethod] === 'function'
+                    ? rawMethod
+                    : rawMethod.toLowerCase();
+            if (typeof (http as any)[methodName] !== 'function') {
+                throw new Error(`Unsupported API method: ${item.method}`);
+            }
             // eslint-disable-next-line no-return-await
-            return await http[item.method.toLowerCase()](item.url, params);
+            return await (http as any)[methodName](item.url, params);
         };
     });
     return { API, URL };
diff --git a/app/web/api/url.ts b/app/web/api/url.ts
index c986ecc..33cb838 100644
--- a/app/web/api/url.ts
+++ b/app/web/api/url.ts
@@ -371,4 +371,9 @@ export default {
         method: 'post',
         url: '/api/skills/import',
     },
+    // 上传 .skill 文件导入
+    importSkillFile: {
+        method: 'postForm',
+        url: '/api/skills/import-file',
+    },
 };
diff --git a/app/web/pages/skills/index.tsx b/app/web/pages/skills/index.tsx
index b570b94..4c14972 100644
--- a/app/web/pages/skills/index.tsx
+++ b/app/web/pages/skills/index.tsx
@@ -6,6 +6,7 @@ import {
     ImportOutlined,
     SearchOutlined,
     StarOutlined,
+    UploadOutlined,
 } from '@ant-design/icons';
 import {
     Button,
@@ -18,12 +19,14 @@ import {
     message,
     Modal,
     Pagination,
+    Radio,
     Row,
     Select,
     Space,
     Spin,
     Tag,
     Typography,
+    Upload,
 } from 'antd';
 
 import { API } from '@/api';
@@ -59,6 +62,8 @@ const SkillsMarket: React.FC<any> = ({ history }) => {
     const [total, setTotal] = useState(0);
     const [importVisible, setImportVisible] = useState(false);
     const [importing, setImporting] = useState(false);
+    const [importMode, setImportMode] = useState<'source' | 'file'>('source');
+    const [uploadFiles, setUploadFiles] = useState<any[]>([]);
     const [importForm] = Form.useForm();
     const [query, setQuery] = useState(INITIAL_QUERY);
 
@@ -97,15 +102,20 @@ const SkillsMarket: React.FC<any> = ({ history }) => {
 
     const openImportModal = () => {
         setImportVisible(true);
+        setImportMode('source');
+        setUploadFiles([]);
         importForm.setFieldsValue({
             category: '通用',
             tags: [],
+            source: '',
         });
     };
 
     const closeImportModal = () => {
         if (importing) return;
         setImportVisible(false);
+        setImportMode('source');
+        setUploadFiles([]);
         importForm.resetFields();
     };
 
@@ -113,7 +123,23 @@ const SkillsMarket: React.FC<any> = ({ history }) => {
         try {
             const values = await importForm.validateFields();
             setImporting(true);
-            const response = await API.importSkill(values);
+            let response = null;
+            if (importMode === 'file') {
+                const targetFile = uploadFiles[0]?.originFileObj;
+                if (!targetFile) {
+                    message.error('请先选择 .skill 文件');
+                    return;
+                }
+                response = await API.importSkillFile({
+                    file: targetFile,
+                    skillName: values.skillName || '',
+                    category: values.category,
+                    tags: JSON.stringify(values.tags || []),
+                });
+            } else {
+                response = await API.importSkill(values);
+            }
+
             if (!response.success) {
                 message.error(response.msg || '导入失败');
                 return;
@@ -126,6 +152,8 @@ const SkillsMarket: React.FC<any> = ({ history }) => {
                 message.success('导入完成，技能可能已存在');
             }
             setImportVisible(false);
+            setImportMode('source');
+            setUploadFiles([]);
             importForm.resetFields();
             fetchSkills({ ...query });
         } catch (error) {
@@ -291,13 +319,46 @@ const SkillsMarket: React.FC<any> = ({ history }) => {
                 destroyOnClose
             >
                 <Form form={importForm} layout="vertical">
+                    <Form.Item label="导入方式">
+                        <Radio.Group
+                            value={importMode}
+                            onChange={(event) => setImportMode(event.target.value)}
+                        >
+                            <Radio.Button value="source">来源地址</Radio.Button>
+                            <Radio.Button value="file">上传 .skill 文件</Radio.Button>
+                        </Radio.Group>
+                    </Form.Item>
                     <Form.Item
                         name="source"
                         label="来源地址"
-                        rules={[{ required: true, message: '请输入来源地址' }]}
+                        rules={
+                            importMode === 'source'
+                                ? [{ required: true, message: '请输入来源地址' }]
+                                : []
+                        }
                     >
-                        <Input placeholder="支持 GitHub / GitLab / 内网 GitLab / tree 子目录 URL" />
+                        <Input
+                            disabled={importMode !== 'source'}
+                            placeholder="支持 GitHub / GitLab / 内网 GitLab / tree 子目录 URL"
+                        />
                     </Form.Item>
+                    {importMode === 'file' && (
+                        <Form.Item
+                            label=".skill 文件"
+                            required
+                            extra="仅支持 skill-creator 打包生成的 .skill（zip）文件"
+                        >
+                            <Upload
+                                accept=".skill"
+                                maxCount={1}
+                                fileList={uploadFiles}
+                                beforeUpload={() => false}
+                                onChange={(info) => setUploadFiles(info.fileList || [])}
+                            >
+                                <Button icon={<UploadOutlined />}>选择 .skill 文件</Button>
+                            </Upload>
+                        </Form.Item>
+                    )}
                     <Form.Item name="skillName" label="Skill 名称（可选）">
                         <Input placeholder="可选，等价于 --skill <name>" />
                     </Form.Item>
@@ -339,9 +400,15 @@ const SkillsMarket: React.FC<any> = ({ history }) => {
                         />
                     </Form.Item>
                 </Form>
-                <Text type="secondary">
-                    示例：`https://github.com/openclaw/openclaw/tree/main/skills/himalaya`
-                </Text>
+                {importMode === 'source' ? (
+                    <Text type="secondary">
+                        示例：`https://github.com/openclaw/openclaw/tree/main/skills/himalaya`
+                    </Text>
+                ) : (
+                    <Text type="secondary">
+                        提示：`.skill` 本质是 zip 包，内部应包含 `技能目录/SKILL.md`
+                    </Text>
+                )}
             </Modal>
         </div>
     );
diff --git a/app/web/router/index.ts b/app/web/router/index.ts
index fdbe1d1..1039107 100644
--- a/app/web/router/index.ts
+++ b/app/web/router/index.ts
@@ -1,10 +1,9 @@
 import BasicLayout from '@/layouts/basicLayout';
+import Loadable from 'react-loadable';
 // 文章订阅管理
 import ArticleSubscriptionList from '@/pages/articleSubscription';
 // 配置中心
 import ConfigCenter from '@/pages/configCenter';
-// 配置详情
-import ConfigDetail from '@/pages/configDetail';
 // 环境管理
 import EnvManagement from '@/pages/envManagement';
 import NotFound from '@/pages/exception/404';
@@ -26,12 +25,20 @@ import SkillsMarket from '@/pages/skills';
 import ProxyServer from '@/pages/proxyServer';
 // hosts列表
 import SwitchHostsList from '@/pages/switchHosts';
-// hosts编辑
-import SwitchHostsEdit from '@/pages/switchHosts/editHosts';
 import TagsManagement from '@/pages/tagsManagement';
 // 工具箱
 import Toolbox from '@/pages/toolbox';
 
+const ConfigDetail = Loadable({
+    loader: () => import('@/pages/configDetail'),
+    loading: () => null,
+});
+
+const SwitchHostsEdit = Loadable({
+    loader: () => import('@/pages/switchHosts/editHosts'),
+    loading: () => null,
+});
+
 const urlPrefix = '/page';
 const routes: any = [
     {
diff --git a/config/config.default.js b/config/config.default.js
index 64c2f9f..2fc20d7 100644
--- a/config/config.default.js
+++ b/config/config.default.js
@@ -38,6 +38,11 @@ module.exports = (app) => {
         owner: 'dtux-kangaroo',
         configRepositoryName: 'ko-config',
     };
+    exports.skills = {
+        gitlabToken: process.env.GITLAB_TOKEN || '',
+        githubToken: process.env.GITHUB_TOKEN || '',
+        gitlabHostWhitelist: ['gitlab.prod.dtstack.cn'],
+    };
 
     exports.middleware = ['access'];
 
@@ -58,7 +63,7 @@ module.exports = (app) => {
         // 文件上传
         fileSize: '200mb',
         mode: 'file', // 使用文件模式，直接保存到临时文件
-        fileExtensions: ['.zip', '.tar', '.gz', '.tgz'], // 允许的文件扩展名
+        fileExtensions: ['.zip', '.tar', '.gz', '.tgz', '.skill'], // 允许的文件扩展名
         tmpdir: path.join(app.baseDir, 'cache/uploads'), // 临时文件目录
         fields: 100, // 允许的最多字段数量
         cleanSchedule: {
@@ -71,6 +76,7 @@ module.exports = (app) => {
             '.tar',
             '.gz',
             '.tgz',
+            '.skill',
         ],
     };
 

From 716fc99c41f855cab5aff8e991011b2191942ebd Mon Sep 17 00:00:00 2001
From: huaiju <huaiju@dtstack.com>
Date: Wed, 25 Feb 2026 21:57:56 +0800
Subject: [PATCH 27/43] fix: speed up subpath import via sparse clone fallback

---
 app/service/skills.js | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/app/service/skills.js b/app/service/skills.js
index 25b3893..1480afd 100644
--- a/app/service/skills.js
+++ b/app/service/skills.js
@@ -832,6 +832,41 @@ class SkillsService extends Service {
 
         const env = this.buildCommandEnv({ remoteUrl: parsedSource.cloneUrl });
         const authArgs = this.getGitAuthPrefixArgs(parsedSource.cloneUrl);
+        const hasSubpath = Boolean(String(parsedSource.subpath || '').trim());
+
+        // 子目录导入优先使用 sparse clone，避免大仓库全量 clone 导致长时间卡顿。
+        if (hasSubpath) {
+            const sparseCloneArgs = [ ...authArgs, 'clone', '--depth', '1', '--filter=blob:none', '--sparse' ];
+            if (parsedSource.ref) {
+                sparseCloneArgs.push('--branch', parsedSource.ref);
+            }
+            sparseCloneArgs.push(parsedSource.cloneUrl, targetDir);
+
+            try {
+                await this.runCommand('git', sparseCloneArgs, GIT_COMMAND_TIMEOUT_MS, process.cwd(), env);
+                await this.runCommand(
+                    'git',
+                    [ '-C', targetDir, 'sparse-checkout', 'set', parsedSource.subpath ],
+                    GIT_COMMAND_TIMEOUT_MS,
+                    process.cwd(),
+                    env
+                );
+                return;
+            } catch (error) {
+                this.ctx.logger.warn(`[skills] sparse clone 失败，回退普通 clone: ${error.message}`);
+                if (fs.existsSync(targetDir)) {
+                    try {
+                        fs.rmSync(targetDir, { recursive: true, force: true });
+                    } catch (cleanupError) {
+                        this.ctx.logger.warn(
+                            `[skills] sparse clone 回退清理目录失败: ${targetDir}, ${cleanupError.message}`
+                        );
+                    }
+                }
+                fs.mkdirSync(targetDir, { recursive: true });
+            }
+        }
+
         const cloneArgs = [ ...authArgs, 'clone', '--depth', '1' ];
         if (parsedSource.ref) {
             cloneArgs.push('--branch', parsedSource.ref);

From b7ab8dabe4b954d1e4ae9e3f6f26f1a09419bf99 Mon Sep 17 00:00:00 2001
From: huaiju <huaiju@dtstack.com>
Date: Sat, 21 Mar 2026 17:23:05 +0800
Subject: [PATCH 28/43] feat(skills): add install-meta api for cli install
 protocol

---
 app/controller/skills.js |  7 ++++
 app/router.js            |  1 +
 app/service/skills.js    | 84 ++++++++++++++++++++++++++++++++++++++++
 env.json                 |  2 +-
 4 files changed, 93 insertions(+), 1 deletion(-)

diff --git a/app/controller/skills.js b/app/controller/skills.js
index 35c8754..e0041e3 100644
--- a/app/controller/skills.js
+++ b/app/controller/skills.js
@@ -39,6 +39,13 @@ class SkillsController extends Controller {
         ctx.body = content;
     }
 
+    async getSkillInstallMeta() {
+        const { app, ctx } = this;
+        const { slug } = ctx.query;
+        const data = await ctx.service.skills.getInstallMeta(slug);
+        ctx.body = app.utils.response(true, data);
+    }
+
     async importSkill() {
         const { app, ctx } = this;
         const params = ctx.request.body || {};
diff --git a/app/router.js b/app/router.js
index 9f9df62..99d4f59 100644
--- a/app/router.js
+++ b/app/router.js
@@ -153,6 +153,7 @@ module.exports = (app) => {
     app.get('/api/skills/detail', app.controller.skills.getSkillDetail);
     app.get('/api/skills/related', app.controller.skills.getRelatedSkills);
     app.get('/api/skills/file-content', app.controller.skills.getSkillFileContent);
+    app.get('/api/skills/install-meta', app.controller.skills.getSkillInstallMeta);
     app.get('/api/skills/download', app.controller.skills.downloadSkillArchive);
     app.post('/api/skills/import', app.controller.skills.importSkill);
     app.post('/api/skills/import-file', app.controller.skills.importSkillFile);
diff --git a/app/service/skills.js b/app/service/skills.js
index 1480afd..54a25a1 100644
--- a/app/service/skills.js
+++ b/app/service/skills.js
@@ -1,5 +1,6 @@
 const Service = require('egg').Service;
 const AdmZip = require('adm-zip');
+const crypto = require('crypto');
 const { spawn } = require('child_process');
 const fs = require('fs');
 const os = require('os');
@@ -17,6 +18,7 @@ const MAX_TAG_LENGTH = 20;
 const DISCOVER_DEPTH_LIMIT = 2;
 const SKILLS_ROOT_DISCOVER_DEPTH_LIMIT = 8;
 const DISCOVER_MAX_DIR_COUNT = 3000;
+const SKILL_SLUG_PATTERN = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
 
 const SKILL_CATEGORY_OPTIONS = [
     '通用',
@@ -353,6 +355,88 @@ class SkillsService extends Service {
         };
     }
 
+    validateSkillSlug(slug) {
+        const value = String(slug || '').trim();
+        if (!value) {
+            this.ctx.throw(400, '缺少技能标识');
+        }
+        if (!SKILL_SLUG_PATTERN.test(value)) {
+            this.ctx.throw(400, '非法技能标识');
+        }
+        return value;
+    }
+
+    buildSkillDownloadUrl(slug) {
+        const encodedSlug = encodeURIComponent(slug);
+        const { protocol, host } = this.ctx;
+        if (protocol && host) {
+            return `${protocol}://${host}/api/skills/download?slug=${encodedSlug}`;
+        }
+        return `/api/skills/download?slug=${encodedSlug}`;
+    }
+
+    async getSkillPackageInstallability(skillId) {
+        const { SkillsFile } = this.app.model;
+        const rows = await SkillsFile.findAll({
+            where: {
+                skill_id: skillId,
+                is_delete: 0,
+            },
+            attributes: [ 'file_path' ],
+            order: [ [ 'file_path', 'ASC' ] ],
+            limit: MAX_FILE_LIST_COUNT,
+        });
+
+        if (rows.length === 0) {
+            return {
+                installable: false,
+                reason: 'skill package has no files',
+            };
+        }
+
+        const hasSkillMd = rows.some((row) => path.basename(row.file_path).toLowerCase() === 'skill.md');
+        if (!hasSkillMd) {
+            return {
+                installable: false,
+                reason: 'skill package missing SKILL.md',
+            };
+        }
+
+        return {
+            installable: true,
+            reason: '',
+        };
+    }
+
+    async getInstallMeta(slug) {
+        await this.ensureSkillCache();
+        const safeSlug = this.validateSkillSlug(slug);
+        const skill = this.getSkillBySlug(safeSlug);
+        const { installable, reason } = await this.getSkillPackageInstallability(skill.id);
+        const downloadUrl = this.buildSkillDownloadUrl(skill.slug);
+
+        let sha256 = '';
+        if (installable) {
+            const { content } = await this.getSkillArchive(skill.slug);
+            sha256 = crypto.createHash('sha256').update(content).digest('hex');
+        }
+
+        return {
+            slug: skill.slug,
+            name: skill.name,
+            downloadUrl,
+            packageType: 'zip',
+            packageVersion: 'v1',
+            packageRootMode: 'find-skill-md',
+            installDirName: skill.slug,
+            version: '',
+            sha256,
+            sourceRepo: skill.sourceRepo || '',
+            installable,
+            reason,
+        };
+    }
+
     decodeStoredFileContent(content, isBinary) {
         if (!content) return Buffer.from('');
         if (isBinary) {
diff --git a/env.json b/env.json
index 144c691..ab3e9ae 100644
--- a/env.json
+++ b/env.json
@@ -8,7 +8,7 @@
     "mysql": {
         "prod": {}
     },
-    "mcpDeployDir": "/opt/doraemon/mcp-server/",
+    "mcpDeployDir": "/tmp/doraemon/mcp-server/",
     "mcpEndpointPort": 7005,
     "mcpInspectorWebPort": 7003,
     "mcpInspectorServerPort": 7004,

From 11ae9f03ddaceb5aa132a67705ca8586729e55e3 Mon Sep 17 00:00:00 2001
From: huaiju <huaiju@dtstack.com>
Date: Sat, 21 Mar 2026 17:44:30 +0800
Subject: [PATCH 29/43] feat(cli): implement doraemon-skills install/list wp2

---
 bin/doraemon-skills        |   3 +
 package.json               |   3 +
 scripts/doraemon-skills.js | 279 +++++++++++++++++++++++++++++++++++++
 3 files changed, 285 insertions(+)
 create mode 100755 bin/doraemon-skills
 create mode 100755 scripts/doraemon-skills.js

diff --git a/bin/doraemon-skills b/bin/doraemon-skills
new file mode 100755
index 0000000..8758d89
--- /dev/null
+++ b/bin/doraemon-skills
@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+
+require('../scripts/doraemon-skills');
diff --git a/package.json b/package.json
index 9b10a06..364ec64 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,9 @@
         "log": "conventional-changelog --config ./node_modules/vue-cli-plugin-commitlint/lib/log -i CHANGELOG.md -s -r 0",
         "cz": "npm run log && git add . && git cz"
     },
+    "bin": {
+        "doraemon-skills": "bin/doraemon-skills"
+    },
     "dependencies": {
         "@ant-design/icons": "4.5.0",
         "@modelcontextprotocol/sdk": "^1.25.2",
diff --git a/scripts/doraemon-skills.js b/scripts/doraemon-skills.js
new file mode 100755
index 0000000..0f75585
--- /dev/null
+++ b/scripts/doraemon-skills.js
@@ -0,0 +1,279 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const os = require('os');
+const path = require('path');
+const AdmZip = require('adm-zip');
+const fetch = require('node-fetch');
+
+function fail(message) {
+    throw new Error(message);
+}
+
+function normalizeServerUrl(server) {
+    if (!server) {
+        fail('Server is required. Provide --server <url> or set DORAEMON_SKILLS_SERVER.');
+    }
+    try {
+        const parsed = new URL(server);
+        return parsed.toString();
+    } catch (error) {
+        fail(`Invalid server URL: ${server}`);
+    }
+}
+
+function parseArgs(argv) {
+    const [command, ...rest] = argv;
+    const options = {};
+    const positionals = [];
+
+    for (let i = 0; i < rest.length; i++) {
+        const token = rest[i];
+        if (token === '--server' || token === '--dir') {
+            const value = rest[i + 1];
+            if (!value || value.startsWith('--')) {
+                fail(`Missing value for ${token}`);
+            }
+            options[token.slice(2)] = value;
+            i += 1;
+            continue;
+        }
+        if (token.startsWith('--')) {
+            fail(`Unknown option: ${token}`);
+        }
+        positionals.push(token);
+    }
+
+    return {
+        command,
+        positionals,
+        options,
+    };
+}
+
+function resolveInstallRoot(dirOption) {
+    const root = dirOption || './skills';
+    return path.resolve(process.cwd(), root);
+}
+
+function resolveServer(options) {
+    const value = options.server || process.env.DORAEMON_SKILLS_SERVER;
+    return normalizeServerUrl(value);
+}
+
+function parseResponsePayload(payload) {
+    if (!payload || typeof payload !== 'object') {
+        fail('Invalid server response payload.');
+    }
+    if (payload.success !== true) {
+        const message = payload.message || 'Request failed.';
+        fail(message);
+    }
+    return payload.data;
+}
+
+async function readJsonResponse(response) {
+    const raw = await response.text();
+    let payload = null;
+    try {
+        payload = raw ? JSON.parse(raw) : null;
+    } catch (error) {
+        if (!response.ok) {
+            fail(`Request failed with status ${response.status}.`);
+        }
+        fail('Invalid JSON response.');
+    }
+    return payload;
+}
+
+async function requestInstallMeta(server, slug) {
+    const metaUrl = new URL('/api/skills/install-meta', server);
+    metaUrl.searchParams.set('slug', slug);
+
+    let response;
+    try {
+        response = await fetch(metaUrl.toString());
+    } catch (error) {
+        fail(`Failed to request install-meta: ${error.message}`);
+    }
+
+    const payload = await readJsonResponse(response);
+    if (!response.ok) {
+        const message = payload && payload.message ? payload.message : `Request failed with status ${response.status}.`;
+        fail(message);
+    }
+
+    return parseResponsePayload(payload);
+}
+
+function findSkillRootBySkillMd(baseDir) {
+    const queue = [baseDir];
+    const skillMdDirs = [];
+
+    while (queue.length) {
+        const current = queue.shift();
+        const entries = fs.readdirSync(current, { withFileTypes: true });
+        let hasSkillMd = false;
+
+        for (const entry of entries) {
+            if (entry.isFile() && entry.name.toLowerCase() === 'skill.md') {
+                hasSkillMd = true;
+                break;
+            }
+        }
+        if (hasSkillMd) {
+            skillMdDirs.push(current);
+            continue;
+        }
+
+        for (const entry of entries) {
+            if (!entry.isDirectory()) {
+                continue;
+            }
+            queue.push(path.join(current, entry.name));
+        }
+    }
+
+    if (skillMdDirs.length === 0) {
+        fail('Invalid package: SKILL.md not found.');
+    }
+
+    skillMdDirs.sort((a, b) => {
+        const depthDiff = a.split(path.sep).length - b.split(path.sep).length;
+        if (depthDiff !== 0) {
+            return depthDiff;
+        }
+        return a.localeCompare(b);
+    });
+
+    return skillMdDirs[0];
+}
+
+function ensureZipBuffer(buffer) {
+    if (!Buffer.isBuffer(buffer) || buffer.length < 2) {
+        fail('Download failed: package is not a zip archive.');
+    }
+    if (buffer[0] !== 0x50 || buffer[1] !== 0x4b) {
+        fail('Download failed: package is not a zip archive.');
+    }
+}
+
+async function downloadArchive(downloadUrl) {
+    let response;
+    try {
+        response = await fetch(downloadUrl);
+    } catch (error) {
+        fail(`Failed to download package: ${error.message}`);
+    }
+
+    if (!response.ok) {
+        fail(`Failed to download package: HTTP ${response.status}`);
+    }
+
+    const buffer = await response.buffer();
+    ensureZipBuffer(buffer);
+    return buffer;
+}
+
+function extractArchive(buffer, tempDir) {
+    try {
+        const zip = new AdmZip(buffer);
+        zip.extractAllTo(tempDir, true);
+    } catch (error) {
+        fail(`Failed to extract zip: ${error.message}`);
+    }
+}
+
+function installFromSkillRoot(skillRoot, targetDir) {
+    if (fs.existsSync(targetDir)) {
+        fail(`Target directory already exists: ${targetDir}`);
+    }
+    fs.mkdirSync(path.dirname(targetDir), { recursive: true });
+    fs.cpSync(skillRoot, targetDir, { recursive: true });
+}
+
+async function runInstall(positionals, options) {
+    const slug = positionals[0];
+    if (!slug) {
+        fail('Usage: doraemon-skills install <slug> [--server <url>] [--dir <path>]');
+    }
+
+    const server = resolveServer(options);
+    const installRoot = resolveInstallRoot(options.dir);
+    const meta = await requestInstallMeta(server, slug);
+
+    if (meta.installable === false) {
+        fail(`Skill is not installable: ${meta.reason || 'unknown reason'}`);
+    }
+    if (meta.packageType !== 'zip') {
+        fail(`Unsupported packageType: ${meta.packageType}`);
+    }
+    if (meta.packageRootMode !== 'find-skill-md') {
+        fail(`Unsupported packageRootMode: ${meta.packageRootMode}`);
+    }
+    if (!meta.downloadUrl) {
+        fail('install-meta missing downloadUrl.');
+    }
+    if (!meta.installDirName) {
+        fail('install-meta missing installDirName.');
+    }
+
+    const downloadUrl = new URL(meta.downloadUrl, server).toString();
+    const targetDir = path.resolve(installRoot, meta.installDirName);
+
+    console.log(`Downloading: ${downloadUrl}`);
+    const buffer = await downloadArchive(downloadUrl);
+
+    const tempDir = fs.mkdtempSync(path.join(os.tmpdir(), 'doraemon-skills-'));
+    try {
+        extractArchive(buffer, tempDir);
+        const skillRoot = findSkillRootBySkillMd(tempDir);
+        installFromSkillRoot(skillRoot, targetDir);
+    } finally {
+        fs.rmSync(tempDir, { recursive: true, force: true });
+    }
+
+    console.log(`Installed: ${meta.slug || slug} -> ${targetDir}`);
+}
+
+function runList(options) {
+    const installRoot = resolveInstallRoot(options.dir);
+    if (!fs.existsSync(installRoot)) {
+        return;
+    }
+
+    const names = fs
+        .readdirSync(installRoot, { withFileTypes: true })
+        .filter((entry) => entry.isDirectory())
+        .map((entry) => entry.name)
+        .sort((a, b) => a.localeCompare(b));
+
+    for (const name of names) {
+        console.log(name);
+    }
+}
+
+async function main() {
+    const argv = process.argv.slice(2);
+    const { command, positionals, options } = parseArgs(argv);
+
+    if (!command) {
+        fail('Usage: doraemon-skills <install|list> ...');
+    }
+
+    if (command === 'install') {
+        await runInstall(positionals, options);
+        return;
+    }
+    if (command === 'list') {
+        runList(options);
+        return;
+    }
+
+    fail(`Unknown command: ${command}`);
+}
+
+main().catch((error) => {
+    console.error(`Error: ${error.message}`);
+    process.exitCode = 1;
+});

From 26f30d483884a41c3d249c76517d832a93ebe4ce Mon Sep 17 00:00:00 2001
From: huaiju <huaiju@dtstack.com>
Date: Sat, 21 Mar 2026 17:55:26 +0800
Subject: [PATCH 30/43] feat(skills): modalize detail and add cli install panel

---
 app/web/api/url.ts                            |   5 +
 .../skills/detail/SkillDetailContent.tsx      | 735 ++++++++++++++++++
 app/web/pages/skills/detail/index.tsx         | 581 +-------------
 app/web/pages/skills/detail/style.scss        |   8 +
 app/web/pages/skills/index.tsx                |  43 +-
 app/web/pages/skills/style.scss               |  13 +
 app/web/pages/skills/types.ts                 |  15 +
 7 files changed, 823 insertions(+), 577 deletions(-)
 create mode 100644 app/web/pages/skills/detail/SkillDetailContent.tsx

diff --git a/app/web/api/url.ts b/app/web/api/url.ts
index 33cb838..3cae9e4 100644
--- a/app/web/api/url.ts
+++ b/app/web/api/url.ts
@@ -361,6 +361,11 @@ export default {
         method: 'get',
         url: '/api/skills/file-content',
     },
+    // 获取 Skill 安装元信息
+    getSkillInstallMeta: {
+        method: 'get',
+        url: '/api/skills/install-meta',
+    },
     // 下载 Skill 目录压缩包
     downloadSkillArchive: {
         method: 'get',
diff --git a/app/web/pages/skills/detail/SkillDetailContent.tsx b/app/web/pages/skills/detail/SkillDetailContent.tsx
new file mode 100644
index 0000000..cb54edb
--- /dev/null
+++ b/app/web/pages/skills/detail/SkillDetailContent.tsx
@@ -0,0 +1,735 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import SyntaxHighlighter from 'react-syntax-highlighter';
+import { atomOneLight } from 'react-syntax-highlighter/dist/cjs/styles/hljs';
+import {
+    ArrowLeftOutlined,
+    CopyOutlined,
+    DownloadOutlined,
+    FolderOpenOutlined,
+    LinkOutlined,
+    ReadOutlined,
+    ShareAltOutlined,
+    StarOutlined,
+} from '@ant-design/icons';
+import {
+    Button,
+    Card,
+    Col,
+    Empty,
+    Row,
+    Space,
+    Spin,
+    Tabs,
+    Tag,
+    Tree,
+    Typography,
+} from 'antd';
+import type { DataNode } from 'antd/lib/tree';
+
+import { API } from '@/api';
+import MarkdownRenderer from '@/components/markdownRenderer';
+import { copyToClipboard } from '@/utils/copyUtils';
+import { SkillDetail, SkillFileContent, SkillInstallMeta, SkillItem } from '../types';
+import './style.scss';
+
+const { Title, Text, Paragraph } = Typography;
+const { TabPane } = Tabs;
+
+interface SkillTreeNode extends DataNode {
+    children?: SkillTreeNode[];
+}
+
+interface FrontmatterItem {
+    key: string;
+    value: string;
+}
+
+interface SkillDetailContentProps {
+    slug: string;
+    mode?: 'page' | 'modal';
+    history?: any;
+    onClose?: () => void;
+    onOpenSkill?: (nextSlug: string) => void;
+}
+
+const formatFileSize = (size = 0) => {
+    if (size < 1024) return `${size} B`;
+    if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`;
+    return `${(size / 1024 / 1024).toFixed(1)} MB`;
+};
+
+const sortTreeNodes = (nodes: SkillTreeNode[]) => {
+    nodes.sort((a, b) => {
+        const aIsLeaf = Boolean(a.isLeaf);
+        const bIsLeaf = Boolean(b.isLeaf);
+        if (aIsLeaf !== bIsLeaf) return aIsLeaf ? 1 : -1;
+        return String(a.title).localeCompare(String(b.title));
+    });
+    nodes.forEach((node) => {
+        if (node.children && node.children.length > 0) {
+            sortTreeNodes(node.children);
+        }
+    });
+};
+
+const buildFileTreeData = (fileList: string[]): SkillTreeNode[] => {
+    const treeData: SkillTreeNode[] = [];
+
+    fileList.forEach((filePath) => {
+        const segments = filePath.split('/').filter(Boolean);
+        let currentNodes = treeData;
+        let currentPath = '';
+
+        segments.forEach((segment, index) => {
+            currentPath = currentPath ? `${currentPath}/${segment}` : segment;
+            const isLeaf = index === segments.length - 1;
+            let node = currentNodes.find((item) => item.key === currentPath);
+
+            if (!node) {
+                node = {
+                    key: currentPath,
+                    title: segment,
+                    isLeaf,
+                    children: isLeaf ? undefined : [],
+                };
+                currentNodes.push(node);
+            }
+
+            if (!isLeaf) {
+                node.children = node.children || [];
+                currentNodes = node.children;
+            }
+        });
+    });
+
+    sortTreeNodes(treeData);
+    return treeData;
+};
+
+const normalizeSourceUrl = (sourceRepo: string) => {
+    if (!sourceRepo) return '';
+    const normalized = sourceRepo.replace(/^git\+/, '').trim();
+    const sshMatch = normalized.match(/^git@([^:]+):(.+?)(?:\.git)?$/);
+    if (sshMatch) {
+        return `https://${sshMatch[1]}/${sshMatch[2]}`;
+    }
+    if (/^https?:\/\//.test(normalized)) {
+        return normalized.replace(/\.git$/, '');
+    }
+    return '';
+};
+
+const normalizeFrontmatterValue = (value: string) => {
+    const trimmed = String(value || '').trim();
+    if (!trimmed) return '-';
+    if (
+        (trimmed.startsWith('"') && trimmed.endsWith('"')) ||
+        (trimmed.startsWith("'") && trimmed.endsWith("'"))
+    ) {
+        return trimmed.slice(1, -1);
+    }
+    return trimmed;
+};
+
+const parseMarkdownFrontmatter = (markdown = ''): { frontmatter: FrontmatterItem[]; body: string } => {
+    const content = String(markdown || '');
+    const match = content.match(/^---\r?\n([\s\S]*?)\r?\n---\r?\n?/);
+    if (!match) {
+        return {
+            frontmatter: [],
+            body: content,
+        };
+    }
+
+    const block = match[1] || '';
+    const lines = block.split(/\r?\n/);
+    const frontmatter: FrontmatterItem[] = [];
+    let currentKey = '';
+    let currentValueLines: string[] = [];
+
+    const pushCurrent = () => {
+        if (!currentKey) return;
+        const value = normalizeFrontmatterValue(currentValueLines.join('\n'));
+        frontmatter.push({ key: currentKey, value });
+    };
+
+    lines.forEach((line) => {
+        const keyMatch = line.match(/^([a-zA-Z0-9_-]+):\s*(.*)$/);
+        const isTopLevelKey = Boolean(keyMatch) && !/^\s/.test(line);
+
+        if (isTopLevelKey && keyMatch) {
+            pushCurrent();
+            currentKey = keyMatch[1];
+            currentValueLines = [keyMatch[2] || ''];
+            return;
+        }
+
+        if (currentKey) {
+            currentValueLines.push(line);
+        }
+    });
+
+    pushCurrent();
+
+    return {
+        frontmatter,
+        body: content.slice(match[0].length),
+    };
+};
+
+const formatDownloadCommand = (downloadUrl = '', fileName = 'skill.zip') => {
+    if (!downloadUrl) return '';
+    return `curl -L "${downloadUrl}" -o ${fileName}`;
+};
+
+const SkillDetailContent: React.FC<SkillDetailContentProps> = ({
+    slug,
+    mode = 'page',
+    history,
+    onClose,
+    onOpenSkill,
+}) => {
+    const [loading, setLoading] = useState(true);
+    const [fileLoading, setFileLoading] = useState(false);
+    const [detail, setDetail] = useState<SkillDetail | null>(null);
+    const [installMeta, setInstallMeta] = useState<SkillInstallMeta | null>(null);
+    const [related, setRelated] = useState<SkillItem[]>([]);
+    const [selectedFilePath, setSelectedFilePath] = useState('');
+    const [fileContent, setFileContent] = useState<SkillFileContent | null>(null);
+
+    const isModal = mode === 'modal';
+    const fileTreeData = useMemo(() => buildFileTreeData(detail?.fileList || []), [detail?.fileList]);
+    const sourceUrl = useMemo(() => normalizeSourceUrl(detail?.sourceRepo || ''), [detail?.sourceRepo]);
+    const downloadPath = useMemo(() => `/api/skills/download?slug=${encodeURIComponent(slug)}`, [slug]);
+    const deepLinkPath = useMemo(() => `/page/skills/${encodeURIComponent(slug)}`, [slug]);
+    const currentOrigin = useMemo(() => {
+        if (typeof window === 'undefined') return '';
+        return window.location.origin;
+    }, []);
+    const deepLinkUrl = useMemo(() => {
+        if (!currentOrigin) return deepLinkPath;
+        return `${currentOrigin}${deepLinkPath}`;
+    }, [currentOrigin, deepLinkPath]);
+    const serverArg = currentOrigin || '<current origin>';
+    const skillInstallCommand = useMemo(
+        () => `doraemon-skills install ${slug} --server ${serverArg}`,
+        [slug, serverArg]
+    );
+    const cliInstallPlaceholderCommand =
+        '# 待提供：Doraemon CLI 安装脚本 URL（例如 curl -fsSL <...> | bash）';
+    const archiveFileName = useMemo(() => {
+        const rawName = detail?.name || slug || 'skill';
+        const normalized = rawName
+            .toLowerCase()
+            .replace(/[^a-z0-9._-]+/g, '-')
+            .replace(/^-+|-+$/g, '');
+        return `${normalized || 'skill'}.zip`;
+    }, [detail?.name, slug]);
+    const downloadCommand = useMemo(() => {
+        if (installMeta?.downloadUrl) {
+            return formatDownloadCommand(installMeta.downloadUrl, archiveFileName);
+        }
+        if (!currentOrigin) {
+            return `curl -L "${downloadPath}" -o ${archiveFileName}`;
+        }
+        return formatDownloadCommand(`${currentOrigin}${downloadPath}`, archiveFileName);
+    }, [archiveFileName, currentOrigin, downloadPath, installMeta?.downloadUrl]);
+    const agentInstruction = useMemo(
+        () =>
+            [
+                '请先检查 Doraemon CLI 是否已安装（例如执行 doraemon-skills --help）。',
+                '若未安装，请先执行 Human 区的 Doraemon CLI 安装步骤（当前安装脚本 URL 待提供）。',
+                `安装当前技能：${skillInstallCommand}`,
+                '若安装目录不明确，请先询问用户，可使用 --dir <path> 指定目标目录。',
+            ].join('\n'),
+        [skillInstallCommand]
+    );
+    const isInstallable = Boolean(installMeta?.installable);
+    const installUnavailableReason = installMeta?.reason || 'install-meta 暂不可用';
+
+    useEffect(() => {
+        let cancelled = false;
+
+        const loadDetail = async () => {
+            setLoading(true);
+            try {
+                const [detailRes, relatedRes, installMetaRes] = await Promise.all([
+                    API.getSkillDetail({ slug }),
+                    API.getRelatedSkills({ slug, limit: 6 }),
+                    API.getSkillInstallMeta({ slug }),
+                ]);
+
+                if (cancelled) return;
+
+                if (detailRes.success) {
+                    const detailData = detailRes.data as SkillDetail;
+                    setDetail(detailData);
+                    const defaultFile = detailData.fileList.includes('SKILL.md')
+                        ? 'SKILL.md'
+                        : detailData.fileList[0] || '';
+                    setSelectedFilePath(defaultFile);
+                } else {
+                    setDetail(null);
+                    setSelectedFilePath('');
+                }
+
+                if (relatedRes.success) {
+                    setRelated(relatedRes.data || []);
+                } else {
+                    setRelated([]);
+                }
+
+                if (installMetaRes.success) {
+                    setInstallMeta(installMetaRes.data as SkillInstallMeta);
+                } else {
+                    setInstallMeta(null);
+                }
+            } catch (error) {
+                console.error('获取 Skill 详情失败:', error);
+                if (!cancelled) {
+                    setDetail(null);
+                    setRelated([]);
+                    setInstallMeta(null);
+                    setSelectedFilePath('');
+                }
+            } finally {
+                if (!cancelled) {
+                    setLoading(false);
+                }
+            }
+        };
+
+        loadDetail();
+
+        return () => {
+            cancelled = true;
+        };
+    }, [slug]);
+
+    useEffect(() => {
+        if (!selectedFilePath) {
+            setFileContent(null);
+            return;
+        }
+
+        let cancelled = false;
+        const loadFileContent = async () => {
+            setFileLoading(true);
+            try {
+                const response = await API.getSkillFileContent({
+                    slug,
+                    path: selectedFilePath,
+                });
+                if (!cancelled) {
+                    if (response.success) {
+                        setFileContent(response.data as SkillFileContent);
+                    } else {
+                        setFileContent(null);
+                    }
+                }
+            } catch (error) {
+                console.error('获取文件内容失败:', error);
+                if (!cancelled) {
+                    setFileContent(null);
+                }
+            } finally {
+                if (!cancelled) {
+                    setFileLoading(false);
+                }
+            }
+        };
+
+        loadFileContent();
+
+        return () => {
+            cancelled = true;
+        };
+    }, [slug, selectedFilePath]);
+
+    const renderFileViewer = () => {
+        if (fileLoading) {
+            return (
+                <div className="file-viewer-loading">
+                    <Spin size="large" />
+                </div>
+            );
+        }
+
+        if (!fileContent) {
+            return <Empty description="请选择需要查看的文件" />;
+        }
+
+        if (fileContent.isBinary) {
+            return <Empty description="二进制文件暂不支持在线预览" />;
+        }
+
+        if (fileContent.language === 'markdown') {
+            const parsedMarkdown = parseMarkdownFrontmatter(fileContent.content || '');
+            return (
+                <div className="markdown-file-viewer">
+                    {parsedMarkdown.frontmatter.length > 0 ? (
+                        <div className="frontmatter-table-wrap">
+                            <table className="frontmatter-table">
+                                <tbody>
+                                    {parsedMarkdown.frontmatter.map((item) => {
+                                        const isCodeStyle =
+                                            item.value.includes('\n') ||
+                                            item.value.startsWith('{') ||
+                                            item.value.startsWith('[');
+                                        return (
+                                            <tr key={item.key}>
+                                                <th>{item.key}</th>
+                                                <td>
+                                                    {isCodeStyle ? (
+                                                        <pre className="frontmatter-code">
+                                                            {item.value}
+                                                        </pre>
+                                                    ) : (
+                                                        <span>{item.value}</span>
+                                                    )}
+                                                </td>
+                                            </tr>
+                                        );
+                                    })}
+                                </tbody>
+                            </table>
+                        </div>
+                    ) : null}
+                    {parsedMarkdown.body.trim() ? (
+                        <MarkdownRenderer content={parsedMarkdown.body} />
+                    ) : null}
+                </div>
+            );
+        }
+
+        return (
+            <SyntaxHighlighter
+                style={atomOneLight}
+                language={fileContent.language || 'text'}
+                customStyle={{ margin: 0, borderRadius: 6, minHeight: 460 }}
+                showLineNumbers
+            >
+                {fileContent.content || ''}
+            </SyntaxHighlighter>
+        );
+    };
+
+    if (loading) {
+        return (
+            <div className={`page-skill-detail${isModal ? ' modal-skill-detail' : ''} loading-wrap`}>
+                <Spin size="large" />
+            </div>
+        );
+    }
+
+    if (!detail) {
+        return (
+            <div className={`page-skill-detail${isModal ? ' modal-skill-detail' : ''}`}>
+                <Empty description="Skill 不存在或已被删除">
+                    {isModal ? (
+                        <Button onClick={onClose}>关闭</Button>
+                    ) : (
+                        <Button onClick={() => history.push('/page/skills')}>返回 Skills 列表</Button>
+                    )}
+                </Empty>
+            </div>
+        );
+    }
+
+    return (
+        <div className={`page-skill-detail${isModal ? ' modal-skill-detail' : ''}`}>
+            <div className="detail-header">
+                {!isModal ? (
+                    <Button
+                        icon={<ArrowLeftOutlined />}
+                        className="back-btn"
+                        onClick={() => history.push('/page/skills')}
+                    >
+                        返回列表
+                    </Button>
+                ) : null}
+                <div className="title-group">
+                    <Title level={2}>{detail.name}</Title>
+                    <Paragraph type="secondary" style={{ marginBottom: 0 }}>
+                        {detail.description || '暂无描述'}
+                    </Paragraph>
+                    <Text type="secondary">slug: {detail.slug}</Text>
+                </div>
+            </div>
+
+            <Card className="meta-card">
+                <Space size={20} wrap>
+                    <Text>
+                        <StarOutlined /> Stars: {detail.stars || 0}
+                    </Text>
+                    <Text>分类: {detail.category || '未分类'}</Text>
+                    <Text>更新: {new Date(detail.updatedAt).toLocaleString('zh-CN')}</Text>
+                    <Text>来源: {detail.sourceRepo || detail.sourcePath}</Text>
+                </Space>
+                <div className="tags-wrap">
+                    {(detail.tags || []).map((tag) => (
+                        <Tag key={tag}>{tag}</Tag>
+                    ))}
+                </div>
+            </Card>
+
+            <Row gutter={[16, 16]} className="detail-main-row">
+                <Col xs={24} xl={16}>
+                    <Card
+                        className="file-tree-card"
+                        title={
+                            <Space>
+                                <FolderOpenOutlined />
+                                文件浏览
+                            </Space>
+                        }
+                        bodyStyle={{ padding: '8px 0', maxHeight: 280, overflow: 'auto' }}
+                    >
+                        {fileTreeData.length === 0 ? (
+                            <Empty description="暂无文件" />
+                        ) : (
+                            <Tree
+                                treeData={fileTreeData}
+                                selectedKeys={selectedFilePath ? [selectedFilePath] : []}
+                                defaultExpandAll
+                                onSelect={(keys, info) => {
+                                    if (!info.node.isLeaf) return;
+                                    const targetPath = String(keys[0] || '');
+                                    if (targetPath) {
+                                        setSelectedFilePath(targetPath);
+                                    }
+                                }}
+                            />
+                        )}
+                    </Card>
+
+                    <Card
+                        className="file-viewer-card"
+                        title={
+                            <Space>
+                                <ReadOutlined />
+                                <Text>{selectedFilePath || '文件预览'}</Text>
+                            </Space>
+                        }
+                        extra={
+                            fileContent ? (
+                                <Space>
+                                    <Tag>{fileContent.language}</Tag>
+                                    <Text type="secondary">{formatFileSize(fileContent.size)}</Text>
+                                </Space>
+                            ) : null
+                        }
+                    >
+                        {renderFileViewer()}
+                    </Card>
+                </Col>
+
+                <Col xs={24} xl={8}>
+                    <Card className="action-card" title="安装方式">
+                        <Tabs defaultActiveKey="human">
+                            <TabPane tab="我是 Human" key="human">
+                                {isInstallable ? (
+                                    <div className="install-tab-panel">
+                                        <Text type="secondary">先安装 Doraemon CLI（脚本地址当前待提供）</Text>
+                                        <div className="command-block">
+                                            <code>{cliInstallPlaceholderCommand}</code>
+                                            <Button
+                                                type="text"
+                                                className="command-copy-btn"
+                                                icon={<CopyOutlined />}
+                                                onClick={() =>
+                                                    copyToClipboard(
+                                                        cliInstallPlaceholderCommand,
+                                                        'CLI 安装说明已复制到剪贴板'
+                                                    )
+                                                }
+                                            />
+                                        </div>
+                                        <Text type="secondary">安装当前技能</Text>
+                                        <div className="command-block">
+                                            <code>{skillInstallCommand}</code>
+                                            <Button
+                                                type="text"
+                                                className="command-copy-btn"
+                                                icon={<CopyOutlined />}
+                                                onClick={() =>
+                                                    copyToClipboard(
+                                                        skillInstallCommand,
+                                                        '技能安装命令已复制到剪贴板'
+                                                    )
+                                                }
+                                            />
+                                        </div>
+                                    </div>
+                                ) : (
+                                    <div className="install-tab-panel">
+                                        <Text strong>当前技能暂不支持 Doraemon CLI 直接安装</Text>
+                                        <Text type="secondary">
+                                            {`原因：${installUnavailableReason}`}
+                                        </Text>
+                                        <div className="command-block">
+                                            <code>{downloadCommand}</code>
+                                            <Button
+                                                type="text"
+                                                className="command-copy-btn"
+                                                icon={<CopyOutlined />}
+                                                onClick={() =>
+                                                    copyToClipboard(
+                                                        downloadCommand,
+                                                        '下载命令已复制到剪贴板'
+                                                    )
+                                                }
+                                                disabled={!downloadCommand}
+                                            />
+                                        </div>
+                                        <Text type="secondary">
+                                            请下载 zip 后手动解压到目标 skills 目录，再按本地流程接入。
+                                        </Text>
+                                    </div>
+                                )}
+                            </TabPane>
+                            <TabPane tab="我是 Agent" key="agent">
+                                {isInstallable ? (
+                                    <div className="install-tab-panel">
+                                        <Text type="secondary">复制以下指令给 Agent 执行</Text>
+                                        <div className="command-block">
+                                            <code>{agentInstruction}</code>
+                                            <Button
+                                                type="text"
+                                                className="command-copy-btn"
+                                                icon={<CopyOutlined />}
+                                                onClick={() =>
+                                                    copyToClipboard(
+                                                        agentInstruction,
+                                                        'Agent 指令已复制到剪贴板'
+                                                    )
+                                                }
+                                            />
+                                        </div>
+                                    </div>
+                                ) : (
+                                    <div className="install-tab-panel">
+                                        <Text strong>Agent 请走降级路径</Text>
+                                        <div className="command-block">
+                                            <code>
+                                                {[
+                                                    '当前 skill 不支持 doraemon-skills 直接安装。',
+                                                    `请先下载 zip：${downloadCommand}`,
+                                                    `原因：${installUnavailableReason}`,
+                                                    '然后手动解压并确认技能目录结构（需包含 SKILL.md）。',
+                                                ].join('\n')}
+                                            </code>
+                                            <Button
+                                                type="text"
+                                                className="command-copy-btn"
+                                                icon={<CopyOutlined />}
+                                                onClick={() =>
+                                                    copyToClipboard(
+                                                        [
+                                                            '当前 skill 不支持 doraemon-skills 直接安装。',
+                                                            `请先下载 zip：${downloadCommand}`,
+                                                            `原因：${installUnavailableReason}`,
+                                                            '然后手动解压并确认技能目录结构（需包含 SKILL.md）。',
+                                                        ].join('\n'),
+                                                        '降级指令已复制到剪贴板'
+                                                    )
+                                                }
+                                            />
+                                        </div>
+                                    </div>
+                                )}
+                            </TabPane>
+                        </Tabs>
+                    </Card>
+
+                    <Card className="action-card" title="$ download --local" extra={<Text>manual</Text>}>
+                        <div className="download-buttons">
+                            <Button
+                                type="primary"
+                                block
+                                icon={<DownloadOutlined />}
+                                onClick={() =>
+                                    window.open(installMeta?.downloadUrl || downloadPath, '_blank')
+                                }
+                            >
+                                下载 skill.zip
+                            </Button>
+                            <div className="command-block">
+                                <code>{downloadCommand}</code>
+                                <Button
+                                    type="text"
+                                    className="command-copy-btn"
+                                    icon={<CopyOutlined />}
+                                    onClick={() =>
+                                        copyToClipboard(downloadCommand, '下载命令已复制到剪贴板')
+                                    }
+                                />
+                            </div>
+                            <Text type="secondary">
+                                下载完整技能目录，包含 SKILL.md 与所有相关文件
+                            </Text>
+                        </div>
+                    </Card>
+
+                    <Card className="action-card" title="源码与分享">
+                        <Space direction="vertical" style={{ width: '100%' }}>
+                            <Button
+                                block
+                                icon={<LinkOutlined />}
+                                onClick={() => window.open(sourceUrl, '_blank')}
+                                disabled={!sourceUrl}
+                            >
+                                源码跳转
+                            </Button>
+                            <Button
+                                block
+                                icon={<ShareAltOutlined />}
+                                onClick={() =>
+                                    copyToClipboard(deepLinkUrl, '详情页深链已复制到剪贴板')
+                                }
+                            >
+                                复制深链
+                            </Button>
+                        </Space>
+                    </Card>
+                </Col>
+            </Row>
+
+            <Card className="related-card-list" title="相关技能推荐">
+                {related.length === 0 ? (
+                    <Empty description="暂无相关技能推荐" />
+                ) : (
+                    <Row gutter={[16, 16]}>
+                        {related.map((item) => (
+                            <Col key={item.slug} xs={24} sm={12} lg={8}>
+                                <Card
+                                    className="related-item-card"
+                                    hoverable
+                                                onClick={() => {
+                                                    if (isModal && onOpenSkill) {
+                                                        onOpenSkill(item.slug);
+                                                        return;
+                                                    }
+                                                    if (history) {
+                                                        history.push(`/page/skills/${item.slug}`);
+                                                    }
+                                                }}
+                                >
+                                    <div className="related-title">{item.name}</div>
+                                    <Paragraph ellipsis={{ rows: 2 }}>
+                                        {item.description || '暂无描述'}
+                                    </Paragraph>
+                                    <Text type="secondary">
+                                        <StarOutlined /> {item.stars || 0}
+                                    </Text>
+                                </Card>
+                            </Col>
+                        ))}
+                    </Row>
+                )}
+            </Card>
+        </div>
+    );
+};
+
+export default SkillDetailContent;
diff --git a/app/web/pages/skills/detail/index.tsx b/app/web/pages/skills/detail/index.tsx
index 7080008..ca12c8c 100644
--- a/app/web/pages/skills/detail/index.tsx
+++ b/app/web/pages/skills/detail/index.tsx
@@ -1,581 +1,10 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import SyntaxHighlighter from 'react-syntax-highlighter';
-import { atomOneLight } from 'react-syntax-highlighter/dist/cjs/styles/hljs';
-import {
-    ArrowLeftOutlined,
-    CopyOutlined,
-    DownloadOutlined,
-    FolderOpenOutlined,
-    LinkOutlined,
-    ReadOutlined,
-    ShareAltOutlined,
-    StarOutlined,
-} from '@ant-design/icons';
-import { Button, Card, Col, Empty, Radio, Row, Space, Spin, Tag, Tree, Typography } from 'antd';
-import type { DataNode } from 'antd/lib/tree';
+import React from 'react';
 
-import { API } from '@/api';
-import MarkdownRenderer from '@/components/markdownRenderer';
-import { copyToClipboard } from '@/utils/copyUtils';
-import { SkillDetail as SkillDetailType, SkillFileContent, SkillItem } from '../types';
-import './style.scss';
+import SkillDetailContent from './SkillDetailContent';
 
-const { Title, Text, Paragraph } = Typography;
-
-interface SkillTreeNode extends DataNode {
-    children?: SkillTreeNode[];
-}
-
-type InstallRuntime = 'npx' | 'bunx' | 'pnpm';
-
-interface FrontmatterItem {
-    key: string;
-    value: string;
-}
-
-const formatFileSize = (size = 0) => {
-    if (size < 1024) return `${size} B`;
-    if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`;
-    return `${(size / 1024 / 1024).toFixed(1)} MB`;
-};
-
-const sortTreeNodes = (nodes: SkillTreeNode[]) => {
-    nodes.sort((a, b) => {
-        const aIsLeaf = Boolean(a.isLeaf);
-        const bIsLeaf = Boolean(b.isLeaf);
-        if (aIsLeaf !== bIsLeaf) return aIsLeaf ? 1 : -1;
-        return String(a.title).localeCompare(String(b.title));
-    });
-    nodes.forEach((node) => {
-        if (node.children && node.children.length > 0) {
-            sortTreeNodes(node.children);
-        }
-    });
-};
-
-const buildFileTreeData = (fileList: string[]): SkillTreeNode[] => {
-    const treeData: SkillTreeNode[] = [];
-
-    fileList.forEach((filePath) => {
-        const segments = filePath.split('/').filter(Boolean);
-        let currentNodes = treeData;
-        let currentPath = '';
-
-        segments.forEach((segment, index) => {
-            currentPath = currentPath ? `${currentPath}/${segment}` : segment;
-            const isLeaf = index === segments.length - 1;
-            let node = currentNodes.find((item) => item.key === currentPath);
-
-            if (!node) {
-                node = {
-                    key: currentPath,
-                    title: segment,
-                    isLeaf,
-                    children: isLeaf ? undefined : [],
-                };
-                currentNodes.push(node);
-            }
-
-            if (!isLeaf) {
-                node.children = node.children || [];
-                currentNodes = node.children;
-            }
-        });
-    });
-
-    sortTreeNodes(treeData);
-    return treeData;
-};
-
-const normalizeSourceUrl = (sourceRepo: string) => {
-    if (!sourceRepo) return '';
-    const normalized = sourceRepo.replace(/^git\+/, '').trim();
-    const sshMatch = normalized.match(/^git@([^:]+):(.+?)(?:\.git)?$/);
-    if (sshMatch) {
-        return `https://${sshMatch[1]}/${sshMatch[2]}`;
-    }
-    if (/^https?:\/\//.test(normalized)) {
-        return normalized.replace(/\.git$/, '');
-    }
-    return '';
-};
-
-const getInstallArgs = (detail: SkillDetailType) => {
-    const installCommand = detail.installCommand || '';
-    const addPattern = /(?:npx|bunx|pnpm\s+dlx)\s+skills\s+add\s+(.+)$/i;
-    const addMatch = installCommand.match(addPattern);
-    if (addMatch && addMatch[1]) {
-        return addMatch[1].trim();
-    }
-    if (detail.sourceRepo) {
-        return `${detail.sourceRepo} --skill "${detail.name}"`;
-    }
-    return '';
-};
-
-const getInstallCommandByRuntime = (
-    runtime: InstallRuntime,
-    detail: SkillDetailType,
-    installArgs: string
-) => {
-    if (!installArgs) return detail.installCommand || '';
-    if (runtime === 'bunx') return `bunx skills add ${installArgs}`;
-    if (runtime === 'pnpm') return `pnpm dlx skills add ${installArgs}`;
-    return `npx skills add ${installArgs}`;
-};
-
-const normalizeFrontmatterValue = (value: string) => {
-    const trimmed = String(value || '').trim();
-    if (!trimmed) return '-';
-    if (
-        (trimmed.startsWith('"') && trimmed.endsWith('"')) ||
-        (trimmed.startsWith("'") && trimmed.endsWith("'"))
-    ) {
-        return trimmed.slice(1, -1);
-    }
-    return trimmed;
-};
-
-const parseMarkdownFrontmatter = (markdown = ''): { frontmatter: FrontmatterItem[]; body: string } => {
-    const content = String(markdown || '');
-    const match = content.match(/^---\r?\n([\s\S]*?)\r?\n---\r?\n?/);
-    if (!match) {
-        return {
-            frontmatter: [],
-            body: content,
-        };
-    }
-
-    const block = match[1] || '';
-    const lines = block.split(/\r?\n/);
-    const frontmatter: FrontmatterItem[] = [];
-    let currentKey = '';
-    let currentValueLines: string[] = [];
-
-    const pushCurrent = () => {
-        if (!currentKey) return;
-        const value = normalizeFrontmatterValue(currentValueLines.join('\n'));
-        frontmatter.push({ key: currentKey, value });
-    };
-
-    lines.forEach((line) => {
-        const keyMatch = line.match(/^([a-zA-Z0-9_-]+):\s*(.*)$/);
-        const isTopLevelKey = Boolean(keyMatch) && !/^\s/.test(line);
-
-        if (isTopLevelKey && keyMatch) {
-            pushCurrent();
-            currentKey = keyMatch[1];
-            currentValueLines = [keyMatch[2] || ''];
-            return;
-        }
-
-        if (currentKey) {
-            currentValueLines.push(line);
-        }
-    });
-
-    pushCurrent();
-
-    return {
-        frontmatter,
-        body: content.slice(match[0].length),
-    };
-};
-
-const SkillDetail: React.FC<any> = ({ history, match }) => {
+const SkillDetailPage: React.FC<any> = ({ history, match }) => {
     const { slug } = match.params;
-    const [loading, setLoading] = useState(true);
-    const [fileLoading, setFileLoading] = useState(false);
-    const [detail, setDetail] = useState<SkillDetailType | null>(null);
-    const [related, setRelated] = useState<SkillItem[]>([]);
-    const [selectedFilePath, setSelectedFilePath] = useState('');
-    const [fileContent, setFileContent] = useState<SkillFileContent | null>(null);
-    const [installRuntime, setInstallRuntime] = useState<InstallRuntime>('npx');
-
-    const fileTreeData = useMemo(() => buildFileTreeData(detail?.fileList || []), [detail?.fileList]);
-    const sourceUrl = useMemo(() => normalizeSourceUrl(detail?.sourceRepo || ''), [detail?.sourceRepo]);
-    const installArgs = useMemo(() => (detail ? getInstallArgs(detail) : ''), [detail]);
-    const installCommand = useMemo(() => {
-        if (!detail) return '';
-        return getInstallCommandByRuntime(installRuntime, detail, installArgs);
-    }, [detail, installArgs, installRuntime]);
-
-    const downloadPath = useMemo(() => `/api/skills/download?slug=${encodeURIComponent(slug)}`, [slug]);
-    const archiveFileName = useMemo(() => {
-        const rawName = detail?.name || slug || 'skill';
-        const normalized = rawName
-            .toLowerCase()
-            .replace(/[^a-z0-9._-]+/g, '-')
-            .replace(/^-+|-+$/g, '');
-        return `${normalized || 'skill'}.zip`;
-    }, [detail?.name, slug]);
-    const wgetCommand = useMemo(() => {
-        if (typeof window === 'undefined') return '';
-        return `wget "${window.location.origin}${downloadPath}" -O ${archiveFileName}`;
-    }, [archiveFileName, downloadPath]);
-
-    useEffect(() => {
-        let cancelled = false;
-
-        const loadDetail = async () => {
-            setLoading(true);
-            try {
-                const [detailRes, relatedRes] = await Promise.all([
-                    API.getSkillDetail({ slug }),
-                    API.getRelatedSkills({ slug, limit: 6 }),
-                ]);
-
-                if (cancelled) return;
-
-                if (detailRes.success) {
-                    const detailData = detailRes.data as SkillDetailType;
-                    setDetail(detailData);
-                    const defaultFile = detailData.fileList.includes('SKILL.md')
-                        ? 'SKILL.md'
-                        : detailData.fileList[0] || '';
-                    setSelectedFilePath(defaultFile);
-                } else {
-                    setDetail(null);
-                    setSelectedFilePath('');
-                }
-
-                if (relatedRes.success) {
-                    setRelated(relatedRes.data || []);
-                }
-            } catch (error) {
-                console.error('获取 Skill 详情失败:', error);
-            } finally {
-                if (!cancelled) {
-                    setLoading(false);
-                }
-            }
-        };
-
-        loadDetail();
-
-        return () => {
-            cancelled = true;
-        };
-    }, [slug]);
-
-    useEffect(() => {
-        if (!selectedFilePath) {
-            setFileContent(null);
-            return;
-        }
-
-        let cancelled = false;
-        const loadFileContent = async () => {
-            setFileLoading(true);
-            try {
-                const response = await API.getSkillFileContent({
-                    slug,
-                    path: selectedFilePath,
-                });
-                if (!cancelled) {
-                    if (response.success) {
-                        setFileContent(response.data as SkillFileContent);
-                    } else {
-                        setFileContent(null);
-                    }
-                }
-            } catch (error) {
-                console.error('获取文件内容失败:', error);
-                if (!cancelled) {
-                    setFileContent(null);
-                }
-            } finally {
-                if (!cancelled) {
-                    setFileLoading(false);
-                }
-            }
-        };
-
-        loadFileContent();
-
-        return () => {
-            cancelled = true;
-        };
-    }, [slug, selectedFilePath]);
-
-    const renderFileViewer = () => {
-        if (fileLoading) {
-            return (
-                <div className="file-viewer-loading">
-                    <Spin size="large" />
-                </div>
-            );
-        }
-
-        if (!fileContent) {
-            return <Empty description="请选择需要查看的文件" />;
-        }
-
-        if (fileContent.isBinary) {
-            return <Empty description="二进制文件暂不支持在线预览" />;
-        }
-
-        if (fileContent.language === 'markdown') {
-            const parsedMarkdown = parseMarkdownFrontmatter(fileContent.content || '');
-            return (
-                <div className="markdown-file-viewer">
-                    {parsedMarkdown.frontmatter.length > 0 ? (
-                        <div className="frontmatter-table-wrap">
-                            <table className="frontmatter-table">
-                                <tbody>
-                                    {parsedMarkdown.frontmatter.map((item) => {
-                                        const isCodeStyle =
-                                            item.value.includes('\n') ||
-                                            item.value.startsWith('{') ||
-                                            item.value.startsWith('[');
-                                        return (
-                                            <tr key={item.key}>
-                                                <th>{item.key}</th>
-                                                <td>
-                                                    {isCodeStyle ? (
-                                                        <pre className="frontmatter-code">
-                                                            {item.value}
-                                                        </pre>
-                                                    ) : (
-                                                        <span>{item.value}</span>
-                                                    )}
-                                                </td>
-                                            </tr>
-                                        );
-                                    })}
-                                </tbody>
-                            </table>
-                        </div>
-                    ) : null}
-                    {parsedMarkdown.body.trim() ? (
-                        <MarkdownRenderer content={parsedMarkdown.body} />
-                    ) : null}
-                </div>
-            );
-        }
-
-        return (
-            <SyntaxHighlighter
-                style={atomOneLight}
-                language={fileContent.language || 'text'}
-                customStyle={{ margin: 0, borderRadius: 6, minHeight: 460 }}
-                showLineNumbers
-            >
-                {fileContent.content || ''}
-            </SyntaxHighlighter>
-        );
-    };
-
-    if (loading) {
-        return (
-            <div className="page-skill-detail loading-wrap">
-                <Spin size="large" />
-            </div>
-        );
-    }
-
-    if (!detail) {
-        return (
-            <div className="page-skill-detail">
-                <Empty description="Skill 不存在或已被删除">
-                    <Button onClick={() => history.push('/page/skills')}>返回 Skills 列表</Button>
-                </Empty>
-            </div>
-        );
-    }
-
-    return (
-        <div className="page-skill-detail">
-            <div className="detail-header">
-                <Button
-                    icon={<ArrowLeftOutlined />}
-                    className="back-btn"
-                    onClick={() => history.push('/page/skills')}
-                >
-                    返回列表
-                </Button>
-                <div className="title-group">
-                    <Title level={2}>{detail.name}</Title>
-                    <Paragraph type="secondary" style={{ marginBottom: 0 }}>
-                        {detail.description || '暂无描述'}
-                    </Paragraph>
-                </div>
-            </div>
-
-            <Card className="meta-card">
-                <Space size={20} wrap>
-                    <Text>
-                        <StarOutlined /> Stars: {detail.stars || 0}
-                    </Text>
-                    <Text>分类: {detail.category || '未分类'}</Text>
-                    <Text>更新: {new Date(detail.updatedAt).toLocaleString('zh-CN')}</Text>
-                    <Text>来源: {detail.sourceRepo || detail.sourcePath}</Text>
-                </Space>
-                <div className="tags-wrap">
-                    {(detail.tags || []).map((tag) => (
-                        <Tag key={tag}>{tag}</Tag>
-                    ))}
-                </div>
-            </Card>
-
-            <Row gutter={[16, 16]} className="detail-main-row">
-                <Col xs={24} xl={16}>
-                    <Card
-                        className="file-tree-card"
-                        title={
-                            <Space>
-                                <FolderOpenOutlined />
-                                文件浏览
-                            </Space>
-                        }
-                        bodyStyle={{ padding: '8px 0', maxHeight: 280, overflow: 'auto' }}
-                    >
-                        {fileTreeData.length === 0 ? (
-                            <Empty description="暂无文件" />
-                        ) : (
-                            <Tree
-                                treeData={fileTreeData}
-                                selectedKeys={selectedFilePath ? [selectedFilePath] : []}
-                                defaultExpandAll
-                                onSelect={(keys, info) => {
-                                    if (!info.node.isLeaf) return;
-                                    const targetPath = String(keys[0] || '');
-                                    if (targetPath) {
-                                        setSelectedFilePath(targetPath);
-                                    }
-                                }}
-                            />
-                        )}
-                    </Card>
-
-                    <Card
-                        className="file-viewer-card"
-                        title={
-                            <Space>
-                                <ReadOutlined />
-                                <Text>{selectedFilePath || '文件预览'}</Text>
-                            </Space>
-                        }
-                        extra={
-                            fileContent ? (
-                                <Space>
-                                    <Tag>{fileContent.language}</Tag>
-                                    <Text type="secondary">{formatFileSize(fileContent.size)}</Text>
-                                </Space>
-                            ) : null
-                        }
-                    >
-                        {renderFileViewer()}
-                    </Card>
-                </Col>
-
-                <Col xs={24} xl={8}>
-                    <Card className="action-card" title="$ install --global" extra={<Text>skills.sh</Text>}>
-                        <Radio.Group
-                            value={installRuntime}
-                            onChange={(event) => setInstallRuntime(event.target.value)}
-                            buttonStyle="solid"
-                            className="runtime-switch"
-                        >
-                            <Radio.Button value="npx">npx</Radio.Button>
-                            <Radio.Button value="bunx">bunx</Radio.Button>
-                            <Radio.Button value="pnpm">pnpm</Radio.Button>
-                        </Radio.Group>
-                        <div className="command-block">
-                            <code>{installCommand || '暂无可用安装命令'}</code>
-                            <Button
-                                type="text"
-                                className="command-copy-btn"
-                                icon={<CopyOutlined />}
-                                onClick={() =>
-                                    copyToClipboard(installCommand || '', '安装命令已复制到剪贴板')
-                                }
-                                disabled={!installCommand}
-                            />
-                        </div>
-                    </Card>
-
-                    <Card className="action-card" title="$ download --local" extra={<Text>man</Text>}>
-                        <div className="download-buttons">
-                            <Button
-                                type="primary"
-                                block
-                                icon={<DownloadOutlined />}
-                                onClick={() => window.open(downloadPath, '_blank')}
-                            >
-                                下载 skill.zip
-                            </Button>
-                            <div className="command-block">
-                                <code>{wgetCommand || `wget "${downloadPath}" -O ${archiveFileName}`}</code>
-                                <Button
-                                    type="text"
-                                    className="command-copy-btn"
-                                    icon={<CopyOutlined />}
-                                    onClick={() =>
-                                        copyToClipboard(
-                                            wgetCommand || `wget "${downloadPath}" -O ${archiveFileName}`,
-                                            'wget 命令已复制到剪贴板'
-                                        )
-                                    }
-                                />
-                            </div>
-                            <Text type="secondary">
-                                下载完整技能目录，包含 SKILL.md 与所有相关文件
-                            </Text>
-                        </div>
-                    </Card>
-
-                    <Card className="action-card" title="源码与分享">
-                        <Space direction="vertical" style={{ width: '100%' }}>
-                            <Button
-                                block
-                                icon={<LinkOutlined />}
-                                onClick={() => window.open(sourceUrl, '_blank')}
-                                disabled={!sourceUrl}
-                            >
-                                源码跳转
-                            </Button>
-                            <Button
-                                block
-                                icon={<ShareAltOutlined />}
-                                onClick={() =>
-                                    copyToClipboard(window.location.href, '详情页链接已复制到剪贴板')
-                                }
-                            >
-                                分享
-                            </Button>
-                        </Space>
-                    </Card>
-                </Col>
-            </Row>
-
-            <Card className="related-card-list" title="相关技能推荐">
-                {related.length === 0 ? (
-                    <Empty description="暂无相关技能推荐" />
-                ) : (
-                    <Row gutter={[16, 16]}>
-                        {related.map((item) => (
-                            <Col key={item.slug} xs={24} sm={12} lg={8}>
-                                <Card
-                                    className="related-item-card"
-                                    hoverable
-                                    onClick={() => history.push(`/page/skills/${item.slug}`)}
-                                >
-                                    <div className="related-title">{item.name}</div>
-                                    <Paragraph ellipsis={{ rows: 2 }}>
-                                        {item.description || '暂无描述'}
-                                    </Paragraph>
-                                    <Text type="secondary">
-                                        <StarOutlined /> {item.stars || 0}
-                                    </Text>
-                                </Card>
-                            </Col>
-                        ))}
-                    </Row>
-                )}
-            </Card>
-        </div>
-    );
+    return <SkillDetailContent slug={slug} mode="page" history={history} />;
 };
 
-export default SkillDetail;
+export default SkillDetailPage;
diff --git a/app/web/pages/skills/detail/style.scss b/app/web/pages/skills/detail/style.scss
index 1d6543e..1b2402f 100644
--- a/app/web/pages/skills/detail/style.scss
+++ b/app/web/pages/skills/detail/style.scss
@@ -1,5 +1,8 @@
 .page-skill-detail {
     padding: 20px 24px;
+    &.modal-skill-detail {
+        padding-top: 8px;
+    }
     &.loading-wrap {
         display: flex;
         justify-content: center;
@@ -121,6 +124,11 @@
         .runtime-switch {
             margin-bottom: 12px;
         }
+        .install-tab-panel {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
         .download-buttons {
             display: flex;
             flex-direction: column;
diff --git a/app/web/pages/skills/index.tsx b/app/web/pages/skills/index.tsx
index 4c14972..9a93f97 100644
--- a/app/web/pages/skills/index.tsx
+++ b/app/web/pages/skills/index.tsx
@@ -31,6 +31,7 @@ import {
 
 import { API } from '@/api';
 import { copyToClipboard } from '@/utils/copyUtils';
+import SkillDetailContent from './detail/SkillDetailContent';
 import { SkillItem, SkillListResponse } from './types';
 import './style.scss';
 
@@ -66,6 +67,8 @@ const SkillsMarket: React.FC<any> = ({ history }) => {
     const [uploadFiles, setUploadFiles] = useState<any[]>([]);
     const [importForm] = Form.useForm();
     const [query, setQuery] = useState(INITIAL_QUERY);
+    const [detailVisible, setDetailVisible] = useState(false);
+    const [activeDetailSlug, setActiveDetailSlug] = useState('');
 
     const fetchSkills = useCallback(async (nextQuery) => {
         setLoading(true);
@@ -97,7 +100,17 @@ const SkillsMarket: React.FC<any> = ({ history }) => {
     };
 
     const handleOpenDetail = (slug: string) => {
-        history.push(`/page/skills/${slug}`);
+        setActiveDetailSlug(slug);
+        setDetailVisible(true);
+    };
+
+    const handleCloseDetailModal = () => {
+        setDetailVisible(false);
+    };
+
+    const handleOpenDetailPage = () => {
+        if (!activeDetailSlug) return;
+        history.push(`/page/skills/${activeDetailSlug}`);
     };
 
     const openImportModal = () => {
@@ -308,6 +321,34 @@ const SkillsMarket: React.FC<any> = ({ history }) => {
                 )}
             </Spin>
 
+            <Modal
+                width={1200}
+                title={null}
+                footer={null}
+                visible={detailVisible}
+                onCancel={handleCloseDetailModal}
+                destroyOnClose
+                className="skill-detail-modal"
+                bodyStyle={{ padding: 0, maxHeight: 'calc(100vh - 160px)', overflow: 'auto' }}
+            >
+                {activeDetailSlug ? (
+                    <div className="skill-detail-modal-inner">
+                        <div className="skill-detail-modal-actions">
+                            <Button type="link" onClick={handleOpenDetailPage}>
+                                打开独立详情页
+                            </Button>
+                        </div>
+                        <SkillDetailContent
+                            slug={activeDetailSlug}
+                            mode="modal"
+                            history={history}
+                            onClose={handleCloseDetailModal}
+                            onOpenSkill={(nextSlug) => setActiveDetailSlug(nextSlug)}
+                        />
+                    </div>
+                ) : null}
+            </Modal>
+
             <Modal
                 title="导入 Skill"
                 visible={importVisible}
diff --git a/app/web/pages/skills/style.scss b/app/web/pages/skills/style.scss
index 73fe7f8..a36817a 100644
--- a/app/web/pages/skills/style.scss
+++ b/app/web/pages/skills/style.scss
@@ -102,3 +102,16 @@
         margin-top: 20px;
     }
 }
+
+.skill-detail-modal {
+    .ant-modal-body {
+        background: #F8FAFC;
+    }
+    .skill-detail-modal-inner {
+        .skill-detail-modal-actions {
+            display: flex;
+            justify-content: flex-end;
+            padding: 8px 16px 0;
+        }
+    }
+}
diff --git a/app/web/pages/skills/types.ts b/app/web/pages/skills/types.ts
index 4438b56..b171197 100644
--- a/app/web/pages/skills/types.ts
+++ b/app/web/pages/skills/types.ts
@@ -35,3 +35,18 @@ export interface SkillFileContent {
     encoding: 'utf8' | 'base64';
     content: string;
 }
+
+export interface SkillInstallMeta {
+    slug: string;
+    name: string;
+    downloadUrl: string;
+    packageType: string;
+    packageVersion: string;
+    packageRootMode: string;
+    installDirName: string;
+    version: string;
+    sha256: string;
+    sourceRepo: string;
+    installable: boolean;
+    reason: string;
+}

From 9c965e0f4cf6ba025ee93bb399fd4aefb34ac4f3 Mon Sep 17 00:00:00 2001
From: huaiju <huaiju@dtstack.com>
Date: Sun, 22 Mar 2026 13:06:23 +0800
Subject: [PATCH 31/43] feat(skills): add installKey-based cli install flow

---
 app/controller/skills.js            |   4 +-
 app/service/skills.js               | 122 +++++++++--
 scripts/doraemon-skills-lib.js      | 313 ++++++++++++++++++++++++++++
 scripts/doraemon-skills.js          | 275 +-----------------------
 test/doraemon-skills-config.test.js |  38 ++++
 test/skills-install-key.test.js     |  91 ++++++++
 6 files changed, 554 insertions(+), 289 deletions(-)
 create mode 100644 scripts/doraemon-skills-lib.js
 create mode 100644 test/doraemon-skills-config.test.js
 create mode 100644 test/skills-install-key.test.js

diff --git a/app/controller/skills.js b/app/controller/skills.js
index e0041e3..8424990 100644
--- a/app/controller/skills.js
+++ b/app/controller/skills.js
@@ -41,8 +41,8 @@ class SkillsController extends Controller {
 
     async getSkillInstallMeta() {
         const { app, ctx } = this;
-        const { slug } = ctx.query;
-        const data = await ctx.service.skills.getInstallMeta(slug);
+        const identifier = ctx.query.installKey || ctx.query.slug;
+        const data = await ctx.service.skills.getInstallMeta(identifier);
         ctx.body = app.utils.response(true, data);
     }
 
diff --git a/app/service/skills.js b/app/service/skills.js
index 54a25a1..710c82b 100644
--- a/app/service/skills.js
+++ b/app/service/skills.js
@@ -20,6 +20,89 @@ const SKILLS_ROOT_DISCOVER_DEPTH_LIMIT = 8;
 const DISCOVER_MAX_DIR_COUNT = 3000;
 const SKILL_SLUG_PATTERN = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
 
+function sanitizeInstallKeySegment(value) {
+    return String(value || '')
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/^-+|-+$/g, '')
+        .replace(/-{2,}/g, '-');
+}
+
+function createInstallKeyCandidates(skill = {}) {
+    const candidates = [];
+    const pushCandidate = (value) => {
+        const normalized = sanitizeInstallKeySegment(value);
+        if (normalized && !candidates.includes(normalized)) {
+            candidates.push(normalized);
+        }
+    };
+
+    pushCandidate(skill.name);
+
+    const sourcePath = String(skill.sourcePath || '').trim().replace(/\\/g, '/');
+    if (sourcePath) {
+        const segments = sourcePath.split('/').filter(Boolean);
+        if (segments.length > 0) {
+            pushCandidate(segments[segments.length - 1]);
+        }
+    }
+
+    pushCandidate(skill.slug);
+    pushCandidate('skill');
+    return candidates;
+}
+
+function createInstallKeyMap(skills = []) {
+    const bySlug = new Map();
+    const byInstallKey = new Map();
+    const counts = new Map();
+    const list = skills.map((skill) => {
+        const candidates = createInstallKeyCandidates(skill);
+        let installKey = candidates.find((candidate) => !byInstallKey.has(candidate)) || '';
+
+        if (!installKey) {
+            const baseKey = candidates[0] || 'skill';
+            const nextCount = (counts.get(baseKey) || 1) + 1;
+            counts.set(baseKey, nextCount);
+            installKey = `${baseKey}-${nextCount}`;
+            while (byInstallKey.has(installKey)) {
+                const currentCount = (counts.get(baseKey) || nextCount) + 1;
+                counts.set(baseKey, currentCount);
+                installKey = `${baseKey}-${currentCount}`;
+            }
+        } else {
+            const baseKey = candidates[0] || installKey;
+            counts.set(baseKey, Math.max(counts.get(baseKey) || 1, 1));
+        }
+
+        const normalizedSkill = {
+            ...skill,
+            installKey,
+        };
+        bySlug.set(normalizedSkill.slug, normalizedSkill);
+        byInstallKey.set(installKey, normalizedSkill);
+        return normalizedSkill;
+    });
+
+    return {
+        list,
+        bySlug,
+        byInstallKey,
+    };
+}
+
+function resolveSkillIdentifier(identifier, indexes = {}) {
+    const value = String(identifier || '').trim();
+    if (!value) return null;
+    if (indexes.bySlug instanceof Map && indexes.bySlug.has(value)) {
+        return indexes.bySlug.get(value);
+    }
+    if (indexes.byInstallKey instanceof Map && indexes.byInstallKey.has(value)) {
+        return indexes.byInstallKey.get(value);
+    }
+    return null;
+}
+
 const SKILL_CATEGORY_OPTIONS = [
     '通用',
     '前端',
@@ -142,6 +225,7 @@ class SkillsService extends Service {
     toPublicSkill(skill) {
         return {
             slug: skill.slug,
+            installKey: skill.installKey || skill.slug,
             name: skill.name,
             description: skill.description,
             category: skill.category,
@@ -160,6 +244,7 @@ class SkillsService extends Service {
             id: row.id,
             sourceId: row.source_id,
             slug: row.slug,
+            installKey: row.slug,
             name: row.name || '',
             description: row.description || '',
             category: row.category || '通用',
@@ -190,13 +275,15 @@ class SkillsService extends Service {
             ],
         });
 
-        const skills = rows.map((row) => this.toSkillDto(row));
+        const rawSkills = rows.map((row) => this.toSkillDto(row));
+        const installKeyMap = createInstallKeyMap(rawSkills);
         const categories = this.getSkillCategoryOptions();
         this.skillCache = {
             loadedAt: Date.now(),
-            skills,
+            skills: installKeyMap.list,
             categories,
-            bySlug: new Map(skills.map((item) => [ item.slug, item ])),
+            bySlug: installKeyMap.bySlug,
+            byInstallKey: installKeyMap.byInstallKey,
         };
 
         return this.skillCache;
@@ -257,13 +344,17 @@ class SkillsService extends Service {
         return this.getSkillList(params);
     }
 
-    getSkillBySlug(slug) {
-        const value = String(slug || '').trim();
+    getSkillByIdentifier(identifier) {
+        const value = String(identifier || '').trim();
         if (!value) {
             this.ctx.throw(400, '缺少技能标识');
         }
 
-        const skill = this.skillCache.bySlug.get(value);
+        if (!SKILL_SLUG_PATTERN.test(value)) {
+            this.ctx.throw(400, '非法技能标识');
+        }
+
+        const skill = resolveSkillIdentifier(value, this.skillCache);
         if (!skill) {
             this.ctx.throw(404, '技能不存在');
         }
@@ -273,7 +364,7 @@ class SkillsService extends Service {
 
     async getSkillDetail(slug) {
         await this.ensureSkillCache();
-        const skill = this.getSkillBySlug(slug);
+        const skill = this.getSkillByIdentifier(slug);
         const { SkillsFile } = this.app.model;
 
         const rows = await SkillsFile.findAll({
@@ -295,7 +386,7 @@ class SkillsService extends Service {
 
     async getSkillFileContent(slug, filePath) {
         await this.ensureSkillCache();
-        const skill = this.getSkillBySlug(slug);
+        const skill = this.getSkillByIdentifier(slug);
         const normalizedPath = this.normalizeRelativePath(filePath);
         const { SkillsFile } = this.app.model;
 
@@ -329,7 +420,7 @@ class SkillsService extends Service {
 
     async getSkillArchive(slug) {
         await this.ensureSkillCache();
-        const skill = this.getSkillBySlug(slug);
+        const skill = this.getSkillByIdentifier(slug);
         const { SkillsFile } = this.app.model;
         const rows = await SkillsFile.findAll({
             where: {
@@ -355,7 +446,7 @@ class SkillsService extends Service {
         };
     }
 
-    validateSkillSlug(slug) {
+    validateSkillIdentifier(slug) {
         const value = String(slug || '').trim();
         if (!value) {
             this.ctx.throw(400, '缺少技能标识');
@@ -410,8 +501,8 @@ class SkillsService extends Service {
 
     async getInstallMeta(slug) {
         await this.ensureSkillCache();
-        const safeSlug = this.validateSkillSlug(slug);
-        const skill = this.getSkillBySlug(safeSlug);
+        const safeIdentifier = this.validateSkillIdentifier(slug);
+        const skill = this.getSkillByIdentifier(safeIdentifier);
         const { installable, reason } = await this.getSkillPackageInstallability(skill.id);
         const downloadUrl = this.buildSkillDownloadUrl(skill.slug);
 
@@ -423,12 +514,13 @@ class SkillsService extends Service {
 
         return {
             slug: skill.slug,
+            installKey: skill.installKey || skill.slug,
             name: skill.name,
             downloadUrl,
             packageType: 'zip',
             packageVersion: 'v1',
             packageRootMode: 'find-skill-md',
-            installDirName: skill.slug,
+            installDirName: skill.installKey || skill.slug,
             version: '',
             sha256,
             sourceRepo: skill.sourceRepo || '',
@@ -525,7 +617,7 @@ class SkillsService extends Service {
 
     async getRelatedSkills(slug, limit = 6) {
         await this.ensureSkillCache();
-        const target = this.skillCache.bySlug.get(String(slug || '').trim());
+        const target = this.getSkillByIdentifier(slug);
         if (!target) {
             this.ctx.throw(404, '技能不存在');
         }
@@ -1873,3 +1965,5 @@ class SkillsService extends Service {
 }
 
 module.exports = SkillsService;
+module.exports.createInstallKeyMap = createInstallKeyMap;
+module.exports.resolveSkillIdentifier = resolveSkillIdentifier;
diff --git a/scripts/doraemon-skills-lib.js b/scripts/doraemon-skills-lib.js
new file mode 100644
index 0000000..92749c7
--- /dev/null
+++ b/scripts/doraemon-skills-lib.js
@@ -0,0 +1,313 @@
+const fs = require('fs');
+const os = require('os');
+const path = require('path');
+const AdmZip = require('adm-zip');
+const fetch = require('node-fetch');
+
+function fail(message) {
+    throw new Error(message);
+}
+
+function normalizeServerUrl(server) {
+    if (!server) {
+        fail('Server is required. Provide --server <url>, set DORAEMON_SKILLS_SERVER, or configure ~/.doraemon/skills.json.');
+    }
+    try {
+        const parsed = new URL(server);
+        return parsed.toString();
+    } catch (error) {
+        fail(`Invalid server URL: ${server}`);
+    }
+}
+
+function parseArgs(argv) {
+    const [command, ...rest] = argv;
+    const options = {};
+    const positionals = [];
+
+    for (let i = 0; i < rest.length; i++) {
+        const token = rest[i];
+        if (token === '--server' || token === '--dir') {
+            const value = rest[i + 1];
+            if (!value || value.startsWith('--')) {
+                fail(`Missing value for ${token}`);
+            }
+            options[token.slice(2)] = value;
+            i += 1;
+            continue;
+        }
+        if (token.startsWith('--')) {
+            fail(`Unknown option: ${token}`);
+        }
+        positionals.push(token);
+    }
+
+    return {
+        command,
+        positionals,
+        options,
+    };
+}
+
+function resolveInstallRoot(dirOption) {
+    const root = dirOption || './skills';
+    return path.resolve(process.cwd(), root);
+}
+
+function readBootstrapConfigServer({ homedir = os.homedir } = {}) {
+    const configPath = path.join(homedir(), '.doraemon', 'skills.json');
+    if (!fs.existsSync(configPath)) {
+        return '';
+    }
+
+    try {
+        const payload = JSON.parse(fs.readFileSync(configPath, 'utf8'));
+        return String(payload && payload.server ? payload.server : '').trim();
+    } catch (error) {
+        fail(`Invalid bootstrap config: ${configPath}`);
+    }
+}
+
+function resolveServer(options = {}, { env = process.env, homedir = os.homedir } = {}) {
+    const value = options.server || env.DORAEMON_SKILLS_SERVER || readBootstrapConfigServer({ homedir });
+    return normalizeServerUrl(value);
+}
+
+function parseResponsePayload(payload) {
+    if (!payload || typeof payload !== 'object') {
+        fail('Invalid server response payload.');
+    }
+    if (payload.success !== true) {
+        const message = payload.message || payload.msg || 'Request failed.';
+        fail(message);
+    }
+    return payload.data;
+}
+
+async function readJsonResponse(response) {
+    const raw = await response.text();
+    let payload = null;
+    try {
+        payload = raw ? JSON.parse(raw) : null;
+    } catch (error) {
+        if (!response.ok) {
+            fail(`Request failed with status ${response.status}.`);
+        }
+        fail('Invalid JSON response.');
+    }
+    return payload;
+}
+
+function buildInstallMetaUrl(server, installKey) {
+    const metaUrl = new URL('/api/skills/install-meta', server);
+    metaUrl.searchParams.set('installKey', installKey);
+    return metaUrl;
+}
+
+async function requestInstallMeta(server, installKey) {
+    const metaUrl = buildInstallMetaUrl(server, installKey);
+
+    let response;
+    try {
+        response = await fetch(metaUrl.toString());
+    } catch (error) {
+        fail(`Failed to request install-meta: ${error.message}`);
+    }
+
+    const payload = await readJsonResponse(response);
+    if (!response.ok) {
+        const message = payload && (payload.message || payload.msg)
+            ? payload.message || payload.msg
+            : `Request failed with status ${response.status}.`;
+        fail(message);
+    }
+
+    return parseResponsePayload(payload);
+}
+
+function findSkillRootBySkillMd(baseDir) {
+    const queue = [baseDir];
+    const skillMdDirs = [];
+
+    while (queue.length) {
+        const current = queue.shift();
+        const entries = fs.readdirSync(current, { withFileTypes: true });
+        let hasSkillMd = false;
+
+        for (const entry of entries) {
+            if (entry.isFile() && entry.name.toLowerCase() === 'skill.md') {
+                hasSkillMd = true;
+                break;
+            }
+        }
+        if (hasSkillMd) {
+            skillMdDirs.push(current);
+            continue;
+        }
+
+        for (const entry of entries) {
+            if (!entry.isDirectory()) {
+                continue;
+            }
+            queue.push(path.join(current, entry.name));
+        }
+    }
+
+    if (skillMdDirs.length === 0) {
+        fail('Invalid package: SKILL.md not found.');
+    }
+
+    skillMdDirs.sort((a, b) => {
+        const depthDiff = a.split(path.sep).length - b.split(path.sep).length;
+        if (depthDiff !== 0) {
+            return depthDiff;
+        }
+        return a.localeCompare(b);
+    });
+
+    return skillMdDirs[0];
+}
+
+function ensureZipBuffer(buffer) {
+    if (!Buffer.isBuffer(buffer) || buffer.length < 2) {
+        fail('Download failed: package is not a zip archive.');
+    }
+    if (buffer[0] !== 0x50 || buffer[1] !== 0x4b) {
+        fail('Download failed: package is not a zip archive.');
+    }
+}
+
+async function downloadArchive(downloadUrl) {
+    let response;
+    try {
+        response = await fetch(downloadUrl);
+    } catch (error) {
+        fail(`Failed to download package: ${error.message}`);
+    }
+
+    if (!response.ok) {
+        fail(`Failed to download package: HTTP ${response.status}`);
+    }
+
+    const buffer = await response.buffer();
+    ensureZipBuffer(buffer);
+    return buffer;
+}
+
+function extractArchive(buffer, tempDir) {
+    try {
+        const zip = new AdmZip(buffer);
+        zip.extractAllTo(tempDir, true);
+    } catch (error) {
+        fail(`Failed to extract zip: ${error.message}`);
+    }
+}
+
+function installFromSkillRoot(skillRoot, targetDir) {
+    if (fs.existsSync(targetDir)) {
+        fail(`Target directory already exists: ${targetDir}`);
+    }
+    fs.mkdirSync(path.dirname(targetDir), { recursive: true });
+    fs.cpSync(skillRoot, targetDir, { recursive: true });
+}
+
+async function runInstall(positionals, options) {
+    const installKey = positionals[0];
+    if (!installKey) {
+        fail('Usage: doraemon-skills install <installKey> [--server <url>] [--dir <path>]');
+    }
+
+    const server = resolveServer(options);
+    const installRoot = resolveInstallRoot(options.dir);
+    const meta = await requestInstallMeta(server, installKey);
+
+    if (meta.installable === false) {
+        fail(`Skill is not installable: ${meta.reason || 'unknown reason'}`);
+    }
+    if (meta.packageType !== 'zip') {
+        fail(`Unsupported packageType: ${meta.packageType}`);
+    }
+    if (meta.packageRootMode !== 'find-skill-md') {
+        fail(`Unsupported packageRootMode: ${meta.packageRootMode}`);
+    }
+    if (!meta.downloadUrl) {
+        fail('install-meta missing downloadUrl.');
+    }
+    if (!meta.installDirName) {
+        fail('install-meta missing installDirName.');
+    }
+
+    const downloadUrl = new URL(meta.downloadUrl, server).toString();
+    const targetDir = path.resolve(installRoot, meta.installDirName);
+
+    console.log(`Downloading: ${downloadUrl}`);
+    const buffer = await downloadArchive(downloadUrl);
+
+    const tempDir = fs.mkdtempSync(path.join(os.tmpdir(), 'doraemon-skills-'));
+    try {
+        extractArchive(buffer, tempDir);
+        const skillRoot = findSkillRootBySkillMd(tempDir);
+        installFromSkillRoot(skillRoot, targetDir);
+    } finally {
+        fs.rmSync(tempDir, { recursive: true, force: true });
+    }
+
+    console.log(`Installed: ${meta.installKey || installKey} -> ${targetDir}`);
+}
+
+function runList(options) {
+    const installRoot = resolveInstallRoot(options.dir);
+    if (!fs.existsSync(installRoot)) {
+        return;
+    }
+
+    const names = fs
+        .readdirSync(installRoot, { withFileTypes: true })
+        .filter((entry) => entry.isDirectory())
+        .map((entry) => entry.name)
+        .sort((a, b) => a.localeCompare(b));
+
+    for (const name of names) {
+        console.log(name);
+    }
+}
+
+async function main(argv = process.argv.slice(2)) {
+    const { command, positionals, options } = parseArgs(argv);
+
+    if (!command) {
+        fail('Usage: doraemon-skills <install|list> ...');
+    }
+
+    if (command === 'install') {
+        await runInstall(positionals, options);
+        return;
+    }
+    if (command === 'list') {
+        runList(options);
+        return;
+    }
+
+    fail(`Unknown command: ${command}`);
+}
+
+module.exports = {
+    buildInstallMetaUrl,
+    downloadArchive,
+    ensureZipBuffer,
+    extractArchive,
+    fail,
+    findSkillRootBySkillMd,
+    installFromSkillRoot,
+    main,
+    normalizeServerUrl,
+    parseArgs,
+    parseResponsePayload,
+    readBootstrapConfigServer,
+    readJsonResponse,
+    requestInstallMeta,
+    resolveInstallRoot,
+    resolveServer,
+    runInstall,
+    runList,
+};
diff --git a/scripts/doraemon-skills.js b/scripts/doraemon-skills.js
index 0f75585..66ebc08 100755
--- a/scripts/doraemon-skills.js
+++ b/scripts/doraemon-skills.js
@@ -1,279 +1,8 @@
 #!/usr/bin/env node
 
-const fs = require('fs');
-const os = require('os');
-const path = require('path');
-const AdmZip = require('adm-zip');
-const fetch = require('node-fetch');
+const cli = require('./doraemon-skills-lib');
 
-function fail(message) {
-    throw new Error(message);
-}
-
-function normalizeServerUrl(server) {
-    if (!server) {
-        fail('Server is required. Provide --server <url> or set DORAEMON_SKILLS_SERVER.');
-    }
-    try {
-        const parsed = new URL(server);
-        return parsed.toString();
-    } catch (error) {
-        fail(`Invalid server URL: ${server}`);
-    }
-}
-
-function parseArgs(argv) {
-    const [command, ...rest] = argv;
-    const options = {};
-    const positionals = [];
-
-    for (let i = 0; i < rest.length; i++) {
-        const token = rest[i];
-        if (token === '--server' || token === '--dir') {
-            const value = rest[i + 1];
-            if (!value || value.startsWith('--')) {
-                fail(`Missing value for ${token}`);
-            }
-            options[token.slice(2)] = value;
-            i += 1;
-            continue;
-        }
-        if (token.startsWith('--')) {
-            fail(`Unknown option: ${token}`);
-        }
-        positionals.push(token);
-    }
-
-    return {
-        command,
-        positionals,
-        options,
-    };
-}
-
-function resolveInstallRoot(dirOption) {
-    const root = dirOption || './skills';
-    return path.resolve(process.cwd(), root);
-}
-
-function resolveServer(options) {
-    const value = options.server || process.env.DORAEMON_SKILLS_SERVER;
-    return normalizeServerUrl(value);
-}
-
-function parseResponsePayload(payload) {
-    if (!payload || typeof payload !== 'object') {
-        fail('Invalid server response payload.');
-    }
-    if (payload.success !== true) {
-        const message = payload.message || 'Request failed.';
-        fail(message);
-    }
-    return payload.data;
-}
-
-async function readJsonResponse(response) {
-    const raw = await response.text();
-    let payload = null;
-    try {
-        payload = raw ? JSON.parse(raw) : null;
-    } catch (error) {
-        if (!response.ok) {
-            fail(`Request failed with status ${response.status}.`);
-        }
-        fail('Invalid JSON response.');
-    }
-    return payload;
-}
-
-async function requestInstallMeta(server, slug) {
-    const metaUrl = new URL('/api/skills/install-meta', server);
-    metaUrl.searchParams.set('slug', slug);
-
-    let response;
-    try {
-        response = await fetch(metaUrl.toString());
-    } catch (error) {
-        fail(`Failed to request install-meta: ${error.message}`);
-    }
-
-    const payload = await readJsonResponse(response);
-    if (!response.ok) {
-        const message = payload && payload.message ? payload.message : `Request failed with status ${response.status}.`;
-        fail(message);
-    }
-
-    return parseResponsePayload(payload);
-}
-
-function findSkillRootBySkillMd(baseDir) {
-    const queue = [baseDir];
-    const skillMdDirs = [];
-
-    while (queue.length) {
-        const current = queue.shift();
-        const entries = fs.readdirSync(current, { withFileTypes: true });
-        let hasSkillMd = false;
-
-        for (const entry of entries) {
-            if (entry.isFile() && entry.name.toLowerCase() === 'skill.md') {
-                hasSkillMd = true;
-                break;
-            }
-        }
-        if (hasSkillMd) {
-            skillMdDirs.push(current);
-            continue;
-        }
-
-        for (const entry of entries) {
-            if (!entry.isDirectory()) {
-                continue;
-            }
-            queue.push(path.join(current, entry.name));
-        }
-    }
-
-    if (skillMdDirs.length === 0) {
-        fail('Invalid package: SKILL.md not found.');
-    }
-
-    skillMdDirs.sort((a, b) => {
-        const depthDiff = a.split(path.sep).length - b.split(path.sep).length;
-        if (depthDiff !== 0) {
-            return depthDiff;
-        }
-        return a.localeCompare(b);
-    });
-
-    return skillMdDirs[0];
-}
-
-function ensureZipBuffer(buffer) {
-    if (!Buffer.isBuffer(buffer) || buffer.length < 2) {
-        fail('Download failed: package is not a zip archive.');
-    }
-    if (buffer[0] !== 0x50 || buffer[1] !== 0x4b) {
-        fail('Download failed: package is not a zip archive.');
-    }
-}
-
-async function downloadArchive(downloadUrl) {
-    let response;
-    try {
-        response = await fetch(downloadUrl);
-    } catch (error) {
-        fail(`Failed to download package: ${error.message}`);
-    }
-
-    if (!response.ok) {
-        fail(`Failed to download package: HTTP ${response.status}`);
-    }
-
-    const buffer = await response.buffer();
-    ensureZipBuffer(buffer);
-    return buffer;
-}
-
-function extractArchive(buffer, tempDir) {
-    try {
-        const zip = new AdmZip(buffer);
-        zip.extractAllTo(tempDir, true);
-    } catch (error) {
-        fail(`Failed to extract zip: ${error.message}`);
-    }
-}
-
-function installFromSkillRoot(skillRoot, targetDir) {
-    if (fs.existsSync(targetDir)) {
-        fail(`Target directory already exists: ${targetDir}`);
-    }
-    fs.mkdirSync(path.dirname(targetDir), { recursive: true });
-    fs.cpSync(skillRoot, targetDir, { recursive: true });
-}
-
-async function runInstall(positionals, options) {
-    const slug = positionals[0];
-    if (!slug) {
-        fail('Usage: doraemon-skills install <slug> [--server <url>] [--dir <path>]');
-    }
-
-    const server = resolveServer(options);
-    const installRoot = resolveInstallRoot(options.dir);
-    const meta = await requestInstallMeta(server, slug);
-
-    if (meta.installable === false) {
-        fail(`Skill is not installable: ${meta.reason || 'unknown reason'}`);
-    }
-    if (meta.packageType !== 'zip') {
-        fail(`Unsupported packageType: ${meta.packageType}`);
-    }
-    if (meta.packageRootMode !== 'find-skill-md') {
-        fail(`Unsupported packageRootMode: ${meta.packageRootMode}`);
-    }
-    if (!meta.downloadUrl) {
-        fail('install-meta missing downloadUrl.');
-    }
-    if (!meta.installDirName) {
-        fail('install-meta missing installDirName.');
-    }
-
-    const downloadUrl = new URL(meta.downloadUrl, server).toString();
-    const targetDir = path.resolve(installRoot, meta.installDirName);
-
-    console.log(`Downloading: ${downloadUrl}`);
-    const buffer = await downloadArchive(downloadUrl);
-
-    const tempDir = fs.mkdtempSync(path.join(os.tmpdir(), 'doraemon-skills-'));
-    try {
-        extractArchive(buffer, tempDir);
-        const skillRoot = findSkillRootBySkillMd(tempDir);
-        installFromSkillRoot(skillRoot, targetDir);
-    } finally {
-        fs.rmSync(tempDir, { recursive: true, force: true });
-    }
-
-    console.log(`Installed: ${meta.slug || slug} -> ${targetDir}`);
-}
-
-function runList(options) {
-    const installRoot = resolveInstallRoot(options.dir);
-    if (!fs.existsSync(installRoot)) {
-        return;
-    }
-
-    const names = fs
-        .readdirSync(installRoot, { withFileTypes: true })
-        .filter((entry) => entry.isDirectory())
-        .map((entry) => entry.name)
-        .sort((a, b) => a.localeCompare(b));
-
-    for (const name of names) {
-        console.log(name);
-    }
-}
-
-async function main() {
-    const argv = process.argv.slice(2);
-    const { command, positionals, options } = parseArgs(argv);
-
-    if (!command) {
-        fail('Usage: doraemon-skills <install|list> ...');
-    }
-
-    if (command === 'install') {
-        await runInstall(positionals, options);
-        return;
-    }
-    if (command === 'list') {
-        runList(options);
-        return;
-    }
-
-    fail(`Unknown command: ${command}`);
-}
-
-main().catch((error) => {
+cli.main().catch((error) => {
     console.error(`Error: ${error.message}`);
     process.exitCode = 1;
 });
diff --git a/test/doraemon-skills-config.test.js b/test/doraemon-skills-config.test.js
new file mode 100644
index 0000000..417b31e
--- /dev/null
+++ b/test/doraemon-skills-config.test.js
@@ -0,0 +1,38 @@
+const test = require('node:test');
+const assert = require('node:assert/strict');
+const fs = require('fs');
+const os = require('os');
+const path = require('path');
+
+const cliLib = require('../scripts/doraemon-skills-lib');
+
+test('resolveServer falls back to bootstrap-written config when option and env are absent', () => {
+    assert.equal(typeof cliLib.resolveServer, 'function');
+    assert.equal(typeof cliLib.readBootstrapConfigServer, 'function');
+
+    const tempHome = fs.mkdtempSync(path.join(os.tmpdir(), 'doraemon-cli-home-'));
+    const configDir = path.join(tempHome, '.doraemon');
+    fs.mkdirSync(configDir, { recursive: true });
+    fs.writeFileSync(
+        path.join(configDir, 'skills.json'),
+        JSON.stringify({ server: 'https://doraemon.example.com' }),
+        'utf8'
+    );
+
+    const server = cliLib.resolveServer({}, {
+        env: {},
+        homedir: () => tempHome,
+    });
+
+    assert.equal(server, 'https://doraemon.example.com/');
+});
+
+test('buildInstallMetaUrl queries install-meta with installKey instead of exposing slug semantics', () => {
+    assert.equal(typeof cliLib.buildInstallMetaUrl, 'function');
+
+    const metaUrl = cliLib.buildInstallMetaUrl('https://doraemon.example.com', 'skill-creator');
+
+    assert.equal(metaUrl.toString(), 'https://doraemon.example.com/api/skills/install-meta?installKey=skill-creator');
+    assert.equal(metaUrl.searchParams.get('installKey'), 'skill-creator');
+    assert.equal(metaUrl.searchParams.get('slug'), null);
+});
diff --git a/test/skills-install-key.test.js b/test/skills-install-key.test.js
new file mode 100644
index 0000000..77e09c0
--- /dev/null
+++ b/test/skills-install-key.test.js
@@ -0,0 +1,91 @@
+const test = require('node:test');
+const assert = require('node:assert/strict');
+
+const skillsModule = require('../app/service/skills');
+const SkillsService = skillsModule;
+
+test('createInstallKeyMap derives user-facing install keys and keeps them unique', () => {
+    assert.equal(typeof skillsModule.createInstallKeyMap, 'function');
+
+    const result = skillsModule.createInstallKeyMap([
+        {
+            slug: 'upload-skill-creator-default-skill-creator',
+            name: 'skill-creator',
+            sourcePath: 'skills/skill-creator',
+        },
+        {
+            slug: 'upload-skill-creator-default-skill-creator-2',
+            name: 'skill creator',
+            sourcePath: 'skills/skill-creator-alt',
+        },
+    ]);
+
+    assert.equal(result.bySlug.get('upload-skill-creator-default-skill-creator').installKey, 'skill-creator');
+    assert.equal(result.bySlug.get('upload-skill-creator-default-skill-creator-2').installKey, 'skill-creator-alt');
+    assert.equal(result.byInstallKey.get('skill-creator').slug, 'upload-skill-creator-default-skill-creator');
+    assert.equal(result.byInstallKey.get('skill-creator-alt').slug, 'upload-skill-creator-default-skill-creator-2');
+});
+
+test('resolveSkillIdentifier accepts installKey without exposing internal slug', () => {
+    assert.equal(typeof skillsModule.resolveSkillIdentifier, 'function');
+
+    const skill = skillsModule.resolveSkillIdentifier('skill-creator', {
+        bySlug: new Map([
+            [
+                'upload-skill-creator-default-skill-creator',
+                {
+                    slug: 'upload-skill-creator-default-skill-creator',
+                    installKey: 'skill-creator',
+                },
+            ],
+        ]),
+        byInstallKey: new Map([
+            [
+                'skill-creator',
+                {
+                    slug: 'upload-skill-creator-default-skill-creator',
+                    installKey: 'skill-creator',
+                },
+            ],
+        ]),
+    });
+
+    assert.equal(skill.slug, 'upload-skill-creator-default-skill-creator');
+    assert.equal(skill.installKey, 'skill-creator');
+});
+
+test('getInstallMeta returns installKey and installDirName aligned to user-facing identifier', async () => {
+    const service = Object.create(SkillsService.prototype);
+    service.ctx = {
+        throw(status, message) {
+            const error = new Error(message);
+            error.status = status;
+            throw error;
+        },
+    };
+    service.skillCache = {
+        bySlug: new Map(),
+        byInstallKey: new Map(),
+    };
+    service.ensureSkillCache = async () => {};
+    service.getSkillPackageInstallability = async () => ({ installable: true, reason: '' });
+    service.getSkillArchive = async () => ({ content: Buffer.from('zip-content') });
+    service.buildSkillDownloadUrl = (slug) => `https://doraemon.test/api/skills/download?slug=${slug}`;
+
+    const skill = {
+        id: 1,
+        slug: 'upload-skill-creator-default-skill-creator',
+        installKey: 'skill-creator',
+        name: 'skill-creator',
+        sourceRepo: '',
+    };
+    service.skillCache.bySlug.set(skill.slug, skill);
+    service.skillCache.byInstallKey.set(skill.installKey, skill);
+
+    const meta = await service.getInstallMeta('skill-creator');
+
+    assert.equal(meta.slug, 'upload-skill-creator-default-skill-creator');
+    assert.equal(meta.installKey, 'skill-creator');
+    assert.equal(meta.installDirName, 'skill-creator');
+    assert.equal(meta.downloadUrl, 'https://doraemon.test/api/skills/download?slug=upload-skill-creator-default-skill-creator');
+});

From 635195323bf1611ec700a60008b02ab7d86aa102 Mon Sep 17 00:00:00 2001
From: huaiju <huaiju@dtstack.com>
Date: Sun, 22 Mar 2026 13:06:41 +0800
Subject: [PATCH 32/43] feat(skills): split lightweight install modal from
 detail route

---
 .../skills/detail/SkillDetailContent.tsx      | 478 ++++++++++--------
 .../detail/SkillSummaryModalContent.tsx       | 371 ++++++++++++++
 app/web/pages/skills/detail/index.tsx         |   2 +-
 app/web/pages/skills/detail/style.scss        | 325 ++++++++++--
 app/web/pages/skills/detail/summaryModal.scss | 340 +++++++++++++
 app/web/pages/skills/index.tsx                |  51 +-
 app/web/pages/skills/style.scss               |  52 +-
 app/web/pages/skills/types.ts                 |   2 +
 app/web/utils/http.ts                         |   3 +-
 9 files changed, 1327 insertions(+), 297 deletions(-)
 create mode 100644 app/web/pages/skills/detail/SkillSummaryModalContent.tsx
 create mode 100644 app/web/pages/skills/detail/summaryModal.scss

diff --git a/app/web/pages/skills/detail/SkillDetailContent.tsx b/app/web/pages/skills/detail/SkillDetailContent.tsx
index cb54edb..58ad383 100644
--- a/app/web/pages/skills/detail/SkillDetailContent.tsx
+++ b/app/web/pages/skills/detail/SkillDetailContent.tsx
@@ -11,19 +11,7 @@ import {
     ShareAltOutlined,
     StarOutlined,
 } from '@ant-design/icons';
-import {
-    Button,
-    Card,
-    Col,
-    Empty,
-    Row,
-    Space,
-    Spin,
-    Tabs,
-    Tag,
-    Tree,
-    Typography,
-} from 'antd';
+import { Button, Card, Col, Empty, Row, Space, Spin, Tabs, Tag, Tree, Typography } from 'antd';
 import type { DataNode } from 'antd/lib/tree';
 
 import { API } from '@/api';
@@ -46,10 +34,7 @@ interface FrontmatterItem {
 
 interface SkillDetailContentProps {
     slug: string;
-    mode?: 'page' | 'modal';
-    history?: any;
-    onClose?: () => void;
-    onOpenSkill?: (nextSlug: string) => void;
+    history: any;
 }
 
 const formatFileSize = (size = 0) => {
@@ -131,7 +116,9 @@ const normalizeFrontmatterValue = (value: string) => {
     return trimmed;
 };
 
-const parseMarkdownFrontmatter = (markdown = ''): { frontmatter: FrontmatterItem[]; body: string } => {
+const parseMarkdownFrontmatter = (
+    markdown = ''
+): { frontmatter: FrontmatterItem[]; body: string } => {
     const content = String(markdown || '');
     const match = content.match(/^---\r?\n([\s\S]*?)\r?\n---\r?\n?/);
     if (!match) {
@@ -182,13 +169,7 @@ const formatDownloadCommand = (downloadUrl = '', fileName = 'skill.zip') => {
     return `curl -L "${downloadUrl}" -o ${fileName}`;
 };
 
-const SkillDetailContent: React.FC<SkillDetailContentProps> = ({
-    slug,
-    mode = 'page',
-    history,
-    onClose,
-    onOpenSkill,
-}) => {
+const SkillDetailContent: React.FC<SkillDetailContentProps> = ({ slug, history }) => {
     const [loading, setLoading] = useState(true);
     const [fileLoading, setFileLoading] = useState(false);
     const [detail, setDetail] = useState<SkillDetail | null>(null);
@@ -197,11 +178,20 @@ const SkillDetailContent: React.FC<SkillDetailContentProps> = ({
     const [selectedFilePath, setSelectedFilePath] = useState('');
     const [fileContent, setFileContent] = useState<SkillFileContent | null>(null);
 
-    const isModal = mode === 'modal';
-    const fileTreeData = useMemo(() => buildFileTreeData(detail?.fileList || []), [detail?.fileList]);
-    const sourceUrl = useMemo(() => normalizeSourceUrl(detail?.sourceRepo || ''), [detail?.sourceRepo]);
-    const downloadPath = useMemo(() => `/api/skills/download?slug=${encodeURIComponent(slug)}`, [slug]);
+    const fileTreeData = useMemo(
+        () => buildFileTreeData(detail?.fileList || []),
+        [detail?.fileList]
+    );
+    const sourceUrl = useMemo(
+        () => normalizeSourceUrl(detail?.sourceRepo || ''),
+        [detail?.sourceRepo]
+    );
+    const downloadPath = useMemo(
+        () => `/api/skills/download?slug=${encodeURIComponent(slug)}`,
+        [slug]
+    );
     const deepLinkPath = useMemo(() => `/page/skills/${encodeURIComponent(slug)}`, [slug]);
+    const installKey = installMeta?.installKey || detail?.installKey || slug;
     const currentOrigin = useMemo(() => {
         if (typeof window === 'undefined') return '';
         return window.location.origin;
@@ -210,10 +200,9 @@ const SkillDetailContent: React.FC<SkillDetailContentProps> = ({
         if (!currentOrigin) return deepLinkPath;
         return `${currentOrigin}${deepLinkPath}`;
     }, [currentOrigin, deepLinkPath]);
-    const serverArg = currentOrigin || '<current origin>';
     const skillInstallCommand = useMemo(
-        () => `doraemon-skills install ${slug} --server ${serverArg}`,
-        [slug, serverArg]
+        () => `doraemon-skills install ${installKey}`,
+        [installKey]
     );
     const cliInstallPlaceholderCommand =
         '# 待提供：Doraemon CLI 安装脚本 URL（例如 curl -fsSL <...> | bash）';
@@ -238,9 +227,9 @@ const SkillDetailContent: React.FC<SkillDetailContentProps> = ({
         () =>
             [
                 '请先检查 Doraemon CLI 是否已安装（例如执行 doraemon-skills --help）。',
-                '若未安装，请先执行 Human 区的 Doraemon CLI 安装步骤（当前安装脚本 URL 待提供）。',
+                '若未安装，请先执行 Human 区的 Doraemon CLI 安装步骤。',
                 `安装当前技能：${skillInstallCommand}`,
-                '若安装目录不明确，请先询问用户，可使用 --dir <path> 指定目标目录。',
+                '若已安装，则直接执行上面的技能安装命令。',
             ].join('\n'),
         [skillInstallCommand]
     );
@@ -253,14 +242,15 @@ const SkillDetailContent: React.FC<SkillDetailContentProps> = ({
         const loadDetail = async () => {
             setLoading(true);
             try {
-                const [detailRes, relatedRes, installMetaRes] = await Promise.all([
+                const [detailRes, relatedRes] = await Promise.all([
                     API.getSkillDetail({ slug }),
                     API.getRelatedSkills({ slug, limit: 6 }),
-                    API.getSkillInstallMeta({ slug }),
                 ]);
 
                 if (cancelled) return;
 
+                let nextInstallMeta: SkillInstallMeta | null = null;
+
                 if (detailRes.success) {
                     const detailData = detailRes.data as SkillDetail;
                     setDetail(detailData);
@@ -268,6 +258,13 @@ const SkillDetailContent: React.FC<SkillDetailContentProps> = ({
                         ? 'SKILL.md'
                         : detailData.fileList[0] || '';
                     setSelectedFilePath(defaultFile);
+
+                    const installMetaRes = await API.getSkillInstallMeta({
+                        installKey: detailData.installKey || slug,
+                    });
+                    if (!cancelled && installMetaRes.success) {
+                        nextInstallMeta = installMetaRes.data as SkillInstallMeta;
+                    }
                 } else {
                     setDetail(null);
                     setSelectedFilePath('');
@@ -279,11 +276,7 @@ const SkillDetailContent: React.FC<SkillDetailContentProps> = ({
                     setRelated([]);
                 }
 
-                if (installMetaRes.success) {
-                    setInstallMeta(installMetaRes.data as SkillInstallMeta);
-                } else {
-                    setInstallMeta(null);
-                }
+                setInstallMeta(nextInstallMeta);
             } catch (error) {
                 console.error('获取 Skill 详情失败:', error);
                 if (!cancelled) {
@@ -414,9 +407,40 @@ const SkillDetailContent: React.FC<SkillDetailContentProps> = ({
         );
     };
 
+    const renderInstallCommandCard = ({
+        title,
+        description,
+        command,
+        copyMessage,
+        disabled = false,
+    }: {
+        title: string;
+        description?: string;
+        command: string;
+        copyMessage: string;
+        disabled?: boolean;
+    }) => (
+        <div className="install-command-card">
+            <div className="install-command-header">
+                <Text className="install-command-title">{title}</Text>
+                {description ? <Text type="secondary">{description}</Text> : null}
+            </div>
+            <div className="command-block">
+                <code>{command || '暂无可复制命令'}</code>
+                <Button
+                    type="text"
+                    className="command-copy-btn"
+                    icon={<CopyOutlined />}
+                    onClick={() => copyToClipboard(command, copyMessage)}
+                    disabled={disabled || !command}
+                />
+            </div>
+        </div>
+    );
+
     if (loading) {
         return (
-            <div className={`page-skill-detail${isModal ? ' modal-skill-detail' : ''} loading-wrap`}>
+            <div className="page-skill-detail loading-wrap">
                 <Spin size="large" />
             </div>
         );
@@ -424,22 +448,50 @@ const SkillDetailContent: React.FC<SkillDetailContentProps> = ({
 
     if (!detail) {
         return (
-            <div className={`page-skill-detail${isModal ? ' modal-skill-detail' : ''}`}>
+            <div className="page-skill-detail">
                 <Empty description="Skill 不存在或已被删除">
-                    {isModal ? (
-                        <Button onClick={onClose}>关闭</Button>
-                    ) : (
-                        <Button onClick={() => history.push('/page/skills')}>返回 Skills 列表</Button>
-                    )}
+                    <Button onClick={() => history.push('/page/skills')}>返回 Skills 列表</Button>
                 </Empty>
             </div>
         );
     }
 
+    const detailTags = (detail.tags || []).filter((tag) => tag && tag !== detail.category);
+    const detailSource = detail.sourceRepo || detail.sourcePath || '-';
+    const detailUpdatedAt = detail.updatedAt
+        ? new Date(detail.updatedAt).toLocaleString('zh-CN')
+        : '-';
+    const agentFallbackInstruction = [
+        '当前 skill 不支持 doraemon-skills 直接安装。',
+        `请先下载 zip：${downloadCommand}`,
+        `原因：${installUnavailableReason}`,
+        '然后手动解压并确认技能目录结构（需包含 SKILL.md）。',
+    ].join('\n');
+    const detailMetaItems = [
+        {
+            label: 'Stars',
+            value: String(detail.stars || 0),
+            className: 'is-accent',
+        },
+        {
+            label: '分类',
+            value: detail.category || '未分类',
+        },
+        {
+            label: '最近更新',
+            value: detailUpdatedAt,
+        },
+        {
+            label: '来源',
+            value: detailSource,
+            className: 'is-wide',
+        },
+    ];
+
     return (
-        <div className={`page-skill-detail${isModal ? ' modal-skill-detail' : ''}`}>
-            <div className="detail-header">
-                {!isModal ? (
+        <div className="page-skill-detail">
+            <div className="detail-hero">
+                <div className="detail-hero-main">
                     <Button
                         icon={<ArrowLeftOutlined />}
                         className="back-btn"
@@ -447,31 +499,154 @@ const SkillDetailContent: React.FC<SkillDetailContentProps> = ({
                     >
                         返回列表
                     </Button>
-                ) : null}
-                <div className="title-group">
-                    <Title level={2}>{detail.name}</Title>
-                    <Paragraph type="secondary" style={{ marginBottom: 0 }}>
-                        {detail.description || '暂无描述'}
-                    </Paragraph>
-                    <Text type="secondary">slug: {detail.slug}</Text>
-                </div>
-            </div>
 
-            <Card className="meta-card">
-                <Space size={20} wrap>
-                    <Text>
-                        <StarOutlined /> Stars: {detail.stars || 0}
-                    </Text>
-                    <Text>分类: {detail.category || '未分类'}</Text>
-                    <Text>更新: {new Date(detail.updatedAt).toLocaleString('zh-CN')}</Text>
-                    <Text>来源: {detail.sourceRepo || detail.sourcePath}</Text>
-                </Space>
-                <div className="tags-wrap">
-                    {(detail.tags || []).map((tag) => (
-                        <Tag key={tag}>{tag}</Tag>
-                    ))}
+                    <div className="hero-kicker-row">
+                        <Tag color="blue">{detail.category || '未分类'}</Tag>
+                        <span className="install-key-chip">安装标识 · {installKey}</span>
+                    </div>
+
+                    <div className="hero-title-row">
+                        <div className="title-group">
+                            <Title level={2}>{detail.name}</Title>
+                            <Paragraph className="hero-description" type="secondary">
+                                {detail.description || '暂无描述'}
+                            </Paragraph>
+                        </div>
+
+                        <Space size={12} wrap className="hero-action-group">
+                            <Button
+                                icon={<ShareAltOutlined />}
+                                onClick={() =>
+                                    copyToClipboard(deepLinkUrl, '详情页深链已复制到剪贴板')
+                                }
+                            >
+                                复制深链
+                            </Button>
+                            <Button
+                                icon={<LinkOutlined />}
+                                onClick={() => window.open(sourceUrl, '_blank')}
+                                disabled={!sourceUrl}
+                            >
+                                查看源码
+                            </Button>
+                        </Space>
+                    </div>
+
+                    <div className="hero-meta-grid">
+                        {detailMetaItems.map((item) => (
+                            <div
+                                key={item.label}
+                                className={`hero-meta-card ${item.className || ''}`.trim()}
+                            >
+                                <Text className="hero-meta-label">{item.label}</Text>
+                                <div className="hero-meta-value" title={item.value}>
+                                    {item.label === 'Stars' ? (
+                                        <>
+                                            <StarOutlined /> {item.value}
+                                        </>
+                                    ) : (
+                                        item.value
+                                    )}
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+
+                    {detailTags.length > 0 ? (
+                        <div className="hero-tag-list">
+                            {detailTags.map((tag) => (
+                                <Tag key={tag}>{tag}</Tag>
+                            ))}
+                        </div>
+                    ) : null}
                 </div>
-            </Card>
+
+                <Card className="install-overview-card" bordered={false}>
+                    <div className="install-card-header">
+                        <div>
+                            <Text className="install-card-title">安装方式</Text>
+                            <Paragraph className="install-card-caption" type="secondary">
+                                {isInstallable
+                                    ? '默认展示 Agent 安装路径，并始终基于 installKey 生成用户可见命令。'
+                                    : '当前来源暂不支持 Doraemon CLI 直装，保留手动下载与解压的降级路径。'}
+                            </Paragraph>
+                        </div>
+                        <span
+                            className={`install-status-tag ${
+                                isInstallable ? 'is-ready' : 'is-fallback'
+                            }`}
+                        >
+                            {isInstallable ? 'CLI 可安装' : '需手动接入'}
+                        </span>
+                    </div>
+
+                    <Tabs defaultActiveKey="agent" className="install-tabs">
+                        <TabPane tab="我是 Agent" key="agent">
+                            <div className="install-tab-panel">
+                                {isInstallable ? (
+                                    <>
+                                        <Text type="secondary">
+                                            先确认 Doraemon CLI 可用，再把下面整段提示发给 Agent
+                                            执行。
+                                        </Text>
+                                        {renderInstallCommandCard({
+                                            title: '发给 Agent 的安装提示',
+                                            description: '包含 CLI 检查与技能安装两步说明',
+                                            command: agentInstruction,
+                                            copyMessage: 'Agent 指令已复制到剪贴板',
+                                        })}
+                                    </>
+                                ) : (
+                                    <>
+                                        <Text strong>当前 skill 需要 Agent 走下载降级路径</Text>
+                                        {renderInstallCommandCard({
+                                            title: '发给 Agent 的降级说明',
+                                            description: installUnavailableReason,
+                                            command: agentFallbackInstruction,
+                                            copyMessage: '降级指令已复制到剪贴板',
+                                        })}
+                                    </>
+                                )}
+                            </div>
+                        </TabPane>
+                        <TabPane tab="我是 Human" key="human">
+                            <div className="install-tab-panel">
+                                {isInstallable ? (
+                                    <>
+                                        {renderInstallCommandCard({
+                                            title: '先安装 Doraemon CLI',
+                                            description:
+                                                '当前项目仍使用占位说明，等待统一安装脚本地址补齐',
+                                            command: cliInstallPlaceholderCommand,
+                                            copyMessage: 'CLI 安装命令已复制到剪贴板',
+                                        })}
+                                        {renderInstallCommandCard({
+                                            title: '安装当前技能',
+                                            description: '复制后可直接在终端执行',
+                                            command: skillInstallCommand,
+                                            copyMessage: '技能安装命令已复制到剪贴板',
+                                        })}
+                                    </>
+                                ) : (
+                                    <>
+                                        <Text strong>当前技能暂不支持 Doraemon CLI 直接安装</Text>
+                                        <Text type="secondary">
+                                            原因：{installUnavailableReason}
+                                        </Text>
+                                        {renderInstallCommandCard({
+                                            title: '手动下载命令',
+                                            description: '下载 zip 后手动解压到目标 skills 目录',
+                                            command: downloadCommand,
+                                            copyMessage: '下载命令已复制到剪贴板',
+                                            disabled: !downloadCommand,
+                                        })}
+                                    </>
+                                )}
+                            </div>
+                        </TabPane>
+                    </Tabs>
+                </Card>
+            </div>
 
             <Row gutter={[16, 16]} className="detail-main-row">
                 <Col xs={24} xl={16}>
@@ -525,124 +700,11 @@ const SkillDetailContent: React.FC<SkillDetailContentProps> = ({
                 </Col>
 
                 <Col xs={24} xl={8}>
-                    <Card className="action-card" title="安装方式">
-                        <Tabs defaultActiveKey="human">
-                            <TabPane tab="我是 Human" key="human">
-                                {isInstallable ? (
-                                    <div className="install-tab-panel">
-                                        <Text type="secondary">先安装 Doraemon CLI（脚本地址当前待提供）</Text>
-                                        <div className="command-block">
-                                            <code>{cliInstallPlaceholderCommand}</code>
-                                            <Button
-                                                type="text"
-                                                className="command-copy-btn"
-                                                icon={<CopyOutlined />}
-                                                onClick={() =>
-                                                    copyToClipboard(
-                                                        cliInstallPlaceholderCommand,
-                                                        'CLI 安装说明已复制到剪贴板'
-                                                    )
-                                                }
-                                            />
-                                        </div>
-                                        <Text type="secondary">安装当前技能</Text>
-                                        <div className="command-block">
-                                            <code>{skillInstallCommand}</code>
-                                            <Button
-                                                type="text"
-                                                className="command-copy-btn"
-                                                icon={<CopyOutlined />}
-                                                onClick={() =>
-                                                    copyToClipboard(
-                                                        skillInstallCommand,
-                                                        '技能安装命令已复制到剪贴板'
-                                                    )
-                                                }
-                                            />
-                                        </div>
-                                    </div>
-                                ) : (
-                                    <div className="install-tab-panel">
-                                        <Text strong>当前技能暂不支持 Doraemon CLI 直接安装</Text>
-                                        <Text type="secondary">
-                                            {`原因：${installUnavailableReason}`}
-                                        </Text>
-                                        <div className="command-block">
-                                            <code>{downloadCommand}</code>
-                                            <Button
-                                                type="text"
-                                                className="command-copy-btn"
-                                                icon={<CopyOutlined />}
-                                                onClick={() =>
-                                                    copyToClipboard(
-                                                        downloadCommand,
-                                                        '下载命令已复制到剪贴板'
-                                                    )
-                                                }
-                                                disabled={!downloadCommand}
-                                            />
-                                        </div>
-                                        <Text type="secondary">
-                                            请下载 zip 后手动解压到目标 skills 目录，再按本地流程接入。
-                                        </Text>
-                                    </div>
-                                )}
-                            </TabPane>
-                            <TabPane tab="我是 Agent" key="agent">
-                                {isInstallable ? (
-                                    <div className="install-tab-panel">
-                                        <Text type="secondary">复制以下指令给 Agent 执行</Text>
-                                        <div className="command-block">
-                                            <code>{agentInstruction}</code>
-                                            <Button
-                                                type="text"
-                                                className="command-copy-btn"
-                                                icon={<CopyOutlined />}
-                                                onClick={() =>
-                                                    copyToClipboard(
-                                                        agentInstruction,
-                                                        'Agent 指令已复制到剪贴板'
-                                                    )
-                                                }
-                                            />
-                                        </div>
-                                    </div>
-                                ) : (
-                                    <div className="install-tab-panel">
-                                        <Text strong>Agent 请走降级路径</Text>
-                                        <div className="command-block">
-                                            <code>
-                                                {[
-                                                    '当前 skill 不支持 doraemon-skills 直接安装。',
-                                                    `请先下载 zip：${downloadCommand}`,
-                                                    `原因：${installUnavailableReason}`,
-                                                    '然后手动解压并确认技能目录结构（需包含 SKILL.md）。',
-                                                ].join('\n')}
-                                            </code>
-                                            <Button
-                                                type="text"
-                                                className="command-copy-btn"
-                                                icon={<CopyOutlined />}
-                                                onClick={() =>
-                                                    copyToClipboard(
-                                                        [
-                                                            '当前 skill 不支持 doraemon-skills 直接安装。',
-                                                            `请先下载 zip：${downloadCommand}`,
-                                                            `原因：${installUnavailableReason}`,
-                                                            '然后手动解压并确认技能目录结构（需包含 SKILL.md）。',
-                                                        ].join('\n'),
-                                                        '降级指令已复制到剪贴板'
-                                                    )
-                                                }
-                                            />
-                                        </div>
-                                    </div>
-                                )}
-                            </TabPane>
-                        </Tabs>
-                    </Card>
-
-                    <Card className="action-card" title="$ download --local" extra={<Text>manual</Text>}>
+                    <Card
+                        className="action-card download-card"
+                        title="手动下载"
+                        extra={<Text>manual</Text>}
+                    >
                         <div className="download-buttons">
                             <Button
                                 type="primary"
@@ -670,28 +732,6 @@ const SkillDetailContent: React.FC<SkillDetailContentProps> = ({
                             </Text>
                         </div>
                     </Card>
-
-                    <Card className="action-card" title="源码与分享">
-                        <Space direction="vertical" style={{ width: '100%' }}>
-                            <Button
-                                block
-                                icon={<LinkOutlined />}
-                                onClick={() => window.open(sourceUrl, '_blank')}
-                                disabled={!sourceUrl}
-                            >
-                                源码跳转
-                            </Button>
-                            <Button
-                                block
-                                icon={<ShareAltOutlined />}
-                                onClick={() =>
-                                    copyToClipboard(deepLinkUrl, '详情页深链已复制到剪贴板')
-                                }
-                            >
-                                复制深链
-                            </Button>
-                        </Space>
-                    </Card>
                 </Col>
             </Row>
 
@@ -705,15 +745,7 @@ const SkillDetailContent: React.FC<SkillDetailContentProps> = ({
                                 <Card
                                     className="related-item-card"
                                     hoverable
-                                                onClick={() => {
-                                                    if (isModal && onOpenSkill) {
-                                                        onOpenSkill(item.slug);
-                                                        return;
-                                                    }
-                                                    if (history) {
-                                                        history.push(`/page/skills/${item.slug}`);
-                                                    }
-                                                }}
+                                    onClick={() => history.push(`/page/skills/${item.slug}`)}
                                 >
                                     <div className="related-title">{item.name}</div>
                                     <Paragraph ellipsis={{ rows: 2 }}>
diff --git a/app/web/pages/skills/detail/SkillSummaryModalContent.tsx b/app/web/pages/skills/detail/SkillSummaryModalContent.tsx
new file mode 100644
index 0000000..f412f45
--- /dev/null
+++ b/app/web/pages/skills/detail/SkillSummaryModalContent.tsx
@@ -0,0 +1,371 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { CopyOutlined, LinkOutlined, ShareAltOutlined, StarOutlined } from '@ant-design/icons';
+import { Button, Empty, Spin, Tabs, Tag, Typography } from 'antd';
+
+import { API } from '@/api';
+import { copyToClipboard } from '@/utils/copyUtils';
+import { SkillDetail, SkillInstallMeta } from '../types';
+import './summaryModal.scss';
+
+const { Paragraph, Text, Title } = Typography;
+const { TabPane } = Tabs;
+
+interface SkillSummaryModalContentProps {
+    slug: string;
+    history: any;
+}
+
+const normalizeSourceUrl = (sourceRepo: string) => {
+    if (!sourceRepo) return '';
+    const normalized = sourceRepo.replace(/^git\+/, '').trim();
+    const sshMatch = normalized.match(/^git@([^:]+):(.+?)(?:\.git)?$/);
+    if (sshMatch) {
+        return `https://${sshMatch[1]}/${sshMatch[2]}`;
+    }
+    if (/^https?:\/\//.test(normalized)) {
+        return normalized.replace(/\.git$/, '');
+    }
+    return '';
+};
+
+const formatDownloadCommand = (downloadUrl = '', fileName = 'skill.zip') => {
+    if (!downloadUrl) return '';
+    return `curl -L "${downloadUrl}" -o ${fileName}`;
+};
+
+const SkillSummaryModalContent: React.FC<SkillSummaryModalContentProps> = ({ slug, history }) => {
+    const [loading, setLoading] = useState(true);
+    const [detail, setDetail] = useState<SkillDetail | null>(null);
+    const [installMeta, setInstallMeta] = useState<SkillInstallMeta | null>(null);
+
+    const sourceUrl = useMemo(
+        () => normalizeSourceUrl(detail?.sourceRepo || ''),
+        [detail?.sourceRepo]
+    );
+    const deepLinkPath = useMemo(() => `/page/skills/${encodeURIComponent(slug)}`, [slug]);
+    const downloadPath = useMemo(
+        () => `/api/skills/download?slug=${encodeURIComponent(slug)}`,
+        [slug]
+    );
+    const installKey = installMeta?.installKey || detail?.installKey || slug;
+    const currentOrigin = useMemo(() => {
+        if (typeof window === 'undefined') return '';
+        return window.location.origin;
+    }, []);
+    const deepLinkUrl = useMemo(() => {
+        if (!currentOrigin) return deepLinkPath;
+        return `${currentOrigin}${deepLinkPath}`;
+    }, [currentOrigin, deepLinkPath]);
+    const skillInstallCommand = useMemo(
+        () => `doraemon-skills install ${installKey}`,
+        [installKey]
+    );
+    const cliInstallPlaceholderCommand =
+        '# 待提供：Doraemon CLI 安装脚本 URL（例如 curl -fsSL <...> | bash）';
+    const archiveFileName = useMemo(() => {
+        const rawName = detail?.name || slug || 'skill';
+        const normalized = rawName
+            .toLowerCase()
+            .replace(/[^a-z0-9._-]+/g, '-')
+            .replace(/^-+|-+$/g, '');
+        return `${normalized || 'skill'}.zip`;
+    }, [detail?.name, slug]);
+    const downloadCommand = useMemo(() => {
+        if (installMeta?.downloadUrl) {
+            return formatDownloadCommand(installMeta.downloadUrl, archiveFileName);
+        }
+        if (!currentOrigin) {
+            return `curl -L "${downloadPath}" -o ${archiveFileName}`;
+        }
+        return formatDownloadCommand(`${currentOrigin}${downloadPath}`, archiveFileName);
+    }, [archiveFileName, currentOrigin, downloadPath, installMeta?.downloadUrl]);
+    const agentInstruction = useMemo(
+        () =>
+            [
+                '请先检查 Doraemon CLI 是否已安装（例如执行 doraemon-skills --help）。',
+                '若未安装，请先执行 Human 区的 Doraemon CLI 安装步骤。',
+                `安装当前技能：${skillInstallCommand}`,
+                '若已安装，则直接执行上面的技能安装命令。',
+            ].join('\n'),
+        [skillInstallCommand]
+    );
+    const isInstallable = Boolean(installMeta?.installable);
+    const installUnavailableReason = installMeta?.reason || 'install-meta 暂不可用';
+
+    useEffect(() => {
+        let cancelled = false;
+
+        const loadDetail = async () => {
+            setLoading(true);
+            try {
+                const detailRes = await API.getSkillDetail({ slug });
+                if (cancelled) return;
+
+                if (!detailRes.success) {
+                    setDetail(null);
+                    setInstallMeta(null);
+                    return;
+                }
+
+                const detailData = detailRes.data as SkillDetail;
+                setDetail(detailData);
+
+                const installMetaRes = await API.getSkillInstallMeta({
+                    installKey: detailData.installKey || slug,
+                });
+                if (!cancelled) {
+                    setInstallMeta(
+                        installMetaRes.success ? (installMetaRes.data as SkillInstallMeta) : null
+                    );
+                }
+            } catch (error) {
+                console.error('获取 Skill 弹窗详情失败:', error);
+                if (!cancelled) {
+                    setDetail(null);
+                    setInstallMeta(null);
+                }
+            } finally {
+                if (!cancelled) {
+                    setLoading(false);
+                }
+            }
+        };
+
+        loadDetail();
+
+        return () => {
+            cancelled = true;
+        };
+    }, [slug]);
+
+    const renderInstallCommandCard = ({
+        title,
+        description,
+        command,
+        copyMessage,
+        disabled = false,
+    }: {
+        title: string;
+        description?: string;
+        command: string;
+        copyMessage: string;
+        disabled?: boolean;
+    }) => (
+        <div className="summary-command-card">
+            <div className="summary-command-header">
+                <Text className="summary-command-title">{title}</Text>
+                {description ? <Text type="secondary">{description}</Text> : null}
+            </div>
+            <div className="summary-command-block">
+                <code>{command || '暂无可复制命令'}</code>
+                <Button
+                    type="text"
+                    className="summary-command-copy-btn"
+                    icon={<CopyOutlined />}
+                    onClick={() => copyToClipboard(command, copyMessage)}
+                    disabled={disabled || !command}
+                />
+            </div>
+        </div>
+    );
+
+    if (loading) {
+        return (
+            <div className="skill-summary-modal skill-summary-loading">
+                <Spin size="large" />
+            </div>
+        );
+    }
+
+    if (!detail) {
+        return (
+            <div className="skill-summary-modal">
+                <Empty description="Skill 不存在或已被删除" />
+            </div>
+        );
+    }
+
+    const detailTags = (detail.tags || []).filter((tag) => tag && tag !== detail.category);
+    const detailSource = detail.sourceRepo || detail.sourcePath || '-';
+    const detailUpdatedAt = detail.updatedAt
+        ? new Date(detail.updatedAt).toLocaleString('zh-CN')
+        : '-';
+    const agentFallbackInstruction = [
+        '当前 skill 不支持 doraemon-skills 直接安装。',
+        `请先下载 zip：${downloadCommand}`,
+        `原因：${installUnavailableReason}`,
+        '然后手动解压并确认技能目录结构（需包含 SKILL.md）。',
+    ].join('\n');
+    const detailMetaItems = [
+        {
+            label: 'Stars',
+            value: String(detail.stars || 0),
+            className: 'is-accent',
+        },
+        {
+            label: '最近更新',
+            value: detailUpdatedAt,
+        },
+        {
+            label: '来源',
+            value: detailSource,
+            className: 'is-wide',
+        },
+    ];
+
+    return (
+        <div className="skill-summary-modal">
+            <div className="skill-summary-shell">
+                <div className="summary-hero-card">
+                    <div className="summary-hero-main">
+                        <div className="summary-kicker-row">
+                            <Tag color="blue">{detail.category || '未分类'}</Tag>
+                            <span className="summary-install-key">安装标识 · {installKey}</span>
+                        </div>
+
+                        <div className="summary-title-row">
+                            <div className="summary-title-group">
+                                <Title level={2}>{detail.name}</Title>
+                                <Paragraph className="summary-description" type="secondary">
+                                    {detail.description || '暂无描述'}
+                                </Paragraph>
+                            </div>
+
+                            <div className="summary-action-panel">
+                                <Text className="summary-section-label">快捷操作</Text>
+                                <div className="summary-actions">
+                                    <Button type="primary" onClick={() => history.push(deepLinkPath)}>
+                                        打开独立详情页
+                                    </Button>
+                                    <Button
+                                        icon={<ShareAltOutlined />}
+                                        onClick={() =>
+                                            copyToClipboard(
+                                                deepLinkUrl,
+                                                '详情页深链已复制到剪贴板'
+                                            )
+                                        }
+                                    >
+                                        复制深链
+                                    </Button>
+                                    <Button
+                                        icon={<LinkOutlined />}
+                                        onClick={() => window.open(sourceUrl, '_blank')}
+                                        disabled={!sourceUrl}
+                                    >
+                                        查看源码
+                                    </Button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="summary-hero-section">
+                        <Text className="summary-section-label">快速概览</Text>
+                        <div className="summary-meta-grid">
+                            {detailMetaItems.map((item) => (
+                                <div
+                                    key={item.label}
+                                    className={`summary-meta-card ${item.className || ''}`.trim()}
+                                >
+                                    <Text className="summary-meta-label">{item.label}</Text>
+                                    <div className="summary-meta-value" title={item.value}>
+                                        {item.label === 'Stars' ? (
+                                            <>
+                                                <StarOutlined /> {item.value}
+                                            </>
+                                        ) : (
+                                            item.value
+                                        )}
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+
+                    {detailTags.length > 0 ? (
+                        <div className="summary-hero-section summary-tags-section">
+                            <Text className="summary-section-label">标签</Text>
+                            <div className="summary-tag-list">
+                                {detailTags.map((tag) => (
+                                    <Tag key={tag}>{tag}</Tag>
+                                ))}
+                            </div>
+                        </div>
+                    ) : null}
+                </div>
+
+                <div className="summary-install-card">
+                    <div className="summary-install-header">
+                        <div>
+                            <Text className="summary-install-title">安装决策</Text>
+                            <Paragraph className="summary-install-caption" type="secondary">
+                                {isInstallable
+                                    ? '弹窗只保留安装前所需的核心说明，全部命令继续基于 installKey 生成。'
+                                    : '当前来源暂不支持 Doraemon CLI 直装，保留下载与手动接入的降级路径。'}
+                            </Paragraph>
+                        </div>
+                        <span
+                            className={`summary-status-tag ${
+                                isInstallable ? 'is-ready' : 'is-fallback'
+                            }`}
+                        >
+                            {isInstallable ? 'CLI 可安装' : '需手动接入'}
+                        </span>
+                    </div>
+
+                    <Tabs defaultActiveKey="agent" className="summary-install-tabs">
+                        <TabPane tab="我是 Agent" key="agent">
+                            <div className="summary-install-panel">
+                                {isInstallable
+                                    ? renderInstallCommandCard({
+                                          title: '发给 Agent 的安装提示',
+                                          description: '包含 CLI 检查与技能安装两步说明',
+                                          command: agentInstruction,
+                                          copyMessage: 'Agent 指令已复制到剪贴板',
+                                      })
+                                    : renderInstallCommandCard({
+                                          title: '发给 Agent 的降级说明',
+                                          description: installUnavailableReason,
+                                          command: agentFallbackInstruction,
+                                          copyMessage: '降级指令已复制到剪贴板',
+                                      })}
+                            </div>
+                        </TabPane>
+                        <TabPane tab="我是 Human" key="human">
+                            <div className="summary-install-panel">
+                                {isInstallable ? (
+                                    <>
+                                        {renderInstallCommandCard({
+                                            title: '先安装 Doraemon CLI',
+                                            description:
+                                                '当前项目仍使用占位说明，等待统一安装脚本地址补齐',
+                                            command: cliInstallPlaceholderCommand,
+                                            copyMessage: 'CLI 安装命令已复制到剪贴板',
+                                        })}
+                                        {renderInstallCommandCard({
+                                            title: '安装当前技能',
+                                            description: '复制后可直接在终端执行',
+                                            command: skillInstallCommand,
+                                            copyMessage: '技能安装命令已复制到剪贴板',
+                                        })}
+                                    </>
+                                ) : (
+                                    renderInstallCommandCard({
+                                        title: '手动下载命令',
+                                        description: `原因：${installUnavailableReason}`,
+                                        command: downloadCommand,
+                                        copyMessage: '下载命令已复制到剪贴板',
+                                        disabled: !downloadCommand,
+                                    })
+                                )}
+                            </div>
+                        </TabPane>
+                    </Tabs>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default SkillSummaryModalContent;
diff --git a/app/web/pages/skills/detail/index.tsx b/app/web/pages/skills/detail/index.tsx
index ca12c8c..03cbc65 100644
--- a/app/web/pages/skills/detail/index.tsx
+++ b/app/web/pages/skills/detail/index.tsx
@@ -4,7 +4,7 @@ import SkillDetailContent from './SkillDetailContent';
 
 const SkillDetailPage: React.FC<any> = ({ history, match }) => {
     const { slug } = match.params;
-    return <SkillDetailContent slug={slug} mode="page" history={history} />;
+    return <SkillDetailContent slug={slug} history={history} />;
 };
 
 export default SkillDetailPage;
diff --git a/app/web/pages/skills/detail/style.scss b/app/web/pages/skills/detail/style.scss
index 1b2402f..6597545 100644
--- a/app/web/pages/skills/detail/style.scss
+++ b/app/web/pages/skills/detail/style.scss
@@ -1,45 +1,235 @@
 .page-skill-detail {
     padding: 20px 24px;
-    &.modal-skill-detail {
-        padding-top: 8px;
-    }
+    background: linear-gradient(180deg, #F5F8FC 0%, #F8FAFC 100%);
     &.loading-wrap {
         display: flex;
         justify-content: center;
         align-items: center;
         min-height: 420px;
     }
-    .detail-header {
+    .detail-hero {
+        display: grid;
+        grid-template-columns: minmax(0, 1.65fr) minmax(320px, 1fr);
+        gap: 20px;
+        margin-bottom: 20px;
+    }
+    .detail-hero-main,
+    .install-overview-card,
+    .file-tree-card,
+    .file-viewer-card,
+    .action-card,
+    .related-card-list {
+        border: 1px solid #E4ECF5;
+        border-radius: 18px;
+        background: #FFF;
+        box-shadow: 0 16px 36px rgba(31, 45, 61, 0.06);
+    }
+    .detail-hero-main {
+        padding: 24px;
+        background: linear-gradient(145deg, #FFF 0%, #F5F9FF 100%);
+    }
+    .back-btn {
+        margin-bottom: 18px;
+        border-radius: 10px;
+        border-color: #D8E4F1;
+        color: #35506B;
+        background: #FFF;
+    }
+    .hero-kicker-row {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: 10px;
+        margin-bottom: 18px;
+    }
+    .install-key-chip {
+        display: inline-flex;
+        align-items: center;
+        min-height: 28px;
+        padding: 0 12px;
+        border-radius: 999px;
+        border: 1px solid #D6E3F1;
+        background: #F5F9FF;
+        color: #42607B;
+        font-size: 13px;
+        font-weight: 500;
+    }
+    .hero-title-row {
         display: flex;
-        align-items: flex-start;
         justify-content: space-between;
-        gap: 14px;
-        margin-bottom: 16px;
-        .back-btn {
-            margin-top: 4px;
-        }
+        gap: 20px;
+        margin-bottom: 18px;
         .title-group {
             flex: 1;
             min-width: 0;
         }
+        .ant-typography {
+            margin-bottom: 0;
+        }
+        h2.ant-typography {
+            margin-bottom: 12px;
+            color: #1F2D3D;
+            font-size: 32px;
+            line-height: 1.2;
+        }
     }
-    .meta-card {
-        margin-bottom: 16px;
-        .tags-wrap {
-            margin-top: 12px;
+    .hero-description {
+        max-width: 760px;
+        margin-bottom: 0;
+        color: #5C7086;
+        font-size: 15px;
+        line-height: 1.75;
+    }
+    .hero-action-group {
+        justify-content: flex-end;
+        align-self: flex-start;
+        max-width: 320px;
+        .ant-btn {
+            border-radius: 10px;
+        }
+    }
+    .hero-meta-grid {
+        display: grid;
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+        gap: 12px;
+    }
+    .hero-meta-card {
+        padding: 16px 18px;
+        border-radius: 14px;
+        border: 1px solid #E7EEF6;
+        background: linear-gradient(180deg, #FFF 0%, #F7FAFD 100%);
+        min-width: 0;
+        &.is-accent {
+            background: linear-gradient(135deg, #EAF3FF 0%, #F7FAFF 100%);
+            border-color: #D7E6FA;
+        }
+        &.is-wide {
+            grid-column: span 2;
+        }
+    }
+    .hero-meta-label {
+        display: block;
+        margin-bottom: 8px;
+        color: #8A9AAE;
+        font-size: 12px;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+    }
+    .hero-meta-value {
+        color: #23384D;
+        font-size: 15px;
+        font-weight: 600;
+        line-height: 1.6;
+        word-break: break-word;
+        .anticon {
+            margin-right: 6px;
+            color: #D9A441;
+        }
+    }
+    .hero-tag-list {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+        margin-top: 16px;
+    }
+    .install-overview-card {
+        padding: 24px;
+        overflow: hidden;
+        .ant-card-body {
+            padding: 0;
+        }
+    }
+    .install-card-header {
+        display: flex;
+        justify-content: space-between;
+        gap: 16px;
+        margin-bottom: 18px;
+    }
+    .install-card-title {
+        display: block;
+        margin-bottom: 8px;
+        color: #1F2D3D;
+        font-size: 20px;
+        font-weight: 700;
+    }
+    .install-card-caption {
+        margin-bottom: 0;
+        color: #60748A;
+        line-height: 1.7;
+    }
+    .install-status-tag {
+        display: inline-flex;
+        align-items: center;
+        height: 32px;
+        padding: 0 14px;
+        border-radius: 999px;
+        font-size: 13px;
+        font-weight: 600;
+        white-space: nowrap;
+        &.is-ready {
+            color: #1F5FA6;
+            background: #E8F2FF;
+            border: 1px solid #CFE0F7;
+        }
+        &.is-fallback {
+            color: #9A6414;
+            background: #FFF5E8;
+            border: 1px solid #F4DFC0;
+        }
+    }
+    .install-tabs {
+        .ant-tabs-nav {
+            margin-bottom: 16px;
+        }
+        .ant-tabs-tab {
+            padding: 10px 0;
+            font-weight: 600;
         }
+        .ant-tabs-ink-bar {
+            height: 3px;
+            border-radius: 999px;
+            background: #2F7BFF;
+        }
+    }
+    .install-tab-panel {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+    }
+    .install-command-card {
+        padding: 14px;
+        border: 1px solid #E6EDF5;
+        border-radius: 14px;
+        background: #F7FAFD;
+    }
+    .install-command-header {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        margin-bottom: 10px;
+    }
+    .install-command-title {
+        color: #29415A;
+        font-size: 14px;
+        font-weight: 600;
     }
     .detail-main-row {
-        margin-bottom: 16px;
+        margin-bottom: 20px;
     }
     .file-tree-card {
         margin-bottom: 16px;
+        .ant-card-head {
+            border-bottom-color: #EEF3F8;
+        }
         .ant-tree {
-            padding: 4px 8px 8px;
+            padding: 4px 10px 10px;
         }
     }
     .file-viewer-card {
         min-height: 560px;
+        .ant-card-head {
+            border-bottom-color: #EEF3F8;
+        }
         .ant-card-body {
             max-height: 640px;
             overflow: auto;
@@ -49,10 +239,10 @@
         .frontmatter-table-wrap {
             margin-bottom: 16px;
             border: 1px solid #E5EDF6;
-            border-radius: 10px;
+            border-radius: 14px;
             overflow: hidden;
             background: #FFF;
-            box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
+            box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
         }
         .frontmatter-table {
             width: 100%;
@@ -98,15 +288,15 @@
             }
             .frontmatter-code {
                 margin: 0;
+                padding: 10px 12px;
+                border: 1px solid #E4EAF1;
+                border-radius: 8px;
+                background: #F7FAFC;
+                color: #1F2D3D;
                 font-size: 14px;
                 line-height: 1.55;
                 white-space: pre-wrap;
                 word-break: break-word;
-                color: #1F2D3D;
-                background: #F7FAFC;
-                border: 1px solid #E4EAF1;
-                border-radius: 8px;
-                padding: 10px 12px;
             }
         }
     }
@@ -121,44 +311,49 @@
         &:last-child {
             margin-bottom: 0;
         }
-        .runtime-switch {
-            margin-bottom: 12px;
-        }
-        .install-tab-panel {
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
+        .ant-card-head {
+            border-bottom-color: #EEF3F8;
         }
-        .download-buttons {
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
+    }
+    .download-card {
+        .ant-card-extra {
+            color: #7B8EA3;
+            font-size: 12px;
+            text-transform: uppercase;
+            letter-spacing: 0.06em;
         }
     }
+    .download-buttons {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+    }
     .command-block {
         display: flex;
         align-items: stretch;
         justify-content: space-between;
-        gap: 8px;
-        padding: 10px 12px;
-        border-radius: 6px;
-        border: 1px solid #E5E7EB;
-        background: #F8FAFC;
+        gap: 10px;
+        padding: 12px 14px;
+        border-radius: 12px;
+        border: 1px solid #E2EAF3;
+        background: #FFF;
         code {
             flex: 1;
+            color: #1F2D3D;
             white-space: pre-wrap;
             word-break: break-all;
-            color: #1F2D3D;
+            font-size: 13px;
+            line-height: 1.7;
         }
         .command-copy-btn {
             flex: 0 0 auto;
-            align-self: center;
+            align-self: flex-start;
             min-width: 40px;
             height: 40px;
             border: 1px solid #D7E1EC;
-            border-radius: 8px;
+            border-radius: 10px;
             background: #FFF;
-            color: #1F2D3D;
+            color: #2E4A66;
             &:hover,
             &:focus {
                 color: #2F7BFF;
@@ -172,8 +367,19 @@
         }
     }
     .related-card-list {
+        .ant-card-head {
+            border-bottom-color: #EEF3F8;
+        }
         .related-item-card {
             height: 100%;
+            border-radius: 14px;
+            border: 1px solid #E7EDF5;
+            transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+            &:hover {
+                border-color: #BFD6F2;
+                box-shadow: 0 12px 24px rgba(31, 45, 61, 0.08);
+                transform: translateY(-2px);
+            }
             .related-title {
                 margin-bottom: 8px;
                 color: #1F2D3D;
@@ -182,4 +388,37 @@
             }
         }
     }
+
+    @media (max-width: 1100px) {
+        .detail-hero {
+            grid-template-columns: 1fr;
+        }
+        .hero-title-row {
+            flex-direction: column;
+        }
+        .hero-action-group {
+            max-width: none;
+            justify-content: flex-start;
+        }
+    }
+
+    @media (max-width: 768px) {
+        padding: 16px;
+        .detail-hero-main,
+        .install-overview-card {
+            padding: 18px;
+        }
+        .hero-meta-grid {
+            grid-template-columns: 1fr;
+        }
+        .hero-meta-card.is-wide {
+            grid-column: span 1;
+        }
+        .command-block {
+            flex-direction: column;
+            .command-copy-btn {
+                align-self: flex-end;
+            }
+        }
+    }
 }
diff --git a/app/web/pages/skills/detail/summaryModal.scss b/app/web/pages/skills/detail/summaryModal.scss
new file mode 100644
index 0000000..293bc6a
--- /dev/null
+++ b/app/web/pages/skills/detail/summaryModal.scss
@@ -0,0 +1,340 @@
+.skill-summary-modal {
+    padding: 24px;
+    background: transparent;
+    &.skill-summary-loading {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 420px;
+    }
+    .skill-summary-shell {
+        display: grid;
+        grid-template-columns: minmax(0, 1.45fr) minmax(320px, 1fr);
+        gap: 22px;
+    }
+    .summary-hero-card,
+    .summary-install-card {
+        border: 1px solid #E4ECF5;
+        border-radius: 22px;
+        background: #FFF;
+        box-shadow: 0 18px 36px rgba(31, 45, 61, 0.08);
+    }
+    .summary-hero-card {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+        padding: 20px;
+        background: linear-gradient(180deg, #FFF 0%, #F7FAFD 100%);
+    }
+    .summary-hero-main,
+    .summary-hero-section {
+        border: 1px solid #E7EEF6;
+        border-radius: 18px;
+        background: linear-gradient(145deg, #FFF 0%, #F5F9FF 100%);
+        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
+    }
+    .summary-hero-main {
+        padding: 24px;
+    }
+    .summary-hero-section {
+        padding: 16px 18px 18px;
+    }
+    .summary-tags-section {
+        background: linear-gradient(180deg, #FFF 0%, #F9FBFE 100%);
+    }
+    .summary-section-label {
+        display: inline-flex;
+        align-items: center;
+        margin-bottom: 12px;
+        color: #6E849C;
+        font-size: 12px;
+        font-weight: 600;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+    }
+    .summary-kicker-row {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: 10px;
+        margin-bottom: 18px;
+    }
+    .summary-install-key {
+        display: inline-flex;
+        align-items: center;
+        min-height: 28px;
+        padding: 0 12px;
+        border-radius: 999px;
+        border: 1px solid #D6E3F1;
+        background: #F5F9FF;
+        color: #42607B;
+        font-size: 13px;
+        font-weight: 500;
+    }
+    .summary-title-row {
+        display: flex;
+        align-items: flex-start;
+        gap: 20px;
+    }
+    .summary-title-group {
+        flex: 1;
+        min-width: 0;
+        .ant-typography {
+            margin-bottom: 0;
+        }
+        h2.ant-typography {
+            margin-bottom: 12px;
+            color: #1F2D3D;
+            font-size: 30px;
+            line-height: 1.2;
+        }
+    }
+    .summary-description {
+        max-width: 700px;
+        margin-bottom: 0;
+        color: #5C7086;
+        font-size: 15px;
+        line-height: 1.75;
+    }
+    .summary-action-panel {
+        flex: 0 0 214px;
+        padding: 14px;
+        border: 1px solid #DEE8F3;
+        border-radius: 16px;
+        background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, #F3F8FE 100%);
+    }
+    .summary-actions {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        .ant-btn {
+            width: 100%;
+            height: 36px;
+            border-radius: 10px;
+        }
+    }
+    .summary-meta-grid {
+        display: grid;
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+        gap: 12px;
+    }
+    .summary-meta-card {
+        padding: 16px 18px;
+        border-radius: 14px;
+        border: 1px solid #E7EEF6;
+        background: linear-gradient(180deg, #FFF 0%, #F7FAFD 100%);
+        min-width: 0;
+        &.is-accent {
+            background: linear-gradient(135deg, #EAF3FF 0%, #F7FAFF 100%);
+            border-color: #D7E6FA;
+        }
+        &.is-wide {
+            grid-column: span 2;
+        }
+    }
+    .summary-meta-label {
+        display: block;
+        margin-bottom: 8px;
+        color: #8A9AAE;
+        font-size: 12px;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+    }
+    .summary-meta-value {
+        color: #23384D;
+        font-size: 15px;
+        font-weight: 600;
+        line-height: 1.6;
+        word-break: break-word;
+        .anticon {
+            margin-right: 6px;
+            color: #D9A441;
+        }
+    }
+    .summary-tag-list {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+        .ant-tag {
+            margin-right: 0;
+            padding: 4px 10px;
+            border-radius: 999px;
+            border-color: #DBE6F2;
+            color: #48627B;
+            background: #F7FAFD;
+        }
+    }
+    .summary-install-card {
+        padding: 24px;
+        .ant-tabs-nav {
+            margin-bottom: 16px;
+        }
+        .ant-tabs-tab {
+            padding: 10px 0;
+            font-weight: 600;
+        }
+        .ant-tabs-ink-bar {
+            height: 3px;
+            border-radius: 999px;
+            background: #2F7BFF;
+        }
+    }
+    .summary-install-header {
+        display: flex;
+        justify-content: space-between;
+        gap: 16px;
+        margin-bottom: 18px;
+    }
+    .summary-install-title {
+        display: block;
+        margin-bottom: 8px;
+        color: #1F2D3D;
+        font-size: 20px;
+        font-weight: 700;
+    }
+    .summary-install-caption {
+        margin-bottom: 0;
+        color: #60748A;
+        line-height: 1.7;
+    }
+    .summary-status-tag {
+        display: inline-flex;
+        align-items: center;
+        height: 32px;
+        padding: 0 14px;
+        border-radius: 999px;
+        font-size: 13px;
+        font-weight: 600;
+        white-space: nowrap;
+        &.is-ready {
+            color: #1F5FA6;
+            background: #E8F2FF;
+            border: 1px solid #CFE0F7;
+        }
+        &.is-fallback {
+            color: #9A6414;
+            background: #FFF5E8;
+            border: 1px solid #F4DFC0;
+        }
+    }
+    .summary-install-panel {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+    }
+    .summary-command-card {
+        padding: 16px;
+        border: 1px solid #E6EDF5;
+        border-radius: 16px;
+        background: linear-gradient(180deg, #F8FBFE 0%, #F3F8FD 100%);
+    }
+    .summary-command-header {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        margin-bottom: 10px;
+        .ant-typography-secondary {
+            color: #62778E;
+        }
+    }
+    .summary-command-title {
+        color: #29415A;
+        font-size: 14px;
+        font-weight: 600;
+    }
+    .summary-command-block {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) auto;
+        align-items: center;
+        gap: 10px;
+        min-height: 58px;
+        padding: 8px 8px 8px 14px;
+        border-radius: 13px;
+        border: 1px solid #E2EAF3;
+        background: rgba(255, 255, 255, 0.98);
+        code {
+            flex: 1;
+            color: #1F2D3D;
+            white-space: pre-wrap;
+            word-break: break-all;
+            font-size: 13px;
+            line-height: 1.65;
+        }
+    }
+    .summary-command-copy-btn {
+        flex: 0 0 auto;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 34px;
+        min-width: 34px;
+        height: 34px;
+        padding: 0;
+        border: 1px solid #D7E1EC;
+        border-radius: 9px;
+        background: linear-gradient(180deg, #FFF 0%, #F6FAFE 100%);
+        color: #2E4A66;
+        box-shadow: 0 4px 10px rgba(31, 45, 61, 0.06);
+        &:hover,
+        &:focus {
+            color: #2F7BFF;
+            border-color: #2F7BFF;
+            background: #F4F9FF;
+        }
+        &[disabled] {
+            border-color: #E5E7EB;
+            background: #F8FAFC;
+        }
+    }
+
+    @media (max-width: 1100px) {
+        .skill-summary-shell {
+            grid-template-columns: 1fr;
+        }
+        .summary-title-row {
+            flex-direction: column;
+        }
+        .summary-action-panel {
+            flex-basis: auto;
+            width: 100%;
+        }
+        .summary-actions {
+            flex-flow: row wrap;
+            .ant-btn {
+                width: auto;
+                min-width: 156px;
+            }
+        }
+    }
+
+    @media (max-width: 768px) {
+        padding: 16px;
+        .summary-hero-card,
+        .summary-install-card {
+            padding: 18px;
+        }
+        .summary-meta-grid {
+            grid-template-columns: 1fr;
+        }
+        .summary-meta-card.is-wide {
+            grid-column: span 1;
+        }
+        .summary-actions {
+            flex-direction: column;
+            align-items: stretch;
+            .ant-btn {
+                width: 100%;
+            }
+        }
+        .summary-install-header,
+        .summary-install-header {
+            flex-direction: column;
+        }
+        .summary-command-block {
+            grid-template-columns: 1fr;
+        }
+        .summary-command-copy-btn {
+            justify-self: end;
+        }
+    }
+}
diff --git a/app/web/pages/skills/index.tsx b/app/web/pages/skills/index.tsx
index 9a93f97..7b64f62 100644
--- a/app/web/pages/skills/index.tsx
+++ b/app/web/pages/skills/index.tsx
@@ -31,7 +31,7 @@ import {
 
 import { API } from '@/api';
 import { copyToClipboard } from '@/utils/copyUtils';
-import SkillDetailContent from './detail/SkillDetailContent';
+import SkillSummaryModalContent from './detail/SkillSummaryModalContent';
 import { SkillItem, SkillListResponse } from './types';
 import './style.scss';
 
@@ -104,13 +104,15 @@ const SkillsMarket: React.FC<any> = ({ history }) => {
         setDetailVisible(true);
     };
 
-    const handleCloseDetailModal = () => {
-        setDetailVisible(false);
+    const handleNavigateToDetail = (slug: string) => {
+        history.push(`/page/skills/${slug}`);
     };
 
-    const handleOpenDetailPage = () => {
-        if (!activeDetailSlug) return;
-        history.push(`/page/skills/${activeDetailSlug}`);
+    const buildSkillInstallCommand = (installKey: string) =>
+        `doraemon-skills install ${installKey}`;
+
+    const handleCloseDetailModal = () => {
+        setDetailVisible(false);
     };
 
     const openImportModal = () => {
@@ -198,7 +200,11 @@ const SkillsMarket: React.FC<any> = ({ history }) => {
                     onSearch={(value) => updateQueryAndFetch({ keyword: value, pageNum: 1 })}
                 />
                 <Space size={12}>
-                    <Button icon={<ImportOutlined />} className="import-btn" onClick={openImportModal}>
+                    <Button
+                        icon={<ImportOutlined />}
+                        className="import-btn"
+                        onClick={openImportModal}
+                    >
                         导入技能
                     </Button>
                     <Select
@@ -241,7 +247,15 @@ const SkillsMarket: React.FC<any> = ({ history }) => {
                                     <Card
                                         className="skill-card"
                                         hoverable
-                                        onClick={() => handleOpenDetail(skill.slug)}
+                                        onClick={() => handleNavigateToDetail(skill.slug)}
+                                        onKeyDown={(event) => {
+                                            if (event.key === 'Enter' || event.key === ' ') {
+                                                event.preventDefault();
+                                                handleNavigateToDetail(skill.slug);
+                                            }
+                                        }}
+                                        role="button"
+                                        tabIndex={0}
                                     >
                                         <div className="card-header">
                                             <span className="skill-name">{skill.name}</span>
@@ -289,7 +303,9 @@ const SkillsMarket: React.FC<any> = ({ history }) => {
                                                 onClick={(e) => {
                                                     e.stopPropagation();
                                                     copyToClipboard(
-                                                        skill.installCommand,
+                                                        buildSkillInstallCommand(
+                                                            skill.installKey || skill.slug
+                                                        ),
                                                         '安装命令已复制'
                                                     );
                                                 }}
@@ -322,7 +338,7 @@ const SkillsMarket: React.FC<any> = ({ history }) => {
             </Spin>
 
             <Modal
-                width={1200}
+                width={1080}
                 title={null}
                 footer={null}
                 visible={detailVisible}
@@ -333,18 +349,7 @@ const SkillsMarket: React.FC<any> = ({ history }) => {
             >
                 {activeDetailSlug ? (
                     <div className="skill-detail-modal-inner">
-                        <div className="skill-detail-modal-actions">
-                            <Button type="link" onClick={handleOpenDetailPage}>
-                                打开独立详情页
-                            </Button>
-                        </div>
-                        <SkillDetailContent
-                            slug={activeDetailSlug}
-                            mode="modal"
-                            history={history}
-                            onClose={handleCloseDetailModal}
-                            onOpenSkill={(nextSlug) => setActiveDetailSlug(nextSlug)}
-                        />
+                        <SkillSummaryModalContent slug={activeDetailSlug} history={history} />
                     </div>
                 ) : null}
             </Modal>
@@ -435,7 +440,7 @@ const SkillsMarket: React.FC<any> = ({ history }) => {
                     >
                         <Select
                             mode="tags"
-                            tokenSeparators={[ ',', '，' ]}
+                            tokenSeparators={[',', '，']}
                             placeholder="例如：邮件, 效率, 命令行"
                             maxTagCount={5}
                         />
diff --git a/app/web/pages/skills/style.scss b/app/web/pages/skills/style.scss
index a36817a..00022a5 100644
--- a/app/web/pages/skills/style.scss
+++ b/app/web/pages/skills/style.scss
@@ -41,6 +41,16 @@
         height: 100%;
         border-radius: 10px;
         border: 1px solid #EDF2F7;
+        transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+        &:hover,
+        &:focus {
+            border-color: #C8DAEE;
+            box-shadow: 0 14px 32px rgba(31, 45, 61, 0.08);
+            transform: translateY(-2px);
+        }
+        &:focus {
+            outline: none;
+        }
         .ant-card-body {
             height: 100%;
             display: flex;
@@ -104,14 +114,44 @@
 }
 
 .skill-detail-modal {
+    .ant-modal-content {
+        overflow: hidden;
+        border-radius: 24px;
+        box-shadow: 0 24px 60px rgba(31, 45, 61, 0.16);
+    }
+    .ant-modal-close {
+        top: 16px;
+        right: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 34px;
+        height: 34px;
+        line-height: 1;
+        border: 1px solid #DAE5F0;
+        border-radius: 50%;
+        background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, #F2F7FD 100%);
+        box-shadow: 0 8px 18px rgba(31, 45, 61, 0.08);
+        transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+        &:hover {
+            border-color: #BFD3EA;
+            box-shadow: 0 10px 20px rgba(31, 45, 61, 0.12);
+            transform: translateY(-1px);
+        }
+    }
+    .ant-modal-close-x {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        font-size: 14px;
+        color: #48627B;
+    }
     .ant-modal-body {
-        background: #F8FAFC;
+        background: linear-gradient(180deg, #F4F8FC 0%, #F8FAFC 100%);
     }
     .skill-detail-modal-inner {
-        .skill-detail-modal-actions {
-            display: flex;
-            justify-content: flex-end;
-            padding: 8px 16px 0;
-        }
+        padding: 0;
     }
 }
diff --git a/app/web/pages/skills/types.ts b/app/web/pages/skills/types.ts
index b171197..0b09644 100644
--- a/app/web/pages/skills/types.ts
+++ b/app/web/pages/skills/types.ts
@@ -1,5 +1,6 @@
 export interface SkillItem {
     slug: string;
+    installKey: string;
     name: string;
     description: string;
     category: string;
@@ -38,6 +39,7 @@ export interface SkillFileContent {
 
 export interface SkillInstallMeta {
     slug: string;
+    installKey: string;
     name: string;
     downloadUrl: string;
     packageType: string;
diff --git a/app/web/utils/http.ts b/app/web/utils/http.ts
index ec2c23b..6b957fd 100644
--- a/app/web/utils/http.ts
+++ b/app/web/utils/http.ts
@@ -76,7 +76,8 @@ class Http {
             .then(authAfterRes)
             .catch((err: any) => {
                 console.error('错误信息：', JSON.stringify(err));
-                this.handleExcept(err); // 开发环境可讲此方法注视
+                this.handleExcept(err);
+                throw err; // 传播错误，让调用方能 catch 到
             });
     }
     handleExcept(e: any) {

From 93a7d0780f15da90cbe04edb8d10d41b9801fc97 Mon Sep 17 00:00:00 2001
From: huaiju <huaiju@dtstack.com>
Date: Sun, 22 Mar 2026 19:09:03 +0800
Subject: [PATCH 33/43] feat(skills): support editing metadata and archive
 updates

---
 app/controller/skills.js                      |  37 +-
 app/model/skills_item.js                      |   6 +
 app/router.js                                 |   3 +-
 app/service/skills.js                         | 262 +++++-
 app/web/api/url.ts                            |  17 +-
 .../skills/detail/SkillDetailContent.tsx      | 850 +++++++++++-------
 app/web/pages/skills/index.tsx                | 397 +++++---
 app/web/pages/skills/style.scss               |  40 +-
 app/web/pages/skills/types.ts                 |   1 +
 9 files changed, 1087 insertions(+), 526 deletions(-)

diff --git a/app/controller/skills.js b/app/controller/skills.js
index 8424990..480ad99 100644
--- a/app/controller/skills.js
+++ b/app/controller/skills.js
@@ -46,13 +46,6 @@ class SkillsController extends Controller {
         ctx.body = app.utils.response(true, data);
     }
 
-    async importSkill() {
-        const { app, ctx } = this;
-        const params = ctx.request.body || {};
-        const data = await ctx.service.skills.importSkill(params);
-        ctx.body = app.utils.response(true, data);
-    }
-
     async importSkillFile() {
         const { app, ctx } = this;
         const params = ctx.request.body || {};
@@ -80,6 +73,36 @@ class SkillsController extends Controller {
             }
         }
     }
+
+    async updateSkill() {
+        const { app, ctx } = this;
+        const params = ctx.request.body || {};
+        const files = ctx.request.files
+            ? Array.isArray(ctx.request.files)
+                ? ctx.request.files
+                : [ ctx.request.files ]
+            : [];
+        const file = files[0] || null;
+
+        try {
+            const data = await ctx.service.skills.updateSkill(params, file);
+            ctx.body = app.utils.response(true, data, '更新成功');
+        } finally {
+            if (file?.filepath && fs.existsSync(file.filepath)) {
+                try {
+                    fs.unlinkSync(file.filepath);
+                } catch (error) {
+                    ctx.logger.warn(`[skills] 清理更新上传文件失败: ${error.message}`);
+                }
+            }
+        }
+    }
+
+    async deleteSkill() {
+        const { app, ctx } = this;
+        const data = await ctx.service.skills.deleteSkill(ctx.request.body || {});
+        ctx.body = app.utils.response(true, data, '删除成功');
+    }
 }
 
 module.exports = SkillsController;
diff --git a/app/model/skills_item.js b/app/model/skills_item.js
index 26fc209..fcbd1b7 100644
--- a/app/model/skills_item.js
+++ b/app/model/skills_item.js
@@ -32,6 +32,12 @@ module.exports = (app) => {
                 allowNull: false,
                 defaultValue: '通用',
             },
+            version: {
+                type: STRING(128),
+                allowNull: false,
+                defaultValue: '',
+                comment: '技能版本号',
+            },
             tags: {
                 type: TEXT('long'),
                 comment: 'JSON字符串数组',
diff --git a/app/router.js b/app/router.js
index 99d4f59..0e2646d 100644
--- a/app/router.js
+++ b/app/router.js
@@ -155,8 +155,9 @@ module.exports = (app) => {
     app.get('/api/skills/file-content', app.controller.skills.getSkillFileContent);
     app.get('/api/skills/install-meta', app.controller.skills.getSkillInstallMeta);
     app.get('/api/skills/download', app.controller.skills.downloadSkillArchive);
-    app.post('/api/skills/import', app.controller.skills.importSkill);
     app.post('/api/skills/import-file', app.controller.skills.importSkillFile);
+    app.post('/api/skills/update', app.controller.skills.updateSkill);
+    app.post('/api/skills/delete', app.controller.skills.deleteSkill);
 
     // io.of('/').route('getShellCommand',  io.controller.home.getShellCommand)
     // 暂时close Terminal相关功能
diff --git a/app/service/skills.js b/app/service/skills.js
index 710c82b..07fb3ea 100644
--- a/app/service/skills.js
+++ b/app/service/skills.js
@@ -199,6 +199,7 @@ class SkillsService extends Service {
             await SkillsSource.sync();
             await SkillsItem.sync();
             await SkillsFile.sync();
+            await this.ensureSkillsItemVersionColumn();
             this.storageReady = true;
         })();
 
@@ -209,6 +210,19 @@ class SkillsService extends Service {
         }
     }
 
+    async ensureSkillsItemVersionColumn() {
+        const queryInterface = this.app.model.getQueryInterface();
+        const table = await queryInterface.describeTable('skills_items');
+        if (table.version) return;
+
+        await queryInterface.addColumn('skills_items', 'version', {
+            type: this.app.Sequelize.STRING(128),
+            allowNull: false,
+            defaultValue: '',
+            comment: '技能版本号',
+        });
+    }
+
     parseJsonArray(value) {
         if (!value) return [];
         if (Array.isArray(value)) return value;
@@ -229,6 +243,7 @@ class SkillsService extends Service {
             name: skill.name,
             description: skill.description,
             category: skill.category,
+            version: skill.version || '',
             tags: skill.tags,
             allowedTools: skill.allowedTools,
             stars: skill.stars,
@@ -248,6 +263,7 @@ class SkillsService extends Service {
             name: row.name || '',
             description: row.description || '',
             category: row.category || '通用',
+            version: row.version || '',
             tags: this.parseJsonArray(row.tags),
             allowedTools: this.parseJsonArray(row.allowed_tools),
             stars: Number(row.stars) || 0,
@@ -521,7 +537,7 @@ class SkillsService extends Service {
             packageVersion: 'v1',
             packageRootMode: 'find-skill-md',
             installDirName: skill.installKey || skill.slug,
-            version: '',
+            version: skill.version || '',
             sha256,
             sourceRepo: skill.sourceRepo || '',
             installable,
@@ -1284,6 +1300,7 @@ class SkillsService extends Service {
         const name = String(frontmatter.name || path.basename(skillDir)).trim() || path.basename(skillDir);
         const description =
             String(frontmatter.description || this.extractDescription(body)).trim() || this.extractDescription(content);
+        const version = String(frontmatter.version || '').trim();
         const allowedTools = this.parseArrayLike(
             frontmatter['allowed-tools'] || frontmatter.allowedTools || frontmatter.allowed_tools
         );
@@ -1301,6 +1318,7 @@ class SkillsService extends Service {
             name,
             description,
             category,
+            version,
             tags,
             allowedTools,
             updatedAt: stat.mtime,
@@ -1454,8 +1472,8 @@ class SkillsService extends Service {
         if (!fileName || !filePath) {
             this.ctx.throw(400, '上传文件无效');
         }
-        if (!/\.skill$/i.test(fileName)) {
-            this.ctx.throw(400, '仅支持上传 .skill 文件');
+        if (!/\.zip$/i.test(fileName)) {
+            this.ctx.throw(400, '仅支持上传 .zip 文件');
         }
         if (!fs.existsSync(filePath)) {
             this.ctx.throw(400, '上传文件不存在或已失效');
@@ -1475,22 +1493,21 @@ class SkillsService extends Service {
                 const zip = new AdmZip(filePath);
                 zip.extractAllTo(tempDir, true);
             } catch (error) {
-                this.ctx.throw(400, `解析 .skill 文件失败: ${error.message}`);
+                this.ctx.throw(400, `解析 .zip 文件失败: ${error.message}`);
             }
 
             const discoveredSkillDirs = this.discoverSkillDirs(tempDir);
             if (discoveredSkillDirs.length === 0) {
-                this.ctx.throw(400, '.skill 包内未发现有效技能（缺少 SKILL.md）');
+                this.ctx.throw(400, '.zip 包内未发现有效技能（缺少 SKILL.md）');
             }
 
-            let skillRecords = discoveredSkillDirs.map((skillDir) =>
-                this.prepareSkillRecord(skillDir, tempDir, parsedSource, category, tags)
-            );
-
-            skillRecords = this.filterSkillByName(skillRecords, skillName);
-            if (skillRecords.length === 0) {
-                this.ctx.throw(400, '未匹配到指定技能，请检查 skillName 是否正确');
-            }
+            const skillRecords = discoveredSkillDirs.map((skillDir) => {
+                const record = this.prepareSkillRecord(skillDir, tempDir, parsedSource, category, tags);
+                if (skillName) {
+                    record.name = skillName;
+                }
+                return record;
+            });
 
             const importedSkills = await this.persistSkillsForSource(
                 sourceRecord.id,
@@ -1548,6 +1565,224 @@ class SkillsService extends Service {
         }
     }
 
+    extractSkillRecordsFromZip(filePath, parsedSource, category, tags, skillName = '') {
+        let tempDir = '';
+
+        try {
+            tempDir = fs.mkdtempSync(path.join(os.tmpdir(), 'skills-upload-'));
+
+            try {
+                const zip = new AdmZip(filePath);
+                zip.extractAllTo(tempDir, true);
+            } catch (error) {
+                this.ctx.throw(400, `解析 .zip 文件失败: ${error.message}`);
+            }
+
+            const discoveredSkillDirs = this.discoverSkillDirs(tempDir);
+            if (discoveredSkillDirs.length === 0) {
+                this.ctx.throw(400, '.zip 包内未发现有效技能（缺少 SKILL.md）');
+            }
+
+            return discoveredSkillDirs.map((skillDir) => {
+                const record = this.prepareSkillRecord(skillDir, tempDir, parsedSource, category, tags);
+                if (skillName) {
+                    record.name = skillName;
+                }
+                return record;
+            });
+        } finally {
+            if (tempDir && fs.existsSync(tempDir)) {
+                try {
+                    fs.rmSync(tempDir, { recursive: true, force: true });
+                } catch (error) {
+                    this.ctx.logger.warn(`[skills] 清理上传解压目录失败: ${tempDir}, ${error.message}`);
+                }
+            }
+        }
+    }
+
+    validateVersion(value) {
+        return String(value || '').trim().slice(0, 128);
+    }
+
+    async updateSkill(params = {}, file) {
+        const slug = this.validateSkillIdentifier(params.slug);
+        const name = String(params.name || '').trim();
+        const category = this.normalizeCategory(params.category);
+        const version = this.validateVersion(params.version);
+        const tags = this.normalizePlatformTags(params.tags);
+
+        await this.ensureSkillCache();
+        const currentSkill = this.getSkillByIdentifier(slug);
+        await this.ensureStorageReady();
+
+        if (!name) {
+            this.ctx.throw(400, '技能名称不能为空');
+        }
+
+        const hasZipUpload = Boolean(file?.filename && file?.filepath);
+        if (hasZipUpload) {
+            if (!/\.zip$/i.test(String(file.filename || ''))) {
+                this.ctx.throw(400, '仅支持上传 .zip 文件');
+            }
+            if (!fs.existsSync(String(file.filepath || ''))) {
+                this.ctx.throw(400, '上传文件不存在或已失效');
+            }
+        }
+
+        const { SkillsItem, SkillsFile } = this.app.model;
+
+        const result = await this.app.model.transaction(async (transaction) => {
+            const itemRow = await SkillsItem.findOne({
+                where: {
+                    id: currentSkill.id,
+                    is_delete: 0,
+                },
+                transaction,
+            });
+
+            if (!itemRow) {
+                this.ctx.throw(404, '技能不存在');
+            }
+
+            const payload = {
+                name,
+                category,
+                version,
+                tags: JSON.stringify(tags || []),
+            };
+
+            if (!hasZipUpload) {
+                await itemRow.update(payload, { transaction });
+                return {
+                    slug,
+                    updated: true,
+                    replacedArchive: false,
+                };
+            }
+
+            const parsedSource = this.buildUploadSourceMeta(file.filename);
+            const skillRecords = this.extractSkillRecordsFromZip(
+                file.filepath,
+                parsedSource,
+                category,
+                tags.length > 0 ? tags : currentSkill.tags || [],
+                name
+            );
+
+            if (skillRecords.length !== 1) {
+                this.ctx.throw(400, '编辑时上传的 .zip 包必须且只能包含一个技能目录');
+            }
+
+            const nextRecord = skillRecords[0];
+            nextRecord.name = name;
+            nextRecord.category = category;
+            nextRecord.version = version;
+            nextRecord.sourceRepo = currentSkill.sourceRepo || nextRecord.sourceRepo;
+            nextRecord.sourcePath = currentSkill.sourcePath || nextRecord.sourcePath;
+            nextRecord.tags = tags.length > 0 ? tags : currentSkill.tags || [];
+            nextRecord.installCommand =
+                currentSkill.installCommand ||
+                this.getInstallCommand({
+                    sourceRepo: nextRecord.sourceRepo,
+                    sourceUrl: parsedSource.sourceUrl,
+                    name,
+                });
+
+            await itemRow.update(
+                {
+                    ...payload,
+                    description: nextRecord.description,
+                    allowed_tools: JSON.stringify(nextRecord.allowedTools || []),
+                    updated_at_remote: nextRecord.updatedAt,
+                    source_repo: nextRecord.sourceRepo,
+                    source_path: nextRecord.sourcePath,
+                    skill_md: nextRecord.skillMd,
+                    install_command: nextRecord.installCommand,
+                    file_count: nextRecord.files.length,
+                },
+                { transaction }
+            );
+
+            await SkillsFile.destroy({
+                where: {
+                    skill_id: itemRow.id,
+                },
+                transaction,
+            });
+
+            if (nextRecord.files.length > 0) {
+                await SkillsFile.bulkCreate(
+                    nextRecord.files.map((fileItem) => ({
+                        skill_id: itemRow.id,
+                        file_path: fileItem.filePath,
+                        language: fileItem.language,
+                        size: fileItem.size,
+                        is_binary: fileItem.isBinary ? 1 : 0,
+                        encoding: fileItem.encoding,
+                        content: fileItem.content,
+                        updated_at_remote: fileItem.updatedAt,
+                        is_delete: 0,
+                    })),
+                    { transaction }
+                );
+            }
+
+            return {
+                slug,
+                updated: true,
+                replacedArchive: true,
+            };
+        });
+
+        this.invalidateCache();
+        await this.ensureSkillCache();
+        return result;
+    }
+
+    async deleteSkill(params = {}) {
+        const slug = this.validateSkillIdentifier(params.slug);
+        await this.ensureSkillCache();
+        const skill = this.getSkillByIdentifier(slug);
+        await this.ensureStorageReady();
+
+        const { SkillsItem, SkillsFile } = this.app.model;
+
+        await this.app.model.transaction(async (transaction) => {
+            await SkillsItem.update(
+                {
+                    is_delete: 1,
+                },
+                {
+                    where: {
+                        id: skill.id,
+                    },
+                    transaction,
+                }
+            );
+
+            await SkillsFile.update(
+                {
+                    is_delete: 1,
+                },
+                {
+                    where: {
+                        skill_id: skill.id,
+                    },
+                    transaction,
+                }
+            );
+        });
+
+        this.invalidateCache();
+        await this.ensureSkillCache();
+
+        return {
+            slug,
+            deleted: true,
+        };
+    }
+
     async persistSkillsForSource(sourceId, sourceMeta, skillRecords = []) {
         const { SkillsItem, SkillsFile } = this.app.model;
         const { Op } = this.app.Sequelize;
@@ -1601,6 +1836,7 @@ class SkillsService extends Service {
                         name: record.name,
                         description: record.description,
                         category: record.category,
+                        version: record.version || '',
                         tags: JSON.stringify(record.tags || []),
                         allowed_tools: JSON.stringify(record.allowedTools || []),
                         stars: resolvedStars,
diff --git a/app/web/api/url.ts b/app/web/api/url.ts
index 3cae9e4..151a191 100644
--- a/app/web/api/url.ts
+++ b/app/web/api/url.ts
@@ -371,14 +371,19 @@ export default {
         method: 'get',
         url: '/api/skills/download',
     },
-    // 导入 Skill
-    importSkill: {
-        method: 'post',
-        url: '/api/skills/import',
-    },
-    // 上传 .skill 文件导入
+    // 上传 .zip 文件导入
     importSkillFile: {
         method: 'postForm',
         url: '/api/skills/import-file',
     },
+    // 编辑 Skill
+    updateSkill: {
+        method: 'postForm',
+        url: '/api/skills/update',
+    },
+    // 删除 Skill
+    deleteSkill: {
+        method: 'post',
+        url: '/api/skills/delete',
+    },
 };
diff --git a/app/web/pages/skills/detail/SkillDetailContent.tsx b/app/web/pages/skills/detail/SkillDetailContent.tsx
index 58ad383..f0255f0 100644
--- a/app/web/pages/skills/detail/SkillDetailContent.tsx
+++ b/app/web/pages/skills/detail/SkillDetailContent.tsx
@@ -1,27 +1,29 @@
 import React, { useEffect, useMemo, useState } from 'react';
+import { ArrowLeftOutlined, QuestionCircleOutlined } from '@ant-design/icons';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import { atomOneLight } from 'react-syntax-highlighter/dist/cjs/styles/hljs';
-import {
-    ArrowLeftOutlined,
-    CopyOutlined,
-    DownloadOutlined,
-    FolderOpenOutlined,
-    LinkOutlined,
-    ReadOutlined,
-    ShareAltOutlined,
-    StarOutlined,
-} from '@ant-design/icons';
-import { Button, Card, Col, Empty, Row, Space, Spin, Tabs, Tag, Tree, Typography } from 'antd';
+import { Button, Empty, Spin, Tree, Typography } from 'antd';
 import type { DataNode } from 'antd/lib/tree';
 
 import { API } from '@/api';
+import agentIcon from '@/asset/images/skills-detail-figma/agent.svg';
+import chevronDownIcon from '@/asset/images/skills-detail-figma/chevron-down.svg';
+import chevronRightIcon from '@/asset/images/skills-detail-figma/chevron-right.svg';
+import contributorOne from '@/asset/images/skills-detail-figma/contributor-1.png';
+import contributorTwo from '@/asset/images/skills-detail-figma/contributor-2.png';
+import copyDarkIcon from '@/asset/images/skills-detail-figma/copy-dark.svg';
+import downloadIcon from '@/asset/images/skills-detail-figma/download.svg';
+import emptyRelatedIcon from '@/asset/images/skills-detail-figma/empty-related.svg';
+import fileDocIcon from '@/asset/images/skills-detail-figma/file-doc.svg';
+import folderOpenBlueIcon from '@/asset/images/skills-detail-figma/folder-open-blue.svg';
+import heroSkillIcon from '@/asset/images/skills-detail-figma/hero-skill.svg';
+import humanIcon from '@/asset/images/skills-detail-figma/human.svg';
 import MarkdownRenderer from '@/components/markdownRenderer';
 import { copyToClipboard } from '@/utils/copyUtils';
 import { SkillDetail, SkillFileContent, SkillInstallMeta, SkillItem } from '../types';
 import './style.scss';
 
 const { Title, Text, Paragraph } = Typography;
-const { TabPane } = Tabs;
 
 interface SkillTreeNode extends DataNode {
     children?: SkillTreeNode[];
@@ -37,6 +39,32 @@ interface SkillDetailContentProps {
     history: any;
 }
 
+interface FigmaIconProps {
+    src: string;
+    className?: string;
+    alt?: string;
+}
+
+type InstallPanelKey = 'agent' | 'human' | null;
+
+const relatedSkillIconUrls = [
+    'http://localhost:3845/assets/7abff42ee9b5b6b17c3f0b4350bc40d2918871d6.svg',
+    'http://localhost:3845/assets/b2b47e5541ef2b4c45ad4fb4cd42a7290d758d19.svg',
+    'http://localhost:3845/assets/46261c14a19d03261c20a3df79aa4c0ed3b263ab.svg',
+];
+
+const relatedSkillShellClasses = ['is-blue', 'is-green', 'is-orange'];
+const browseMarketArrowIcon = 'http://localhost:3845/assets/d1b40a8f52f64c4290b2006b356fc8b61c18d6fc.svg';
+
+const FigmaIcon: React.FC<FigmaIconProps> = ({ src, className = '', alt = '' }) => (
+    <img
+        alt={alt}
+        aria-hidden="true"
+        className={`skill-detail-figma-icon ${className}`.trim()}
+        src={src}
+    />
+);
+
 const formatFileSize = (size = 0) => {
     if (size < 1024) return `${size} B`;
     if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`;
@@ -50,6 +78,7 @@ const sortTreeNodes = (nodes: SkillTreeNode[]) => {
         if (aIsLeaf !== bIsLeaf) return aIsLeaf ? 1 : -1;
         return String(a.title).localeCompare(String(b.title));
     });
+
     nodes.forEach((node) => {
         if (node.children && node.children.length > 0) {
             sortTreeNodes(node.children);
@@ -136,8 +165,10 @@ const parseMarkdownFrontmatter = (
 
     const pushCurrent = () => {
         if (!currentKey) return;
-        const value = normalizeFrontmatterValue(currentValueLines.join('\n'));
-        frontmatter.push({ key: currentKey, value });
+        frontmatter.push({
+            key: currentKey,
+            value: normalizeFrontmatterValue(currentValueLines.join('\n')),
+        });
     };
 
     lines.forEach((line) => {
@@ -169,14 +200,23 @@ const formatDownloadCommand = (downloadUrl = '', fileName = 'skill.zip') => {
     return `curl -L "${downloadUrl}" -o ${fileName}`;
 };
 
+const formatCompactDate = (value?: string) => {
+    if (!value) return '-';
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime())) return '-';
+    return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
+};
+
 const SkillDetailContent: React.FC<SkillDetailContentProps> = ({ slug, history }) => {
     const [loading, setLoading] = useState(true);
     const [fileLoading, setFileLoading] = useState(false);
     const [detail, setDetail] = useState<SkillDetail | null>(null);
     const [installMeta, setInstallMeta] = useState<SkillInstallMeta | null>(null);
     const [related, setRelated] = useState<SkillItem[]>([]);
+    const [uiSelectedFilePath, setUiSelectedFilePath] = useState('');
     const [selectedFilePath, setSelectedFilePath] = useState('');
     const [fileContent, setFileContent] = useState<SkillFileContent | null>(null);
+    const [activeInstallPanel, setActiveInstallPanel] = useState<InstallPanelKey>('agent');
 
     const fileTreeData = useMemo(
         () => buildFileTreeData(detail?.fileList || []),
@@ -190,22 +230,18 @@ const SkillDetailContent: React.FC<SkillDetailContentProps> = ({ slug, history }
         () => `/api/skills/download?slug=${encodeURIComponent(slug)}`,
         [slug]
     );
-    const deepLinkPath = useMemo(() => `/page/skills/${encodeURIComponent(slug)}`, [slug]);
     const installKey = installMeta?.installKey || detail?.installKey || slug;
     const currentOrigin = useMemo(() => {
         if (typeof window === 'undefined') return '';
         return window.location.origin;
     }, []);
-    const deepLinkUrl = useMemo(() => {
-        if (!currentOrigin) return deepLinkPath;
-        return `${currentOrigin}${deepLinkPath}`;
-    }, [currentOrigin, deepLinkPath]);
     const skillInstallCommand = useMemo(
         () => `doraemon-skills install ${installKey}`,
         [installKey]
     );
+    const browseMarketPath = '/page/skills';
     const cliInstallPlaceholderCommand =
-        '# 待提供：Doraemon CLI 安装脚本 URL（例如 curl -fsSL <...> | bash）';
+        '# 待补齐 Doraemon CLI 安装脚本 URL，例如 curl -fsSL <install.sh> | bash';
     const archiveFileName = useMemo(() => {
         const rawName = detail?.name || slug || 'skill';
         const normalized = rawName
@@ -223,18 +259,47 @@ const SkillDetailContent: React.FC<SkillDetailContentProps> = ({ slug, history }
         }
         return formatDownloadCommand(`${currentOrigin}${downloadPath}`, archiveFileName);
     }, [archiveFileName, currentOrigin, downloadPath, installMeta?.downloadUrl]);
-    const agentInstruction = useMemo(
-        () =>
-            [
-                '请先检查 Doraemon CLI 是否已安装（例如执行 doraemon-skills --help）。',
-                '若未安装，请先执行 Human 区的 Doraemon CLI 安装步骤。',
-                `安装当前技能：${skillInstallCommand}`,
-                '若已安装，则直接执行上面的技能安装命令。',
-            ].join('\n'),
-        [skillInstallCommand]
+    const frontmatterInfo = useMemo(
+        () => parseMarkdownFrontmatter(detail?.skillMd || ''),
+        [detail?.skillMd]
+    );
+    const heroMetaItems = useMemo(
+        () => [
+            {
+                label: '分类',
+                value: detail?.category || '通用',
+            },
+            {
+                label: '最近更新',
+                value: formatCompactDate(detail?.updatedAt),
+            },
+        ],
+        [detail?.category, detail?.updatedAt]
     );
     const isInstallable = Boolean(installMeta?.installable);
-    const installUnavailableReason = installMeta?.reason || 'install-meta 暂不可用';
+    const manualDownloadUrl = installMeta?.downloadUrl || downloadPath;
+    const agentTerminalCommand = isInstallable ? skillInstallCommand : downloadCommand;
+    const heroSummary = useMemo(() => {
+        const rawText = (detail?.description || '').replace(/\s+/g, ' ').trim();
+        if (!rawText) return '暂无描述';
+        const sentence = rawText.split(/(?<=[.!?。！？])/)[0]?.trim() || rawText;
+        return sentence;
+    }, [detail?.description]);
+    const handleSelectFile = (nextPath: string) => {
+        if (!nextPath || nextPath === uiSelectedFilePath) return;
+        setUiSelectedFilePath(nextPath);
+        setSelectedFilePath(nextPath);
+        setFileContent(null);
+        setFileLoading(true);
+    };
+
+    useEffect(() => {
+        setUiSelectedFilePath('');
+        setSelectedFilePath('');
+        setFileContent(null);
+        setFileLoading(false);
+        setInstallMeta(null);
+    }, [slug]);
 
     useEffect(() => {
         let cancelled = false;
@@ -257,7 +322,10 @@ const SkillDetailContent: React.FC<SkillDetailContentProps> = ({ slug, history }
                     const defaultFile = detailData.fileList.includes('SKILL.md')
                         ? 'SKILL.md'
                         : detailData.fileList[0] || '';
+                    setUiSelectedFilePath(defaultFile);
                     setSelectedFilePath(defaultFile);
+                    setFileContent(null);
+                    setFileLoading(Boolean(defaultFile));
 
                     const installMetaRes = await API.getSkillInstallMeta({
                         installKey: detailData.installKey || slug,
@@ -267,15 +335,11 @@ const SkillDetailContent: React.FC<SkillDetailContentProps> = ({ slug, history }
                     }
                 } else {
                     setDetail(null);
+                    setUiSelectedFilePath('');
                     setSelectedFilePath('');
                 }
 
-                if (relatedRes.success) {
-                    setRelated(relatedRes.data || []);
-                } else {
-                    setRelated([]);
-                }
-
+                setRelated(relatedRes.success ? relatedRes.data || [] : []);
                 setInstallMeta(nextInstallMeta);
             } catch (error) {
                 console.error('获取 Skill 详情失败:', error);
@@ -283,6 +347,7 @@ const SkillDetailContent: React.FC<SkillDetailContentProps> = ({ slug, history }
                     setDetail(null);
                     setRelated([]);
                     setInstallMeta(null);
+                    setUiSelectedFilePath('');
                     setSelectedFilePath('');
                 }
             } finally {
@@ -306,6 +371,7 @@ const SkillDetailContent: React.FC<SkillDetailContentProps> = ({ slug, history }
         }
 
         let cancelled = false;
+
         const loadFileContent = async () => {
             setFileLoading(true);
             try {
@@ -314,11 +380,7 @@ const SkillDetailContent: React.FC<SkillDetailContentProps> = ({ slug, history }
                     path: selectedFilePath,
                 });
                 if (!cancelled) {
-                    if (response.success) {
-                        setFileContent(response.data as SkillFileContent);
-                    } else {
-                        setFileContent(null);
-                    }
+                    setFileContent(response.success ? (response.data as SkillFileContent) : null);
                 }
             } catch (error) {
                 console.error('获取文件内容失败:', error);
@@ -337,7 +399,7 @@ const SkillDetailContent: React.FC<SkillDetailContentProps> = ({ slug, history }
         return () => {
             cancelled = true;
         };
-    }, [slug, selectedFilePath]);
+    }, [selectedFilePath, slug]);
 
     const renderFileViewer = () => {
         if (fileLoading) {
@@ -399,7 +461,7 @@ const SkillDetailContent: React.FC<SkillDetailContentProps> = ({ slug, history }
             <SyntaxHighlighter
                 style={atomOneLight}
                 language={fileContent.language || 'text'}
-                customStyle={{ margin: 0, borderRadius: 6, minHeight: 460 }}
+                customStyle={{ margin: 0, borderRadius: 0, minHeight: 420, background: '#fff' }}
                 showLineNumbers
             >
                 {fileContent.content || ''}
@@ -407,32 +469,42 @@ const SkillDetailContent: React.FC<SkillDetailContentProps> = ({ slug, history }
         );
     };
 
-    const renderInstallCommandCard = ({
-        title,
-        description,
-        command,
-        copyMessage,
-        disabled = false,
-    }: {
-        title: string;
-        description?: string;
-        command: string;
-        copyMessage: string;
-        disabled?: boolean;
-    }) => (
-        <div className="install-command-card">
-            <div className="install-command-header">
-                <Text className="install-command-title">{title}</Text>
-                {description ? <Text type="secondary">{description}</Text> : null}
+    const renderInlineCommand = (command: string, copyMessage: string, compact = false) => (
+        <div className={`command-surface is-light ${compact ? 'is-compact' : ''}`.trim()}>
+            <div className="command-surface-inline">
+                <div className="command-inline-code-wrap">
+                    <code>{command || '暂无可复制命令'}</code>
+                </div>
+                <Button
+                    type="text"
+                    className="command-copy-btn is-inline-copy"
+                    icon={<FigmaIcon src={copyDarkIcon} className="is-copy-dark" />}
+                    onClick={() => copyToClipboard(command, copyMessage)}
+                    disabled={!command}
+                />
+            </div>
+        </div>
+    );
+
+    const renderTerminalCommand = (command: string, copyMessage: string) => (
+        <div className="command-surface is-dark is-terminal">
+            <div className="terminal-head">
+                <div className="terminal-dots">
+                    <span />
+                    <span />
+                    <span />
+                </div>
+                <span className="terminal-label">BASH</span>
             </div>
-            <div className="command-block">
+            <div className="terminal-body">
+                <span className="terminal-prompt">$</span>
                 <code>{command || '暂无可复制命令'}</code>
                 <Button
                     type="text"
-                    className="command-copy-btn"
-                    icon={<CopyOutlined />}
+                    className="command-copy-btn is-terminal-copy"
+                    icon={<FigmaIcon src={copyDarkIcon} className="is-copy-dark" />}
                     onClick={() => copyToClipboard(command, copyMessage)}
-                    disabled={disabled || !command}
+                    disabled={!command}
                 />
             </div>
         </div>
@@ -448,318 +520,406 @@ const SkillDetailContent: React.FC<SkillDetailContentProps> = ({ slug, history }
 
     if (!detail) {
         return (
-            <div className="page-skill-detail">
-                <Empty description="Skill 不存在或已被删除">
-                    <Button onClick={() => history.push('/page/skills')}>返回 Skills 列表</Button>
+            <div className="page-skill-detail page-skill-detail-empty">
+                <Empty description="技能不存在或已被删除">
+                    <Button onClick={() => history.push('/page/skills')}>返回技能列表</Button>
                 </Empty>
             </div>
         );
     }
 
-    const detailTags = (detail.tags || []).filter((tag) => tag && tag !== detail.category);
-    const detailSource = detail.sourceRepo || detail.sourcePath || '-';
-    const detailUpdatedAt = detail.updatedAt
-        ? new Date(detail.updatedAt).toLocaleString('zh-CN')
-        : '-';
-    const agentFallbackInstruction = [
-        '当前 skill 不支持 doraemon-skills 直接安装。',
-        `请先下载 zip：${downloadCommand}`,
-        `原因：${installUnavailableReason}`,
-        '然后手动解压并确认技能目录结构（需包含 SKILL.md）。',
-    ].join('\n');
-    const detailMetaItems = [
-        {
-            label: 'Stars',
-            value: String(detail.stars || 0),
-            className: 'is-accent',
-        },
-        {
-            label: '分类',
-            value: detail.category || '未分类',
-        },
-        {
-            label: '最近更新',
-            value: detailUpdatedAt,
-        },
-        {
-            label: '来源',
-            value: detailSource,
-            className: 'is-wide',
-        },
-    ];
-
     return (
         <div className="page-skill-detail">
-            <div className="detail-hero">
-                <div className="detail-hero-main">
-                    <Button
-                        icon={<ArrowLeftOutlined />}
-                        className="back-btn"
-                        onClick={() => history.push('/page/skills')}
-                    >
-                        返回列表
-                    </Button>
-
-                    <div className="hero-kicker-row">
-                        <Tag color="blue">{detail.category || '未分类'}</Tag>
-                        <span className="install-key-chip">安装标识 · {installKey}</span>
+            <div className="skill-detail-shell">
+                <aside className="detail-left-sidebar">
+                    <div className="sidebar-head">
+                        <Button
+                            type="text"
+                            icon={<ArrowLeftOutlined />}
+                            onClick={() => history.push('/page/skills')}
+                            className="back-btn"
+                        />
+                        <div className="sidebar-title-group">
+                            <span>技能目录</span>
+                            <strong>{detail?.version || '-'}</strong>
+                        </div>
                     </div>
 
-                    <div className="hero-title-row">
-                        <div className="title-group">
-                            <Title level={2}>{detail.name}</Title>
-                            <Paragraph className="hero-description" type="secondary">
-                                {detail.description || '暂无描述'}
-                            </Paragraph>
-                        </div>
+                    <div className="sidebar-tree-wrap">
+                        {fileTreeData.length === 0 ? (
+                            <Empty description="暂无文件" />
+                        ) : (
+                            <Tree
+                                treeData={fileTreeData}
+                                defaultExpandAll
+                                selectable={false}
+                                titleRender={(node) => (
+                                    <span
+                                        className={`explorer-tree-item ${
+                                            node.key === uiSelectedFilePath ? 'is-selected' : ''
+                                        }`.trim()}
+                                        role={node.isLeaf ? 'button' : undefined}
+                                        tabIndex={node.isLeaf ? 0 : -1}
+                                        onClick={() => {
+                                            if (!node.isLeaf) return;
+                                            handleSelectFile(String(node.key));
+                                        }}
+                                        onKeyDown={(event) => {
+                                            if (!node.isLeaf) return;
+                                            if (event.key === 'Enter' || event.key === ' ') {
+                                                event.preventDefault();
+                                                handleSelectFile(String(node.key));
+                                            }
+                                        }}
+                                    >
+                                        <FigmaIcon
+                                            src={node.isLeaf ? fileDocIcon : folderOpenBlueIcon}
+                                            className={`is-tree-node ${
+                                                node.isLeaf ? 'is-leaf' : 'is-folder'
+                                            }`}
+                                        />
+                                        <span>{String(node.title)}</span>
+                                    </span>
+                                )}
+                            />
+                        )}
+                    </div>
 
-                        <Space size={12} wrap className="hero-action-group">
-                            <Button
-                                icon={<ShareAltOutlined />}
-                                onClick={() =>
-                                    copyToClipboard(deepLinkUrl, '详情页深链已复制到剪贴板')
-                                }
-                            >
-                                复制深链
-                            </Button>
-                            <Button
-                                icon={<LinkOutlined />}
-                                onClick={() => window.open(sourceUrl, '_blank')}
-                                disabled={!sourceUrl}
-                            >
-                                查看源码
-                            </Button>
-                        </Space>
+                    <div className="sidebar-foot">
+                        <Button
+                            type="primary"
+                            block
+                            className="install-primary-btn"
+                            onClick={() => {
+                                setActiveInstallPanel('agent');
+                                copyToClipboard(
+                                    isInstallable ? skillInstallCommand : downloadCommand,
+                                    isInstallable
+                                        ? '技能安装命令已复制到剪贴板'
+                                        : '下载命令已复制到剪贴板'
+                                );
+                            }}
+                        >
+                            {isInstallable ? '安装技能' : '下载技能'}
+                        </Button>
+                        <button
+                            type="button"
+                            className="sidebar-help-btn"
+                            onClick={() =>
+                                window.open(
+                                    sourceUrl || 'https://github.com/JackWang032/doraemon-proxy-tool',
+                                    '_blank'
+                                )
+                            }
+                        >
+                            <QuestionCircleOutlined />
+                            <span>帮助</span>
+                        </button>
                     </div>
+                </aside>
+
+                <main className="detail-main-column">
+                    <section className="detail-hero-main">
+                        <div className="hero-head-row">
+                            <div className="hero-title-block">
+                                <div className="skill-title-icon" aria-hidden="true">
+                                    <FigmaIcon src={heroSkillIcon} className="is-hero" />
+                                </div>
+                                <div className="hero-copy">
+                                    <Title level={2}>{detail.name}</Title>
+                                    <Paragraph className="hero-description">{heroSummary}</Paragraph>
+                                </div>
+                            </div>
 
-                    <div className="hero-meta-grid">
-                        {detailMetaItems.map((item) => (
-                            <div
-                                key={item.label}
-                                className={`hero-meta-card ${item.className || ''}`.trim()}
-                            >
-                                <Text className="hero-meta-label">{item.label}</Text>
-                                <div className="hero-meta-value" title={item.value}>
-                                    {item.label === 'Stars' ? (
-                                        <>
-                                            <StarOutlined /> {item.value}
-                                        </>
-                                    ) : (
-                                        item.value
-                                    )}
+                            <div className="hero-actions">
+                                <div className="hero-stat-chip">
+                                    <span>☆</span>
+                                    <strong>{detail.stars || 0}</strong>
                                 </div>
+                                <Button
+                                    type="primary"
+                                    className="hero-fork-btn"
+                                    onClick={() => window.open(sourceUrl, '_blank')}
+                                    disabled={!sourceUrl}
+                                >
+                                    Fork
+                                </Button>
                             </div>
-                        ))}
-                    </div>
+                        </div>
 
-                    {detailTags.length > 0 ? (
-                        <div className="hero-tag-list">
-                            {detailTags.map((tag) => (
-                                <Tag key={tag}>{tag}</Tag>
+                        <div className="hero-meta-row">
+                            {heroMetaItems.map((item) => (
+                                <div key={item.label} className="hero-meta-item">
+                                    <span>{item.label}</span>
+                                    <strong>{item.value}</strong>
+                                </div>
                             ))}
                         </div>
-                    ) : null}
-                </div>
 
-                <Card className="install-overview-card" bordered={false}>
-                    <div className="install-card-header">
-                        <div>
-                            <Text className="install-card-title">安装方式</Text>
-                            <Paragraph className="install-card-caption" type="secondary">
-                                {isInstallable
-                                    ? '默认展示 Agent 安装路径，并始终基于 installKey 生成用户可见命令。'
-                                    : '当前来源暂不支持 Doraemon CLI 直装，保留手动下载与解压的降级路径。'}
-                            </Paragraph>
-                        </div>
-                        <span
-                            className={`install-status-tag ${
-                                isInstallable ? 'is-ready' : 'is-fallback'
-                            }`}
-                        >
-                            {isInstallable ? 'CLI 可安装' : '需手动接入'}
-                        </span>
-                    </div>
+                    </section>
 
-                    <Tabs defaultActiveKey="agent" className="install-tabs">
-                        <TabPane tab="我是 Agent" key="agent">
-                            <div className="install-tab-panel">
-                                {isInstallable ? (
-                                    <>
-                                        <Text type="secondary">
-                                            先确认 Doraemon CLI 可用，再把下面整段提示发给 Agent
-                                            执行。
-                                        </Text>
-                                        {renderInstallCommandCard({
-                                            title: '发给 Agent 的安装提示',
-                                            description: '包含 CLI 检查与技能安装两步说明',
-                                            command: agentInstruction,
-                                            copyMessage: 'Agent 指令已复制到剪贴板',
-                                        })}
-                                    </>
-                                ) : (
-                                    <>
-                                        <Text strong>当前 skill 需要 Agent 走下载降级路径</Text>
-                                        {renderInstallCommandCard({
-                                            title: '发给 Agent 的降级说明',
-                                            description: installUnavailableReason,
-                                            command: agentFallbackInstruction,
-                                            copyMessage: '降级指令已复制到剪贴板',
-                                        })}
-                                    </>
-                                )}
+                    <section className="document-panel">
+                        <div className="document-toolbar">
+                            <div className="document-toolbar-left">
+                                <FigmaIcon src={fileDocIcon} className="is-article" />
+                                <span>{uiSelectedFilePath || 'SKILL.md'}</span>
                             </div>
-                        </TabPane>
-                        <TabPane tab="我是 Human" key="human">
-                            <div className="install-tab-panel">
-                                {isInstallable ? (
-                                    <>
-                                        {renderInstallCommandCard({
-                                            title: '先安装 Doraemon CLI',
-                                            description:
-                                                '当前项目仍使用占位说明，等待统一安装脚本地址补齐',
-                                            command: cliInstallPlaceholderCommand,
-                                            copyMessage: 'CLI 安装命令已复制到剪贴板',
-                                        })}
-                                        {renderInstallCommandCard({
-                                            title: '安装当前技能',
-                                            description: '复制后可直接在终端执行',
-                                            command: skillInstallCommand,
-                                            copyMessage: '技能安装命令已复制到剪贴板',
-                                        })}
-                                    </>
-                                ) : (
-                                    <>
-                                        <Text strong>当前技能暂不支持 Doraemon CLI 直接安装</Text>
-                                        <Text type="secondary">
-                                            原因：{installUnavailableReason}
-                                        </Text>
-                                        {renderInstallCommandCard({
-                                            title: '手动下载命令',
-                                            description: '下载 zip 后手动解压到目标 skills 目录',
-                                            command: downloadCommand,
-                                            copyMessage: '下载命令已复制到剪贴板',
-                                            disabled: !downloadCommand,
-                                        })}
-                                    </>
-                                )}
+                            <div className="document-toolbar-right">
+                                {fileLoading ? (
+                                    <span className="document-loading-indicator">
+                                        <Spin size="small" />
+                                    </span>
+                                ) : null}
+                                <span />
+                                <span />
+                                <span />
                             </div>
-                        </TabPane>
-                    </Tabs>
-                </Card>
-            </div>
+                        </div>
 
-            <Row gutter={[16, 16]} className="detail-main-row">
-                <Col xs={24} xl={16}>
-                    <Card
-                        className="file-tree-card"
-                        title={
-                            <Space>
-                                <FolderOpenOutlined />
-                                文件浏览
-                            </Space>
-                        }
-                        bodyStyle={{ padding: '8px 0', maxHeight: 280, overflow: 'auto' }}
-                    >
-                        {fileTreeData.length === 0 ? (
-                            <Empty description="暂无文件" />
-                        ) : (
-                            <Tree
-                                treeData={fileTreeData}
-                                selectedKeys={selectedFilePath ? [selectedFilePath] : []}
-                                defaultExpandAll
-                                onSelect={(keys, info) => {
-                                    if (!info.node.isLeaf) return;
-                                    const targetPath = String(keys[0] || '');
-                                    if (targetPath) {
-                                        setSelectedFilePath(targetPath);
+                        <div className="document-scroll-area">
+                            <div className="document-content-shell">
+                                {renderFileViewer()}
+                            </div>
+                        </div>
+                    </section>
+                </main>
+
+                <aside className="detail-right-sidebar">
+                    <section className="install-panel">
+                        <div className="sidebar-section-title">安装方式</div>
+
+                        <div
+                            className={`install-option-card ${
+                                activeInstallPanel === 'agent' ? 'is-active' : ''
+                            }`.trim()}
+                        >
+                            <button
+                                type="button"
+                                className="install-option-trigger"
+                                onClick={() =>
+                                    setActiveInstallPanel((current) =>
+                                        current === 'agent' ? null : 'agent'
+                                    )
+                                }
+                                aria-expanded={activeInstallPanel === 'agent'}
+                            >
+                                <div className="install-option-meta">
+                                    <span
+                                        className="install-option-icon-shell is-agent"
+                                        aria-hidden="true"
+                                    >
+                                        <FigmaIcon
+                                            src={agentIcon}
+                                            className="is-option-icon is-agent-icon"
+                                        />
+                                    </span>
+                                    <div>
+                                        <div className="install-option-title">智能体</div>
+                                        <div className="install-option-description">
+                                            {isInstallable
+                                                ? '自动化安装'
+                                                : '下载后安装'}
+                                        </div>
+                                    </div>
+                                </div>
+                                <FigmaIcon
+                                    src={
+                                        activeInstallPanel === 'agent'
+                                            ? chevronDownIcon
+                                            : chevronRightIcon
                                     }
-                                }}
-                            />
-                        )}
-                    </Card>
-
-                    <Card
-                        className="file-viewer-card"
-                        title={
-                            <Space>
-                                <ReadOutlined />
-                                <Text>{selectedFilePath || '文件预览'}</Text>
-                            </Space>
-                        }
-                        extra={
-                            fileContent ? (
-                                <Space>
-                                    <Tag>{fileContent.language}</Tag>
-                                    <Text type="secondary">{formatFileSize(fileContent.size)}</Text>
-                                </Space>
-                            ) : null
-                        }
-                    >
-                        {renderFileViewer()}
-                    </Card>
-                </Col>
-
-                <Col xs={24} xl={8}>
-                    <Card
-                        className="action-card download-card"
-                        title="手动下载"
-                        extra={<Text>manual</Text>}
-                    >
-                        <div className="download-buttons">
-                            <Button
-                                type="primary"
-                                block
-                                icon={<DownloadOutlined />}
+                                    className={
+                                        activeInstallPanel === 'agent'
+                                            ? 'is-chevron'
+                                            : 'is-chevron-right'
+                                    }
+                                />
+                            </button>
+                            <div
+                                className={`install-option-body ${
+                                    activeInstallPanel === 'agent' ? 'is-open' : 'is-closed'
+                                }`.trim()}
+                            >
+                                <div className="install-option-body-inner">
+                                    {renderTerminalCommand(
+                                        agentTerminalCommand,
+                                        isInstallable
+                                            ? 'Agent 安装命令已复制到剪贴板'
+                                            : '下载命令已复制到剪贴板',
+                                    )}
+                                </div>
+                            </div>
+                        </div>
+
+                        <div
+                            className={`install-option-card is-collapsed ${
+                                activeInstallPanel === 'human' ? 'is-active' : ''
+                            }`.trim()}
+                        >
+                            <button
+                                type="button"
+                                className="install-option-trigger"
                                 onClick={() =>
-                                    window.open(installMeta?.downloadUrl || downloadPath, '_blank')
+                                    setActiveInstallPanel(
+                                        activeInstallPanel === 'human' ? null : 'human'
+                                    )
                                 }
+                                aria-expanded={activeInstallPanel === 'human'}
                             >
-                                下载 skill.zip
-                            </Button>
-                            <div className="command-block">
-                                <code>{downloadCommand}</code>
-                                <Button
-                                    type="text"
-                                    className="command-copy-btn"
-                                    icon={<CopyOutlined />}
-                                    onClick={() =>
-                                        copyToClipboard(downloadCommand, '下载命令已复制到剪贴板')
+                                <div className="install-option-meta">
+                                    <span
+                                        className="install-option-icon-shell is-human"
+                                        aria-hidden="true"
+                                    >
+                                        <FigmaIcon
+                                            src={humanIcon}
+                                            className="is-option-icon is-human-icon"
+                                        />
+                                    </span>
+                                    <div>
+                                        <div className="install-option-title">手动安装</div>
+                                        <div className="install-option-description">
+                                            手动配置
+                                        </div>
+                                    </div>
+                                </div>
+                                <FigmaIcon
+                                    src={
+                                        activeInstallPanel === 'human'
+                                            ? chevronDownIcon
+                                            : chevronRightIcon
+                                    }
+                                    className={
+                                        activeInstallPanel === 'human'
+                                            ? 'is-chevron'
+                                            : 'is-chevron-right'
                                     }
                                 />
+                            </button>
+                            <div
+                                className={`install-option-body ${
+                                    activeInstallPanel === 'human' ? 'is-open' : 'is-closed'
+                                }`.trim()}
+                            >
+                                <div className="install-option-body-inner">
+                                    <div className="human-command-card">
+                                        <div className="human-command-title">先安装 Doraemon CLI</div>
+                                        {renderInlineCommand(
+                                            cliInstallPlaceholderCommand,
+                                            'CLI 安装命令已复制到剪贴板',
+                                            false
+                                        )}
+                                    </div>
+                                    <div className="human-command-card">
+                                        <div className="human-command-title">再安装当前技能</div>
+                                        {renderInlineCommand(
+                                            isInstallable ? skillInstallCommand : downloadCommand,
+                                            isInstallable
+                                                ? '技能安装命令已复制到剪贴板'
+                                                : '下载命令已复制到剪贴板',
+                                            false
+                                        )}
+                                    </div>
+                                </div>
                             </div>
-                            <Text type="secondary">
-                                下载完整技能目录，包含 SKILL.md 与所有相关文件
-                            </Text>
                         </div>
-                    </Card>
-                </Col>
-            </Row>
-
-            <Card className="related-card-list" title="相关技能推荐">
-                {related.length === 0 ? (
-                    <Empty description="暂无相关技能推荐" />
-                ) : (
-                    <Row gutter={[16, 16]}>
-                        {related.map((item) => (
-                            <Col key={item.slug} xs={24} sm={12} lg={8}>
-                                <Card
-                                    className="related-item-card"
-                                    hoverable
-                                    onClick={() => history.push(`/page/skills/${item.slug}`)}
+                    </section>
+
+                    <section className="download-panel">
+                        <div className="sidebar-section-title">手动下载</div>
+                        <Button
+                            type="default"
+                            block
+                            className="download-btn"
+                            onClick={() => window.open(manualDownloadUrl, '_blank')}
+                        >
+                            <FigmaIcon src={downloadIcon} className="is-download" />
+                            下载 .zip
+                        </Button>
+                        {renderInlineCommand(downloadCommand, '下载命令已复制到剪贴板', true)}
+                    </section>
+
+                    <section className="related-panel">
+                        <div className="sidebar-section-title">相关技能</div>
+                        {related.length === 0 ? (
+                            <div className="related-empty-state">
+                                <FigmaIcon src={emptyRelatedIcon} className="is-empty-related" />
+                                <span>暂无相关技能</span>
+                            </div>
+                        ) : (
+                            <>
+                                <div className="related-list">
+                                    {related.map((item, index) => (
+                                        <button
+                                            key={item.slug}
+                                            type="button"
+                                            className="related-item"
+                                            onClick={() => {
+                                                if (item.slug === slug) return;
+                                                history.push(`/page/skills/${item.slug}`);
+                                            }}
+                                        >
+                                            <span
+                                                className={`related-item-icon-shell ${
+                                                    relatedSkillShellClasses[
+                                                        index % relatedSkillShellClasses.length
+                                                    ]
+                                                }`}
+                                                aria-hidden="true"
+                                            >
+                                                <FigmaIcon
+                                                    src={
+                                                        relatedSkillIconUrls[
+                                                            index % relatedSkillIconUrls.length
+                                                        ]
+                                                    }
+                                                    className="is-related-skill-icon"
+                                                />
+                                            </span>
+                                            <div className="related-item-copy">
+                                                <strong>{item.name}</strong>
+                                                <span className="related-item-description">
+                                                    {item.description || '暂无描述'}
+                                                </span>
+                                            </div>
+                                        </button>
+                                    ))}
+                                </div>
+                                <button
+                                    type="button"
+                                    className="browse-market-link"
+                                    onClick={() => history.push(browseMarketPath)}
                                 >
-                                    <div className="related-title">{item.name}</div>
-                                    <Paragraph ellipsis={{ rows: 2 }}>
-                                        {item.description || '暂无描述'}
-                                    </Paragraph>
-                                    <Text type="secondary">
-                                        <StarOutlined /> {item.stars || 0}
-                                    </Text>
-                                </Card>
-                            </Col>
-                        ))}
-                    </Row>
-                )}
-            </Card>
+                                    <span>浏览市场</span>
+                                    <FigmaIcon
+                                        src={browseMarketArrowIcon}
+                                        className="is-browse-market-arrow"
+                                    />
+                                </button>
+                            </>
+                        )}
+                    </section>
+
+                    <section className="meta-panel">
+                        <div className="meta-row">
+                            <span>仓库大小</span>
+                            <strong>{fileContent ? formatFileSize(fileContent.size) : '1.2 MB'}</strong>
+                        </div>
+                        <div className="meta-row">
+                            <span>近 30 天下载</span>
+                            <strong>842</strong>
+                        </div>
+                        <div className="meta-row is-contributors">
+                            <span>贡献者</span>
+                            <div className="contributors-stack">
+                                <img alt="contributor 1" src={contributorOne} />
+                                <img alt="contributor 2" src={contributorTwo} />
+                                <span>+3</span>
+                            </div>
+                        </div>
+                    </section>
+                </aside>
+            </div>
         </div>
     );
 };
diff --git a/app/web/pages/skills/index.tsx b/app/web/pages/skills/index.tsx
index 7b64f62..c4f045c 100644
--- a/app/web/pages/skills/index.tsx
+++ b/app/web/pages/skills/index.tsx
@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import {
-    CopyOutlined,
-    EyeOutlined,
+    DeleteOutlined,
     FilterOutlined,
     ImportOutlined,
     SearchOutlined,
@@ -19,7 +18,6 @@ import {
     message,
     Modal,
     Pagination,
-    Radio,
     Row,
     Select,
     Space,
@@ -30,8 +28,6 @@ import {
 } from 'antd';
 
 import { API } from '@/api';
-import { copyToClipboard } from '@/utils/copyUtils';
-import SkillSummaryModalContent from './detail/SkillSummaryModalContent';
 import { SkillItem, SkillListResponse } from './types';
 import './style.scss';
 
@@ -56,6 +52,38 @@ const INITIAL_QUERY = {
     pageSize: 12,
 };
 
+const EditIcon = () => (
+    <svg
+        width="14"
+        height="14"
+        viewBox="0 0 14 14"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden="true"
+    >
+        <path
+            d="M9.916 2.334a1.65 1.65 0 1 1 2.334 2.332l-6.27 6.27a1.5 1.5 0 0 1-.707.39l-2.024.45.45-2.025a1.5 1.5 0 0 1 .39-.706l6.27-6.27Z"
+            stroke="currentColor"
+            strokeWidth="1.2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        />
+        <path
+            d="M8.75 3.5 11.083 5.833"
+            stroke="currentColor"
+            strokeWidth="1.2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        />
+        <path
+            d="M7.583 11.667h3.5"
+            stroke="currentColor"
+            strokeWidth="1.2"
+            strokeLinecap="round"
+        />
+    </svg>
+);
+
 const SkillsMarket: React.FC<any> = ({ history }) => {
     const [loading, setLoading] = useState(false);
     const [skills, setSkills] = useState<SkillItem[]>([]);
@@ -63,12 +91,14 @@ const SkillsMarket: React.FC<any> = ({ history }) => {
     const [total, setTotal] = useState(0);
     const [importVisible, setImportVisible] = useState(false);
     const [importing, setImporting] = useState(false);
-    const [importMode, setImportMode] = useState<'source' | 'file'>('source');
     const [uploadFiles, setUploadFiles] = useState<any[]>([]);
+    const [editVisible, setEditVisible] = useState(false);
+    const [editing, setEditing] = useState(false);
+    const [editUploadFiles, setEditUploadFiles] = useState<any[]>([]);
+    const [editingSkill, setEditingSkill] = useState<SkillItem | null>(null);
     const [importForm] = Form.useForm();
+    const [editForm] = Form.useForm();
     const [query, setQuery] = useState(INITIAL_QUERY);
-    const [detailVisible, setDetailVisible] = useState(false);
-    const [activeDetailSlug, setActiveDetailSlug] = useState('');
 
     const fetchSkills = useCallback(async (nextQuery) => {
         setLoading(true);
@@ -99,61 +129,58 @@ const SkillsMarket: React.FC<any> = ({ history }) => {
         setQuery(next);
     };
 
-    const handleOpenDetail = (slug: string) => {
-        setActiveDetailSlug(slug);
-        setDetailVisible(true);
-    };
-
-    const handleNavigateToDetail = (slug: string) => {
-        history.push(`/page/skills/${slug}`);
-    };
-
-    const buildSkillInstallCommand = (installKey: string) =>
-        `doraemon-skills install ${installKey}`;
-
-    const handleCloseDetailModal = () => {
-        setDetailVisible(false);
-    };
-
     const openImportModal = () => {
         setImportVisible(true);
-        setImportMode('source');
         setUploadFiles([]);
         importForm.setFieldsValue({
             category: '通用',
             tags: [],
-            source: '',
         });
     };
 
     const closeImportModal = () => {
         if (importing) return;
         setImportVisible(false);
-        setImportMode('source');
         setUploadFiles([]);
         importForm.resetFields();
     };
 
+    const openEditModal = (skill: SkillItem) => {
+        setEditingSkill(skill);
+        setEditVisible(true);
+        setEditUploadFiles([]);
+        editForm.setFieldsValue({
+            name: skill.name,
+            category: skill.category || '通用',
+            tags: skill.tags || [],
+            version: skill.version || '',
+        });
+    };
+
+    const closeEditModal = () => {
+        if (editing) return;
+        setEditVisible(false);
+        setEditingSkill(null);
+        setEditUploadFiles([]);
+        editForm.resetFields();
+    };
+
     const handleImportSkill = async () => {
         try {
-            const values = await importForm.validateFields();
+            await importForm.validateFields();
             setImporting(true);
-            let response = null;
-            if (importMode === 'file') {
-                const targetFile = uploadFiles[0]?.originFileObj;
-                if (!targetFile) {
-                    message.error('请先选择 .skill 文件');
-                    return;
-                }
-                response = await API.importSkillFile({
-                    file: targetFile,
-                    skillName: values.skillName || '',
-                    category: values.category,
-                    tags: JSON.stringify(values.tags || []),
-                });
-            } else {
-                response = await API.importSkill(values);
+            const targetFile = uploadFiles[0]?.originFileObj;
+            if (!targetFile) {
+                message.error('请先选择 .zip 文件');
+                return;
             }
+            const values = importForm.getFieldsValue();
+            const response = await API.importSkillFile({
+                file: targetFile,
+                skillName: values.skillName || '',
+                category: values.category,
+                tags: JSON.stringify(values.tags || []),
+            });
 
             if (!response.success) {
                 message.error(response.msg || '导入失败');
@@ -167,19 +194,73 @@ const SkillsMarket: React.FC<any> = ({ history }) => {
                 message.success('导入完成，技能可能已存在');
             }
             setImportVisible(false);
-            setImportMode('source');
             setUploadFiles([]);
             importForm.resetFields();
             fetchSkills({ ...query });
         } catch (error) {
             if (error?.errorFields) return;
-            message.error('导入失败，请检查来源地址或网络权限');
+            message.error('导入失败，请检查文件或网络权限');
             console.error('导入 Skill 失败:', error);
         } finally {
             setImporting(false);
         }
     };
 
+    const handleUpdateSkill = async () => {
+        if (!editingSkill) return;
+
+        try {
+            const values = await editForm.validateFields();
+            setEditing(true);
+            const targetFile = editUploadFiles[0]?.originFileObj;
+            const response = await API.updateSkill({
+                slug: editingSkill.slug,
+                name: values.name,
+                category: values.category,
+                tags: JSON.stringify(values.tags || []),
+                version: values.version || '',
+                file: targetFile,
+            });
+
+            if (!response.success) {
+                message.error(response.msg || '更新失败');
+                return;
+            }
+
+            message.success(targetFile ? '技能已更新并替换 zip 内容' : '技能信息已更新');
+            setEditVisible(false);
+            setEditingSkill(null);
+            setEditUploadFiles([]);
+            editForm.resetFields();
+            fetchSkills({ ...query });
+        } catch (error) {
+            if (error?.errorFields) return;
+            message.error('更新失败，请稍后重试');
+            console.error('更新 Skill 失败:', error);
+        } finally {
+            setEditing(false);
+        }
+    };
+
+    const handleDeleteSkill = (skill: SkillItem) => {
+        Modal.confirm({
+            title: `确认删除「${skill.name}」？`,
+            content: '删除后该技能将不再出现在列表和详情页中。',
+            okText: '删除',
+            okButtonProps: { danger: true },
+            cancelText: '取消',
+            onOk: async () => {
+                const response = await API.deleteSkill({ slug: skill.slug });
+                if (!response.success) {
+                    message.error(response.msg || '删除失败');
+                    return;
+                }
+                message.success('删除成功');
+                fetchSkills({ ...query });
+            },
+        });
+    };
+
     return (
         <div className="page-skills">
             <div className="skills-header">
@@ -247,21 +328,26 @@ const SkillsMarket: React.FC<any> = ({ history }) => {
                                     <Card
                                         className="skill-card"
                                         hoverable
-                                        onClick={() => handleNavigateToDetail(skill.slug)}
-                                        onKeyDown={(event) => {
-                                            if (event.key === 'Enter' || event.key === ' ') {
-                                                event.preventDefault();
-                                                handleNavigateToDetail(skill.slug);
-                                            }
-                                        }}
-                                        role="button"
-                                        tabIndex={0}
+                                        onClick={() => history.push(`/page/skills/${skill.slug}`)}
                                     >
                                         <div className="card-header">
                                             <span className="skill-name">{skill.name}</span>
-                                            <span className="meta-stars">
-                                                <StarOutlined /> {skill.stars || 0}
-                                            </span>
+                                            <div className="card-header-actions">
+                                                <Button
+                                                    size="small"
+                                                    className="card-edit-trigger"
+                                                    aria-label={`编辑 ${skill.name}`}
+                                                    onClick={(event) => {
+                                                        event.stopPropagation();
+                                                        openEditModal(skill);
+                                                    }}
+                                                >
+                                                    <EditIcon />
+                                                </Button>
+                                                <span className="meta-stars">
+                                                    <StarOutlined /> {skill.stars || 0}
+                                                </span>
+                                            </div>
                                         </div>
                                         <Paragraph className="skill-desc">
                                             {skill.description || '暂无描述'}
@@ -286,33 +372,6 @@ const SkillsMarket: React.FC<any> = ({ history }) => {
                                                 <Tag key={tag}>{tag}</Tag>
                                             ))}
                                         </div>
-                                        <div className="action-row">
-                                            <Button
-                                                type="link"
-                                                icon={<EyeOutlined />}
-                                                onClick={(e) => {
-                                                    e.stopPropagation();
-                                                    handleOpenDetail(skill.slug);
-                                                }}
-                                            >
-                                                查看详情
-                                            </Button>
-                                            <Button
-                                                type="link"
-                                                icon={<CopyOutlined />}
-                                                onClick={(e) => {
-                                                    e.stopPropagation();
-                                                    copyToClipboard(
-                                                        buildSkillInstallCommand(
-                                                            skill.installKey || skill.slug
-                                                        ),
-                                                        '安装命令已复制'
-                                                    );
-                                                }}
-                                            >
-                                                复制安装命令
-                                            </Button>
-                                        </div>
                                     </Card>
                                 </Col>
                             ))}
@@ -337,23 +396,6 @@ const SkillsMarket: React.FC<any> = ({ history }) => {
                 )}
             </Spin>
 
-            <Modal
-                width={1080}
-                title={null}
-                footer={null}
-                visible={detailVisible}
-                onCancel={handleCloseDetailModal}
-                destroyOnClose
-                className="skill-detail-modal"
-                bodyStyle={{ padding: 0, maxHeight: 'calc(100vh - 160px)', overflow: 'auto' }}
-            >
-                {activeDetailSlug ? (
-                    <div className="skill-detail-modal-inner">
-                        <SkillSummaryModalContent slug={activeDetailSlug} history={history} />
-                    </div>
-                ) : null}
-            </Modal>
-
             <Modal
                 title="导入 Skill"
                 visible={importVisible}
@@ -365,53 +407,108 @@ const SkillsMarket: React.FC<any> = ({ history }) => {
                 destroyOnClose
             >
                 <Form form={importForm} layout="vertical">
-                    <Form.Item label="导入方式">
-                        <Radio.Group
-                            value={importMode}
-                            onChange={(event) => setImportMode(event.target.value)}
+                    <Form.Item
+                        label=".zip 文件"
+                        required
+                        extra="上传包含 SKILL.md 的 skill 目录打包文件"
+                    >
+                        <Upload
+                            accept=".zip"
+                            maxCount={1}
+                            fileList={uploadFiles}
+                            beforeUpload={() => false}
+                            onChange={(info) => setUploadFiles(info.fileList || [])}
                         >
-                            <Radio.Button value="source">来源地址</Radio.Button>
-                            <Radio.Button value="file">上传 .skill 文件</Radio.Button>
-                        </Radio.Group>
+                            <Button icon={<UploadOutlined />}>选择 .zip 文件</Button>
+                        </Upload>
+                    </Form.Item>
+                    <Form.Item name="skillName" label="技能名称（可选）">
+                        <Input placeholder="作为项目名称使用，不参与过滤" />
                     </Form.Item>
                     <Form.Item
-                        name="source"
-                        label="来源地址"
-                        rules={
-                            importMode === 'source'
-                                ? [{ required: true, message: '请输入来源地址' }]
-                                : []
-                        }
+                        name="category"
+                        label="分类"
+                        initialValue="通用"
+                        rules={[{ required: true, message: '请选择分类' }]}
                     >
-                        <Input
-                            disabled={importMode !== 'source'}
-                            placeholder="支持 GitHub / GitLab / 内网 GitLab / tree 子目录 URL"
+                        <Select placeholder="请选择分类">
+                            {FIXED_CATEGORY_OPTIONS.map((item) => (
+                                <Option key={item} value={item}>
+                                    {item}
+                                </Option>
+                            ))}
+                        </Select>
+                    </Form.Item>
+                    <Form.Item
+                        name="tags"
+                        label="标签（可选）"
+                        extra="最多 5 个标签，可自定义输入，回车或逗号分隔"
+                        rules={[
+                            {
+                                validator: (_, value = []) => {
+                                    if (!Array.isArray(value)) return Promise.resolve();
+                                    if (value.length > 5) {
+                                        return Promise.reject(new Error('标签最多 5 个'));
+                                    }
+                                    return Promise.resolve();
+                                },
+                            },
+                        ]}
+                    >
+                        <Select
+                            mode="tags"
+                            tokenSeparators={[',', '，']}
+                            placeholder="例如：邮件, 效率, 命令行"
+                            maxTagCount={5}
                         />
                     </Form.Item>
-                    {importMode === 'file' && (
-                        <Form.Item
-                            label=".skill 文件"
-                            required
-                            extra="仅支持 skill-creator 打包生成的 .skill（zip）文件"
+                </Form>
+                <Text type="secondary">
+                    提示：.zip 包内部应包含 `技能目录/SKILL.md`
+                </Text>
+            </Modal>
+
+            <Modal
+                title="编辑 Skill"
+                visible={editVisible}
+                onCancel={closeEditModal}
+                destroyOnClose
+                footer={
+                    <div className="skill-edit-modal-footer">
+                        <Button
+                            danger
+                            icon={<DeleteOutlined />}
+                            disabled={!editingSkill || editing}
+                            onClick={() => {
+                                if (!editingSkill) return;
+                                closeEditModal();
+                                handleDeleteSkill(editingSkill);
+                            }}
                         >
-                            <Upload
-                                accept=".skill"
-                                maxCount={1}
-                                fileList={uploadFiles}
-                                beforeUpload={() => false}
-                                onChange={(info) => setUploadFiles(info.fileList || [])}
-                            >
-                                <Button icon={<UploadOutlined />}>选择 .skill 文件</Button>
-                            </Upload>
-                        </Form.Item>
-                    )}
-                    <Form.Item name="skillName" label="Skill 名称（可选）">
-                        <Input placeholder="可选，等价于 --skill <name>" />
+                            删除
+                        </Button>
+                        <Space>
+                            <Button onClick={closeEditModal} disabled={editing}>
+                                取消
+                            </Button>
+                            <Button type="primary" loading={editing} onClick={handleUpdateSkill}>
+                                保存
+                            </Button>
+                        </Space>
+                    </div>
+                }
+            >
+                <Form form={editForm} layout="vertical">
+                    <Form.Item
+                        name="name"
+                        label="技能名称"
+                        rules={[{ required: true, message: '请输入技能名称' }]}
+                    >
+                        <Input placeholder="请输入技能名称" maxLength={255} />
                     </Form.Item>
                     <Form.Item
                         name="category"
                         label="分类"
-                        initialValue="通用"
                         rules={[{ required: true, message: '请选择分类' }]}
                     >
                         <Select placeholder="请选择分类">
@@ -445,16 +542,24 @@ const SkillsMarket: React.FC<any> = ({ history }) => {
                             maxTagCount={5}
                         />
                     </Form.Item>
+                    <Form.Item name="version" label="版本号">
+                        <Input placeholder="例如：V2.4.0-STABLE" maxLength={128} />
+                    </Form.Item>
+                    <Form.Item
+                        label="重新上传 .zip（可选）"
+                        extra="上传后会替换当前技能文件内容；要求 zip 中只包含一个技能目录"
+                    >
+                        <Upload
+                            accept=".zip"
+                            maxCount={1}
+                            fileList={editUploadFiles}
+                            beforeUpload={() => false}
+                            onChange={(info) => setEditUploadFiles(info.fileList || [])}
+                        >
+                            <Button icon={<UploadOutlined />}>选择新的 .zip 文件</Button>
+                        </Upload>
+                    </Form.Item>
                 </Form>
-                {importMode === 'source' ? (
-                    <Text type="secondary">
-                        示例：`https://github.com/openclaw/openclaw/tree/main/skills/himalaya`
-                    </Text>
-                ) : (
-                    <Text type="secondary">
-                        提示：`.skill` 本质是 zip 包，内部应包含 `技能目录/SKILL.md`
-                    </Text>
-                )}
             </Modal>
         </div>
     );
diff --git a/app/web/pages/skills/style.scss b/app/web/pages/skills/style.scss
index 00022a5..96c63ad 100644
--- a/app/web/pages/skills/style.scss
+++ b/app/web/pages/skills/style.scss
@@ -62,11 +62,36 @@
             justify-content: space-between;
             margin-bottom: 10px;
         }
+        .card-header-actions {
+            display: inline-flex;
+            align-items: center;
+            gap: 10px;
+        }
         .skill-name {
             color: #1F2D3D;
             font-size: 16px;
             font-weight: 600;
         }
+        .card-edit-trigger {
+            height: 20px;
+            width: 20px;
+            min-width: 20px;
+            padding: 0;
+            color: #667085;
+            font-size: 12px;
+            line-height: 1;
+            border: none;
+            background: transparent;
+            box-shadow: none;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .card-edit-trigger:hover,
+        .card-edit-trigger:focus {
+            color: #2F7CF6;
+            background: transparent;
+        }
         .meta-stars {
             color: #E6A23C;
             font-weight: 600;
@@ -97,14 +122,6 @@
             min-height: 28px;
             margin-bottom: 10px;
         }
-        .action-row {
-            display: flex;
-            align-items: center;
-            justify-content: flex-start;
-            margin-top: auto;
-            padding-top: 6px;
-            gap: 8px;
-        }
     }
     .pagination-wrap {
         display: flex;
@@ -155,3 +172,10 @@
         padding: 0;
     }
 }
+
+.skill-edit-modal-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+}
diff --git a/app/web/pages/skills/types.ts b/app/web/pages/skills/types.ts
index 0b09644..8556cf4 100644
--- a/app/web/pages/skills/types.ts
+++ b/app/web/pages/skills/types.ts
@@ -4,6 +4,7 @@ export interface SkillItem {
     name: string;
     description: string;
     category: string;
+    version: string;
     tags: string[];
     allowedTools: string[];
     stars: number;

From 0f072db42f15509667792e16cfa5103d89c35381 Mon Sep 17 00:00:00 2001
From: huaiju <huaiju@dtstack.com>
Date: Sun, 22 Mar 2026 19:13:35 +0800
Subject: [PATCH 34/43] feat(skills): add figma-based detail page assets and
 layout styles

---
 .../font/material-symbols/inter-latin.woff2   |  Bin 0 -> 48432 bytes
 .../font/material-symbols/manrope-latin.woff2 |  Bin 0 -> 24576 bytes
 .../material-symbols-outlined-subset.woff2    |  Bin 0 -> 2940 bytes
 .../material-symbols-outlined-variable.woff2  |    1 +
 .../material-symbols-outlined.woff2           |   11 +
 .../images/skills-detail-figma/agent.svg      |    5 +
 .../images/skills-detail-figma/article.svg    |    5 +
 .../skills-detail-figma/check-circle.svg      |    3 +
 .../skills-detail-figma/chevron-down.svg      |    5 +
 .../skills-detail-figma/chevron-right.svg     |    5 +
 .../skills-detail-figma/contributor-1.png     |  Bin 0 -> 515 bytes
 .../skills-detail-figma/contributor-2.png     |  Bin 0 -> 430 bytes
 .../images/skills-detail-figma/copy-dark.svg  |    5 +
 .../images/skills-detail-figma/copy-light.svg |    5 +
 .../images/skills-detail-figma/download.svg   |    5 +
 .../skills-detail-figma/empty-related.svg     |    5 +
 .../images/skills-detail-figma/file-doc.svg   |    5 +
 .../skills-detail-figma/folder-open-arrow.svg |    5 +
 .../skills-detail-figma/folder-open-blue.svg  |    5 +
 .../asset/images/skills-detail-figma/fork.svg |    5 +
 .../images/skills-detail-figma/hero-skill.svg |    5 +
 .../images/skills-detail-figma/human.svg      |    5 +
 .../skills-detail-figma/star-outline.svg      |    5 +
 app/web/layouts/basicLayout/index.tsx         |    7 +-
 app/web/layouts/basicLayout/style.scss        |   26 +-
 app/web/pages/skills/detail/stitchAssets.scss |   50 +
 app/web/pages/skills/detail/style.scss        | 1381 +++++++++++++----
 app/web/scss/reset.scss                       |    3 +
 28 files changed, 1249 insertions(+), 308 deletions(-)
 create mode 100644 app/web/asset/font/material-symbols/inter-latin.woff2
 create mode 100644 app/web/asset/font/material-symbols/manrope-latin.woff2
 create mode 100644 app/web/asset/font/material-symbols/material-symbols-outlined-subset.woff2
 create mode 100644 app/web/asset/font/material-symbols/material-symbols-outlined-variable.woff2
 create mode 100644 app/web/asset/font/material-symbols/material-symbols-outlined.woff2
 create mode 100644 app/web/asset/images/skills-detail-figma/agent.svg
 create mode 100644 app/web/asset/images/skills-detail-figma/article.svg
 create mode 100644 app/web/asset/images/skills-detail-figma/check-circle.svg
 create mode 100644 app/web/asset/images/skills-detail-figma/chevron-down.svg
 create mode 100644 app/web/asset/images/skills-detail-figma/chevron-right.svg
 create mode 100644 app/web/asset/images/skills-detail-figma/contributor-1.png
 create mode 100644 app/web/asset/images/skills-detail-figma/contributor-2.png
 create mode 100644 app/web/asset/images/skills-detail-figma/copy-dark.svg
 create mode 100644 app/web/asset/images/skills-detail-figma/copy-light.svg
 create mode 100644 app/web/asset/images/skills-detail-figma/download.svg
 create mode 100644 app/web/asset/images/skills-detail-figma/empty-related.svg
 create mode 100644 app/web/asset/images/skills-detail-figma/file-doc.svg
 create mode 100644 app/web/asset/images/skills-detail-figma/folder-open-arrow.svg
 create mode 100644 app/web/asset/images/skills-detail-figma/folder-open-blue.svg
 create mode 100644 app/web/asset/images/skills-detail-figma/fork.svg
 create mode 100644 app/web/asset/images/skills-detail-figma/hero-skill.svg
 create mode 100644 app/web/asset/images/skills-detail-figma/human.svg
 create mode 100644 app/web/asset/images/skills-detail-figma/star-outline.svg
 create mode 100644 app/web/pages/skills/detail/stitchAssets.scss

diff --git a/app/web/asset/font/material-symbols/inter-latin.woff2 b/app/web/asset/font/material-symbols/inter-latin.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..91dc3e8529921cabc74fb1dacf5253260b9c8cca
GIT binary patch
literal 48432
zcmY(pV~j9N&?P#yZF}Y!+qP}nwr$(CZQHhOoBMwEX0yB1om6tFQuU*fuFlDElM`hG
z00j8YdguXA{&Rr)5C8z(ZT~;^KluM^SfRSufsMjAEB1Wissf5p7JM@QIbAS)J|$%V
z<p5c7GJp_PI%`A-sDLj1fC3cga5w<^z-(SXRv;4KcnlB%&`?_N0uU|h83*!B;cm6?
ziW2M22#ETdRtXgrA4oQH*S-~P{xcaJ$w9MI<$4>e7h7;dk{x{3ufM;)IT<P=bEVd1
zP(X#1i*LUIQ&T*RZs|lRl%R5?7(5!X9NE<C5WwuQL?;c@H#q3`<E-ET*_U*50@B$+
z(X3!|kSasjJkun?JZM&W=zAgCFiOD^B>r$|tL}W$duF9x_5B7VJm)`iQwa^c3fdC0
zaR1$AtF%E-yr-wx`YZSqcojv`q_UpEnJ$m!DyaZ-bIrDcr6n$5O*Ow{2(*2nkq{Dx
zFVS|4cf=72=gujxqF^aI+7y|<gRW(fPfBPQv7{;Vdxr9LUMYbxQ#7Q2TTdSJ+F%5t
zkW0}Q+ESKNLk#Mj5!Q|4iLF|-Z<)TOu`9d}>?MFZsnJZ`ipQ6q7`AU9B}Qbf#{7Vu
zYgugrpEip+v5?okK>VuU$>*|i(H*^e1;2M&c)->x@ZofE2_|c}yQH&$&iCJK5|tg`
zgsQO>h~0xBb<G^&#hQ$sL@B~xgv#W3U?Kux`Dd1S5d~r4;*EM{;XE=b!RvnN$JEI3
z@NS|z>Nwvf<;Xi~szO7b5!nPHMMqUWu&<u3w!m~zqKFG=wg?2Qjb;-;GGU^HYpt)L
zCFkF+^ApF3k>f;d<t*l1k{aR=H0r_;YfWAz!Aa?ju$Tx6OKNve)#BK?lI8OFQlWe^
zwIZRI*5;CblBBDV;W<2{ghZl&1j0llM2N$Y8v(S*nN@n5g*CB1a%0~;pH?t)c9(x0
z{QmAs>MEtHH$Q36#W`+=xhEw$ZXw#t{PG>zB<}tYXepA3qgR}BuW3hnGnoQgn1RW+
z8DDER$by~nW&cq3x~CyOLiUtUkEP$w@_xLx&PYE*TvbS<UAX)Q0S+D&hC~~Q=>xyZ
z5%K8Pz<X`>@b6Y*TA{ia`XwBNB?}GnQPtPF==_Q<?YJTj_GT^#YvRr`)is#@61mE%
zCpw%tS927dpzyeZ5duXC5s)ATfI$GBy}w>md6*)I5;1d-r=TFwZ~dam4bw>I#q}?-
zI#0v?RhOF|5@W8Ps1?C^12x4#sIW1EJsu0_gNm-(el6bQ^%^6Ul|B$3e+>&cf*%8V
z_2cD>VRpb516~EN@WZRq%0HXrjcLe|#y!GCYqdJ{z&sme`AkUp@3Z7-p!3|QB>QsI
zlxJ`EwWn<I1B3XVIaT^e%xagLbo9rLXpl~Uf+QpI;Qj8%DQ!_I4(qA8w#Ks&q4N<)
z7!OBZJ+Rm=9uNLKStXwNX6`dq6cX_yrP^$?L#??zDUn26yHcyzP-}yons(xre`WUl
zyQ{vi_{2rbfu!bon)>+V3mC3Sv(g3f4IUR}ZcV{LZ97<n3GG#-X@DMo;A#iddJ4}s
zkIE^)f*M)gDCt!{blOm$`1Bf0e&6}!Szs<W?Mugk7Yxu5#S|UD3pIdfXK<BPlK%Fo
z&|Le&!Z!xaG(g<1UDuQ|-<-;ci-;%77HBz!q}+Mi=0^tW1XP3#PXv?)ELI9)9K%Pk
z2s*Bx217Alq*UCDzp0k_08X~lOy*u8L*?gC$Si-fG0bNRwvT#fZYkT*3P0<~5$wI8
zJRZ8}9oxAw@%a6FJGH*GzNGl|oF_%XH258?r2NMrEZ_&%X*E+-?Lc7E4e;BSSNeVt
zecD02nWu`l_0b3{4gj}r<u<buqu5DS@1jhV3=Q=NLLes(UhJX`2xUY_05JBKovJJ+
z*Zc4nMSIcAGOI>PjP4PYqdD)X1Pu*!ARwj>F!*6nqxTc#6&?>MF^wG~pFZ~3dxI`C
zUD%hB#q~!NYe~5*IMWn_OVWU>jKqz<+uYCT#or$FC=m$UA7_B^npT<j4=;d?#P3u@
z7ovb-j!>1{4YfXM#jrsgQTj<Bkh?^Rqy(Rl6uhS256puwbdo_HUGUobWTjTS!%4-{
z6I}$=aW6gWH|_3vm!!FI{v<y<)_$*YM+`S~wbDw2ogR&lZ_weMKcBX=%h%}vqHG@+
zxfpYnFqt0-1!?TdTghzeTl<VN)Q~z@4(D--Dr@Dc{V(3i5^qou9fz@}A8C*sIoJM4
z=Qge)Qn{sZdkS&YhjW!NFrQ#hWn!>z3%c$s^dc^Vyd;UJ00iCm+G%xoQn6+Ttll7W
z1cC{II2a+uJQ#t~0B3Lb!)MA^#`WvXr)d7Jd&9%F42J{+5fKtem?Xys!X+}Tr<NSD
z3a#!!BwDgV_8R-@4%es^|K2KXrL6B55D=6jm34rqRr)nPZBo8c{^;fJXK^lSpm>L;
z*CaKDCQQ)^a)261L=a+(^NA(3GLl$Hw-tXwS<~ra$TnWVPavV|=WX6C;Ere-F+@J0
zNj^nv-e|5M?K5A16C)6Wo|(}<As>WZaTz??1teMsEPWq>{$RlXsw!+F3D49|G(AW|
zU-l%7LkHsYZjm0{DyYH&BxSX>-+4Je(rt$#9H0s~O32z0%ewrab_LeJR!H7fB&ZS5
z9?Bk~o{=Y<e?I_pmUpA82jG!!q06t8_eG52%UACg`);HxfMXx;9#x(IsMxKy<@biN
zE&%8lbim^mvd>=aB#7GeZ!dT2t&aWvU5VOOFs|1z>gl+8i|S6>SM6kH>JHcM?$Jwa
zx9fAa<&Dm-U;C;$hOhnGz{KY{@k#N-DAsQ(&%M362S!@XFVW$on>s~~*2D2bDfTM#
zs^IFu%tofRw7OJZ>Ex+5e<2bdfT<Bt5X7OtnITH1k)(XDN<~U8r(!oW`o_i=8qOO-
zbet<YcX#_%_N^%jzT|mf&R!fi?(lsv@uQUM=P8M!ecLjXuWU&JmqGD3ogx&_YBouZ
zkjS#(*xD#~M9%AiD?(kFjAJSN9cMO8jL}g_BbYNEKDMa7fxuV*BLodE7^bz6gT^`p
z?yChcR$Q1kwZKuid=Rx}P*!f1<?Qbnxy5;7RY2N$`@{}G#>`Vmvd;&*Q$2C9mn$<L
zZ1u+8$N(>F4EZ`I7*q=+f}OFXQO9CZ@pi(vP&spbw&xro^5yo53wjSQ4j2F=U#4B0
zs78qkTQEU6Y{c~K{o5X62zi28g26g<>LFxNfAGnJ!ce-fvGO9+#0=CBv|s^iT2+if
zn_vO!rob8wfdCf_7ZpU`4hunF0Wos^Yj5=8;Kw~8Zs5dX7e8bQ`qmog)SUkeR$iWL
znSyI{hSn=lPXD;L;x{Eqz853rZW9NBjGfi94X~x4BhX=u982%?tX|YyqQN*GVvtmF
z<Z1R$FtFfYAb|n0lH^+B0u;Yi2sQMAK+~HynGbx~dp#Q8<M5tVIr42X9PKR>rWK&l
zj*LC<uO-kz9uU@DyMvS)UTpsmT|ChU2Mrg@tnQr+|8IWrPZxS8?UT>@OU)ak_qDy3
zllo(dZ~7qb%|NOA+Q(sIXx432i?(BYLv9NyqN;O!L$)g4aT_^T2=AnU2gN|`cWeZG
z^CW|*)~kgjZ@n_6=8SPKNFd3=gj#y9wLnc5kF`umYb3UmMASQC7_WwjIHqyyu}{Wy
zopAOs;z1N$00FM`$NGb_jdS1o<f>K6s$zMkzb$BwWlNaYx-$Q{UISN3Rd&r;;A2u<
zU@}IET2O^5zFfTtl`c*?5yI4ylHM}}&BHo>pt);i{sNg<FiJy+Ln(dLiakSo(1Jdz
zfq+g`BQW8-jud)r+rr~ltt3*V>N51Qyz-E<vT7PsB8PSc?8M-G_$b5L3GFC`rSbmB
z2Rie?_u1f@;znYUEp<FFp4aIRtl4V0b{&hjlX<*DA$Fy>ut4(1(}+b{G#JQ<f4mLA
za-$iO7|5`y!#G?WGzTNdUpUfLA_Y@au@UN^{GTA@V>dPcgjiz9rT^?^WB6L@{yfRK
z%uf{)o_CzBIjFWu^JCxqZnsI(uLxUk4LR$S>`h+CV6%jV;p!XXg~qTuRGSa7uG-vD
z!N0s7N|lGZP}b~Y7<t{7OmaJ2hVG^2+T!YRM4tpE<Mv&f!Gw0yC!H6TMxZq7SZ{VY
zm7`e=2PrhnH$B!K-=HLNb_6P>Y?*Xb*no<sN&t_agt9ukvD|-}v7_zaN_BVLYh?Dw
zsCZqXU-Fk3{baosri~GnYqZ~xeq99!HqQ#E0bj27BAD2)U3cbFC;O=_nVT8#PT|)%
zLG}R!Ka}X-Q<<0nLqCmlX+}*ZG@f+Fq`5%HD{7(4Pt`Z4n5mMVo=!^~CF**%oaL(=
z!BMyLThm@G7vH0NJX?7%F16Q88WB&;d~|r%W_FATXJ|$UP*d!MB-)KeOULj3z4`Ne
zYgyQFeTqpBVSR7~0n<rUjrWKe^$Vwe!F-s5j=t=AMLp?bbHGjZ{l%ssb8uud2USJB
zBrNat;oW!>x?rh6rLY#zk_fKP#1QVfNQp`;xN8kW!h)~(#1>OiR;_0uH!DbSQLDa}
z?1bW2nhbWf-Z9r7y{|SfQ9xh@HVkG>nDiJ7T9A5;SKcc~cJ7~tyFdD!w<jaur^857
zmK^kXJN6$VC%wa0+gb!hSB9|%cZn9h!wwLuO-|xMy4?-c4LinDRA$)@UJ-{Qr5Lf(
zNY*_PBoG=}c^9g&*b1?j84j@xVc0aGnWR^+AEn0w9)9&fQ~P#;FrAOvd@y4;d3&k?
zZNj!0X|#+_3wK9+Iw^ahWhN9A?))-iZwqrl3J}8zP1IQwj$A&wx!7NoG#NJAYr3!*
zUk-hD<DbnrMc7dTkj}qF(KBmbbw+up{cHF7s*DBBkW2?80jpg}1clVkiMNy&R9)g`
zyjYZMAMjqB<#hFjcDd^4ARC>r8U}xICbUouOlMAYr+q!#U_@KXX2=sNw5bFwi?ecL
zp~ed;)lN9`OTYIgJHqxAtPJpYw*h>H{$Bvv=5HaZ%Z$mE0yS!~<EgfvjXl$qoE%@>
zG97Fiw~rY39T2E0g@Vo%k|^Y-W*jZtV2u`%WQo)d3uT1mYN%1Qw=ZI{6^74_(`JGK
z5XmfgQ%}gCGlbJxW)!;TYZHOq?cqEFi0gcLYwLCE=$YMMT|b0)kCH^y?G+i=j{H}o
z4A(gp&pr0t%vINopABn5x!Vnc5w^YKc&!GsfdHKx;0vdhRe05y1VPledt_e&lQlX^
zp9DzkeC!&PAIYk;V@bn0Ha3zA{De9EC+<MyZNJ=Md)obd>^|ZJyGA;`PhEUZYX-s3
zBuxMEOGWa~j5MV?#|&|WzUAcxQ~}hziO~%1L#C|Z93#|(J-YL3eF7uyyG@Q4{8}v(
z@b43})T7^A|A6|AaEW}q<`eP?XX~TgR%pJtdQY(3gpfPON}@L8TcsHzx6KL59XHk!
zrMe;EV92mYZQ?H-RwoU~Fhy*a1c$2vt<wpjhBO-mLM8MPr%LS<-RjL=q8sX9Lz-U=
zgmLNwZYf1$N61psXoZkt^z}|IHM!t{*H2>Q+S(}8^Q!53iYAQxb+UlW#5+9k;7+f=
z54AY#NpClT2}_}GuFQ1C7x(?|3*weUmyna_7_~_;ZnN7z4d%6J6_vAWd(UeJHXAGs
z<D6|_^EV596uHa3H2P`Mj|3tfNpLt_jgF&Z<KdYWkQ3?J;!$>RaU|nmh6ucH?3ADS
zmwuU!Dh<e%xU<Z@xl@nlepA3l#J9MRTt#b%o_$k>+>oD$BEQ`enWn!rko^riq_Ovz
z&3y8D!{`pm^<=|gU|U8{dOmSxX`Zv`tbB4@2b3B-e+4VHG5+LGv<l+l0i>7+Oox;3
zS}H;#Q|$t8piZb7mpr|)TP(Z|DEyp)JX@@ZJ?r)gKXvd4=?k3~GIp0WJ>e6s)Zz;Q
zCcoGCXoXE2K2ZCYZ;=RvZ0hyCVB>*IX8J$^U3_nThU9JS-*T(_33=ZCy-m{wm0ei8
z#X8-&r!a(Lj`td2CBfw)WXfwFmyCu0BcV6mh1ur`X&4*`CZVBQ46vUY{l*U^=xR&;
zp^(SX-DV=<&e83-C?ZAmwQzMt$lpHEsj?zWMmvl9T9|8g>-qL9tf|yd-WVP?Uxp@+
zRkSwV@zhbs(xb|(<<@TM#JOBhLon!iUbmF~^Wtso3&9Yro(tIHl*u|`gj|C{P{@2D
zSk$;a!fE4?UFZ3xESloa2F)1w&L*i9InE8P6CSh{XHoB(=(`{+4DphmT*R43dCkB`
z$6gBq`7w!E(n=iV8VumB_4oayYRNCjiw^$x&9jOX+`F)Sb^B-ple>~MT{=1g{`Yn3
zGsgX)34XsOk)LLQRS3^qn>$!n#)5PXW`YfmFM2gM^l<jmzeJ`MoDxBp7(Ca#eH>>E
z=Z-kcv?;B!O^U4lkP7!8gxIy`7Zt<eopmvkfj{~^=wK%I`ziO`p|MG5EUqE4fHz0J
zo~n%Y9jc{$&vBa9UyU8K$DZQ^V%B>{9)JnDiCRzVr^I(nvNLuCC06@FT2q0R#1bR>
z*>ij0tD@<<Sm(1SIIV>AtjzuyB*~&-r7*!JS+=ou)7BbvIs_4jjD&dvtMk`xirZ4T
zU)TMVYkr<KMr`i4q3$3Df>5jWgF?^vmZqJ&snxL)5`*5CcyMG|LXK7rp#Y<8&5y%H
z;=oT=DYh6*A;|Zukj~tozf_!JqjV&Znb4otgzRAH%aN_6K{&Tsa;l?}GTKZj$d8o-
zJ>?Kcc`;4FXa=>kBqTk{KnyHkE&3EOB}_>8gim7Hk({w{p1<)?o^&eUcFLU!*3;Y%
zfM%fYu*Fp;?1GrkRRMuR#nmZ<1azDb;DNG_g{m$F9H~zb2be8Hww`7@b}V$5gKtVQ
zj|n=8p17bt%0Gr5^hjR=U?CW9%DosoKo(gb6Ex{;T?K#)p5so>RKNu7U<y7sO&LWY
zQNqVUcaimRvftPa6i8DAk%ZD;-QPaOZ~+<Zg_KkYlsMf?uK~(gHBcR3{4YIQHwD|Z
z2AmVS-}<_ol~lcrtTfF#U&&v^uHO{9aX0h%vNr>^-Wq#oGgbzFe>n`JHHgqBx>1h)
zvZ=L+#Wt;X{ultNbnei3jFt`dsa+#jx|+_5wOCqSIoeQF18y$b@RBgy83+!&cD0Hs
zY}rjkBlsaL^(2fmXbzSNMh@-NiXyhXoF&LCQ5pl@p(hwx?WaKr#09>BT`(>@9S_l<
z0Uv5XL)M%=IE0W!wFR!?v9b4RGIZHlMdlNN6cW@2#flcgmEp#IcAA5c)NI6+{(8~h
zBPqh4?v@Nez4hCRkJ6Eo$0_&C(l=tN>Mu~St0eq%C4n1)5``d4FdJ>}`ze~Gcs9OI
zf8iO=q;Cl_YL1!xBMAdE6+CqV$b5sXhvLhnF}=<0xl1bXlMViwkg<La+S^b@mA%{m
zE?E^KiIWu^^+0LHAhL@Wh)HIC0&E`fKA~&RW_@CffesGthb%U5NEK`q?$3D1?2X6P
z11h_bcAC`wakHET&$CTMRl)RyMxb21S(AM(CBEY`yUu?IeJ?R>gBQLZuDc7#KdCpy
zx|@{$*IfUFS0azmH?Q>}4(02fO(cbk{h&&~9stSQO%bxS?db8c=g#R)l>)o*o~Rjy
zuLol+B^-xO0#oH;S*HZGtfIhEm&n3pBJqqund_$s>~*%>MD7SUaf|_3z|nm>cE?A2
z6jlbK)&wD9t?&sy%#xhJ14XJHlp}uYZ#`ZYiv#k|M;0kYGs#?o;4SvfO;Bu{8Wsfs
z3&{Bg<Vs|%GJgn9o^AM$gDzM{pP)dT9S$P)tDJDCz|r>ThjA9rI^1N^`>rN}1zw7^
zc-?#*;yu#wM8&);7k3%nwY!G-T2pTNZ#=G?{|Yr4`i@K56t)*+mPH(hDY!}<tH8!)
zUIIMh?kG$SJdX%m2hn{k`rtR-poRmXyWsfn^P0WB2V~pffe%(nzg1^F`C2Yqh&0)t
zuBLUFNtVg1t#K84t*hiExrwN%DyC+zs(}ydOWgF@_r=Ak8~)90I4645M831DcAuw4
zBW{F%FCUJ%T}9p1=Z8|)G3J!R?qR`QXLsV82y$;0s2b<Cs^Xn^Qxyd#bGR9S8QQ7X
z7QcVtaJMj<cdmII)nl3nel+g*R=X8=J<fzw?6LUFy_PtpLMFw{<U8qW<o37pq_uUs
z^Qf{8ze`{QzvFnV`&D+_={x&P>IMsVwLPDS1#l#j(n)o?an?lP+9~HS50V}AvcfFu
z>iAs~ccf>TzfAMklhfG8$Zt{=spg(d-4&_NE84+f;b%9!Rp(-|kym58MR-Ee)^Ejo
zG*xx{Z&QSiBQtq0RR{q2?uF$<#2_Lu94|i+uDAIYr@7}JcdH%!ME~9=ts|tiujm!X
zAu5*xr}xGg%%-2^43F0~3_azT9-oe#xj9X$=b%J^k`@?81!t9v;KXlx-CG)@qoix@
zNLx?UBY>`8zN#@QM`dDb?~M=^g2@-_5|M$?HpL&*hl~IkF101ppFd`YHBGHH<Oeyw
zWLp3yFdd@W!g6Dm6)pO5OpGt<=l+8xov0-ZbZpqy0uXIdRfSl9oNoTCy3|DH+jj#T
zziz0%(P~oq>fXwi3%y<HWFZ$Vk;!wEs}xOYLHo9joMYK998}rn&#4=hly-iOlTQrs
zW*$#y!;_u6_PsV9J?RU1_w)=1WTkI?VF>Jd19$$-H`!FIW+=!BJRfvLgG)g&{Z~PG
zVc+Z++CGz=yTlaWjb7-WY!0^rx@CY39ak^P`;@I!V%@~91o?e4p4`_;ie%um{iz`(
zK+R1-30jW#H&XEkWF1qw_2bL$`BHPpAaS+VwZ+=WTol)cWKm7P4X-cIgIYU#J?#^^
zag?e#&TtfvoaK{eKrPn3xGwQ)ju87`l1sn#<wKME6P5(_!hI`AdcB!a{cIh7`W$Ai
z1|be}FZfe;F7jq2J-8FDsc&g8hrkLDKkQNe05P6L^%Enn7Jef8Lbrp9WGg!$AG;(l
z8*8<HomkokK)!SC=}W-cjlqKhPwBG>N<IE|!`Wul8+PP$NJ{?jaa@0gid51cP0O2a
z4x;vQkxfa3lFJr^F&Y={YAk;;I9;g%x&w<CU-7GW-VwnC5?Gj|eesMB;3~4y>eJe{
zAliZw6#cKrjsw4C05km^kCuG&b1Ma9B<8goxKW#lnayS`;v0h%!p^L!xeHMz&@jQi
zE$|yPz{8)5z)wI`edk5&nMt&zxBqyydX5CGnOnmG?ve8ZCC0cUjl22>B`MgT)IA!2
zl>fjQtu*_z{=m<1VfBhd4h7x8lUZuGz~{T+$*k4aJR<}CLirq54^t|%cjPGyP1Y(U
zb<qX2@Zgxm^aEoC7o}Ejqkv7~o)l}J!BB=FB_?o7WwFSgM(Rz)3a3}w?U9YogR6J2
zXZX#71Wra)11QSeIHV0eX7#PN4`lr2d-s!VjmEUe)Ft<l(S_(cOjJj|WpaReCATHL
z-=x&B|38j;zT2yW9%sJY3`3}F(1|NN!T7vYFF%ZPBMjXK+hkz;=-Y9JI{I_9sFb|~
zfUP*g-^aJ?YxNxfCcu7aM@bY45&(dBT$pJYh8Co#_91fr1~TD)XZv+#o?wxS_Ardt
z%%(f*Yr|vM-%W)e_Wu&Cfn>ap-f(m)yN3axIKtY_=AIWnTpWc~x*o9GVpM$XrPHfE
zMuyQb?5Bxr9iI8x7WR7VQ`oySQ%I5X*{peDb@eA>y-0oftQ~D3HLP@<4zx7{zx;wn
ze)YCmMtYz%j%~nGnZwHQeF8D+H-)Oj-+QXB6!(qkk&I!NFA4m@U;EpyF1crihZR6m
zF+hq|?wC-5zYpes)7xyTyj}u<d2fYj<XzmTI$y214|Sz4*}uvwELLeA_KMKt`21Cy
zG1{Q%elP)HJ``Xjarr<b2lfG9i=apG8;Yp)OYF)JF5D0AtKf|x;hON`e*!Y%3PGV4
zq=_+%>bbsozkk6_5%F55l1G>(<DZK#0?)hN{uVy)1fakS<3V)<QHb|Bjpl_IH*po`
z58@*$V_h$EMAx#J*>3z@<(<~JS?K=pLoetr3URq?b8>8Nc)u-Ex^6DfdG_8}=!vq`
zoC%SdBWhQ@)#q(j&d=uRl3L&xZfq`4)_bkidvqU`tHsDzwc$~xN7|;;zsiY3{o!DM
zn@>8{N5Wp-LON{NA5;ik`HzlP`ZP;M<+#X4VR%^&Y%OYbHu%Jx9}u?<$LL(2L|nPH
zTD1z)Y#wT+`lF{dH=<frpl#KtUBS`p6)wbp^f##(R38`IG*W<Uj4#i%NJNR*no60B
zS;JCmj+s*@ZB~rwF8BN?jerI7hDHODl<_keLT@<mI~~JxU`P(E(2vJ}ha7Md(&=88
ze+c}R7K&tmiA0HJ*@B@^=LUd8JWn?#&ofSCNF+=uW;#1!HcC_{O{K500&U&+N8*Sk
zQyAQZ8-**H%tM|${~VG~mt~jMDUwq6ea7@Q%`&K*$eq)vDb#iZz0c_+d)*RZar1ke
zBQ}u9%p1uyWb%x89E3FJdPXfB@+83b*3VbQbhz$?KVKRZ>hUq_12CA!)8XQtiHrC1
zFe=g$Q8Df#!)n|^h{A0f<s*!S<U@#-Neq$caI#`D)^lhzeT~n?lb8rgicW@Wb<1Kh
zCs!3{!=8LjcS0VKWl5gR(Q}*znq!zQb0if<i(@J{?2C^C{3{_W4t-+ICdZ^CR%HC|
zh!z_cYhyf^+N{sf_T)q=Y2A>y;BP+*`SCKJCW|i`ZB%-J5hG?HBEj%{g3Ji$nwDV}
zWz-YuTVbwJG*~C3SEjd$IP`fk9U7rHQ9YVhB1Yrh*7Y}-aj{ZX6?y-3^|Q*hZb9BS
zV6Z}2p+OLe4LW951lMFbB>1AUf<qH6HsFu~h)jnjvWG%t())G~a{?u_hx)@F7RxkL
zS2rwT1SP~VV07f;@NRfFei)Cr0FhHuR{?FR0}zKLJlWen+SiYGW05OK&j2DLqGE~}
z92;3j4~)|p#sG{;(aw&{P5D&sq)8)oMQ`f@U4zW7TeECZHFmQFu}DTZKJF80&Hvrg
zD|9@6DCQzffEuR$q)QMb_=nE{Q?d5>OkVjMS5!QWdHQZJOD5s0e8A4x;QCaG@zMgf
z;`s1+)st^!8rzy9ZB4qK4aR}I->lUQdve1A)kW{*xbOXSXo|aEKJs}qOzCpmER2t&
z+gz-*Qte*}qM<TU(Z*C#P)alZx9-AwFybWk^YtSJav&nYCB!Gj4^WboAuO@LM9EB9
zU2XAnt<XSeu>_;l9S%vwlR+RuqQd0(%VoOY&S0@PF?yR$STGoD2a7G3Oq&qmMcVgq
z(f?_<PMD}wtGAq1TH$%Dh04UK%*uQMb4~L_HQy4a#KP;>{4>`>l9v+$j2S@M|DU$!
z35$HvB+eci#1Hgl8hbtT1RIZDN}PulAt}Dep8&f(Ux{ONk1BHe7VX<z>gee52hDmp
z4_f0H#e|<eAUx#!wyLs2bb;A8vVf?vWs9e3X5X&UM+UI(O2@&J4@z)l%Ir7)VW-tj
zW6sZNyp_YKc=R#$8He;EJD}N$|6j2!hLk~}5t!WRBvK5N0_d0M)&wS}mKOYdiasw&
z73U<5`pw*~Os^5{Nmso_S8sOxr(Zitp%?*+n|Q%3=0DoZ<{+OTUf)#)C!dU#mTCA^
z?n6J`jlc>R&!FiEDh*XFqnc|Bx)h3!CK5K7R?4@5pH`3YDc!dg%fBXQs39?gbY_+e
zUr6h$bww}{O0;D};}SbSjz+!3=zu{Rwp<wpDPjISMl&?I+b%mM4Wj`gECp3`-n`(F
zO+MbTytJtWu|?I_#m-^!dSTYDhiZ4iG-D!6sWngNh!-M9vP9K+9jRc6*+KZTi|af&
zv1cyxHD}s26{7~Zwe1#PuJv;dgpz-AiUDI&6xX*-ow*bX)g<F4O-j}KJ_h)Q&M|w?
zxsXl<&j++W6C`Up^cqQLrS2C|={-6#ezzPs*(5d%+~r1!ti75IO%*9yd)AsIcWSf7
z#krH)TFR?kZ}{W2ORFulE;Uv<SDJ5RrrQWb<9W>0DA(&w`*i&I1OtM>Saj1M$RSzA
zjSx!0nN*xeoQdg7YO{mZPSYvIxgTii<_ROI>R59L{!;<+-hRW6%o&7h*wJK7BbHpl
zB6C+#cqsnV0SM9gAco>NB5)y53Kq^_Nh5G!L+#xkW7`f$5Fx`Y;|2CODWYcd8rOCo
ziO*xn-|-gNn2tRI=8Rg^t!VtX5d9Ve$&qrXSUCg64e&jVj5z-L`Tg0!{}rXsj*u*3
zN~duxUNm+LQ7l<KhZRlQFuZB?fCqgnFS}M&Gjyy;NJTM+Nd*uS7nT-`OXjU>Lkc{=
z(;_c(oTCdX5O_H7@1&s3an)F<*<C<0qp-|TqT+%77Q=MmbT8~OBg$~8^sHC`C5QV`
z6-Z!Je6cG`DkYc&`<gAV`54R2ZL4D@g+;d5T1@xFMXJ0ihuWlkuCdx_54dZY8eLF*
z7XpeCND3+DZ5ABmNOY)OLp8+aav<I<@O@pE_a#a39#HNZ^6(w!u*&^#yS`a>VJqxV
zn&W;Ol&b4~?PJ?L9m|I6>2>q@cNFHui&f{O7%ARIyG9@Go9ul{*L{AY&dXR&aW#u_
z2LTeXakj?ecNnYRR^IxGvX}D>!TGML<(>9|JEYObHP&>gIh~4JjzOv-u7yWbC)e5w
zNZF=F_Qgf%)xHPY;}7Ai>)-v3QHq|Q<r3lM`WL}<x1f%8aprMENs^Z*KH6|ExO*eA
zej;H96QFi_$UWNo_(dby`yl5LnhI^2W2Uj(OlmJoQfwSXw-lYhXf_bJC}W@B{gXAC
ziYq1?s{1q1t@Tver&qKxeSyEiS01U1tt`>ARkd!C@fZ;0`%pPTloRYuJ5qDLaQ#Ol
zpG*-sUk2a9z3edV881+ru7)?vPryE`s9R7TrnoGovF-kVOd^e!OGP9yxooj$CZ0uW
zR4N>iL?V;QA+>6~;dDHm(pBC4F*&Q3uU|0e5sC5-oDfQYf&Vp5I2n>*qEfuSog*T>
zxzW3{rXt)!PGzi7Ey?~)+Y2@g`;#>c`{JI9#aNgE4wXvU!PsC(BpQWRFu9z;P&6u+
zKq0F`)fED<I)!>sO+(3xQPt%fp*riSDn=X$F+oQ(&`97oSK?ZVA#@!@HKl~kSMzXD
zseb#z2=`8yoNMJ`*16Rw=S~p4D;U9iB{S~8I6Ym_0i4PYRVq=HwC9-AR9h!30|OZg
z0K{XYIOKOxdn|L*S4BHiR=m>EB(j?RA>AMq(Da`5QMO|y*{)mu%&M+l<wa$u#S%(M
zM`9Gu=y@ZFzkT{sUb_iA`LjfGjigu~8e!>tBPK{Bxqm)33m!#roCti4`y9xE%M8ta
zPrkg>bPo0eLykCZVRbn>Mm>I+EIWY^za)@^9D7KWnk&u|X$6C)%99u`3bHpBtT~+L
zB1$}L(HrX$f;#<;3aqSWCk{lg#*zdj60jKrD+WP?Ub{EXPPAbMr@tWpH<pM&!a@Io
z({w#}IQX?c5Qc|F#1Mx^zXXO)m{fGx%7~3nx;>bISVCY5`sP%A-q25MNkAa#+Sm&i
z^k3q$D>mpqa>pdPm05m)s5C1rM3m-kEV;12R1-~ZlxCW6u)=&3D(Q95M0m7;Rgf%5
zbFg#gY$3TuQ5dETZ#$B)Qyv=>Q##@VT4Q|PmUeEW;i4Q$8GT(3iv%Fd_Lt$P<_=3%
zoubU{)=0`EhNRPl^erc=0{<r^wFvkSWxPmPI9cB6kPk0<t}w|%alNAa<}Ool$lQ)V
zn_ur4a0MQ4k%aUtmmy9oW~6_TL(tX<NTgyzBdOvb!fb+b2VR!}4VHN25xWGLa(Ml#
z<yfH|mJ}6&_~90QM6{uMtyJA$tn!>~ppxbG*u%mGO;dv@LV_UaP3f>H8TDVW6Z}Bd
z=fg$pa3v4^$tML69BTENZGSiZxP_jz@zq=rr7ou#yD!;YX`jRRS5Yt$P+gxuK!!-7
zI~W>2UbOC(+j&Ox#2pnBbH73_IK1|zS36RPwL1xALVxbiI|R^o)-g#0w@9o><wUAf
zO)cr}N*R7*3^JUO^Tx?XjD<uBsM1?Pg6KwqWPI$Gur0eT)-M2@m%pL0m5k>Qs0~=t
z52ogvs6-jo7L;hk%q854za*paI+QwuI1{7LO2OII<uEiivn03#eru_(ppoxqA(e+~
zn$*eaOx5Zdk^(H?k<P6v(L?i5WEl<Tt_$=|p#|e<IU4YJ*W&6*K6Y}!pdmjkfrWyD
z!z45%%Ra)@HJNlR*DW=>0*wxs$WRMpkjGLgF;k@L-hz#`iWksNMISG&!et(;dA>-K
zPBE9`D(seZHmu``hP}eKZ)nyucD6Xg0&;fp6Oaq1aa2RWFdsECKhmZtlLX`8y+Tp!
zAJ!^}@Nk^AvZAcSSqT&CutFjlzv_u^5~jM#pOQc;@dmx#Ca?hs+~w<y`qHVS8;S5A
z5RW(Ow%7VpmodkSUkjY!Qkz{>1(l;%dvi4ukpbpxSND>m@D~_m6{H<$u&VldQpf{I
zi722bM&;B>Hudb>f*7^<S&1sS!JU-DB$h^vxJ#0!)H>lEa4bNKrjjKRkZB#m(}^Qu
zYcYojnZ$a1Lqb;3!1IS?eXmk{uT_4BU%e+UlzUU7Z{AC4z5`;z1fOFMVy?wrbhk`-
zkHKwcjp!U}n6Y2ai=9chXXb+eDXd)+B9moin;)<=9iJ)x{H$180$OTZO{jJ6G*i_V
z3I&nWwC|!6e~sEx`KQ0r%)1*zaUJ57O9(O$gYm2lk0J@(-2*^5r)D=?Gw3?zHQ+KD
z7od=LZ;;M3t!pPlv23$gQq%wCZ}6gyT!yC4QmQ$87^kT!8dRnVZb%|3y{i>_o0NbE
zs@MO7aSt`0^D+MjMa;`ErJy*%uOurC8Y@PS1;SlY5Qj03%>$=o+BAw6WODBDPh3({
z_p!*Z$ZNHvsA${$Bc-B}M6P5LJl}^L&Rr4Ki+vnfMg*5oF?<+CQE}?L7dJnC(99r`
z5toU-X$lEp?y^?SD;7<O9H~xVD-?^;L{+T4SSS?D0NMy92GNV-j7a+M%z#Y3RZ1T%
zfLM*rr2Friav+Z)qJScR03uMYPJ<RTqEC+jL-JXW_*KAaM%>(pW@>6mA^`-DUs*{-
zM3mBkla-N?p>ZpjB%TNYz^|gBA}nkxoJb<^fA0SyfhO?%KY{;}K>l|ShL7Qk%xN<C
zMk0q>VnRVEY&?NhBip=aj5~tA^uw%MEk=?-^~kH%NXzE-(UFOjF5=cRlk(hJMMY9Q
zZVe!gXBSTnoRAPu08+L3zYYKZL*TOD)s%5Ghwes@hzjzN@w%WFYFNKvDn*_xm8vv`
zDGWTB$`kFSQbFz92Frv&`va3y4nWrF1+nVMEVSQ8$Y0PRzI(N*73nKv&lU<b!?6G5
zQy~!g|M`c3427kb5V<%X?-)lM429xtfJjqkuuu{ePj~<)UZza6jV1%ySf)^}R*48E
zP!O(10l>-va8(IE7>dNaL;n6?;7OP3ulGm6;<5wD7aQy&$GvTqJ-jc0c<)|c;qp=Z
zB;Z~qPb7o_iyKP>0vH(P0+4tb-&YWd0AOnxhd&qw@PkBxc!FZVudh{6Per=fZ6)J!
z==JcqdLz_{7<RATwOurpiynFvnz1bY?fCSG{$Fz=fKMU;jQ{M&Uqvv0nw1U%0Typq
z3}r_ee{I~7V(K5t7STdkRnOOd;(MJE+XA?<C!g+{#rg170!p;Poke*)IkGME+vns@
zW^ns(?JsBfw)R}s85|dn3R|}{+2E=Rfjbt+Tc@IKgw!4mpushy)`=b1g!aKRq}En8
zDi&lBvhH|tY!)xK4ySQa`G`D>V1;ccdEOVxZ?T_8%9xf*k#tH;mITuS)tz~{gGR4t
zFmE_)Nu^L}OwF`3y*5oV=c!*8cDSW}{VYTZ#y0zPVzn!O^+eRS5XFs=Tt90N5(XJk
zo3T{psFaUIaT11P38n5H(@#)HMC>2NpwQ;;$gdqN)|po|VNB8&2dD-c6)xpBl0_mc
zn~+5|4#~VGis1iGjgFg6DVwZAqrerRIe`P?&r6Gw7=ICl)|npNY+I<Rte;EuOTRRA
z=*wu;dd)%PbUKk$7rL#`fxt|z3=pv%|KDDqTTL;zE3G_FY<?Ub9~cwVg+MBn**IvP
zy7AviP8=@et(^{WIoo(53N8|pkagaLPCth^OC#ltnf%QvGHulTJkk9un0xa5Fr0hT
z#0&Y|bY6=S^HWulwOIazcrviQfFGOE)L|{$nrpchyA^JTqoHW}3YfbpNYBCB>`u3N
zA@u3%?S?cB=)+@!t@lS~@8y_>|9r&UkMkyb?|J1PS@NwZ3$ofXPDEi&i0z!oWvv$F
zPs^Lt8umID99NdUUC(%z-iZdTL4M$<7UD*@5p$U_b+=m`{GBlim~h5|U1^`cJnVk&
zXm(-cwGCZH9<Y9qrU&@ElS(aG#VieivywA&%+E+2+BG#Ckj)(aHr*R$W1NKs!2YHh
ziCt#$k5hoHkMPF2xAG*K*<;MN%bxLp_QC9A&#2}#NoEQCVafxYHUOJ{Vq?4ii`Zyo
ztm&xR6w{2<Y6;2X#A292(qR$)L5Y(-I#iKYEr$`PJQl8lN<>rXXb)k2iNHc7y^)NR
z_ulGd7D{wiAcJCF70(S>SPZ9G=uRLxWz5nrLoZT%`-eV*`vR-3?kcS5A8XcoDa?xe
zRQ@i;R4baUFjA~6lNF&|Oa6hKKE>kAR7$BBq2CR<j0*%x4FbZ{fk!Xl)*X`eQn4$1
zk;zXU8Z6OESN5Jkwv1(FwB$L;ELJvHemV}i8_hn7sib!^5W+)Udd!W>+I@RUxVQb}
zNn0>PuWe(#GC+}1b&;&*1mSXxPllqssyPs<G)ZBavuBEU2{Qnr)YQnSaajT8V5HWJ
zO`sF$8<-d!jwmQFG^kuy`Jv}Y_&h$2$zU*+z{G;z>$^`Uo_t|Qnr@MSV!>Elq@v$N
z)OGD3T!B2P!f{83uH&@ihsFJ@-h_tVY`NBjiZ3N%ruKbmU2q4*N32lYpp2nE^7UN0
z23_hm{A_HA_1liMFHG(^#Tz;so$Y9gnp5ao4Ca8#b+mmp17UszJO#Yja3~m5eprK%
z6$;7P>+YOR61`uDSmS?<$sB@^$55((J=jn6?l`!MBYHKcx@XSOaC1$gh!BA!q$CQ=
zX2NDghQ^h}C2xlWgBu)%UgfpWFap%HDmRf8yTVgh7O{h8?9sr(?prtS{0dX?9?=q$
ziy?|(h=M=#Wr&EOwLBYHUygIrHmI!6g+|4s%Ok_fVe>fPZzir%Jteam;q}KMRY)8q
zxK6|dfJfOd1571Zi~_>*v+wD>eaIE;DvScHw1F{^{co23^IHP3ltzX%I2baafO{O@
zEV{wi8_SK-#g*g=JP}zwpAF@<ef~NamU6<-vuEhqJ2_FiYHVF_%<1(}$g=J}N}N_2
z5p|iT&B@=*Iy@4WU>uxc|E@o#|1o+kfn$a@%KB|Cb%zc&?*z&$#ib`|dzYoj<frc<
zr(%h1HJZ5~F7sq$Y?haB%PWfw88%Pjz%+NnC&6jQ>iJv#;QN@StgQ4e>940_4gFg4
zd@aP;uG8a-&n-1OXO`!Bfq2slwflU03a+>IS%z(o=P#is&+$IW)pw@!Zt}0;hOgm_
zyqQnsLn+PI^lk3sNA~HO?a=7H<h|}cCX1xs1~gj-jkXrnfgcd4Mb>Dx2|+VT?%1uO
zQ&KMM_0M~k9t@K%`#xPZYc^A5`iFyDFP^TD7GZC~OU!}6BBE2dA=|^^ucVNAmztOQ
zo#k5Pe5GWKX_a`jY&U-=x?RUp&B5>J_fL0L=sy0l){xlqDPs)J#?Ru{XjgO$^)Ka~
z<-7B|vq)l*#0IWKa+BodJqESzq%YTHZl&XZ=k>>pul#j?AQrsr#ru1K96wELRh~z<
zW=@Lz*ALLRO=c*A<l()*Wg65EW3nT|u)MBSr{)jjY!MTHP5VMh5T)tsG%83V?GRtf
zWwV|=F>3C21N^pw;jXV`jgnq}-PQ-rUHL1yj*_BPRvLB(m<L=NMEmlUmFu<rA1-as
z#<NeomHuaw2<#(Deon^*z$#gQo~Fm0RxZXmPRC`6bO#`yZ6`&t%{q|#1oo{uFj9k7
zt~K=x;=gJ2TpY|I1QK5WKp+8EO%*;YH*LfiE}AdwHa#lttrd8d;b17SFJ{{$o1<0B
zasz6KI4DWcgwRn}f#27T_cgc`-E}%N%-qX9>Zz$06<#f;olIMD(3UV-v9&w7C;VNv
zxti$28lX6GHj|F-=YLI8-%y3-lHwaWB#7YQLc<n<q7;y@1_X`a2nlrVIyP0lVn0oy
zxfeTt)iXhLNGTmnk0(e&LjWq2x5Y}q!T-rz!XN~59{*4rG2@uO`iABP9bYf%dPUhG
zxE#3r^>C%588h#H#orfXJz?}RbCcoZ{>lHLz<foTSr%~d$eF5DJ-rhL=1dLQE}dEp
zn2fNlmr!XwheXz9R@y2ENR9qf#OuTQ$nA2RkB^&q*tGtr*Zp<~N31?(!OqH+GZ^GF
z=RLKgJOiEuO54NVk%o*$DVx9_&4aq*;K`6*R?>>>spK{99^ceb`{3#d@2u@eYWeKB
zl{nix_#U1E=M63xjVEI|3AJO5#z?)zpwbAJ^8+qGGEV&ub6264G_$%zuqWyP^=+N^
z1Gj#a3|01H*iYKFT<$XTa_zYEKkU=A8kckWr7WPktQ+r}GfVQVZK|46IZUc30VrWD
zLl`0CvF*HRmef2h%}ULg{(IquXd_4K$j&;PAJdi;2PW6PP*c%zOM{XI|6kXv4RA7|
ze=9qGEZ|fRsD90rKPfy|6e|D?RI;yB>ZY`%=~)7qXNBV<C8S2AP#oiXO=VKY6F~tt
zH=-xVZPqob7sA!Q)rvj-DNOtNg=LlHtA>qc$<MtM;~kd1=nQ@d5I_V=zVg8M{Hv-x
z#!UfNCVC?ID#)I}!OBt5Bx0U4>qMDINFWlR#G2tSxqJnT5$BggnUV@u`j}JrKHA!R
z*$sxG`|0A_e=%st{Di-S<vj6-%1*n}ZtM{HGV?g`1j1RJz7CrVP?+aa6eXEjQgo|_
z7FYEdC9Z0}GDLPqrmo{zXE5D>VPU3u+F1!pkPjwo1}s<@ETO^VtQdBf4BZ++eK|c6
zc4-@ETwA@s)Iiui1H?3&99xDbX}OOlA#oS)&a0W_gVP)Huv(j~Nmm)+4PW0>uTCcq
zl&;<%7)D`C7bnYG8WuA=tb|6>Dg2IJtwjk-{ZYtSb!oecg=5<;5kU|}R%1363FF-1
z(@jKo(<dbefnmlB;My|o5+dpUNcD{gnBl4P9glr66BD!>v#fs>X|5?Qi$c4?p@3<o
zJx#{Rp~hSl%zKmykZ%R9*Ye+5iDf)<AV$lul849#SgQ{<kL@tVe$Qlugp~5&i&-C`
zg`3AFLIY1~X%Mjcz~7VTq`#p8evmnkQWMpEds!)Cb-KC3KrQ2b(v>M^Vi!k}k4qYt
zMG-MILBJ2`;alRt;M~J<V0X8Pt+f)%&y@|fIzN*tO}X9d(j&o_eh?k>SMsgDlfx#v
zrhExS-U>J$@vS@e##fpWmFcVa{)naRoHR6QfR?0dZ<Q|;wt}=5JYbc2Qp&DSGfCgq
zng%`%^QK87zxbQIP|@6dEB=)nY85ab8ES_cKst6Wv{d+X{5I!!1)7X!ERtJkPBrHi
z<98AKp%A%Ze@U%Dh3Uo`Mz%OnIX8rZYWCA*OVfD`e5Rb6zZTJQhUnQdq068z=9^+*
z#cZGyal><WM9Je#A$-c`D897=AltO$yzqb}+#w#he6TYW@oxY^5%K`{Ca?@@A=Kio
z+F+D*CQn(?R{^(B<yFGJ8y70(NW>H(YhEQxNK$!PpSsO-eq#V3$v!NxNo=(TDm5tV
zFzQ)Gs<UJ8^OoHntyPfMaLHSNq!evD5Eql{+l%ti#Mc)ea^@)!#M!d*KG?f#anJM{
z*7(r$4)bb=5?%Q_kAZw*sIslp*cdlCBqB5jvf%2$d$cbk&7QMF#BU^mIR>#=%z|e@
zyHcCy_!zngjxfe(YI)7*w*}PgtidK)uY!LJ>c9GL8YwqPUsLSJry=9VLWOzYk(m#)
z0^2r8i3m-%g%jYOtVn^ZH0M&TvVJHl+)uJ7MJ=$548s+>m;&Qj4rCvR|BMfdF{Bw}
zD$R2%Wrk5qpz1{?xxYzU#b8q4R-(1{mBeK~5bd6riSAU)%YolL5vqLUUbXj7Z!1Gr
z+uhlCz@1HixTt-+-pkpY!{`XeO;MzeAqC6(<DHqB5DD@qsLqI<tJfTL)QyCFy{JK?
z`9_E2M3^<+PYZ;trW`6CW9iW}V@}cvAmXAd7+Pj&=5>^0daA`Wm(?$CoI9=xQVb%6
zQ)!a7#=6%{Rce>R4tlkan5`^vJVfM4EU}NQ<1F*FIAU$_95bU3v^cF942w}=-N$~*
z!O3G#1S3h4-_Ub`Wm|rDl<Ee0hwPOVV=IPAc1I?()$*OzZbcf70LV+d)@V*Udmw3f
zDD%u6J1xMT2e}_xNX3Yuf1dA8ca5tDjt{4BmU3)z1<#A|eMDV|BS=>NJuX8%u`*uw
zrpN&Kid&J!*oIOI7uY%u@#21tuxBpCwsKTApTO2(y9r-594MSE$O;S_l-xi{fD-lF
zofmdn+v63t{Ma4OQ=Hh&+an%tVXhU~RaG1E6GeEp;*I(4y)X#<`%qEBe*<SY8tKD?
zoB0zmoJ5BoXLuhMJm<h|)y`@r{s0nQl|JRd6{K^Pet3vxSkOVlDc;)nYjbB4yJYL6
zsoQ^pBGyth5Y>z_ynTf1*G4gNaSz_i4kp>f0?oc0E1~E?X+Rz)9vpWL#-41jQ*+1}
z6BYO;C8vINBsatA?m5b8>S5X$3smJbh-XDWXd8VP>*D;v?^xcIcrxwT+<_EHp}>ZY
zwQ%;#o#$+Gu9eT#Sf6>S96y@*sb%M<bdrmSeafZh3HEP-I~9qPqBJZm+xC%LrDG9h
zbY{6Y$GwK3WQ=^dxDQGDN5vmmjl&@Z`TX{#<u~-gx0I#Y$)axQ2Ge)Q?MRp@)Cv8>
z{J0yMx#5;Cn^HHye)U!&=Er}`(L&bau_;nQcDfLJ5o)5S!ZaU`DZG29a*sxdj=*F6
zc$0Y}roxN^xy2w_D2*iu0Z>9dH9+rnLYRy?Jym-&psx-cs;i|ADeYx0<6D->Z!UVi
zfj7LqE{~_+Bo)i&twz&N5$LXr>9OL(>es#1m_i1sM*rw%erk`VRJEUAr`_KVHm2U5
z?hkEnKK!Q>A+kFg7b=I9p0t89Nd<G-P?xe^AA+oRfzZ1Q(hR?q)=MQy2CUK_9132>
z=~SZj7`mlKEWJM{`*2HZU}Loxso$qL&oG?2^9uZn2jP_LH$OY`D*_=eBF{t{=;Knp
zPLGov99i>-2U+Y=r7HZg#CLxvSgLF>J98Mw+Plt4xjGUee0T#3<i5n!49P^tsf@)t
z_Z(ci;*2m~c7|cd9}Ykp`z?H!SI>P|<@G3a2g~<u#nXB_s+G(4i`0z_-gvX1xksxC
zzu9A_q3$mp$^fM9I?q9xXqwHTx7WuZ07BdC)3n{<)W+4xY83`tJ)p7SPK<){?SBD7
zK)k=G_&Z~01k0Up@ARYh8t?kG8*Rz$2@%SUH=4#xc=POI#+lvQ@#lmnD#EhPjS^LK
z+M!Lpnu=FBITJWpD^SUoJIL-WWqvxd<&vZCZNh?n0#pt>_E+T0c}g~qhWf{)g^Q25
z5AFYRG27kmsBrKuJhjrp(z)~J$S+73un%P7n;ww!Wbgi4kafZzc8~M*$`y>4X(eU=
zLZ8|_uuw{_?wSU-MdRFHGz?PLWNI`J)a0zF0UI+A&2<@w@B_8UCfunfy8wS9`ZzBc
z%Ic$8WxvxMyMF+WGxf~?*w#H8K%8fuJvE^6i#~s51W1syx>mLJ|3(}HXW1^%T9OfG
zK1BBYZ>wv4#XiYlqy%Y9`ta50TQy!9?UMHVKT@#-z`UN+z4pd!+;+bH<RKRI7x)#Q
zs8#wOZWQN8HLiE)-yz@)x>1)oa{t?&k)H3LjkEyjq%_~pW|(_>rh33%fXZGvb61`@
zS17^g6(r<tN1SyNUv#dtST_GEcP4XKJayEZL7`MOQ6#y2M5ZZ`QbNn9Gk4HI*pGtM
zfQw_v-+nii9I&*iyp8HL$QPVTR-C9*m4adRCDlEvuiU!2V%Yj@lbK}pQ_!huC(6nm
zrF_2EcpDAOACHJGeBV@Ry*RH1pEpiwMrvNdX3tZ<_-c@zFz+ed0Jba_P?>_yfJPpE
zes<*SFV99kU%7GQ)_-{G*jnIby4<oZ4JUu|oqPtqORJjuxN|1?oOAyAJ_1FV%c==r
z)I6!H+`5))uzj()(Xc9)uh%tQ8j2rSI_tFOIG=8Atz+#<w%?HB5D-JEY-SdRoo@`D
zdCFX2HdtC!C3GYWek*=YAD#hGqxT|k*~UC=#pMtG+%?+naot>gKmS?vwGzP}%YJ?8
zm|s>C*V6&D<(#zdL@(@n`_tOtOdpk3$y&f0b+M1yOL}$Rz=RX9Wt0;F(yUBYX2)GF
z*pSwsTHnG=m(3}IdyjB7Ao8H<&~{hip8Zy)Ewx*8;hf=&Y{(~j)EE`L1HwMIowx1G
zmYR^G63;a3b$v3KtWO`qS01rZY`bJ*@neH<U?mvm#_3i6rLpAiz7>}L#g%FE(>lY}
zl{F))V6J;sFRZQ@Yzu*S-M&0VfBz$32QRH39y#3pqD5;pJ7rQYercahK(xls^gaoF
zXefAMHWxhmz&MpREYY+vk<9`DvZ<X>1_w+laPPgFgD+10PP%#SMc0*+(uDbYGzE`l
zaqokYsS~5knpP~zz!##b+lYhtI+fG&w6F)fz5Lv_Ip*c<`s>>`83o-izO)aOR>mMQ
zh2|K>-uZ~}gW%SI<A(anU*xnO`zWV+&boNnzF<*fmb51_3h;D^xE3Zp?zh?=T_fVQ
z=IRXBfBFV&{WM@iHnIt9Tdn|VOVHQMY;A1&;pDTG+xg<5>2#fLDm`r||MtqWlWjlP
zG=d6$-0i&j0EPK))Dk3Wg)y*w*Xy%7aMw+`an14iAA5*iot~#0So<AWcl}7`l<nkv
z^tt0(r8CjH)9chi{J{MEYd6tx{^+`!dE?D4>lxS7;OD{?zrAMv4Lr~3Z3F~;RHzp3
zERWZh<3e%q=@F^_tGg#PQ4)%K8TU-X+1KpjOnhadJsTqk7kuac(j$mXS=p)uf=q8r
z@oVUZZYK4pUlG+$Njn}wg?xC;&p8uR6aE7q1fivM5hz-!?UI#f=ZJlSzxAVbczFv9
z8_|Ui2FDR_*-bvdke*aXC}jrhNiW)tEc;4_t6y%#M@n)c=}cufp1f}Y5g_d-nGQ`x
zv>vEsB%i7IXtvuP%3+(MlX|inX#_p?^aRO8>?E)|iriKV#gLJ)akLy?@W@R*$=8x+
zw2+4nv$>o^hXT}Oi<Ex@-H}P_NtNn(<0pkuOg@B8B~AsoaVx6cA*yw2tcnhobPt#h
zOI_B3%odKvTB_MkPE#&1>ipOoB)?jao!vmg>#^y$hzyy8?_H=a?`pZH+<Vx?k;PUe
zHXZ?`<#H1dCkk<yoB~vq=Ia=YNih-%n;%=st!C%StRMe8)R)&>j9)2L<CdEX<vErd
z{6)Q<aHUyJ_o>j4u>k06SlRo#KW#HwPfQza^slCFR-3<u&MVnRoCsSEC*WbJhoXzy
z)VM3f3f$#3RWTyXod^%7TpkbGOHNjou{#2QX20c0OPTfDY`N8w?Uq6#0h{9P=(_-@
z?98N#2VPV~Wc0}_a>5n89)Ho2lOt~~#4W2!@hdIGK()XB>o&udiHQo^kN@lzPQ*4>
zbDo^0WOrM0q7~S&dWlrpmPs+cIB`lKLnGP;^kk?Tr^0xF00Oebr;eU-SeM^sq?kHT
zEF{MT5q|RVJt&95W!(drOZtVxvYeofG$Wo?4$rKcFgAU-I~2>WLKoCMF;u*rp49&L
z)M6>9!sAkdch65(w3{xx<~8TbEF!{`t_;6mk>$u+3h;}?D#CP2CSaZIsnfe*T8(GK
zsmms#a!e#%ZoRqqj;XGrlxf6~%;1wZ7sOykiM%)kR*<?n7==DVUUY(h1MnRmc)jWT
zz-Et2AsN`RG(cr9j(Zyod(HtNWaA?E?tM26hQk{vnVQ--qOSAAUahM$Cr{gn5@z&r
z#G}<eFMOx1&q<*aB*qpJUM~D^7iBuCBpz2LT$Ai<@g!isg&d;+3&m`#pZu&4Hq#SE
z>(4&+K4pgrcUe({Tj@|ME&WvoXB~hBreZFR)ZPrWD-|68sm-va{so4k?I*|w$Cr@H
z{FKM_OOW`>z30uT340H2k1X3I<Htqi?><ZenxLj$2GaeiIkc+AIepA;e`+l+yR<0_
z7t5rw_bdf=9XZyik>np;W|yh@u-WCV^nU+*c}78YZ7M!dNY2<d;@fqkqf?cs=)TDZ
z3(r+57S<(IhMOYQc)8v%CHHY`cbHv2rO97f&#N6A9#l6q<||Kj)R@LniMd3C8l6+$
zswqBND`x^ow)hnK)bNf4JS84W*iGR0bS>d`9O*dM-3TNOgXE<ay+b`R?6xkwXHh)m
z<QjQq#i-ADT5#tQYjp7xswM$jojbIU5&c)h{j`sz(O4l3C`xFRFy)7XgT-b#GoiJ}
z&kB5WU_pH2yH1D<b{|hiTY1oRvZ;Dw#XdM$3KOr^e{nD?=^tgUr+at8zj&Vci?y0z
zZ?gD*6lV^5o=W@&&#nJrwZ+za`=5KM{=L4#F3En*JiihDb9>4CI|M*otOl>xvp1Ta
zM{(#K{uprp2Hyeav^;;<UtnG+eQ)3|7>nBMhfMcF;+msagMR^wI{36tq0pW{Il%A~
z9azYgtT89@-v68Iht746MO!a{xTF%!2*Wu5L!ECVbZ7c7p$+QnzO!@~AR9N<fGx|n
zT{ve1eRJxPtD3TsYp+y&RYO&><^+O@%_fvJBV|<}Qd*yKB&1My#0Bcm`KGb_r!zfe
zKi;j^bM-Miu5Q=i)SCC+e>ln`>h<w&kKD4+VAmFO|6dmz?aj4h5C&yp<YH5KabA-g
zJDro6G~Of!+!tWmrgE@tQ`~CLo$~|?OOk7_-C#mJ3Q~7$zY5WYI#{FgID*(;gV>NC
z(}Bf;D~<rtKxlv|4`2U00Bg!Zg;c4P#AV#Ny5P}+^45|IshXi(#S;hj$ZIR}(<`Vk
zrY%gD(Jko66mE3-A?^;hvf=F^$-#-Ep=Nz;U6^-IXJ9AD{p32P{Q|5VmT?4q6ahO*
z@SY_0yptWT^hWBg))m=a%`4h^b)ybd?3EE?BA=lU?h%XU_g*}c{OxyG-QJ~n<sB+8
z7Y}_kU%`F*v&s8vad7bK#R}ffKkLP6erT|;tA$~AWrbni)lz84R>sbiD-62~Fg;0n
zi2kF;M|L@O_Xm6rPKmyEWeW@IqjfksNm&`s<ms^(J@-Pb_SSm}v-!S4eW{cc)7^2k
z#)3<+pB@GqosWK$RXb}_x@L>#%9`LjaXXSzN@Fo~CvipEK`p;Fk)))Nk%eXPENU&B
zE43oNW38^4eV$cgxm}dMC^ytjE4}Q+j&&LM6JlM>>Sqd27INBe9aeo$^H5pYuNpRn
zqyb{kBA_zBajtnJtC+J<UbIEga`ds3lx7a&m{`K;YEKs9S^{Th_wqm5HC!AqxBbcX
zFq&+FWURw47PM7;@Ie*WQk=Gg>F!P4{qO`itaal~fwA&NR^{w&^|GtPVp5l!H}n6Q
zx34S`G=|WsHY*M9w_7Sc{-~~ND5Xuv=}b#y9&h2NVAU|bC`^MAusYjB;I_Zi)BYdN
z^;v(O7szz(`dnUhNh_xG)#S4sw=X?tT+)=3&OMNsYj9pPb0wOprM!dNnT|F2v_7%6
z`qJm}6X&zqkaRVJ!!dLaMPg%@W8g4o>JDVq3PYQSS5hdLLR~zIZFEc_z9VCm6^S6$
z*?1$Xa(=hw^1e(<jizM4Eckc9USA|=2%}d$F&N%&vs8Ziab34nDtM=|>ujpiLz5id
zvT>)Na0Oc$#TSKZ(8=uMts+rMtANufN@X6m@Ie=Be6_rve>QkudcIoJMKw@{Ml*fq
zl~qxO(H3&8Uim6DgSNhteJ;O3XMS1cbX|J3=5v|fu@v#~;QTHF5UY(IG43K3rqjoR
zb2k5YP>R^^Sk9+q>Cz^f+D-@y>z;-<WE7Vg(`GNsUjXOKS}PCo;R-PxhBS3mSN^f!
z0aNz5Mv|?Ae3I5wrKRZ)A>7kg*iMKxT?f*onoo18`U~J#kY^-u9_)+(z;izKq@d)Y
zDwEODtQDYM_YeFYM1v8;sVoF9ID`pDL`eCC(U^cw;xAx>42hwectV&Z>^jd=6rW4x
zw+pcmDnZ66|JSoIWHpY2Q&c9fg#$!WJ!Q3g@;K&7a^byrBK;)|+<PBfe>(y;-@fz>
zf=-W?dIW-oqSIh4cS((Hbu-s&L@yI`T90UQ`Gpf0)^;|+j%Ouf{ZPI_9UqU(E{w*;
z6@(FTY}qR|m73|RB2D#5cHV4>Hg8-K`&%i|J4d*a|A7A#UFMw)uoGE4tUnJQ98#)?
z#(0Q1HXglZ=95jU(!80?k-jv7cdh`tX^5~?^9Npt2hiCnGFdlGJyXnyBOf)xoD?Cv
z*=fV`>Z>4qpWs4aScF5>(N&{}Lpw9wa(C2Zl(heY+N=7<;G=y&FtGLH$6)I#AAbNg
z?t52TSFTym28Abj<6m$bl;s1y_Uo_9l3zd3vcCM5rhohpUi;q1dG6i$d!OddH58~}
zT2B$FWqYq#qBPIdq<q*?C*NGwl}V~_gLd4WWASJql0?gLfApoE{pIk||FLH$9C9z+
z%J8^wF~j5P@q^N3X19Bp&mD_pqaAYI^(-+%LxZ2ul*iR+;C!}<o6yV^g`X?R1h<@|
z8(mJgjmVF7xSkNXo`~Olx(Z#`av11!?Mm6#1=^hT&(izHQa>@9rCk5$GqJwnxp-hy
zl(M2v2gXXF?p*mbL&>Jmgp6zY^0IZkdedYy7V8GDx0qUS>w&gn+j(7=U#h)#4_~F9
z>G!m(zPXgExc2}A;$1zq{^6FTz=7yF!1&|r8v}=wqvNA?onH@+4g=QzcMHQmzA)4}
z1mac$0<bAj1p+I!ThPJdbqIvKb`=D|cAg*<@H&P9yC%C%!<+c<p}>bf+(Am$pWX|<
zCalD^ZRO>6%T7Pj0Su_qjXoOq^;*T0ulId5l>tv(yVZOJHV6*SuS2V>-bbxnGgIy+
z@aWrcO__a<hPzgQdP^A$j=efAbU%=c_SJx=x7?=S(VOsNy*GM6(cIaI(FqXmD~_x|
zs7f&}HnK{sQmH%%ZrC_8HafP!iKfw_;WTP=G?faM6b=6C7oLg$noLo|!eH<KJ2Ep8
zXGP1$GZ6CY_rHSS<}DTM6Ln}ZS)0Jb(|&~};)VS4TXdWgW;B^vfuy3vpF(3PEFcEa
zvvE$Rd$CjC8)gFB%!E;3rB8#@w}SQT=f4z29dJ=%AHQ>qQ0dk&>ICCcuCnbr<Lx?!
zF<OZ-+5$oU*=1#GexfzB-ivK{#Hd&Ol8w=xE~<XW6Pf&CTkp{tG(V}C;QLp~H&S|g
zQ#Q)WMOL{a%e8qBVqrnE?v_S#OQ$25*6Xyl$1=R#f0?ZQx4QP<2d=xkX+CgrY#f5k
z^oLxZ+3ThV3oF^DxC;Jfwd(r1sw{U(P}1cfnQ<i5rgMp9ctRP8NYEH-B3CVTB+uAO
z@=p#4a?94$jjZAN-o2X5P0ilkUXf8Q<MrlQJ(CqrQwIi8pH@_mOfrpEF@C#%sL17S
z_Gk9j4b)|PwLii&-L=>?!?okfj4!ROk00cM-}43fvD53g>vNbld~%9&&kNqJJdvF6
za84vF>6{4Exe-B!MdJGiHyo^}<2A%GmF#qx^lT7kJ7asM-PiBhVEL3}z6=}J2lb?s
zh}!+BQDv_3M2s>ecu2LwWMUJ|<Qy2B8zx`o>`t@0K59oEA~9AH55Ck_UMi4XHPy(j
zUCOVlT+YwAR%0?U>`mXwk<($-3`S&4K7+$9sTwAumhqhfWPIUz&ei7aPf(uE5iZmR
zdjyIBPR``_y{;##ww_g!SjyH8qf_rMG@gJ!5TybXFGyy??R}+HKCZ7*ZoJa<F7N!E
z%F%!LMFf|eBV{)2mGt?$rsT>MX-Xy|I-Ep^+~YRzt3(PbjZcU!mQrxmK4=6+$!NWI
zerRC!TtH`+pO++6CX?jxNKxTrVx*7TAPOp$MJQvFViht1$`<-ILUZRwh%*`|$qtr}
zgsxZ?+TR0r`L_GO&zyq^Y?Pln{)4}PCwwYs^5piHu=`;J*fzJif@A;dU$F-~EfGf$
zB*KSEE;O`vE!5_EIisT}(o|Mlw_@9(1>ghanY}UM+%347{do~2dS*gsxI95bt)SAf
z;=_V@2rNDmerOmJq~vwSi8I>c896AdG=*)qb+NrNgN763_s4@m*mmQ%R0ZnU-RCy$
z-R*zU)z$y>&fUJv?m8;Dt-g`mLB)T{J=)MfZUyqJprCW-cdY%@*RKci0w*XjmKzdE
zjtq_X)qT3KN3YVIs7Zr(GKFQy>3M29d_8!R&8Z2YCzA(qnVw;>3`7WwfTeK_+-Phf
zET}d-kPnGC70*gFMN)YsNpacHcw*WcJKheqjGi@K17_(>nBcrM%<Z(D4>$dz9|)j#
z1p#ditsIU^3p^c;4G4^5P!bY(T+FToWs7Hw_GUfqz=dtE#r+Vf28Y$s=v1AV09x50
zii26qq%)>Y;aX>^kgAQNOYM-opQ6GeDd~FsP9JGB60gGG${3n~^Oou)E-xvb!9zlk
zK2!L-<P2a)KDD#84$&;=1xdE3DV8cjhx>ByF&B6AptIwX2pRfl7PAsT$Vg1UWEpmJ
z;bH<f5oo%sDK<rqB`3fTENns&6N`Y65^#AiY-~gX3K5M!A|fKtu^@d1O&dqcwL|qi
zK}NzNsL_E%96M}ITq3>{iz}yd=+#Xmp;eXKEt`fuQ`;@PdMuT9EC?0gi}A*CC0Hao
zIWd9815~45l^^G+)>jL<$7><AV9NocqtU?{I#z*dB_Db#e>o6+G^vhqxD<29k}wpO
zf0S5C{{_U+Ba7lk4m2Q3$%m13M*~rqW#3yBrPN=@W#F3~!Qa~#1wiV7Umw)3ue3Dc
zCida^r1WYwx{*z1V;UZLVo4Pn)i9|?H&%V$sHP_5V(93&JURuLho)l^b5WQN%090q
zHgZGKE}4t6?Kb>qf!sL)0Y>T{*9g6K6x~0oZw+V#CbJg=@A_e}^8wQ#gO!k8%JfCK
zwUgZ3PLM0C(%4FnY~i1ps8k#8c~=*ia^b7pYzOvsf2$!YfA)5^W7ledh?K<^v85aD
zmFrUWfp4Tl*{-NHS_jG3zW46#DF(oOl3$~)S$Vp9dY(9Rez2MehA@^m@#P>1CNO78
zMeHoLh*Ypz&vp#C0IMOZfK=$vunMitH5Em8`M?*;VgXMhLCLTxB};#HJXgRj<f)t}
zkYBY`rF6Qxdu7?yk!G?UVtxn)U3imtDEFQQPkp$fdwRMMnclVq$!aDz?<(JtC<l)%
z(aD7T>VsTLS;XHan!b9P0mrA-49v}#BoBSm3aRowaMKjaSazc>{R2$+l+O0MCV{Je
z*4-^xhiYOuSnq8dDKh0&Xa3#b5PjGIE<-K>o7m-l-z3QwP2M~ch`rS%m-a5M&M{^E
zt#t%{<o|3A>_$4$c5gTi7cL0PVJ{E&G*1C1b#El8Ga^XXNEqr7;l)1KU1~ME<LhU}
zzp>kq+A;<BE`!7}3|@)nXtAb<Bn?6_uhi(3QC$uOBNC$|NWc6c0hjC_8}JPS*IX<b
zOCtR+VmoCNeCWv2L{C5<<I!yQ&*q0EXIQ6DSpo&C9E5(ht2LnYL6^n(&JkzeW%H+`
zR|}g*H(s}N_V22Is%{{Sx8{83HD?i5>6^Mt?Yy6P>x$6fO%#_g+-I93UWv;VYtW<>
zMb8dAE?-KX+6lO5M80d(Hd;^;^L-}Xvh>LHC3IjbtF~B84aUOmWop}Nk05wB`O3ss
zC-kq7erTn6{i`>3nNc)N*SBwdHaf=soSVZMzQdTcA83w10Du5HU|vZzE)TAU4A-KL
zYw!$rqWo$Q-vLmqgBg4EJ1oZ4S3Li{@TnVj0eaOsssPg(+AmoMwn6^WLnwSVo@$5$
zGV;PEZz8`7$Baq&WyPJ)#2sKub)a1$G;AB<w>(z#HSWeIr}a=HJBei;P3w^GjtpHw
zk)sS8@XmBoSIxb;zqppqaSg2EPJT7l^C!8EAGh7WC3L}B>U`mp)QRHkU!Pd=v7<`9
zgfHZq8ot&KIl-d&q0BODEiO#~j`7F298{0YYXspaAZ5VgIk<*Mxf54#9UA#NTwoq$
z@qw6biO{GT;<sFW6t~@kx^oh|C(cKy4!+-q>CLTahVi>%?fAgN;u9qhzR=8UV6K@7
zikVrS3hsbnu7}^b4te|?j>UW9eLMjDwjcRvZa@!bcJaaOven3uTRD(2ttC@(a19x;
z9k?}R$Eea$Ljp3YHF%h~17f)j_S#yMrZR9$8G`YX$v{-=*!>%-2*In;+TZ*DWIJK=
z7mFSDx*{MN<XTX0H)?HN5Y;Xiw07#9Q82B;y}6p!ke{?Y4n9TExCduv$fRPec6njG
z--AG>J>rnjo`CXV!*)VdV!M@8a5a~uDPc19bn2sZ1X${i1P7_66f0D^YU04I9G$O3
z<<@@(F}PmWKdt4hc|f#=JNfcz9e>(q(A~OqjFPRPU{Jm?>Ss4B-+<%@RUIHxRV%B3
z^CwHtlPpikd8NqMK<TgY;g#^OE_vNw%v%uCy!cB|EwsC_eyzsdabOtM&zcf~MQFW0
zRjx7|=ACdcD^Re;T*G5IF1m3RfQ{o{b}R;tVOyT2|03XX-=O*s-^)k%u#2AXVHbV=
zF@~@)t%dO)68Yw&0|=XUF%Oq1H@Yn5u$@r7sz=j|m1<5D<-Ub^=ldvpFdiSa9oiYT
z7Qai&j7jDL%F){CXz=X={x5{0B)8hS>DXEzQzk4{JHZ#W2cy+H!mD1{V>Ip=Cen63
zBV#rxiz@I`&QgU@DzX~Imb9DA-}9f0tCzI*j${NM@gGoTaO&^CKPGNPzkn^UcRLmX
z9l)bOG7Z)|3h4$m&a3Ag8Z80FD!S=d@`!~o)t+?wSumy<(3pO2(u}W~+2Ju(k;Q7(
z*xG9Zm<MXqjx;C&$3i;)V94M<3Yq+e>8dm<U2SV@kFCA#AWY1sfP@0&DhLD<La2?u
zT7Y2y;H5hj1E0YRi|vFKcYY6BpgE$>&cP@E#;h<4Q<%-{iJaOK6Qe@)1j?}l3-g6|
z)dX=hULfTu0syBPnY1=ZdJQEOS`-6RiIWjL>9^1n&@c+IYL^j2Bn%GB74Zt(Ey!Hy
zuQYs;PXj<=8Z#gh4yaY8$^x#2HLwTP!a-wyo|NGMJcx&|7!P9!9>Jq{3`_Aimf?v^
z`EjrnIuP$8;VEr7NHr$e4lSm_vWKue__FoTNtjw4I@PPwb<(q@6?|Z^0p7rU4?NW9
zktUBl@l>;C9ArH2umu>&`-y~k4FG+9-_8%#ob>2v@BPH-SgQNVkGo%I)l~Jvx!dn!
zm&DGF$4A%R*a$lRogd?S!TNBaYWXj+4gkP<?7n^&z&Zf{0H^^lQv~T67kx2#*k^_0
zxJ9|lGdE%yd@6!vE=o}z#L0JRcC4w7^jgTYkn<hamhUyO8wb$i&1AxKD`XS*h=hLq
z&Um?q8#cHkLt<ECZHj_){;oWUhx<>Q%{_wL8m<fti5YpGK@`-S<Skglf7ek7Lg4cZ
zlrI{N)5=aR<&*+C1@`8Kj{OF9lRcSld#Yd&vUwyFrV^>`uLS7?i;RcrEST3M4_3(6
z;}+qg(qVAq>NBJSoI^fDgs@V*PXXS?-}{<PeD6i&iF&t`VSL{BaZ1*hj*G02johLy
z=8-&{3(!#FHK*6uIzgqb{dAX&gR!m7jHzYe3sv025ShmXzPb;|`3!*GW+X@Ubap@3
ztG-rSSrH79jm<5fSEJ6<oA^;?pfdK^h;lM7R(zb+$z~eh<NAEZjb2L5Hyne75K7E;
zAxr3sFs?H9ePwW{W`l0KiZG+v$$)i7OQwPUzW|DYbl80+%wQ@0%vp#(OZZ05;^ZuR
z4**7rVhldVUy&!i@JdI@+=pio+jdLW)MrW-OTi0t0G-IcHk(({JyA1ss31>n3Pjb&
zODdx-GJe`nGHYy74s2EFl_4z)rW=lN<c`x=YIZgt<Y@1yKHRG4eA_iJCYBpBiIN-Q
zy2_IsTCg7FPIjz3d1$OXQ|lqU7CsMaJ@(AiXNvS{D7jE8jakUw+dnD_B=E_xw1OoY
zm~JPVjLF<@r4wx(Zvgc86X6YvpWOjq|JO`k#Mm|)hXMy+kX+_*4$JsP%zcw`t>QXs
zH)I2-FJ3mC>}r33%;1$w3uxzx_V!f&=bNgT28gOvfKL4&f@W9+dUcyxvHuV7dHt)3
zU_Xkv9zQ`;JniBl5_{)Tt8FmfKd66Whe3*v`ch~MUX@t_JRvAQ2-u8$7U<5Cpsh=F
z`ICq<)l4pcc9x|=aEV(e%jr4LRv_8#gyeKQ^&`Z2zq5*VfotlaSCc~}!Pgnpis&Pj
zphHezd*#`nQz5;Zk|0Y8*6d(}_H{7~9GtM0ZqPwGo;H?+1oSHUU+7L->7|qgLVS8T
zeMRSj_n|*RJM(ktg+0lY-c6N5AB(Ywz7Mmr)biPUcpET)<B$ToKnRMqR={KH8g~W_
zn+=Mzld__G0eAonz*R<oexY(`XK2Vf$l4sW^Q4rwZ*~1^mcqqye^W6W;KTNL$}vKS
zOJ#lSb3Ho_5d!`~yYP&zW@wjIXY%QXveX24A4Qo#Yv5@?(9$9Hm3a&UUGTBpb{(V_
z)5dU(#n?jMfU&fdUQKBVAwHc=U(vaM5B(ALGC#v!C`+#NajG14whoc2%r$ttRfe?|
zeNPEeDE0jaE}_?4q|W%hb%0bz@r8@%;WcEPg7dP}gVE7=0sm_|k`iVTd_TF*Z~fO*
zgBR=feSH0ajpe19){BS$vPT>bz~1Es?1sf5j=|rxtJT(C{2!FxO9?2PZ$twbt;l;j
z(sq70CJx{M2lamp!Lq*Y2lNqk%;f%r#}-ks(*He;x$5T+H0WZ(^0^ti)vWOT!L9;3
z^IQs;AEiJ)X2bNTJi#}*g3>MUtlAlVskZ_E=H6aoNxmQE%enc`tOxYTWeGdZ;`QHV
zXfO%$unHUTitWC&(+M=x(`ZuqdZSFuAcn2(#a+_vZS6oOd!WlY+I0i0w^A14pD(9z
z+Gl?5Ps19ZO_qLTt;Axiw3WZKtA1rjW8~B@zyfml1zl;_SyD)^Ch7H?H39>xY<Jit
z<~!RZuCmN#``qe2m!^BFVorBwa3IFG=*VkF4h{S_Fg(aZ#*y2PeslEaqjfnua=y>m
zm2+aSez0w@dvJ7!saKg79ee%QXU9$r^$(Mc9J&YE&U-iS#BjrK$8hf!$jq?DSO>G7
z$bT#UlL7<#NcQO`pFa8K$<I&LoD>yoEBLx_&8c0dM1{TE0cXYOGn}iOJKT~pGtTTR
zI?k=*wsP-t(>sxzgs11NI@`s2w2P51ZJg7%vT;M>tHs-kzbXE!_$dD(znS03&+JAE
zK0#hnRnwM|_e#Dh`K#op;G(dwd0O-0=I={)m7WmR3)@5iQDMu}mdcjLT3%>*qijdn
z_hq}vYDAaC@z&DTU&|jHl{p%%Y;1dJ+55|pYI*yj_Q%_QUw&};S(!_gBb(4Mt7An+
zRmYYUzpXg5;=DX0FYcV)xw!N3&O<BD<1*Zg2k@e<>0L{@p6p7k`fb&LRc92eX7w6&
z>#3e!*BVvtuf0Xk#^(z<)ME9f4cP8Z%_;4~fiE`JXfJ8owcXnE>5M%^I<3y7i|UF8
zXACYM+%TBh^v0%b!CSo$k_{<>=pbfDE2In351E84L+<FG>Oax{sQ=es2i*_#frdj9
zp=78KnhVuHYoSM>=b+Qj73c%QOZpF9quzJY_d}D&?}gdPAMG#lFZKV<k{JjKL<Z6V
zg@MvQWng8XC2&5-Gbk(w9V7};1Q~-`f=&l52i>-9+TOQ)Ww#1;3l0lL1~Y>t!Rp}J
z;IqNw!Iy&HxBp=OKiP(OhlGXTLqs73A^MQvko%6$9Dh6QLxVyUp-rKWoNt`pIR9|j
zhV2PE92OiF7e)#bg%yMy3%l=j3Ri~TasTDPM=V8djSP#-jx@puFez*%$}P$-Dm%&)
zbt5|v&WDdhJ4OdY4<Q^8K8Pp;1yPO|MBE6x3Vap#J!l)_9OD%e8j}!1i4n%+#FWO=
z#B{{;#!SXM2!0a$J!BtyIQDVq!_c>(Kf*R~yW-sA{Nvzp<T!C$VcbaEg}9Ztn+82N
zu92X4OZ;^F`_cG>Qwf(7zRfw5csp>cV&&!^6(b|thzH?!;m_e8;lFilKRrK_L|<Ye
zv6v7gq@;#)k}31o>QAOSr#CoK_gpu1@$TN;$Go9=Qu@bFyjD3Tzs&sh$$OrBvGTpj
ze{Soefew%aD0l!u8~_rjRjy>iFTwU1M_PWMF_#`cHkp9Id~T7V1a@iscnS&0QJO<V
zG)+I)sPD3_NT8`+TfAVcph80g#)te`CP$DEAPAT#^EuVm6?)Ta64xp2zF)&um1Q-2
zwbc!DU{uOU55VAB1abwQacg(rC(B*tpmDkwwkbw%d#$^f;Oi@(kEPBJ9N=N48&PtO
z`7}i02aTZ^AAaF<QV7rx96Edu3ihErfD|SZ3^^WXF$$E(wMkC`5P8+`=dUrG)VCNR
zkp}jCjcI#)YXQy4y853N!ISfF_EkXNG_&Gk8avaNBytJB8M5ImzRajcBmW+;2FD7O
zl62c>f`jfcfb*x(=E9eSnT?+Yyn-pPj&}BX`#YoXYHP^;AO!hri)8z$JzuThB>d;3
zoUf=m3KfL?qkoQp<H7SeQm&M;BPVrfs^nImEPfF&ab?IBLNy{YAS^HY9Tfi**x;Jz
z^06rvy``>-^7Rq|nA-o!HBLzrr4H+WJ$!1l{ef#ft;VDKGY+sSiRWW=v0lc|n99s5
zMxW$j1ZulTxdg5@ba`J<`>}DZ5g5}n<)pa|Xx{++xvGE)SZ!##2X$GqW{yM^<f4HW
zTy}X!_jRM3s={;Pu_ZQ_^MOl+QE)XVgU-;<-wx|eIIW>)|Jf9<eA!Yt1{%(Bt!4*m
zs;&RHMN*wl<w?&>2}M#RbOtq9&r(g)I4JTwM<E7p%KH2qmISo*{~T-Nb7W$|zXI%%
zDC1i<NW@y^TZ?P1Nxxkl3+il&oLz(a3Q$WVyFXmW>VgSM2RB%a%LTP*S1}=>Og2IW
zI`_(<eerGB2w6~AFy!tDs=|)XYW|WQ#-~rpgBNI@C^1Ie<Nfq{&L#=xoZ6gNp3Nl%
zDWV(PQp`S_+jG9sJxnxPT3-5gR~F<sc-Ly9RF_7sr~tG(<J>0qFH4Nm%<sAKe3i$-
z>jnmOTQucXwAVc#fFa2m0o!e6z^boOgJb&=zouvX{rHP0R1v8O^mw;|OgD83*Tm}a
zEVb7Yo;4J~GBX?7OJ2dfl1DHnc@f7-2H+Vh?{8L%d-StKC8lN`?BT386D$qjfrW$}
zEThh{jQU?{c<dLLvL5V=u5o#Y7oGn^cZbtu$ym97xv<u7?)npz#hTUMjiVo6_lvvz
z^45OOf8?;N{e_*e>4v$635eBEuG=7%AO7bFJ~uNeh;d77o@NR@{>hq`cek9d{u#ST
zg^nKa_hvtCNN5)<l5XxcN+}N3wDGk(Ae1U=+_5j^M$1#V`Q}#P_URHK4h)9d=XE*(
zUCZ`&e#&HQKU5l6Jx<<k(6InW7JRwd?D9<XktL%-$_6EI4;t=5k(rGH10n&tpb(Wm
z36wte@bkC)_iNB)@Sh|Ij9{r?&Q%i_1v#)YM66G@XX{g`lzMsi!E+l5IKU%H9#zH|
zlN{1y0i7Trc671|x6Pd1POuo;K@+%5j(CPG*@zXAzhg|Y6?aG;#>0|ITp+m!%WLnM
zmFC{Nv2NdOU;=-ZPcKJ;eiEkp{FUfob`52M<_wW2O0ElFwH?<(?e$3v^PS^_2NI)J
zj6GT~!$m-+P0Mh163r5rd_I~-OsAmA`YYNt3Aq^I1^iH8k9~SOoFv)fbL%b&<mPJi
zSCr>?U$7cC!rIGdsMh5Bdu<kn9#U{x^7)^IwF<1`GZPYY8{zV6cQ}clRz*dnNoYU4
z%w5+qCN&@&449Z<t<j<rt}NQusXsB8Hbs71SnrnK?0!4L=}7B4{H)Lubl1ejz{5fU
zIGZ7-1wDXR3?O(JB?6ZKG&P)3m(4dfLAX^V;iq<+ylK-YBcc@t)gyzxYlGR2N<>#4
z-2r{Q0Kt0@*aBOtK(#tv4=nozdfPu0y7>3Ewo)9?&ArKoV^_kEggAHG;<R1!$aan1
z*_ddGMZ!UBfXl{s9_59+6ME0xCgcA|o0*s$k!XEju|yN-<OcQ1%3`45fGB8#mbuJF
zv_%g7#XyQlazTRXHb4~>aIp}3`Q*wJ(qWC(?8(lptEGdEO-GwsCdcQcfu7E`!Y$Oz
zVSKQ>I=xVlKnNijDe|JK0H0@HS)Sk_jE76em6^#v$@Q`TFK^gf&#Q$_FRv%==jtFM
zPoBlz9aR0*uM2-DdKH=wJ#=@ms15R3LF*0?R%6~hqP6bjQkV`i_9IlQH@&hW77Xya
zG|<vg9UU4xn{7YIU42slw=+qw`B*YkY@#HuyLJtCE`x|ZMjEe}p&SPJQz<Dl{4A;+
znj9-8{Ijpv{2s5JvZ&h7ACCS0^>sR5v4+=-h`O>c!1^TiXi32_=YRkngE1i#r~fIt
z{<#|H^ztHlX@xIpH%D~;cg{=ewFZX<Bd{^E@d(LBIH0!NtR(kDhq`JTm;`eToBO{p
zWFe65Ru(oBFe~hgOe8jV_lN&0pP6kC%o}BJA{hKzTfct;p#TzRsdGie2T(TU{N;)^
zLon6OAi9^HBGMg1q#ie9QG|Rv$kj^+#KDh)w$)?4>*dw1z}Us>Cze3}A22d{9AO#-
zH=ne)pp@(uY)e2uq)Y4VhUSJlP-bT1eo1{iAbAN}OCH4rlK1di$=`5Dz*HwSt}Q04
z<-k3^YeWPGuY9B#J8o6;qBF*39&8CuO*S@^C-cDZiV`2%r3Wto06)DuMP(P5iUA^$
zN}=uKb*_SUoruhw+4*k7N`7}|TrQ{1++l_PBG3(m2PDH#Gm=4F?vR;TGWWH53Do_i
zK%QYY>ZvIsb!j?1GmZgH11-RYK)Y4ZTYFoIgvm}NCH?HliHW!qgS|b#3ACf}0kP*3
zC|)*B&vuTU$<HTFyzCwa>zG5R0b+g3yxz`~@l{V=IGg>ovfr#F+}iWikD$%?QcUS+
zi)%nn5V>K4#$WO~ce0}54pZDwNu*FCqNbAw*BtF@Ij3fIU|t^DL>CUcfhMiCLU;8F
zI)-L&11f4Myhd<w@xQPM=0nxjw)4`bHc_6;pBppoFI&+58a<@!GV*V_(jEVPen8<q
zPwP2p@ZaUTC86kO0%RsuR=hX}^M??WjI~rePm(aeF|2mZ{M*l<&-hZ7rLEZ?57M+-
ziDbVfQd#<}`w(5x0H2**gCdl>#m4+CdEaTkT}iw!lZO{PKG8$Hvb%Llgj}C(g;=I8
zya+nE!)9=o0lDiZ>-OCR>)>SzL({{G$@0G1oIKR1=o{fu4{71uEm)nn>wwO<#e{4K
z9?`*qEw9j~At7h}8&+gH=*e9q2r?Mv-Y2BIt)JlfZQ)2<s29=(iprE8@~rdV6XGiB
zTCaJQbav9YI;0qOblG~}2=Hq!SZ0mnpF|Mh@qmypPmi=3IhD!SpL~lS^=Q-*rtDIs
zv=TKEHl%H}<t<|1Nz!4KFP4IUleD<-&04rF=^cj6Yd%M4Fj{gL-HvfL#?zL4AF6Iz
z=KI{SSSd5i!FFdLIHfi(9UWhR4tL{t?MXlpZ#9)-HD*Rz-xzK@zKOmOH9(htNkFZG
z&rg7rs)Qg%z3#%J;6eEm5Z@fl3WBN$*Emz(yBJ+zo!$#Z!XN=o+j{nW|349|Ec*mK
zeY6W%JL`62EkL+)yk1_|b^A}ADb(tDOU+6!2;eYiGBKJ-$Tf{YJ#o6g^_n)Dq$^M&
zhYvj>aQ2G{TPtA9)8@`j_zN3fmwXd<O8$s@B|CABqze!JuK6azU6QwPwAN|XsC(?}
zqBq9OJXjF08?4Cr&OtH&O{E&XF#p^ZHHDU44Vzwr-76T3ajT?j?Q&XO%~jfkPVXkw
z_2u&q$w<&6D>K4((l2v3Byo87I}XMvo^UmXhuO0e=#pns*!Lo=2%`qdVU4!2d0@rf
zTQvOVf!tUG@j=`A%9X|SOUb5qkJY@ET56@MN-YIXo<z{amPnicQe#{N%wh8Nhb;IC
zrYjQEzq1+#JNCRTe5>$)l+_)ew!Q-XVKWlyP@t}Hvx71I0u6MoruV;C`J;=0P&js$
z!w55_YsTCynm}zz%SsWL4VXS-+!BGVa5>NXAv%*nhin*;ORUyUb@Et4Qim*DcRT$!
z-a%E~Z%_dJjz04a{9y%L@V`zc4zw}C1*$eN5U?plLnOfPq&~p_pd1z)XG-|#Q$4PJ
zUH?aOCedqlT8ta36$;qmV#q(kUI#SS5^L!jF<d~6K-Y&SVI#xl-L_cFt`n5sdR968
zgJ!4CGN{%<<8{vbx!mnB%PD9O!uPmvV8Ku|W5d~=i#)oB5##94I66Ac>PhBl2+*M8
zmkUP@8i6L2IXi2WiQL|%%%$?aswX6E+CuQmV8u$xw3`UN?A{tcVHg~Y1O&kK4nS;e
z*&05wuK1-n^;=v(3n~3f38F^8+Zo!RIFCM)7WLrmixOg=KY#HH>Xw$2^N6kIxr}g-
zgE|hjBFfL&tHA4}XH?@;_3!KeoYhX_ONf?;NG$e*v(GU=UtGlJ=r08iG(0QO7w4c>
zZQg-fS}cSJ%${F8Q_}@zkyGa=R1X_=w{mn5i^3xTD<3xRRaIcZNOt+`RSG(pD~7SZ
zjM?~kI3*Vm+$lcv=FN!wY||BjL6`lPg?k_&WsC$)wuTA`&Iy3M=))bF0Rmo~RJW1R
zy{9V;<Hb|XpyHiyQLjZ)8R)QJ&59a~R}2lHKOvzOx9S0EuOVO~ykd;*`WqF*w{sBb
z>lsj3jv!{sltEQOd2!Q0$7W>=F5-&e&#!$*b*BIs;^kMLt*_IztqnAL9f|0A+H2=J
z@l=d1^|=#H9x@kFk1_hme0+M<lgPa=PBF|NJ9ad)!lv(tq*bewR38+iChPH%e@^-^
ze4&-*_C$c3am$&lfz>3$Xlmn{XY7~?24Z9&lyzoLA`@~p-qgS1wt}O-eSkgo6a@>|
z&o3zPNS4DatyBj>6LOhZ5li22Q0z~P?p|mvI5A4^@Mlg)meFKaX3K(`48GLi^20$G
zlgplIL1)BEMmrlIRBUGBe<j=SZOD`yptzk+rT)%1m&aLWCKy`|)4^~AKSvlmp0Ikt
zeSo_HVz3YX$;3KGkWfCI6}S4H3X1vA&@smLn~wI`Cg`+xo~8h6fFK0_bmFuMp%V=0
z;rf4Ga*@4>t_UvuXfJZ?*6^jd>1+cjCLr)AH%Vlm<9)>Kg%#SkE=#Ho)vCBPvOCn+
zGtqutvl$-BgN3PMA0NK&1mj~9I}}m0F+1-5_J(mrn0o?Qw(cAYa|?$6uBWB;r1iqr
z_k);sBoJiOdAt}s5?rg2`fA8!s#_g!O%fb~I4%mE@J?q$AZ_E(ZpcyCD$r-WYWT{Q
zl&8MU?D76pFN~LLiB(h)&@LB}zPH+Au@pF!O)yKVRgZ{t3O@8_f^1#jUZza0l1bI#
zLaL2ox#mBx6?=Grzj;;X)p%(gn@D9W5o~{#9_nbF_XqpP7n0uwc8Lm0xnSI*=VAjl
z<1jnm2PlIlZJBD@y!(t^?+vCeNF%k6g<W&*5KV)8qv9mQLwsVDvXPtx9YN{PL93z%
ztKQd4s7P4&WwZrBZ+zG=-`Q<O4qKY`3^iGY??8^9C?r<Ay^m^~x5HiDii1W%s83ae
z6Cm!k-27TFoI1I;kO77jjtEWps7w~3c_p3Mrgw{jn3E;KNyCPgIN}4!ssYe)E)q(I
zW(wT=1hFxGHy?NNF#mgHNlE|Ikz^K<@OKD6Ia)#iV;3Zl#aaM$8pCBX_RaPzBcqd9
zu4l%{GlhPm$FBc8HZ5^9=gly)EG1StOP}=Mga9RyfpX8$S02<<<>;{a@68Ja0&bVc
zN8_2ZO10}bFe|I&_&@*drH9n<46Gzdd)95d4f5*BA?lN3<&X&YrO`CgPm8=Zx850(
z5(13pE;)GYsQlVo8p}YwU?R}AdUf8uAf&9fPF^eco!2kH@yg)$F|XNB29@oqsI;9{
zyo3)cmD}~pBnG(z`;rLLi-(|WL|g~!liogE(z%F<`u+gR;6;Db;3cb~QxG(TPjsqf
zqOmU%KiIYI??Dvo#k@wX%IUURcc1-@+3ipoZW}u`&hW0z!3!DK$<VuDOY>0~CZYvp
zz(t$snAQ~y45r?%oVrhWVgmeo^NFS-VB@M1*4|w{T-S0dOoh1_bH7%vw1hrXyiG{T
zEw-+jV_T*UnFXaeJm+Y+8cYyZB*p}AKIkTfB_|zA_`15fYN6C_;!}lPytcX=2?(@E
z29$<pyDYc!L}PcGE`Ir#d=>;gIt{+g;STwyysxj84FlK7?H{*gI(1g}OueV;9F*^D
zm>ZsY{jCM33e~8CzHS8MLeUa;#C2@RAF)XCD!wPV7f-02V^*;HpnHq<++pUy8s`mj
z@Ks?3NFV~a%7w4&?Dy(K=w;Jxf@7dxHpB!`U(YpRRbUN`uLiVq>HY~DeSSbuh-7Bv
zD2x2uM6D^a8l6F+JNo%J0VHRp_%bwPM8Pk>rwNYvp*7`KogIY+b%CyUsY9*T{ny-R
zsDe$Ee475|wkmeDPURDA{&hyh{TV5sN5_leezExf$;BrTQZw(Nym{a_&>`ykL0kUn
zK2iDYquQDtYK@<B@<VGQ6!K8VH^PR7FEuEgk#LZ3ucucB?#Tjm&MFL@{ei#1?zLhz
z;9eZoVMKV}W0Kasarzqd5^ZyD$ao4pMxEN_wb}Ma#Hq>5=2*6)ZF4?3ZC2Kl2s`33
zwpa9|qbw~cZSE^SrIdsIoNY>4Hq)h|wl;lEh_4i6owoEog#XZuzNl&c<EmI!Mw-_g
zE<TrT2#!av12Vt^<Kw1h0=miF*4ANl1wCll+8<va!L{&ov#_?N5d3s{rd+1ar2H9v
z?ZMQ`r|-r*R`y~-1ci?f;Y_a$mFjVXUxE0C6yV1&*=Zde4@YSot?DHHvpv+cgMx&H
zEVow&|0<(IV1~Q)Tsk4ctAx7iJclo1-yAC>*BUScNvLV|6@1xaPTbIQ`3}kPcDAH1
zR!IJfS;+zXM6wx=k<7;O02Y`WGo6)|E{lRqsb$IY7vRf@*j9FtWnE1&D8V>mse8HC
z;~OZFNS(dzGvKaKT4k*;%D80O6T-pZPTv)Atx{E_2M>t2%O$**=7L??i+Yo4nkN>$
zD!4o5WkbOPo{H3wBTA+pABN94Cx^|r;b#a_0W-~`ra&P}lWHjFfBug6`fjbWUySSQ
zR80-;ejJ>iI|=772B^wtUenU{Ra^Thw8y*J<%@6jG9=U8`da>Bda;CwkU6Xcbr3>&
zEE!Dk@z7O|`$MdgfP+?1c&k=?S~A&fQ@6_ACLO>GcqwXqu<@;%qJk}n)OaY0A;AC^
zum;^NF3?7S8MIB5^hah%2Dliks8<RTLC)Vq3w13R_QjJdX#dAec~%9FuI|f^sY&Rl
zhH9LTK!^hsI?RxGps>+`6M_IqI!Mw(A6=zhZ`6=ea~9B0;0L|FaL5i%2@M1{Fat(x
zY{}UXsy1S-tMc#JhECDmp~d#3Ni2lU=)tonsQcwCefDWBy&e4Un!{(%n^5eByN7>9
zpFv#0VlDdKtJ|PNU?s0Vs~S^09K$LCD_3pSGS}Onfoe0vt=N(TTW)jIm#~74-kMLK
z0OqVxySk}}c{M~gRwy^~JGy#DyzInjFd1|;L#JUAv<MrNsiHSNbj@mQ^KwjKpP;PR
zSBEdfGviyM(+Ey;IAmuPZ`sbZOh>r>$ni56m`1wSGo=~A!adGyCh-WGpDR1CBv{hg
zPI8}#ldZjq1fr;7yj{@vTwcIE@jiBdvKE21ZitZe-3O_QabYXxIWxgB$=CRe<W(G8
zn`G97+o^HU6}6cMTLgSwg+_O^whxk|5gC$nU1OF@c!vP9xD+O!44#Ura+&YE6ST13
zR?1Ji43_JmCAA8#tprgfX3yfq>ukk5xC^<QsKxgl8kV$rZ5J9yi8M9tNsj>XBVHU-
zcB{6pQTi?B>C6r#lI?zsM)zDUsP$&904<!zWS;%q*Ao}BKeLl&^KP=*xl<SObml_q
ziLwGGDolcrwknhU_Pv(hNhGqKly}-jBb~wO>l@I;AJ7kk5H&j!k<DA=&bzRegKgAO
z1Hw-_vNkV|vGX)kwpIr}bOx)jv7X7m-i~0^nC<BoIYd>&2cIIoXULIG<M!0ON`pD@
z1anyP<pJE{Q+xYS#n43LtIlYU&FM*74v^GxcFT)3Gh$<h<Dh}vFaQ!pZy5WcgV%+N
z3Nq;n{r_jRqDv!V0%2G9?nUvc$kt2%vb&KKTbaa&$!`4P)S;fbQ;T%%7ZE9W8*1ta
zw)ZZgdfO3LOADtQG&i|!3ayf{z|j&ct?JSo>`DoRmOb&UV7}Q|<`2Ve%lZf|cAVlN
z0@_@yW8r!-!&bjP8edT}Y1@C{5}rQrvl4zMx2Nv%&!7@E>P&ADis5W@R@Wuq8g}X2
z8UvCq=(B&(IcR(dYu&C{eQZIc0Bzg|*arb4G`k9Ma%nj^y)TLW)@;7!l)Qw{divN>
zbe|X>@K@q0iRRgAX2tLUm21it3=HR<<6LOC%u&`L4H(WY^3X#Wb(Qins~mqs*=JX9
z8U<l~@Bw2sLi^H{)~=~<uOu>8PeH?f|Bv2;Xl$l?P%ahP)>qKf{V%R=vQG0#@dD9U
zffpwvNLcq*e`Ca!?L21WSs=_dp0xYS0jU=r9jbj_vOTvS(dsp_SN%(4sxG=|xZz_n
zgVQt7Lk`l9lsYUZv9u@2Y4R2pz^DOzJc7eLxid$oAbuevs;F#Zpwa9g<4C0*qCrlD
zdO%$)brE)QDv*NOoNi)BvOIQELtluq?P7Scy*p3cB^ON;f}Suk9q7aKtW(osXj3qP
z)7yyOR6DEQ=W-gqxwBF2ars0)tfup1X4h`S14#*e9F&G-GkPd5O@k^INTl-d6b-Wv
zszw@jZ9>RLiPP8txiB8q$Mj95n&v8YU{cVXWGq9H!U^M9EW4_s`;2qi?LJB47<+fe
zVYz<3jzyGl>WIn$W45}tbA(*jVZd48SIDBA^6_YXn<7+n*SF5w5vHOY9D8;<#8Z|n
z^_eMOuJqPur~y&?2pGFDh$v?u#FSMOs9cZ)KTJU#nk>67&?OXzHLok>4aJwDwkK|p
z&w0tr#<(N}KUmHU2g6a`4MW7bR8ln8^Hh31j++Dqut5RV-zZ}a#|M+%0Njt5lCJol
z{tL_*V{I*+%I70vA_DrOafFsdY?PYYR<N7R91=_fjNBLp1M<8)h)t4^VTfRR`{5~s
zOUm7<r)n#itPLzbRt_}7^_Lju>H+6W;J!cp8`R0&ItIV!|MXLDOmhwBzfQ8i@;z`d
z>h5>wc%duRW5-ge9{i#CZw>ygqMqx1%g!tF(GM=8Qc@BP<(Dcr{u^}S0*qxbZ89VD
zSgpoR7~x_<h@9GVYvlDDIv8Eu5c4cejzZ4p4HHlVsLmcnT+<gsqlpS={u94yu`9M)
zwm)hf2WHgFkLor?U4M$=!8-__pNkGM<4$bJ25eS~W{tZ&KG!v6LLQ9!A4RIa=i4`p
zj`P8g-*Y7=Ca?R(>-ALBpDqpkdM`OTqOU+2f$BVytOI|YlKbDTm{7>~5z0!7>|;x9
zB6H_*<4s3s1ovXrH0{=?-l1>f5g|&Hz~ZTc&19aak?RPM0fQNVV#>{$5YkCw%|n#?
z`fXl@-~Yb$G^6A1yOBq46OcgHU=To4-VFc?K9USmEuDRYW5=XF6zrqx(y9M7J6mTZ
z8AaE^qQ9UP$nEw&ldM-9qltv~KO&S?&o-yBuk{$*etEwOug8)mR<r%SoB8PE2uBz~
zp364UU<92(Q65x?5g<zIs0+}RTrbOyp)`_z6-`TQs&H=x%)oTK6VG7i(3y8&eTQ-J
zD76{{VR(*uba6{Q$GcMCZhDGhBy{m1P^&aU{QC}P6bE<>!P|(T0;O`CVmW(<DL(xR
zp39FP2faq<<=Ll7`+27JZ2>=<0|*I0BouaaX$)I?+!~?*pc&y8^YWy6nOwmzK_Cgs
z&-L!G55m#v*1J*ne>nId&KP3ZuD|K-3Fo9c*~VdtTgbX}(q<Dq>;ov{rDrDE*@xW{
zW2P_kGm$yk%xC3yAAsa^4joYTu2dz`;{oH;V`Q)VX9`)d-1OPO#R5DZywo2EWD!iC
zCiH*B>$5I1H>^fmH4MvOV<E;mxNMGDCuCNob_RpvqXdwf8zNHi^lrabJkpAItjWvv
zAQX*AWcj0wfi5^FZ*xvMbqPRpgMngWKc9|7c9a;^4VS#;7+_NIvx>$`J7X(y*s+e&
z*Bnsb;LOCjYxh>Un7$pwp4U&<4|_r(El(wzsuzXH<h4s>3G0exz;s|>=DKD)1N2N}
zN1UdkBDv<j*E&xEP`ZW0ukud6HBi8sg&jX!*%e4ETTFcDloSw~#X^(3afh!r*r%|}
zCO}9ERq*z0V_}(pTM`Oy_4|m{){~P86KpGO@5Dll_3pndk_%x5th{xs98OJ5B<*6s
z>8-lVY_?jjr(H5Q1s7z`ByRdtqhq7#4?4}}o2@&Wi}}^D0X0GBcg_WO0$IL6+22I-
z(682QEDKUF-Mven0L)i+9wIwY-}SDR7nk390(7wRdYbn9QvgOd@>jJzl>M8V&n01}
z73QJp`2cnt*9W{hjfm9GN1bLJ+x&o7G}*$Daka@U5cD4#3p%dHnyb}F6VciHwm=XV
z?V*FPhYGc!^56_(oHQ-yS#&6Xz<U3f<>(N4y7%na%Tu`>6ejTTP_b@|EhB*;EQbbq
z9n%;{@Hn;;YV|B}!BLV_w|mUo3_YZV$-TeCc8uOiio_wksnY&y9xz&ONcpFAX}VS>
zXv}O!M=d`=pt*_<o|5lbTvoYU>X{_H@oZD0tgr-D(pd8#Z@?x!jwtV|6H?;fA1?&4
zF7F>`6Rz6SBgNrT`Td|!opX{oEjLroA6&0K_}A(J4fKX-qO1{g-N{o*+cg&(vtft9
zG?7^Se`r}~PWY-(69?Wn<@Do@Av?MvgC70>#`W_XbUJ1Tofh$5iX0Z_fDH+qc?a7=
zd6H=YZ~p~rt1I=uk;jh>jU8=)MRXQ+2z}_<TzY$SEKLgq>mkI})P<m|>uJ1-Qp~od
z&Ht&3aI{b71{68Q$0qwe5L|sAWRt-NApO7g{HOvf124bhISe*d6r6>506hOih?npo
zL_#A{X!~Q-w^`H9Uq(DXpNv+fX=$rHDW5)Rp9qBA2=1B<Dp-W@AOzx&In(2!0M;2>
z?q0k>@gN0h%Fo@&?!a+oTsz#O1HT%Bp05%x!K&uah(0uSjAlr|++ZB_u2;M;^a{l=
zhnDMfTt_reR%Vp5_UY(@AsuCyGEdXl+=s>Tto>RE9hF3ueB63sSfR<DQ?Lq$I4es|
zb+VZ?LZz{~k^%w0w5F!#u6vz*Pl08=xjg?5Z|cIXM45(~`U<pgEf2q<Z>9_Icn}yv
zoglb-eAaftwKyDXstt5*;<CdW%_07cSd@za6Q;((8hFDZyQSY$YTuFC`^i?r8h>Ps
z_hQ$%Tf4KYWPPy>(q!GNp>2w6PIw@6VsV|uV$rxCv>06vVWF%&B!KW7%=g-2=yZ2N
zjeF#oH-msoa5|cYmUwJHw9&F#sKk>Pc5EHw*TIGD;`7^!>;*sS-`_a^H4fn1t~~^H
zhchotLW91YabP{xg7OVk{h#u9b{VMuG#l_#j!%Lzguzl(gn<lONfRfguLznCHFQ@$
z`Tg@oKJO?TB$cox5~Bq}Zf`OzswuKr5VOe&EUR6>bs=)@-rc=T7cES0k|EzTjHv>k
zGvwTfa*!cwzcn}C4zPyLv#!SvJhSMVTk4BC^~-%_Ax=XleIfWR(4LpC)m5nHCvv?j
z!G%#T2IIIVD%CXBY{9F1segcO`FDi87T#!U*{J^3<5wz-WZ0>#2f>j5eyunLky<_`
z2;rWt)bb3hO`9f}Usbs2Xdr=oikAkXcoHMRzjB~M2PM+YlbQ|UL70m2zQtUU0ICa9
z9DLkvo}0~vWe^d>hZ|=vG`%b>#1}!cc)n7Vy+lD$(u>tX`KW!Y4N<~YC1g%dW-Rym
z_+9oBD>OPW-T8)RVJn5!*i&GI$6zG5*xsn%m?kj0u4>+B(5uxl*s7yyi;`!JETvb1
z-~cWq&ck-sf?Eu`o6&k-rvu20GI>gFuXSZ^bSnge9KR8geey*@73{FE1`~V>eet%f
zKT#j|W1*+7bN!nyz;g@xdLkYUCediQXHuwx!dgyaZfv_%TeltT*^LPc0b-<x`tP)G
zo#;Q*i&T$za&%fPavW<c4NaO0Upot?R5{cnfl*7py}p#t^Hf6tzy7NyHozd+OloS4
z48l>Rw+n}J`_{j5WONb~JC+cT*m4j7J~yFV_*Rc{UrGvQjL_DtD(#P;2WI0I;UxN6
z>(Eeuhmr`_pn~P?HO4UsTi|nJ++9dy9ztbyyREKRA_5a!#I`{MNixu!AlfIm);>kV
zBx!r-KphdD<+`>Y#zwiwVd?z(4yr(X&^%HscMEdJDJzG7b1PZTu?cT_t|-R<UU}Cy
z!?$-2W1$)4qlZL2R(dPpnVqMcb)H~vvKoq_L>J}a6+-T7SMJ2<{QtzT!bVE8p~ymj
z{bC5MSj`a$nvP^Rd0e!Tftd`Y$<+#x`eDN1<+12o1|sZGl`zf5uAq5TmB~q+hu(lk
ziF0eF$@|`D#S<A;CG^-Kr$|FuuuvA`8clRTde$ZHLzmSE1JudMa>J!=cpP4_iJxok
zDw_{wjiXeB^TbAjQe?~QPhD%aP0F~f(CYkt+hioG<+EbiYqQN>*)5Yf`yS~#AvF5`
z|DQK9eZ$6bTua&!xea1U3{*XI(TWxhfm1KxhpcbWUdig+8+v5D%fN_AI?lm5P?*j=
zAtLS`w>puac_rR9!U%S|VPchmq2(2-wohvo@Seb$y>naa6ZS67?mNGr!PjA?m1;PT
z4$ugc1=5@OhuN4{>Y#gD(^Y_|G$KQ2rY6K~Zso`*7x??wpnuZsEeyrot{UV+g`pnZ
z<Bk^L6pXUY6{4SR+m1Y98jJJLT=!5O{5jONl#!R)z?=Hf9mdjhXp)i$jwySO*Y_%h
z($T*!5OS_C%_!q@XP_kK3ItiwNf?baSz}#bNhkq1EnC*~gXWvKI!A{3Fxaq$0I4ld
z0&#dOne30KMzcYqo4|>|P!Q-%8Ghz1$p6l}V|q6G>tr&S{vFDjj@O4@paCsG>fKKB
zX>Iu_lSxr$xa$B*o#LzGIMsrGJ0ys|ngK#7Fz|wOXq^H;0m`lcJH-dCJ`WvW7R0vN
z2#l#iUvHm=0DdQcv>{JADCivxz2NVO^_swTgm+VjmjVM++-AceqF9Zvq^1Q(KsmGe
z09O1R=0Ii6I$5n(u`fF@0>de^FIG6YZsdT1hlkUv)q<`@Jq0hvX*HO-x%*&SEb+_)
zIRoSS!*2a2Oo|n|W4)|n^3eqh)5urol<Y6<dj0mtGTWP*KelM(=-c*}2FLZmzAkPZ
zt{Gk@QO$|W*bW!ydVG=3WmD{~M`I;_S(c?ta?HSIdGwBTR^*Ppu)~)*VNWm+DCTGA
z0DM1x4fczWe|~Pse{nf-za8CWvXC#~aL|{m#`HjB(TKl3oQdE1TO^pDp6vT=z-gqa
zy4e&XU+IZN8X&bED!Ve)*0zZC_CSGBr|1~@tXls6ezu<GkI}ZuEt<N2(ayd&O(*;E
zcs=4-H2kj*7Z5I3<cX%~iw=iMFCVbF3L0gW>kow#sZ3?BSy@MkJ~4c38|NNZJ#>-o
z<oQ1ZLy6V5&r{%YlINBlXb)yN`b-R9*5;PhbPeTNEH-N(X(STlQh(dF^+wFWAqaQ?
za68QG1dGjjGH`2($DwkbG!X|T)$b5VU3Z9oFEnKrx%qG>HI`g)?-o%Fr$P{S63&`;
zII$M}4w_jBmj&k@%}-kowQ#t$?ZJf(am^E7+0jN9S$oxN(F6X0x8OTN*ghtn4f!ZZ
zQ(LqOvHOzwUwoQpg(^RKqaN}TwURC&_wWsemarKGQ%B_U5u6q^Y^!Yf(b0A!CIJg=
zF<O?cbOTGRnf4<CN>xz?TlQ6*-ewRaIVcg{Ss~WTP#KH7N^N#%1rw(bFKMi2I<;0M
zCFV}Rk-crz%QB_Dk+vSPm*S+&irdVw#YJW|ohG0;bN%mWJ_FILI>M!<{&t5+MMK~R
zl^tG?k4O;$a0XQ4opgZKXb(|BZ>1ouV7d|rX@4i}hmBI6!OX^9vNd;m5nNw(^?O4k
zGa~laK6%pbvn<40jvr+%-eqBc!_lLnR!`>%i0X{*P%o*pgS{v#6v_>4f?N$dJm<6E
zlK4Fz9|Gf{)ob5@b?XEG5M@yGUNUX|GRNNR`3ywvp|vPr+6{h5USGw_X3xrd9?LR!
zzyO3VCm@{U`q75&EvreNV@{92l#N607`{h+Qi{>u3(x|m*dgwr52#7rB3~71W@<k%
zO6%A#o$Ztrtc0Y_Hb<1A*_@yq%}9Dt%&|!IiLLTX+BFwOY$Yvrs{Ukewm{ot{{6IF
zAmifUM^7Hh%2lPvJ|o5SU>nKAt2%}Bf+93+-DSw0`lXh#Xr}(^aK6{aCbX%16cZ|p
z#b(<$aDt117$1>3QZf9cAqA{-(wO`9&rFyQWZUd{v~7O)YzDRXAr!HDBQ4J1n#5cV
zlDT(r5;?8ktJyI3+A`hEWr*CRSSnvuP26Lv$P6o>TBmM}9~BM2)*jVXrtU<KH-Gcj
zcyA;jGd7}BS1F|RS9S@6mYL@M+Q>bV{^d257~M+dLI>qiiOcO+N8JA~PuUOm25{E|
zE3F(bF-c9whv#)$6KTWa_{zslFu`$-Ft4>;0<&S7LX|U+p$k9gcExu4!-!cq#?&)z
zWI#yUNwhgfKm(upcCx#%tSDA{C07|EI1rrD(vmbfEP;;G4zvuqWeNe>(<BZtTkFPW
zxU3rzh5%gPu%H!2<hGAG<M5&VDVpe#&oPU~M<@jcyu@l4&8i@Q{Rk`n?ul-lwOr3E
zD|5Nr9~_{8AS#U^dzt@lb#UPJBtm02CYPl}9FPs<NvNyG{(uqOhTNgxuqDl$9lr;3
zf+Mgr0+W$~7yoawdFx?9KIlx78s-MB?sAl(Alw1nfe7&&E}{~(c#qp<>WOr~iRfI0
z;aC{?%a#Fm6=ybjJ}C3*MgBmu{dM5doiiwv(Gww5wEHHGIg$7YuvOUM`NXdOG_qdt
z^*a|AX6x~Z867CMCm`v^jA2;3B|*s8S2f&0`@gJyaw#ft@n3zltjw3d@y<OIsr#+V
ztw@#7kvMZX)^H=iIOzCN5cDwUKCzbrxo-4uXFWX-i_ihNq!FAh9aeQeXL}heYNt)4
zZli!9?e4)mcp=aJ^}&9HihYGzZQ4EM)g7)y6aMw#6!7AGE;7GySotWEas92^(BT^d
z)38~1^hl6L#-q{H2`gBTG)vL2{H?|RIWIN1P=W?*cfE9_72Pf8(qgDtk#ajZgK!8M
zsn}Jz$ta7T-o)*$3+8*RwtA7~#QrPztfgP&HVg5WN`>a7wcXugqF0sk3w~Tv_du|I
z%^_yyj=NdU$ZsR<AgH79aXAQ;fDg?%U^%-35XmiLV}|RJVKT-w@#`<2AY|$5GC~(E
z*A9&mk>3?7BKtE(zNcPj^3nq-$!;S*U65<@6HC$^xV2`svL%n)Ho{1Mr%ayAWY1gz
zn>l_4+NZ>GHNv5UhbiIA?og=&QU<vW)^_9<R_q$3FxzM_=vhRR|9+=B6oSO2rb{Fk
zung3j<%OvnzJ5HONG3|n%C{#Kl9DiqxKuRg0oy=z4zHMpOkg-ZHNOl88o+xH+xiu)
zY@BVbICcz*u%evJnoxdvMO)Lp<V=%5s^P}wJdsX|{e;oaKv(uNqq{92MZL3!vOeRW
z)PW)u1<Kmz)9mP6FJE<Ap0==!clMi?6}jFqu5swBbSt15NlfOyqT5>^$I@Br!D6#6
zb@0{`2MszyXu9xx0J;O#){VS0R0SR2_Z-xqF2nWv&Ym3}tuddn`-dwOKuMgQb?)3{
zgO%^hnJZF7SN?s~^A`C^!n85}n!ok6Mcoe=y(#<=GULkVU)6TC4TY7kkg{r+j1x@!
zh&YNMey2ru`adg|)$5Unx))gxb4{0bY?W6%ayn8evcDZNUbRNtv!?bBlZ}GgD8%#I
zpI?`H=D?=usW$J1LGbh!=~KVQuE4qv-7Wn6&~KwhU;8cf=mhCTmc!}DiWG5blRFR$
zxJ_zK#xfABjN>%MgVb;dg*LBMB=SU;p?DaN%K#&N^8%Mk3B%Aw0V}2JfV1-GF66dd
z`KA|PV-Q+Z1Pnm!FeN1=0#IcE2PxA0{5kk^Ei%{QQS$Q_;;`{i{h@s>p}8Q(_HPR0
z<GfK-+Oak$%njrSTe9;(3^9Ta2DNf5LZSG?3Zk9R^XGT5C`_)kQrou``O~6-7P|##
z4&P5aw8Lzf+wA6iYupI~7tqaibSs|XK-`$Xu!$2OQe_2nm_wj8&3S4afZKleJA!p9
z-dun~2;4;7)QuLpE|&?suUg~znf=m>GBJR}(Uv`+a5b6_0M8@dbbJB;QM~2D77H?i
zAHok!p#UNTMPvQYN+ury3*cZUc6~;ntd4E+5s?7mZw)>fLn<{U*nj{Y#nSE52pG)>
zzlO4ssz|v@0L$m9u6sbvo1>or*0osjWD3gN1?4r%&wE;{&ax^lH<=pPX(Boc8Zp=7
zTWA2kPedJXnUX7|($C_MdJ$|d80b(BXo!u@wZH}baFj?ieBMq%zcL)$o`Ni_5};-_
zboCfyK1<A;Sr9*dvK!4|NN?uW)S!T7Xh9*gjsv`iNa_f*s}vs)Ez{g%o>x%{HM;Zx
zWOImwE=~K$IQ}Xc){p5&LW^#5Q>9|+7?1~08#%f80#KVkID{0RGqyylIVn<EDoqKb
zY1l^yJ+uQF*`))>xcT8Mh}pVcv4HlY6raI>Nj|Nm6~LI2V}r?xqIr&oLZ|k0TmgsD
z?u-(eLto6(S>I)tV-7lZq{p_XLV(L*!vR8y5QT|g!t<?}3I!yJU{8-9eMB)8R{VD&
zOONUSqEvv3V{Yv(4&e=8s1^WFD%Do?l0#~C)Kk9B6^xqZ*aTo?`THPJH9Rl>H2Le-
zHD_rUv4d{R?jM}s9wCPKGZz(@N%ljk0s`;?@$pf?S!T24t;(;#s3FIJ5qW2D@Vf?C
zfa#t)`9|*nr_;-~`~f&wlr{WvIA&?`+v^iSU~vrF9Y*G9a%xYWo>|<h{dx11GB8em
zG<-!Q0eSAZ;bWku$iW8P^ZSiITqqp9{-po@s{7#03iAA&&n>(QSViLdl5?b-!(X%|
zPbCfwzJjRF%vtuYiA*8uM=%<e#Z=dLZe!iqDH`?rZT2l4+?93Ta{x|Qzb!mF``aDQ
zex*n7qWmPr7OpfVbUMouu)Z&Wj}6@3raRN0tL*a*Mvpu{#agqaRG|75wr1hA04SFD
zpSpSqX;}odI%h>%tR@$aMjf--1c{VXJks#w9~{H^evc#Jo$miG4DX%ix$1YGyoeqi
zHVi2j;4iGJSN@tTHheqUd+v_^-7ty+=G9l({R3;rhHu`C1Ie^wN*^Hy<;)XMNVF12
zD6Y#COp8aG|E5BtQAVY)VIFpb1fyB$?wNN-@QpL6d5=TuP+Y6kO9WU=hV!kd)tz_Z
zg}tmS7E6P5SokrsM?K-PIwGap)<_JTJF`cwo-|d#=}g9vqn@qbC74Zf(Mc1XhCu?2
z0)#jh^(;G(8siry|GCn&Y;z8LXu>NwraP|!10mssWXVHpe~qewHD6hM@d5I@(DoMr
zcNo3;959L1p-n)C(2t-6MPKUii9pX*M#91z+;Mm&EeEj4%FNE5qQj!OP?_djzLFVt
z`p(sTa1vgEhfa{Eq0LQDE?#q}-K_*OgpUW`sktR8Y`LXzUbuGjo!w`TzIFlp8-y9P
zTn4u^9Mdz8A?Jh3Bcs(&f+N6B(}$<u8Ja-KU_j2xs}Ifac{yVUxJQ<+PT^;Q7c!b;
zMh#a%+p*dp0+A0_j1&a;)B4K0-@Vv?cTK$$uo)#uSUxrM{#^+)F3<0=m3@%gi+(vl
zuBMM86M3S04=$Tj<{uQ^*MvOx5M<khA+pP0&5pTf9JprBCV<va!<X&hvs}Dz!gX+y
zwt42Uu?n|a;h*;8;nQ^A4^n;uhFNGH1!Q;YeeyzQ2uUZn^{A7XK7CE--hbOUw;qK%
z@l%lSDYf07vzGw-Kf6J7<L8dlX|ST;Fwb`MdBl-5+>n64)NUB`XhhJlqGR{e_F5&0
zf+Ar|sH>r3h>@S6iUMd2HF+JI;dZKH*NFo|VoG5E&QMCHwwbB#+|g@TAr^B+xISvs
zdV4CV1DP<-PC1_MX+Bh-31`Y>WDGH&Vc;v&`>4#eL@bzmnjT?)qgKZYj8h`-wNi=&
z;vfN#eUUuhW{Z`}mVxGP2|`VhsndFB(~jga@kdkyJ`hL-aCLQ*HIhu8i2u$0Z;?m(
z9d7hpERK?G-!6Ny^&t~a(b=r?AFZp$`FyJ)k=$T-ay2p!7Hsd1>`TPdMD_n*KEIs2
zEUctZ=$uzizu*TcV<7lGT_ORxB-oUK3Zew$b=F`>oTf<-5ZU2am)wW)=zV$~jjw`%
ziZ{Xjfc+YULR7e3Bm`=R<4Q5M`vOQY(<dSbQKq^zk;qh&!wcp!o~4m?aXd#aYI!ir
zX}x*etAnRH)6U63uvZAZhUNEQ0>N9hnC9sc_+E|mu4`z%JJu`l7PMi-zuWiWbXg2H
z;r@+M(bb<#rr?FWc!$-n+VBo*v4TE#nzoGg$t^l-p>b;o(#H`3S+L+=CXzAx5ke&+
zxP*c8x6xiZ=*(S%HGklG?a^eM<oG?V=@45>Dn?Mxy1B0MOm-h5Ji2rG)L-UEz~^xp
zp|0<r_&x1y-fdn2O~%7MvdH!uiZpLu^RZi<<2V-or>`Y~p`%A)0m38f5*nx5TL6aS
zU8o@gNe50`c20m<9VY~xPvc_$!3RRC0yA9?hvUQ;N;a?sK@jUjOWd|WAu6PR`aUR@
zNbn&y?y?ZBxX|1^m*^W7s3pBc>v1rbwGXRN5)6hMi@_jBg#UudKijC}TVc|z!}wtp
zzMh?k9E8}hRE{jdp<=tPMPfkM>L~X<ymlJk$+bv5Q<yw6HBHy9+F6q@Q+&-`&2)50
zXxf3j1Z@GAAb#|pZq*bXvG7c}F_1K#tJP7u@#E}yu~(NWYHq%bJ^621L9z4&=^?Oa
zn`$Fkwl?7zLs(3R13TDLqMw7K`X>tUa43k@*&Vy-{SkBq+>)ZfOmZNa{bZIUItN3P
zDl3sc7wAYSOGp(`3!iIFfO6Y7e0U)ms~>5`d|FIhhbC<6s{?pR76`NlW3Vp-IJKTk
z8@0L@?a>^jeg6qmUCIu(oU*%OsoOsSqi=J-ALt?*V8h#F9OPx^`AVfCj3D#X2=vz$
zOvoTyxoZI*k2Rc$tVY*pGnDxcuoS*&U0rD1<;ysvOQTZz2T>x%9XY(ikYxP6++cPa
zW7+}B5AB_fy+JF6oAl<7r|b>MJM!D2H|QAA#w8<SA)9OUgyMv02`ztnjY6@sWVx(g
zZ1z^iWtk-bMC}xmufbb;S~?zE*|1hkkMfaODPAEMt6Ru?w0sTgn;^sKKzTFbA+Ss?
zvmj%&p4~oPxY?3Ay(I!^HHJkhyO*>R5_#MkyN8CE;q9G=Z0<n1d$mMeV9_dAYCXjy
zLEawD4c#1C_5Y0PI0N1gam-Ut478}yUG!`rhn?q~n9$nyeN$kZD^Gup54$Ql@O*i}
zaXDltsAU&ooOlQlrM}LOquNQC8W1frq@PFXdUvxK{FG9~op8DWry6n6*=^a9#jqj~
z2fv&3R?aJt%U(a_UTIk1H#+>Fv9eeK*5=FTmw!rjJdR2gfqYsbla20DYm%b(qf&Re
z*?rf3X>a2YsjH`YOYe7p(^<vayFcG2kQ!r(1dlh!+G*%$L1pv)5sxoTEgPzr(Vz%R
zlRGDHuiWTV;|@-98RpTO>Me7*7L{4mf6F*d?J<~Dkt`1t-kxZlv?Y#HcS)t6NCS&t
z5z~47zaEizyFNA37?<n|_t6&@E9?Pmopdgj(zapt2^*r@?>8GP{DUCuTX{UDDE1al
zAxz|Z4X9C&bWMWjXQ+wDR#9kCDnv@)jW8>hy4|3r_se(tgj!@X<nH)k_Nl$S?5x^b
zVfnC_l=WE?9f;dfsl#odT>+K3wO=N3lgV3vFpi@>QiTaRvYwk3gr=6tqDk402_V5b
za5N`pSZyllZ|Z==0+e1P#ls&8KsNZY(x#D8gyDqg|3cfLa$e|5IL2B1AmQ?{vA$d^
z3?q?iq~Cf*bA49);T_)n_;Lf*5w;p)^97NCH!9=|;Yo~DFd=9u%g!rd@G%2LqXZTc
zoYS_|(G+SpQPtaY42qKDNx=bw@i5Hh(4~4qc9HbU2G@`b&}^VJz3pVVsgwm`5T-<Y
zK4r|%Se(J6$#k}fKE&4O?1WkW)5?#g!5=}E?P;0iE6k)w8b~V<OSaf4GyJQD2L7t1
zCKa>=R$a&f!P&F1YSYi)Y{~sXi7)`z@8!jCY{Uy7wg@?+B!v*_c`tBf*x7>xFpufD
zcDtpbZyVBcjk4tJx_)>;rOfUL&r_a!#7~Acr-Nv|0KP1{7o>d4*cb_b<@*sv=~jU}
zdBRK-6*G~J#jr49Kgn@CpDnO#zLKVH8*Xj%1W#Ac65azDsklOAYm&{$gQE1p8JI2w
zMGGRA1Z4}81H?)6Mta@p48{;VM*avI7kFcR3_){TGpF2>91TGq%hGF7h8&;={c-2A
z%mdrn2EK2wShA=9@7O@V1)9_Kp_^hS&w5S;jJ8nd)9f2Gb-s;$jK5H_p9Qn?<XDp|
zxO0+HSzCL{-T?~(`mjit027$HhSn;fzGZ5f5Qk%9Tg<+Z%%ObY50mytEar2P^a=NY
zR&R)|WPN|hgu=nXkbbCu(hY^qwOqJxyN;b?HdhL9YLitm$nrM?T^1!%*4_cD!#Bd-
zA#K+nj?eLKtp&FZV#y68$Qayin;StR;|{V`t)4kidHc4>#Oz_0azeqULBc;b*QmQd
zgEH;)cwzftjeLRB6<!VnJyy4eG^i2c<BT$+)$V17xgj$Oe7<>XOtcB(%js@mupBqw
zmhW3bJuD}T7rH<ChZ1rYW+v^Q^5eHk=$=r(o`klkeL-LQy=GNgB4_8Px}8cPf<{bt
zXQ1Xwt&zB76zG%ajf|o~&T4lQ7ReJ`uc9NB;`>>8P68pjUBbj2&MpawXE!Gha>6Kj
z;w{7B>`$A(NRTY2#Zq5?L3Q?RkB4QCk!FFhAXyK1{zPS`hTv&<$_U<lWQiIfmg2ZV
zKrlInJJyNTrlw>jE%stu*CtT6`^SX|PGu6t?jncmjf1h=KQ`7cceqTJV>mXG#=@+|
z$v?3(8Ll8l>F<r>jGULz&xEGBElfq$!=QPL#js5-9P5IpB|@MQk@Dws!D2!f4u^6T
zr>*Ja<X&BOmnaD3EFoxeXT+8r_><_pbVFmBp_^J(Ae1U$NCg5OV(Pl8Y!oO+uUCoa
zz6?b~=%rFVbyVVXE(xTnYF}vQZCz?_=OsUT(&L$06s61rN=8&9WpgMMFshl!xny3$
zMBVSB)(My+z-RR4VKJA3{twYvDGEhAn`|ob7>tCiEBkA8DLDRYsL&-EvP@1|54QN^
zE?2lQU}TV8(P+Fh&uqgBl3Y&GjJ^OfOUt7USSnRF2_GpP&|8pJOtsPIm?)uBiK0%i
zO#w^MGBUMZ!3LZ~#ibs-kk9GiCS{(&lL{t%KP}f_b%gd%*$FP7be`9DhJ><b@3~zW
zF>6N?Nph4h_8voW&n_uQ-)GN69o7D_7`#ON#^uUB_{7l@Tfl$}48UbuQc!tWM`d1|
z7VU3fEBM2O46+4|M(I8V>iH|fVQcN8y1Eb&-YqtfRS5-`eth2of2EKr6O1vUQJH06
zjL0dWS)9kRim2cR5<w~%$pFpi&nYT%`<@PEwG3ut%-(Frg6%|-Io)8?bijmEO_pQ?
zL5M_E2P_A8J~2ie&b6d_UfwyYg}zoD0{|_YWR-AWp|i?%0!HH8!CKK?=;L(BlyFed
zz($-|0jkV@yaCXX^Z{w$wHf{8$9DF=ar)_FWv4?YC;_*kC&oX{#u>>C_z%efoRTcZ
z0m(JERk8y6Bsb#`$wfSNvEDBZACp{$4@oY+ut#}t^rHMlwipX9-Fxfg?w)@fOuO`7
z5bn$<<A4`~C5Z{U+3*jM!vLi>5gQeM&D~4i;MT7@{feFd3~F%v;zMfKXmL?ZcY<5u
zSAoZIJvmU6f{l1qm`nV4fC6^HS2@`qBWaR-QtoLTA8)GFM-!I^EJPdLw?H5N-;3Rq
z6CjlKqnT|~U_g3^6JdSKlc0*Kb<Wxb`>DJ2Z6ikls=zg`uW&l`N)3qtPcXA~SL&Tt
zuU2;_9XdgaS<>zg@hvPOK>CX`N)TA!pEm1<)(LR5pT%<QbztH_!P>i*S3|}pGtITD
zrY32ci*7E7a^OwjQkfByZQVTM9s^3CC~?!t0h;c@HA`c8F{Y)!%6cblxlK>Cu&DIn
z=M0Ar2fBQ|czJW{Z2lljhi&N1H}yq(i#8ot49H^SDz7)!98fn?kM#yFHLCnDlr)wd
z(k2}r_<m&D;RVN5u^d#meg&X9Lhe{Pe)Lf8YR&I8w9KfAUV#ZA4#M%T`GKp{m1Te*
z1?<NHS)kq;#_9aAF~eVogyP8gv7rwgEg3Q#@(@bv9c#ueNX+&z!3E&x+myRJta4q1
z&i@CxaLyXM;H_HR!&gxEM{Fhn=r9M}zpKKsdTuqP4dqg)&K-%Eh2ymC^(okCASBtS
zZrVn9(GUCEaQt`51KEZGQ>mnqFZPdO{PPb?@QRGvy)CQWg7a_O<aQ4@;$Wzj+l0c1
z9b(+ybb@jL<cykX2Y=>h*MjoQTbNaamf&;M)M@PY;Gu{OH6kVu)W_zasv=TtYtsc;
z<viW}&Jhsk7<m3-cVYFg^Q_#2x~)OizoU4KYQ#`IkAx5d!44yg9f&wVk|s<@&}nr#
zg#cFzNbU-Nb}E#<S^^z1^!Q1W<aocHY%wCd<e>09-zlq$KTmY^0``YOO%j>!>u+c{
z3cX-9J6BdV<P5#wg&bcg0%V}3s6ObsV;s~fcBH(sSs0oBO!sx+zi=2VxDd><kV&Wc
z&k(C+1gR=v@o5pDudy+A+V}^uOc_i)WE_9nVhWmH`}D+9Bfj;leQ{K(&7#GJyWacb
zh`;%!AJa+&Prg|${q)RBn_gEh%$Rcy&(Cfchr?iyTNn^R5vG#~j`~rKGEwFnhC+yy
z<1(QJp1U|eaKeD_%)CWDV&mjZ(c?L4ZZsj^ndev~AkSa?j755oz_3FIp0IA*%2mfH
z9uh*0sk(LJj;%bh_)#=<byJv#d8_+-geQ}}`yt0lg79s$VzH9H_wW=q4TJ~K?33x)
zCL@l6$lq<D?D^`U=p;Y_%6w#FH8^f5uUYH{0b4aXe60Kae;Vk?K@R8oDUZ`3l5>Eq
zrY1&-(RelLJ7~;Kk78)IVpuKQL_obEiknjTY&Gos2f!k~(kg>+vQ%|sXq2mI8S0R+
zC&2R5U@c4Vc2MX>AfGeIjUIsPkb;+-n!yzvgs<WshqmMkTVS`(MGwy|v-H*_g4%77
zO<Rv6)SfOLDVk_*;9g*wU^W7S!0oxB-Gi}vG1tM{w<N9XTG;Qd2e&q)ln89D_h1;f
z{}7~1spbzITn!1KRV8kZ+E|Fa1^UP*523j{^pg<xr;3BX6o*ZrFq!5+OfHa5El-Qw
zAA;E&9Hmn9_E#km`kdktE<>0J>$bX+)#<$o=N&0*R)Y^(!xOY1nDLNcglRv<G$SPN
zU<RR{c77{*^ntJ@o<t}q>_m!yJ)lU45v84Bs@FURZCkA@FvP2>K#vx#Sb&Q(m*j9c
zK@OurOPoE@`qK`sR$4in>+fM>SaruwJ01p6CWRfYY2$DM5;-2<ePF@}ex{@ywR83j
z3`0Cvs@moGAE#&0<=KjIu~|L7x;ky$VIo}2JWQ}GFseKURb^|{w?=y*Ii`Dh)m;S5
zol~UnVt|*Y0z-ft8F-D0+ooxn`&2WdohUJ+@WBxvMM6A^>Ow*02FPKSC_z-<$n|3~
z1&Xu$X@WoX`vj%rA0?1OpukC-D6@TDV$l5=2(5>|Z}~jBZ72rlK<}j9TK{`YpXH74
z)`GBr?2YOZfo3CMq|>=B@P)RQJ#fI0%Ebwk*J%XOk@p+cmb{W=h5nx~@N25zdKZ91
zV0t)K9Ed}lF?ZX-i-wd#ZfB!Bc_gW)km=hB<Ls9lv;3LfzPP6N!Yl-lF{bnyA^X@F
z1Z;I*syrHP12GAZ&o6v%Td?BFndqa3aW;gL9%`b34o}f%-*EV}TqwAXRA!nF*tb~f
zXi3LgJdxlA7G&X>Na#I}6_F^xWW_1;54jewQ}EU<n|Uzz{D3Afe%^mK1xaIIg7*l0
zntS(PI831y4H~_WC4nPaB1N%Ez*9+(N~#(VHmN_e9`4{ZC$pO2^^n_(=kxjZq$NRh
zCN;CHcGip|CCrlH9ATK0O1Z7ZP<^x|B072lWoIG~0v5=j`0ee!NLl}-j%0Q=Zc>^E
z@2CM;azdaabV}Kd4shk?9c8lRIkfIX4@NXW1y9;RKb)ARnUP>oGbf|62vQzX8^P;H
z=|h$i{e!Gsyx_^3)5k+`PFJ^4XsnADyDmawU2Kf=zW>-Yum$Z38(8-G`U|)u$SN1C
z$hDS*Vna!SXg6BOxz^e~P0kOaBqS)bU%0I(5XK8PRBV5AyO{vCIS=msuL`}#Y5*wc
zk;%nG!gMWYn=?C)=^ZSR)UWplKL#QE$h9+#V;hc&{XFw00yO>=v?lOl>&w#Z+GrnR
z$6-4>X{RbX<&>WK=<(W&=93OFM76l%qVAApp=#ap6gdjyIsXaE!qAIO<5yyOq@Gxe
zUy!-DvNIn8lJ2<37WwPc1)-k@z=DQEqIHEMdgOBIw)$kyu_;6l^@^@9)Jo4i+jJ;L
zamF}(I!udA%=&ygv+M0DQIFN@9fIV<DX^jOWl<)AD41YE3EcYpK6eWJLypl2kx8`M
z8Jcc*<H+I8qiIPqBmjOP9SXM*p>$0G8Co>cT4ciuHQs3Tt&@VZWc}Q%q$?0Bkw2&k
zek5X`=Xj8~0)0kJU|#*O7%k)pRS=&d;K&JxjUA~Hs|qI+y|nwbijQ5*v2`gDIYk>!
zQUZZR#CHKuDq~v8G_TG-h}O=#@8`WIEANV|x=)HN+^n{RW?yEv`!wy#_-7XN>z7d?
zxpz;vuaQ5IL)!4PRvp!ZP-}Fjei2pyx|2iSR1b&I-YV+0zEmFDvYR?dnJ<QpceWQs
z;fdsl{hplsSw#wjW{KA8DW8JFg1W8cq$RoiQ?p3>qOEcZ1~yGi--0AFrc`Zh*U?#{
z;D#{p4-d|$NeM6!vvr2VVb;C8*PT|N;ks|}ci-N8vP~|4#S2vMnDngkXBD^avpoIY
z|NV_=c?2cy{Mnov{K)Z^Tkc*1IeGl<L!rL_1Ze#KyORhXJ{AA_l;QyJ>l?qgTkrpg
z8P;`|{{fx?DgpvpKR~0t!W$dc!0K_p?YodNGMb3%889rQerw#<=Y&l}RpYcQ?@d+D
zsJ0I!9y<IfYw^#j++~YvE}$!Gh)rN>4d{u>(kI;4>Lm>lRgI0%IC;=h8(A;ZHM01r
z-6su)RLKMvf<~xugVcrqb6()Ts4|yff_9v+dCI8geJ%B37_wgOW)Ryr;d^NNTydk)
zLg(izIYyP=DAso@f={@l*k?#rtwF`EF#_6FGGP(XYec$XoyO8b*6%A0`6bIytx#(1
z#EMh!)LQacM=Ts~s%f_KlmADj-n+0`L$P|;+7@H!BY&@|SSgZoIjsmFvLdO)Kl6Tx
zd#?*Vp^5n^?k&aQRkEpJpYqmVq54xwbgX5p)*X@u9`y!=tco(LePn;TX6+Ctv#rW$
zzsqX%=Crr69$iD2Z8yAve_%JPg0rv(s<picx8vACYFb(k;~^y;soiO|$aeY=Rw=n$
zf{X9~s%o#b+SNUolY!R9&9Vj1GQ&m|7MhYJtz2Z&{PK+_FbiHct*&_rZ}#fRvMid>
zu$%4XtjzK;x8?ho#M$M?x9RE^g$;ly(B=fp)5wZSRMUqVYO;Y)()6axd@tTMzcvYl
zE=N!@o|hFy{L^JuEtW)6L>raV6fsa#!WVcA*8&^h&c#vY-rLLS2K93yn-#1a{4>Y@
zc}Wwd@^(UG9i*)e0rj;>IU%N2nAJ8Uw`N(T$lTf}rFK}5#vP`1nN$v%P=1QaJ3vzP
z5?B6`TJ6i=n?kBBOse*lbF->Ckbl6YT(FU*F*VA$#OH?-<1G`${IU~ANSeITQZ&k;
zcei9EtJ0l~W(Tk9m<Q!uE{om)P<RjozPs$Nb46A`0>0_Y^={PUS#^sh=~zLnWzPrr
zz}g1z2-(hD62O;L#~66q=3&E!V-)L6s@#q+%LBIp7Xq6C=L3%c-))gf(hBJzt2(6(
zz^~mwv=1NCmd&!;8EmT+nS8PS-#hgao)DA~Vu{3Jpj)h(nH6KtBbpGv-BI+-NR&;@
zgfyAW6pxCVY34ba8QyxES>~Rr(g>FiKm>_{Xm-ch+3Z0fr+GM$^f8_>6X<p3T->ZC
z6WcrjC$ia_oTk}_h<EcyrmWOaIE|Y%Bt+o1H*l=wmYFTtc&T%`r52fMIJFe1CU>EQ
zVofVeUAZjt_&0TSkXs^1=2l&)w7=zAm88|FnT^XVG9et2)HG8k+VvJ#C^dBSG96{%
zIw#q5^ALKIt8a=Q`Epm6TW+3Y^XvL#sggqr^~Xnb3wl;sV7xs@Zlz%&Tjv64qGgLk
ztIi)S3e8tibK@~`!;Q8;YHB*>O>*e*F;|_#D6Zuw&7rwSQ-$9bc64mBG1?~<kkrOi
zRwmu4<jL9TO_>#S-ZV*2BYJwd#V$72v(rynu42nmn^Z}aw=jk;lx7Y$bBiBy_f(hN
zQFld{Pjg1xUfb*g1rDi<0K(oJl}@X5%iOEzNkU<NkH8@q93>g#6a!T1%~PW;IViqp
zpKfsGa@jsfL;L-3btfhMbKAcuy<DFPhH*=pjQd6WBzbhF8E*cS{OnuJ(*nQR;l8`>
zWy8h%^w(#|m<bh};gyZrh%w2#kJ7@rjnwFYhZZK{s(uniHE)FPZ&JmI8(qQ}pZpbW
zn6Tl(`=O$U0xhz{(vU0;If`V<l;nwMf<o6S*m61{VF>l36;iAWGgj<4#tREKo(V~g
zZ=y#sB9JCk`USY8gyU>+=_dd61(G8A%}kLQ=>>${=aJS}>xe9?tWIuu$;<bfsVNX;
zS_)H$PEp0SnjU2(V&vw#)Yi$ClS=?fn$fQn+w<afA>N-pU*b<vLZ1acurEFm*kHGf
zAsA9HV$9^D+qNxw>F+{NlJv2n`ajmcr%sdh1L0o1;UWNfRIc3D0U#P$;-B{aucE2u
zT52sph<1#vqr@b}(nvImU3*KFE>m0WbzuENZl?FfkvZ#}&FQSG?s`-^PlQqBcQ;&5
zZ+-L`IK{GmSh?n+OMY>ZH5*D&ZQ5P%v)O-BuD=A1G}_+wwO=WJe)Muro_qz?JES;c
zjoV^VCOX)pzcba}305?`Sn(1iOO?J9A^O+z`s-Yb;-oJPSx&B0`+Yb-W{JWjB-1FX
zx}oWJq!1-pQ8nE#E!%NDTs(XNLLy=kQZjNlMaXg@6@r?EmX4l*k%^gwm5rT)lZ%^2
zmh_KUt?G7X*YLPDX;zf_xU5uZfNWujGDg`t9(vSMqS`quLn%Q<$zmI|Ko#U%s#0~7
z5)x#8L<yc9%(Cm@vmdbTdM;q8jX1p{0xt(v#|&2KkuCEzYuOSWIg)-e@-{-sQhC-S
zta2kwEwnMue`e{w*)Qw;to;X30^a*CuE2*nL!y;~Ph%YZbOaO?$OA3vT)<KrOJcE&
zJU^fWU;gjvQ*UXDPj<g_rr)4C?r&WP=^lw5!U%jT>h7?Dipo0*@V)0K>ng*YFs%2Y
z^h5o5f^<Rw`?{7AwJO%eqIHx3X^R6hQ^V$bKv~y;@RN_-#3rTqS)elcGx4KkXAfXG
zG@fl$4<Z<>&lHsQFl@WT;;t*-9{C9r>?UZiN6aeEOAd~sq9UJatrh!SW+^UJflDg)
zd`xTLe5}ngJF-ejRV>4uFt{FJq{t^oaQpW@#*fs2UBZ8##pU52pt3iQ59dJTD0E$Z
zOQ`2XtP^v}O7`Z0J{x6^avEiytj&7kZ1a(n+SU7_3-2xMx(*?#T}&+x^7+cd*TIG|
z5fv^<5q!35^f+iV&6r6<hEa64=nuaZ`!nthYt-(VQKLRw4I2w{5D8)9Mgz7<G~^$5
zcHPVt#Ue*zOQ<Esw3?@0NLdmz`Y6fCW_f&ZR%UH)d=<Qx*T$R%A6cICPqOsiu->=k
zQjy#T)$yU%H>BjD6K&Jtwz6Oqb|(kln2&e$Dw;w28mglq_&M`E@n{Xk*Wml4s2qJh
z${cVN9ILd}jw2L{DLR<<_>dye`o&^8g|*f9k4El8-dUS@`&QZJCmA2A$4aTJeO*NE
z_Pmp~aTj<HP|u^rrJhH_korDFB8tT{4Cxw}<ilQ_fVEjV*X`H-xY;`myYd*W+>2X2
z43^}<7665C<zD1CFhzs`>|EI85(bPD2k4%80Il`KA3%cU-zKQQy#p|4KRRpyPzW<<
z8~_CD6fgh)2LPaZ09wEwK!OT91r2hKP5p7>-i&d$KR@G?xW|*oi__VI@+%Eq2x8^P
z8NyV4YPa6)8l(qAo_R$hpD4q-REdV@M0mOAo9>TU9BA*WF#S*0ER9+=E=sqYz;hmO
zJ7%rm>2Z@+)NR>B{c_iV4h=-cJq%LEqKW$&RvfcxlGL>yj0PT-7|SM_LXbS>n_;!i
zzp=V}^s-yi#kOLlOjuJsMgOUAX6>SG?7G(I8T(%3Wb(xJr@(u%Y^O2qv9J5tM9vYP
z&!uPaDys0Lp}y3aH;9+y*iK@*3XVr%H|`DLS?l1>_Umx3v+A2z#(u)Hm#f;FNWqS(
Tp~gD%=1~4;zp%;UV+#NP+I>lo

literal 0
HcmV?d00001

diff --git a/app/web/asset/font/material-symbols/manrope-latin.woff2 b/app/web/asset/font/material-symbols/manrope-latin.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..9d7abb17d323bff647995a94222b92b26a0fc93d
GIT binary patch
literal 24576
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

literal 0
HcmV?d00001

diff --git a/app/web/asset/font/material-symbols/material-symbols-outlined-subset.woff2 b/app/web/asset/font/material-symbols/material-symbols-outlined-subset.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..1abf51e50a669aedfeb2f6dcf7f48c55ad047469
GIT binary patch
literal 2940
zcmV-?3xo7`Pew8T0RR9101JEo4FCWD02M3%01G4l0RR9100000000000000000000
z0000Sg$4#-KT}jeRB!--91#c#m?V=)3rqk3HUcCAOaveWgn9=c8=?_2Qj>ZhQ=N%1
zZs?C+fBya8;ot7_zBm4WcQ*tptA<!XT`Is`x^?0ynw+_B?sF#Lh3o;4EP<;c3f-lc
ze?_)gn-tlVg<(>C4G3AVm3X96&p<j8DB)Le3-BZt9GCTBRLX=(%bT4t$y+ylr*?}E
z;A#Jg0nVf%vzr<1z@{DH?CzWB|E;xp-tQ5Tcxh16-rqf$`8S8??tmv#i$pRRUk)*i
zJW9hu?Vj02+YfXYQGAU(kBE_+r$GQNDs(~)88&7LzU2$ouf&H+%l1(yuy*;9MVM=G
zsHS27l5e>7P75Z2J7`>D4~v;b0F_P@h~UDFo_Ty^xkeN{Ll~Ia0;yo-1bHkhk{Olr
zRLGO2%zQo%Iw7*;NRvVmLdT6p79T+tZV)P-?IT0RH8qnoMN%Y47Xc~jxDc~ixq=_%
z0C7Mqb3%j+IbT*4voJ+YNSe6GK2|3f%Mifm20BlZbwDkPq=b$K?_Oq-3NdZ%6nSFg
zDJ#hfcNN0KNRS}pTBeDcOktqGTmT-Ts3$5wsLU}Um=76bY+fRdB!`ZIn=}bW1Yl_%
zZs4^6g*yudWPS}dB{KL(5mcD;2Sa)R1W*f+BS4lI884(8pe=BL2Uy-iULjx+%Z`$$
z#6q9}fGS6bs!V}Nz(J2NsV9;{RUU~$XpDkrE};ksk6znAjzbL}KYlomDA-@sf^!Mf
zYGyy8o+yu$M{<GI2o~X{Vq{*h3v$@VF=O(aefXq-Lxe!ATD@+okjPDo7Oxiy3LU7B
zz+_ulBE=z)_jsYt-6YTgk-}9EFl3V!v>+<BP|>DFP{qq5_o09fo1wsbmav-jY^fbv
zyQc10-Kz$x@mb@$#*fYao1O38?>)Zv`o8Y__V35PU-*96UT&|l57}qzua4u-)X!%j
z%UH`sV(@Lc(>Lb)ah^N3oSV)K=X&mT?nHKQ*2DbH-yI7&=5)+z6K%ZpZ|m3AFRdqG
z&ensiJ6gAh>*AU?nna1Y0d4-MeNzr89B95Yl!hz(|9^lU4r|F`AS+v%pDvxGw@`mH
zQ46sc@=9QU2`U)DMfEro$8D7&9jKbmMN?H(t*c{on&yax9!)b1!?v5c>><n2>guL3
zLK&fi5K9Ql5~fyX+hc?<GQyap87+?EI2N_EDHdt5ET&OY7;!YQT@OP(ff1{v&rp@m
zDbJpQk~|?Xml9Pekx7Y)ly3SAb*f2;9OBakTmx$y8FFM{`V4hC^)O;RmZMr>KqW?a
zK$$|(=q#u%f_f@}`NY&(kq9q6AbUjMxB<Eo1uGzI_1Adr>bXj=YOA+$%hpvcKjBuT
zO0a4&eTGQEPD!MYJRyN2E^t97kb1V}>a7I1LNH28loiF!nzG6YpxIM^tbimZ2DGet
z^;|wnpCnI@FDK!0WG=rnEI23Il<wsW*cqRDK+>`x%^o(_E?lr84Hr)zwQM|p9+GoS
zn=U>+UeC|&qr6AbJCNMnlHK2oN$&pYl6BHH(QFar7%9KW<82K*Kk$9m^}@)nMdO>?
zaUVw!-%8&qB>5!D*Q1|nakxb{UjppmD6h19DoL6zJa-Ac`4?45*;he}4g~d`bUWFx
zEeM21b?&k<1Kuu{A~DY@lqF%PQa7b#8CY6XRIn&Ka-%G5Y?$Ye6f~=<s+Z<@p0n8L
zVl$KK_2B&6Vg+mmP<FGK`X!`G9zd$V9;xENWk4fmaOzR#Fxhn;up1qqTW~hc09SWS
z7n;z>S^%4JFt4T9r3P@>wOoBJNAzgIxhR;>$j#%3zHQTI-BlBBkW@Qm(?_T<!sK!x
zY{f??%Gvb>$L23?J6$)p&SBcz`kFc;PON89-OA6OKM%g=iD;H_j0IMF`t+&bQ(0TB
z579OWyQ;88#-6HXY$7<IWxo4Hu36wR8&O6XJGo9*H`k3_*yS)ZcU*=QGIr{#bRLL5
z%YLRVzS(iJYkS}GWYyTt&YK<e*V|e_W<(>27VGKem!%#6NPrdS@k}?_G#dbVX^5q`
zK%|K*Ovm}8?L;FhloDplh!V5JzbtG;E;qeu4B`-vLoX3dMjt<Jak0OW6eb$EDM@dV
zy+ez5rMr6JwPb^2j51@CMHxg{#dazlmBN2jQRXwo*nCiH8Jn*tiZUOH6;)j?ilVq)
zRsT>>#aL{iESJ(!Szf5fL?a960@LLe&;>*z5SuRwWD||>w5BY3x@Vs9L?g35%%44b
z2jzLX1CGnNkw|VrDM!KFNTf3o$)&sKNp`}Iv;-4!$4pp8^dG-8(Z>_jTE&2j{eB|O
zOD2k&2l1!-ckt{r_#OTH>7d=(Zkv0YXtf9Pfi5RU@^pJ98Lva0ZecY}=+=c!^>tfp
z4XTDVw*k<WzI5!;ahcnvwd}N)tS?!&(>|^BU_qGw_9%m&Zk=w;XiNz6|Mv9d&pE0#
zHLaQ4+e&eUF!c5B<>|wRFHisddZ;iXOG;$o$u;#;lZ%U|CfBbyiS7*T!^lQ7ky5_H
z`AhL9yt-a-dA+t()+Y12(VcShpg=Rf73{@J1Hz(TVD-kPL`nB@i<$VVw2UbKfQ+!T
zE749`a-f%QvUl1J{?N|cb?eMc7|Ab481Bs3b;}GIFlZz*bF`xKpN$JBuoG)Khj-hT
z#spVI&%Hi6YFDW#ArgW@@|B{q^4iHU1JKOS#*gP`nrA<rZMej{_T1Dnt~qg2SC1=b
z#)5k29jQqA^HT|+86NfOS6vBRJg~I051f0lsL_(VnBnH!b@vRP0lgM}Uit$i7xCVO
zRwe3oLyt{OuD{hYkw2!pwdX1t(MTencLdGkI|-Z$nZh7J5Q0SQCha1TsNJMpr2WS@
zNZ6lx_1D|!d+Opm6zh=RC6+x&p^RzyQ8%9}`cb!q$@wdcEC2k@^e_G_;qw0i%@hkG
zxS^bEri2&DwNc<h?ekxbZ`Zs1m*exZUruk;yY-jT)1={hdgk=z?&%#Ky}M^#Z~mTc
z(2NpUVVK7EPHFW@N#|D>l8i<c6Wvdq4hka~(2QQuyrimjMl8O=M0`hRX4r66aL64c
z;*ac0bieh+r`osvnboA6uN-zBba{N`<K<XIjuJikWp8vCNL?u^EcNE%w|+j8Wh)mb
zM=bkZ9?g0Bn<u%{SvMNSJZbZIZdKuX`M6a)LX}cOV%*HV`G(4%ze1$kFlpdllG|^<
zd)&uvD4Jofa95VtW$Wy9?)U_|@Ua^T*VOLeKC`L@&D-16DdFg0y?RN&x;Q}jpng&$
zRKBAfH{<eh(2-}&<vH;>FE0Vle5#xRAhQ(zC=`E2y{g}7KmD2aCnY+;zp1ig?o534
z=6g=d_1?~46u&A?IL~q(0-zihi?Om4uUFwbsQ6X!E9Y54-O=hS&VzUo?bt^uD;z&!
zzv<Zy7o_5To=h6ypaGWJAX$zw#F%5nAN;pbA!tGcJO^_eS!J-Z-0(=z!ePu9&Q%i$
zVpjXsmj#j)>&u2V%iouSOnjQeMI_Bv3Fa90QAQ|4loijiNa4$ZI{XDlFa-he9BBS6
zSU{_8R3#di36Ss>`%i`(ji4cc6gj9s4XRL$W~5~B8kA|x1TyC9L<Qo|2not1i4{bO
z=}C~F8F?dWij~hm2WXT+-cN5r3R)DALU|b~P!3O|OSuXy{Y(iOkxe2^>Z9e5fdB~}
z0zkr-vm-)vOsJ5EIy|ps5aN)66vQFO)du!j*uBD0kfR<Qg{2^azbL@@2*g1SIjSHP
m>k&vqBBH<p0Rj;Uyt7eQldsrh8(W!?_m5a-)bK+I0002L@p+Q~

literal 0
HcmV?d00001

diff --git a/app/web/asset/font/material-symbols/material-symbols-outlined-variable.woff2 b/app/web/asset/font/material-symbols/material-symbols-outlined-variable.woff2
new file mode 100644
index 0000000..d2437dd
--- /dev/null
+++ b/app/web/asset/font/material-symbols/material-symbols-outlined-variable.woff2
@@ -0,0 +1 @@
+Couldn't find the requested file /files/material-symbols-outlined-variable.woff2 in @fontsource/material-symbols-outlined.
\ No newline at end of file
diff --git a/app/web/asset/font/material-symbols/material-symbols-outlined.woff2 b/app/web/asset/font/material-symbols/material-symbols-outlined.woff2
new file mode 100644
index 0000000..1da1d47
--- /dev/null
+++ b/app/web/asset/font/material-symbols/material-symbols-outlined.woff2
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang=en>
+  <meta charset=utf-8>
+  <meta name=viewport content="initial-scale=1, minimum-scale=1, width=device-width">
+  <title>Error 404 (Not Found)!!1</title>
+  <style>
+    *{margin:0;padding:0}html,code{font:15px/22px arial,sans-serif}html{background:#fff;color:#222;padding:15px}body{margin:7% auto 0;max-width:390px;min-height:180px;padding:30px 0 15px}* > body{background:url(//www.google.com/images/errors/robot.png) 100% 5px no-repeat;padding-right:205px}p{margin:11px 0 22px;overflow:hidden}ins{color:#777;text-decoration:none}a img{border:0}@media screen and (max-width:772px){body{background:none;margin-top:0;max-width:none;padding-right:0}}#logo{background:url(//www.google.com/images/branding/googlelogo/1x/googlelogo_color_150x54dp.png) no-repeat;margin-left:-5px}@media only screen and (min-resolution:192dpi){#logo{background:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) no-repeat 0% 0%/100% 100%;-moz-border-image:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) 0}}@media only screen and (-webkit-min-device-pixel-ratio:2){#logo{background:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) no-repeat;-webkit-background-size:100% 100%}}#logo{display:inline-block;height:54px;width:150px}
+  </style>
+  <a href=//www.google.com/><span id=logo aria-label=Google></span></a>
+  <p><b>404.</b> <ins>That’s an error.</ins>
+  <p>The requested URL <code>/s/materialsymbolsoutlined/v36/syl0-zNym6YjUgnMfxKof8KX6U8S8bf9IH0Q.woff2</code> was not found on this server.  <ins>That’s all we know.</ins>
diff --git a/app/web/asset/images/skills-detail-figma/agent.svg b/app/web/asset/images/skills-detail-figma/agent.svg
new file mode 100644
index 0000000..6e87e61
--- /dev/null
+++ b/app/web/asset/images/skills-detail-figma/agent.svg
@@ -0,0 +1,5 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 22 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Container">
+<path id="Icon" d="M3 13C2.16667 13 1.45833 12.7083 0.875 12.125C0.291667 11.5417 0 10.8333 0 10C0 9.16667 0.291667 8.45833 0.875 7.875C1.45833 7.29167 2.16667 7 3 7V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H8C8 2.16667 8.29167 1.45833 8.875 0.875C9.45833 0.291667 10.1667 0 11 0C11.8333 0 12.5417 0.291667 13.125 0.875C13.7083 1.45833 14 2.16667 14 3H17C17.55 3 18.0208 3.19583 18.4125 3.5875C18.8042 3.97917 19 4.45 19 5V7C19.8333 7 20.5417 7.29167 21.125 7.875C21.7083 8.45833 22 9.16667 22 10C22 10.8333 21.7083 11.5417 21.125 12.125C20.5417 12.7083 19.8333 13 19 13V17C19 17.55 18.8042 18.0208 18.4125 18.4125C18.0208 18.8042 17.55 19 17 19H5C4.45 19 3.97917 18.8042 3.5875 18.4125C3.19583 18.0208 3 17.55 3 17V13V13M8 11C8.41667 11 8.77083 10.8542 9.0625 10.5625C9.35417 10.2708 9.5 9.91667 9.5 9.5C9.5 9.08333 9.35417 8.72917 9.0625 8.4375C8.77083 8.14583 8.41667 8 8 8C7.58333 8 7.22917 8.14583 6.9375 8.4375C6.64583 8.72917 6.5 9.08333 6.5 9.5C6.5 9.91667 6.64583 10.2708 6.9375 10.5625C7.22917 10.8542 7.58333 11 8 11V11M14 11C14.4167 11 14.7708 10.8542 15.0625 10.5625C15.3542 10.2708 15.5 9.91667 15.5 9.5C15.5 9.08333 15.3542 8.72917 15.0625 8.4375C14.7708 8.14583 14.4167 8 14 8C13.5833 8 13.2292 8.14583 12.9375 8.4375C12.6458 8.72917 12.5 9.08333 12.5 9.5C12.5 9.91667 12.6458 10.2708 12.9375 10.5625C13.2292 10.8542 13.5833 11 14 11V11M7 15H15V13H7V15V15" fill="var(--fill-0, #0053DB)"/>
+</g>
+</svg>
diff --git a/app/web/asset/images/skills-detail-figma/article.svg b/app/web/asset/images/skills-detail-figma/article.svg
new file mode 100644
index 0000000..4ba9b73
--- /dev/null
+++ b/app/web/asset/images/skills-detail-figma/article.svg
@@ -0,0 +1,5 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 10.5 10.5" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Container">
+<path id="Icon" d="M2.33333 8.16667H6.41667V7H2.33333V8.16667V8.16667M2.33333 5.83333H8.16667V4.66667H2.33333V5.83333V5.83333M2.33333 3.5H8.16667V2.33333H2.33333V3.5V3.5M1.16667 10.5C0.845833 10.5 0.571181 10.3858 0.342708 10.1573C0.114236 9.92882 0 9.65417 0 9.33333V1.16667C0 0.845833 0.114236 0.571181 0.342708 0.342708C0.571181 0.114236 0.845833 0 1.16667 0H9.33333C9.65417 0 9.92882 0.114236 10.1573 0.342708C10.3858 0.571181 10.5 0.845833 10.5 1.16667V9.33333C10.5 9.65417 10.3858 9.92882 10.1573 10.1573C9.92882 10.3858 9.65417 10.5 9.33333 10.5H1.16667V10.5M1.16667 9.33333H9.33333V9.33333V9.33333V1.16667V1.16667V1.16667H1.16667V1.16667V1.16667V9.33333V9.33333V9.33333V9.33333M1.16667 1.16667V1.16667V1.16667V1.16667V9.33333V9.33333V9.33333V9.33333V9.33333V9.33333V1.16667V1.16667V1.16667V1.16667" fill="var(--fill-0, #0053DB)"/>
+</g>
+</svg>
diff --git a/app/web/asset/images/skills-detail-figma/check-circle.svg b/app/web/asset/images/skills-detail-figma/check-circle.svg
new file mode 100644
index 0000000..f55efdf
--- /dev/null
+++ b/app/web/asset/images/skills-detail-figma/check-circle.svg
@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Icon" d="M8.6 14.6L15.65 7.55L14.25 6.15L8.6 11.8L5.75 8.95L4.35 10.35L8.6 14.6V14.6M10 20C8.61667 20 7.31667 19.7375 6.1 19.2125C4.88333 18.6875 3.825 17.975 2.925 17.075C2.025 16.175 1.3125 15.1167 0.7875 13.9C0.2625 12.6833 0 11.3833 0 10C0 8.61667 0.2625 7.31667 0.7875 6.1C1.3125 4.88333 2.025 3.825 2.925 2.925C3.825 2.025 4.88333 1.3125 6.1 0.7875C7.31667 0.2625 8.61667 0 10 0C11.3833 0 12.6833 0.2625 13.9 0.7875C15.1167 1.3125 16.175 2.025 17.075 2.925C17.975 3.825 18.6875 4.88333 19.2125 6.1C19.7375 7.31667 20 8.61667 20 10C20 11.3833 19.7375 12.6833 19.2125 13.9C18.6875 15.1167 17.975 16.175 17.075 17.075C16.175 17.975 15.1167 18.6875 13.9 19.2125C12.6833 19.7375 11.3833 20 10 20V20M10 18C12.2333 18 14.125 17.225 15.675 15.675C17.225 14.125 18 12.2333 18 10C18 7.76667 17.225 5.875 15.675 4.325C14.125 2.775 12.2333 2 10 2C7.76667 2 5.875 2.775 4.325 4.325C2.775 5.875 2 7.76667 2 10C2 12.2333 2.775 14.125 4.325 15.675C5.875 17.225 7.76667 18 10 18V18M10 10V10V10V10V10V10V10V10V10V10" fill="var(--fill-0, #0053DB)"/>
+</svg>
diff --git a/app/web/asset/images/skills-detail-figma/chevron-down.svg b/app/web/asset/images/skills-detail-figma/chevron-down.svg
new file mode 100644
index 0000000..a6d357e
--- /dev/null
+++ b/app/web/asset/images/skills-detail-figma/chevron-down.svg
@@ -0,0 +1,5 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 7 4.31667" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Container">
+<path id="Icon" d="M3.5 4.31667L0 0.816667L0.816667 0L3.5 2.68333L6.18333 0L7 0.816667L3.5 4.31667V4.31667" fill="var(--fill-0, #566166)"/>
+</g>
+</svg>
diff --git a/app/web/asset/images/skills-detail-figma/chevron-right.svg b/app/web/asset/images/skills-detail-figma/chevron-right.svg
new file mode 100644
index 0000000..79a120a
--- /dev/null
+++ b/app/web/asset/images/skills-detail-figma/chevron-right.svg
@@ -0,0 +1,5 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 4.31667 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Container">
+<path id="Icon" d="M2.68333 3.5L0 0.816667L0.816667 0L4.31667 3.5L0.816667 7L0 6.18333L2.68333 3.5V3.5" fill="var(--fill-0, #566166)"/>
+</g>
+</svg>
diff --git a/app/web/asset/images/skills-detail-figma/contributor-1.png b/app/web/asset/images/skills-detail-figma/contributor-1.png
new file mode 100644
index 0000000000000000000000000000000000000000..f2ced189a7efefa5a1d0db14e15a58bb978dea83
GIT binary patch
literal 515
zcmex=<Ns|2X9f-+;N;-s;^O4x<Kg2K78DQ=6qXSY140>XX?bZN(pJ+`RaVtgb1~J|
zH+AuIvUBo_4-JhkFD#!k=OV}uMv4tN#30DQV8CF&%&5e`B*@4t$oT&VgERvJ6B9Ed
z0}^0jWM*MwX9Y@1FfuSRqR25YGPAP$zs0}<)WRgdECAH@`MAN(3-@w2UvN{IIcZDT
z;vT81r;abXvr^EgMTT`IGtd|n0iZS(MizuMK+S^8EUZETY>GyO!b*k)KqEPTHZj^W
z1T1tnSeUrW^7|CY!phhy5g&DuS@yI}eX+l(`*p+}yLF3v%^Np<acY$@j=j0P?@+DU
zlbMT43m6XgoiO3I{I>42Y-vH{gRDLM!AF)`Uc4E6=Be(nrU|PK{`}T7fA*<stW6zD
zF8?Z<G~>B@sf|<XioieiKnKbSGBC0*F(ZY65CgM-AfvE|VI$aOOpHL6Mac?DJ~1<|
j)A=qg4+<PX1{5s}42(hy0t#UDz)-Vi=*m4-|NkZcjoFEG

literal 0
HcmV?d00001

diff --git a/app/web/asset/images/skills-detail-figma/contributor-2.png b/app/web/asset/images/skills-detail-figma/contributor-2.png
new file mode 100644
index 0000000000000000000000000000000000000000..695931fa7a53df86a3f0b4b25ccae3f7e12d3de7
GIT binary patch
literal 430
zcmex=<Ns|2X9f-+;N;-s;^O4x<Kg2K78DQ=6qXSY140>XX?bZN(pJ+`RaVtgb1~J|
zH+AuIvUBo_4-JhkFD#!k=OV}uMv4tN#30DQV8CF&%&5e`B*@4t$oT&Vg9HO32rwW4
zW=0k^po}<%1OqDz^Z#26Jj{#?OajaTKrLUJdmb<_uM=;}5|&DzxqzV_s83OVfti7k
znS~i{BqI~E5QCs2i?E`Bf?*)g1P-8ujP?xQrTAtlc4-GK*r<D`H}=|E^N^!^zT0y=
zew4P?%Q;KylEb>Qr{>0r<*K-!-Sd3=1)1vq3?LT^GBN;NfCPjXnG^)U#xgMijXml;
r_1b2jLTNz;MkH4NH3%~bDHt*fUIeRU2B~dx?_|5kYaV_BX!K10#jjqH

literal 0
HcmV?d00001

diff --git a/app/web/asset/images/skills-detail-figma/copy-dark.svg b/app/web/asset/images/skills-detail-figma/copy-dark.svg
new file mode 100644
index 0000000..5047be1
--- /dev/null
+++ b/app/web/asset/images/skills-detail-figma/copy-dark.svg
@@ -0,0 +1,5 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 9.91667 11.6667" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Container">
+<path id="Icon" d="M3.5 9.33333C3.17917 9.33333 2.90451 9.2191 2.67604 8.99063C2.44757 8.76215 2.33333 8.4875 2.33333 8.16667V1.16667C2.33333 0.845833 2.44757 0.571181 2.67604 0.342708C2.90451 0.114236 3.17917 0 3.5 0H8.75C9.07083 0 9.34549 0.114236 9.57396 0.342708C9.80243 0.571181 9.91667 0.845833 9.91667 1.16667V8.16667C9.91667 8.4875 9.80243 8.76215 9.57396 8.99063C9.34549 9.2191 9.07083 9.33333 8.75 9.33333H3.5V9.33333M3.5 8.16667H8.75V8.16667V8.16667V1.16667V1.16667V1.16667H3.5V1.16667V1.16667V8.16667V8.16667V8.16667V8.16667M1.16667 11.6667C0.845833 11.6667 0.571181 11.5524 0.342708 11.324C0.114236 11.0955 0 10.8208 0 10.5V2.33333H1.16667V10.5V10.5V10.5H7.58333V11.6667H1.16667V11.6667M3.5 8.16667V8.16667V8.16667V1.16667V1.16667V1.16667V1.16667V1.16667V1.16667V8.16667V8.16667V8.16667V8.16667V8.16667" fill="var(--fill-0, #94A3B8)"/>
+</g>
+</svg>
diff --git a/app/web/asset/images/skills-detail-figma/copy-light.svg b/app/web/asset/images/skills-detail-figma/copy-light.svg
new file mode 100644
index 0000000..99b4a20
--- /dev/null
+++ b/app/web/asset/images/skills-detail-figma/copy-light.svg
@@ -0,0 +1,5 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 9.91667 11.6667" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Container">
+<path id="Icon" d="M3.5 9.33333C3.17917 9.33333 2.90451 9.2191 2.67604 8.99063C2.44757 8.76215 2.33333 8.4875 2.33333 8.16667V1.16667C2.33333 0.845833 2.44757 0.571181 2.67604 0.342708C2.90451 0.114236 3.17917 0 3.5 0H8.75C9.07083 0 9.34549 0.114236 9.57396 0.342708C9.80243 0.571181 9.91667 0.845833 9.91667 1.16667V8.16667C9.91667 8.4875 9.80243 8.76215 9.57396 8.99063C9.34549 9.2191 9.07083 9.33333 8.75 9.33333H3.5V9.33333M3.5 8.16667H8.75V8.16667V8.16667V1.16667V1.16667V1.16667H3.5V1.16667V1.16667V8.16667V8.16667V8.16667V8.16667M1.16667 11.6667C0.845833 11.6667 0.571181 11.5524 0.342708 11.324C0.114236 11.0955 0 10.8208 0 10.5V2.33333H1.16667V10.5V10.5V10.5H7.58333V11.6667H1.16667V11.6667M3.5 8.16667V8.16667V8.16667V1.16667V1.16667V1.16667V1.16667V1.16667V1.16667V8.16667V8.16667V8.16667V8.16667V8.16667" fill="var(--fill-0, #566166)"/>
+</g>
+</svg>
diff --git a/app/web/asset/images/skills-detail-figma/download.svg b/app/web/asset/images/skills-detail-figma/download.svg
new file mode 100644
index 0000000..a294100
--- /dev/null
+++ b/app/web/asset/images/skills-detail-figma/download.svg
@@ -0,0 +1,5 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 9.33333 9.33333" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Container">
+<path id="Icon" d="M4.66667 7L1.75 4.08333L2.56667 3.2375L4.08333 4.75417V0H5.25V4.75417L6.76667 3.2375L7.58333 4.08333L4.66667 7V7M1.16667 9.33333C0.845833 9.33333 0.571181 9.2191 0.342708 8.99063C0.114236 8.76215 0 8.4875 0 8.16667V6.41667H1.16667V8.16667V8.16667V8.16667H8.16667V8.16667V8.16667V6.41667H9.33333V8.16667C9.33333 8.4875 9.2191 8.76215 8.99063 8.99063C8.76215 9.2191 8.4875 9.33333 8.16667 9.33333H1.16667V9.33333" fill="var(--fill-0, white)"/>
+</g>
+</svg>
diff --git a/app/web/asset/images/skills-detail-figma/empty-related.svg b/app/web/asset/images/skills-detail-figma/empty-related.svg
new file mode 100644
index 0000000..782d86d
--- /dev/null
+++ b/app/web/asset/images/skills-detail-figma/empty-related.svg
@@ -0,0 +1,5 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 20 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Margin">
+<path id="Icon" d="M4 12V14H2C1.45 14 0.979167 13.8042 0.5875 13.4125C0.195833 13.0208 0 12.55 0 12V2C0 1.45 0.195833 0.979167 0.5875 0.5875C0.979167 0.195833 1.45 0 2 0H12C12.55 0 13.0208 0.195833 13.4125 0.5875C13.8042 0.979167 14 1.45 14 2V4H12V2V2V2H2V2V2V12V12V12H4V12M8 20C7.45 20 6.97917 19.8042 6.5875 19.4125C6.19583 19.0208 6 18.55 6 18V8C6 7.45 6.19583 6.97917 6.5875 6.5875C6.97917 6.19583 7.45 6 8 6H18C18.55 6 19.0208 6.19583 19.4125 6.5875C19.8042 6.97917 20 7.45 20 8V18C20 18.55 19.8042 19.0208 19.4125 19.4125C19.0208 19.8042 18.55 20 18 20H8V20M8 18H18V18V18V8V8V8H8V8V8V18V18V18V18M13 13V13V13V13V13V13V13V13V13V13V13V13V13V13" fill="var(--fill-0, #A9B4B9)"/>
+</g>
+</svg>
diff --git a/app/web/asset/images/skills-detail-figma/file-doc.svg b/app/web/asset/images/skills-detail-figma/file-doc.svg
new file mode 100644
index 0000000..1cbed43
--- /dev/null
+++ b/app/web/asset/images/skills-detail-figma/file-doc.svg
@@ -0,0 +1,5 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 9.33333 11.6667" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Container">
+<path id="Icon" d="M2.33333 9.33333H7V8.16667H2.33333V9.33333V9.33333M2.33333 7H7V5.83333H2.33333V7V7M1.16667 11.6667C0.845833 11.6667 0.571181 11.5524 0.342708 11.324C0.114236 11.0955 0 10.8208 0 10.5V1.16667C0 0.845833 0.114236 0.571181 0.342708 0.342708C0.571181 0.114236 0.845833 0 1.16667 0H5.83333L9.33333 3.5V10.5C9.33333 10.8208 9.2191 11.0955 8.99063 11.324C8.76215 11.5524 8.4875 11.6667 8.16667 11.6667H1.16667V11.6667M5.25 4.08333V1.16667H1.16667V1.16667V1.16667V10.5V10.5V10.5H8.16667V10.5V10.5V4.08333H5.25V4.08333M1.16667 1.16667V1.16667V4.08333V4.08333V1.16667V4.08333V4.08333V10.5V10.5V10.5V10.5V10.5V10.5V1.16667V1.16667V1.16667V1.16667" fill="var(--fill-0, #64748B)"/>
+</g>
+</svg>
diff --git a/app/web/asset/images/skills-detail-figma/folder-open-arrow.svg b/app/web/asset/images/skills-detail-figma/folder-open-arrow.svg
new file mode 100644
index 0000000..a393de4
--- /dev/null
+++ b/app/web/asset/images/skills-detail-figma/folder-open-arrow.svg
@@ -0,0 +1,5 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 7 4.31667" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Container">
+<path id="Icon" d="M3.5 4.31667L0 0.816667L0.816667 0L3.5 2.68333L6.18333 0L7 0.816667L3.5 4.31667V4.31667" fill="var(--fill-0, #2A3439)"/>
+</g>
+</svg>
diff --git a/app/web/asset/images/skills-detail-figma/folder-open-blue.svg b/app/web/asset/images/skills-detail-figma/folder-open-blue.svg
new file mode 100644
index 0000000..01b59ac
--- /dev/null
+++ b/app/web/asset/images/skills-detail-figma/folder-open-blue.svg
@@ -0,0 +1,5 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 12.5417 9.33333" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Container">
+<path id="Icon" d="M1.16667 9.33333C0.845833 9.33333 0.571181 9.2191 0.342708 8.99063C0.114236 8.76215 0 8.4875 0 8.16667V1.16667C0 0.845833 0.114236 0.571181 0.342708 0.342708C0.571181 0.114236 0.845833 0 1.16667 0H4.66667L5.83333 1.16667H10.5C10.8208 1.16667 11.0955 1.2809 11.324 1.50937C11.5524 1.73785 11.6667 2.0125 11.6667 2.33333H5.35208L4.18542 1.16667H1.16667V1.16667V1.16667V8.16667V8.16667V8.16667L2.56667 3.5H12.5417L11.0396 8.50208C10.9618 8.75486 10.8184 8.9566 10.6094 9.10729C10.4003 9.25799 10.1694 9.33333 9.91667 9.33333H1.16667V9.33333M2.39167 8.16667H9.91667L10.9667 4.66667H3.44167L2.39167 8.16667V8.16667M2.39167 8.16667L3.44167 4.66667V4.66667L2.39167 8.16667V8.16667V8.16667M1.16667 2.33333V1.16667V1.16667V1.16667V1.16667V2.33333V2.33333V2.33333" fill="var(--fill-0, #0053DB)"/>
+</g>
+</svg>
diff --git a/app/web/asset/images/skills-detail-figma/fork.svg b/app/web/asset/images/skills-detail-figma/fork.svg
new file mode 100644
index 0000000..3d7fb8b
--- /dev/null
+++ b/app/web/asset/images/skills-detail-figma/fork.svg
@@ -0,0 +1,5 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 9.33333 9.33333" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Container">
+<path id="Icon" d="M4.08333 9.33333V4.57917L2.56667 6.09583L1.75 5.25L4.66667 2.33333L7.58333 5.25L6.76667 6.09583L5.25 4.57917V9.33333H4.08333V9.33333M0 2.91667V1.16667C0 0.845833 0.114236 0.571181 0.342708 0.342708C0.571181 0.114236 0.845833 0 1.16667 0H8.16667C8.4875 0 8.76215 0.114236 8.99063 0.342708C9.2191 0.571181 9.33333 0.845833 9.33333 1.16667V2.91667H8.16667V1.16667V1.16667V1.16667H1.16667V1.16667V1.16667V2.91667H0V2.91667" fill="var(--fill-0, #F8F7FF)"/>
+</g>
+</svg>
diff --git a/app/web/asset/images/skills-detail-figma/hero-skill.svg b/app/web/asset/images/skills-detail-figma/hero-skill.svg
new file mode 100644
index 0000000..a27e658
--- /dev/null
+++ b/app/web/asset/images/skills-detail-figma/hero-skill.svg
@@ -0,0 +1,5 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Container">
+<path id="Icon" d="M12.5 25C11.8125 25 11.224 24.7552 10.7344 24.2656C10.2448 23.776 10 23.1875 10 22.5V12.5C10 11.8125 10.2448 11.224 10.7344 10.7344C11.224 10.2448 11.8125 10 12.5 10H22.5C23.1875 10 23.776 10.2448 24.2656 10.7344C24.7552 11.224 25 11.8125 25 12.5V22.5C25 23.1875 24.7552 23.776 24.2656 24.2656C23.776 24.7552 23.1875 25 22.5 25H12.5V25M12.5 22.5H22.5V22.5V22.5V12.5V12.5V12.5H12.5V12.5V12.5V22.5V22.5V22.5V22.5M5 20V7.5C5 6.8125 5.24479 6.22396 5.73438 5.73438C6.22396 5.24479 6.8125 5 7.5 5H20V7.5H7.5V7.5V7.5V20H5V20M0 15V2.5C0 1.8125 0.244792 1.22396 0.734375 0.734375C1.22396 0.244792 1.8125 0 2.5 0H15V2.5H2.5V2.5V2.5V15H0V15M12.5 22.5V22.5V22.5V12.5V12.5V12.5V12.5V12.5V12.5V22.5V22.5V22.5V22.5V22.5" fill="var(--fill-0, #0053DB)"/>
+</g>
+</svg>
diff --git a/app/web/asset/images/skills-detail-figma/human.svg b/app/web/asset/images/skills-detail-figma/human.svg
new file mode 100644
index 0000000..475e7c7
--- /dev/null
+++ b/app/web/asset/images/skills-detail-figma/human.svg
@@ -0,0 +1,5 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Container">
+<path id="Icon" d="M8 8C6.9 8 5.95833 7.60833 5.175 6.825C4.39167 6.04167 4 5.1 4 4C4 2.9 4.39167 1.95833 5.175 1.175C5.95833 0.391667 6.9 0 8 0C9.1 0 10.0417 0.391667 10.825 1.175C11.6083 1.95833 12 2.9 12 4C12 5.1 11.6083 6.04167 10.825 6.825C10.0417 7.60833 9.1 8 8 8V8M0 16V13.2C0 12.6333 0.145833 12.1125 0.4375 11.6375C0.729167 11.1625 1.11667 10.8 1.6 10.55C2.63333 10.0333 3.68333 9.64583 4.75 9.3875C5.81667 9.12917 6.9 9 8 9C9.1 9 10.1833 9.12917 11.25 9.3875C12.3167 9.64583 13.3667 10.0333 14.4 10.55C14.8833 10.8 15.2708 11.1625 15.5625 11.6375C15.8542 12.1125 16 12.6333 16 13.2V16H0V16M2 14H14V13.2C14 13.0167 13.9542 12.85 13.8625 12.7C13.7708 12.55 13.65 12.4333 13.5 12.35C12.6 11.9 11.6917 11.5625 10.775 11.3375C9.85833 11.1125 8.93333 11 8 11C7.06667 11 6.14167 11.1125 5.225 11.3375C4.30833 11.5625 3.4 11.9 2.5 12.35C2.35 12.4333 2.22917 12.55 2.1375 12.7C2.04583 12.85 2 13.0167 2 13.2V14V14M8 6C8.55 6 9.02083 5.80417 9.4125 5.4125C9.80417 5.02083 10 4.55 10 4C10 3.45 9.80417 2.97917 9.4125 2.5875C9.02083 2.19583 8.55 2 8 2C7.45 2 6.97917 2.19583 6.5875 2.5875C6.19583 2.97917 6 3.45 6 4C6 4.55 6.19583 5.02083 6.5875 5.4125C6.97917 5.80417 7.45 6 8 6V6M8 4V4V4V4V4V4V4V4V4V4M8 14V14V14V14V14V14V14V14V14V14V14V14V14" fill="var(--fill-0, #0F766E)"/>
+</g>
+</svg>
diff --git a/app/web/asset/images/skills-detail-figma/star-outline.svg b/app/web/asset/images/skills-detail-figma/star-outline.svg
new file mode 100644
index 0000000..d8fa2bf
--- /dev/null
+++ b/app/web/asset/images/skills-detail-figma/star-outline.svg
@@ -0,0 +1,5 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 11.6667 11.0833" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Container">
+<path id="Icon" d="M3.99583 8.64792L5.83333 7.53958L7.67083 8.6625L7.18958 6.5625L8.80833 5.1625L6.67917 4.97292L5.83333 2.98958L4.9875 4.95833L2.85833 5.14792L4.47708 6.5625L3.99583 8.64792V8.64792M2.23125 11.0833L3.17917 6.98542L0 4.22917L4.2 3.86458L5.83333 0L7.46667 3.86458L11.6667 4.22917L8.4875 6.98542L9.43542 11.0833L5.83333 8.91042L2.23125 11.0833V11.0833M5.83333 5.97917V5.97917V5.97917V5.97917V5.97917V5.97917V5.97917V5.97917V5.97917V5.97917V5.97917V5.97917" fill="var(--fill-0, #2A3439)"/>
+</g>
+</svg>
diff --git a/app/web/layouts/basicLayout/index.tsx b/app/web/layouts/basicLayout/index.tsx
index 068cb99..1e79f7f 100644
--- a/app/web/layouts/basicLayout/index.tsx
+++ b/app/web/layouts/basicLayout/index.tsx
@@ -11,6 +11,7 @@ const { Content } = Layout;
 const BasicLayout = (props: any) => {
     const { className, route, location } = props;
     const { pathname } = location;
+    const isSkillDetailPage = /^\/page\/skills\/[^/]+$/.test(pathname);
 
     // 如果弹出过哆啦A梦 Chrome 插件的弹框，则后续不再弹出
     React.useEffect(() => {
@@ -39,7 +40,11 @@ const BasicLayout = (props: any) => {
     }, [pathname]);
 
     return (
-        <Layout className="layout-basic">
+        <Layout
+            className={classnames('layout-basic', {
+                'is-skill-detail-layout': isSkillDetailPage,
+            })}
+        >
             <Header location={location} />
             <Content className={classnames('main-content', className)}>
                 <div className="context_container">{renderRoutes(route.routes)}</div>
diff --git a/app/web/layouts/basicLayout/style.scss b/app/web/layouts/basicLayout/style.scss
index 9e466b6..c2fc1dc 100644
--- a/app/web/layouts/basicLayout/style.scss
+++ b/app/web/layouts/basicLayout/style.scss
@@ -1,26 +1,32 @@
 .layout-basic {
     height: 100vh;
     padding-top: 64px;
+    box-sizing: border-box;
+
     .logo_img {
         width: 30px;
         height: 30px;
         margin: 0 8px 8px 12px;
     }
+
     .system-title {
         font-size: 21px;
         font-weight: 700;
         color: #FFF;
     }
+
     .local-ip {
         color: #FFF;
         font-size: 16px;
     }
+
     .main-content {
         height: 100%;
         display: flex;
         flex: 1;
         background: #F2F7FA;
     }
+
     .context_container {
         flex: 1;
         min-height: 0;
@@ -28,4 +34,22 @@
         width: 100%;
         overflow: auto;
     }
-}
+
+    &.is-skill-detail-layout {
+        overflow: hidden;
+
+        .main-content {
+            flex: 1;
+            height: 0;
+            min-height: 0;
+            background: #F2F7FA;
+            overflow: hidden;
+        }
+
+        .context_container {
+            height: 100%;
+            padding: 0;
+            overflow: hidden;
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/web/pages/skills/detail/stitchAssets.scss b/app/web/pages/skills/detail/stitchAssets.scss
new file mode 100644
index 0000000..b5b2ee0
--- /dev/null
+++ b/app/web/pages/skills/detail/stitchAssets.scss
@@ -0,0 +1,50 @@
+@font-face {
+    font-family: 'SkillDetailMaterialSymbols';
+    font-style: normal;
+    font-weight: 400;
+    font-display: block;
+    src: url('../../../asset/font/material-symbols/material-symbols-outlined-subset.woff2')
+        format('woff2');
+}
+
+@font-face {
+    font-family: 'SkillDetailInter';
+    font-style: normal;
+    font-weight: 400 600;
+    font-display: swap;
+    src: url('../../../asset/font/material-symbols/inter-latin.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'SkillDetailManrope';
+    font-style: normal;
+    font-weight: 400 800;
+    font-display: swap;
+    src: url('../../../asset/font/material-symbols/manrope-latin.woff2') format('woff2');
+}
+
+.page-skill-detail {
+    --skill-detail-font-body: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
+        -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    --skill-detail-font-display: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
+        -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    --skill-detail-font-icon: 'SkillDetailMaterialSymbols';
+}
+
+.skill-detail-material-symbol {
+    font-family: var(--skill-detail-font-icon);
+    font-style: normal;
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap;
+    direction: ltr;
+    -webkit-font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
+    font-feature-settings: 'liga';
+}
diff --git a/app/web/pages/skills/detail/style.scss b/app/web/pages/skills/detail/style.scss
index 6597545..bfbef91 100644
--- a/app/web/pages/skills/detail/style.scss
+++ b/app/web/pages/skills/detail/style.scss
@@ -1,424 +1,1193 @@
+@import './stitchAssets.scss';
+
 .page-skill-detail {
-    padding: 20px 24px;
-    background: linear-gradient(180deg, #F5F8FC 0%, #F8FAFC 100%);
-    &.loading-wrap {
+    height: 100%;
+    min-height: 0;
+    overflow: hidden;
+    background: #f7f9fb;
+    font-family: var(--skill-detail-font-body);
+    color: #2a3439;
+
+    .skill-detail-figma-icon {
+        display: inline-block;
+        object-fit: contain;
+        flex: 0 0 auto;
+
+        &.is-hero {
+            width: 25px;
+            height: 25px;
+        }
+
+        &.is-tree-node {
+            width: 12px;
+            height: 12px;
+        }
+
+        &.is-option-icon {
+            width: 22px;
+            height: 19px;
+        }
+
+        &.is-agent-icon {
+            width: 22px;
+            height: 19px;
+        }
+
+        &.is-human-icon {
+            width: 16px;
+            height: 16px;
+        }
+
+        &.is-chevron {
+            width: 7px;
+            height: 5px;
+        }
+
+        &.is-chevron-right {
+            width: 5px;
+            height: 7px;
+        }
+
+        &.is-copy-dark {
+            width: 10px;
+            height: 12px;
+        }
+
+        &.is-download {
+            width: 10px;
+            height: 10px;
+        }
+
+        &.is-article {
+            width: 11px;
+            height: 11px;
+        }
+
+        &.is-empty-related {
+            width: 22px;
+            height: 28px;
+        }
+
+        &.is-related-skill-icon {
+            width: 18px;
+            height: 18px;
+        }
+
+        &.is-browse-market-arrow {
+            width: 9px;
+            height: 9px;
+        }
+    }
+
+    &.loading-wrap,
+    &.page-skill-detail-empty {
         display: flex;
-        justify-content: center;
         align-items: center;
-        min-height: 420px;
+        justify-content: center;
     }
-    .detail-hero {
+
+    .skill-detail-shell {
+        height: 100%;
+        min-height: 0;
         display: grid;
-        grid-template-columns: minmax(0, 1.65fr) minmax(320px, 1fr);
-        gap: 20px;
-        margin-bottom: 20px;
-    }
-    .detail-hero-main,
-    .install-overview-card,
-    .file-tree-card,
-    .file-viewer-card,
-    .action-card,
-    .related-card-list {
-        border: 1px solid #E4ECF5;
-        border-radius: 18px;
-        background: #FFF;
-        box-shadow: 0 16px 36px rgba(31, 45, 61, 0.06);
-    }
-    .detail-hero-main {
-        padding: 24px;
-        background: linear-gradient(145deg, #FFF 0%, #F5F9FF 100%);
+        grid-template-columns: 256px minmax(0, 1fr) 320px;
+        overflow: hidden;
     }
-    .back-btn {
-        margin-bottom: 18px;
-        border-radius: 10px;
-        border-color: #D8E4F1;
-        color: #35506B;
-        background: #FFF;
+
+    .detail-left-sidebar,
+    .detail-right-sidebar {
+        height: 100%;
+        min-height: 0;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
     }
-    .hero-kicker-row {
+
+    .detail-main-column {
+        height: 100%;
+        min-height: 0;
         display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        gap: 10px;
-        margin-bottom: 18px;
+        flex-direction: column;
+        overflow: auto;
     }
-    .install-key-chip {
-        display: inline-flex;
-        align-items: center;
-        min-height: 28px;
-        padding: 0 12px;
-        border-radius: 999px;
-        border: 1px solid #D6E3F1;
-        background: #F5F9FF;
-        color: #42607B;
-        font-size: 13px;
-        font-weight: 500;
-    }
-    .hero-title-row {
+
+    .detail-left-sidebar {
+        background: #f1f5f9;
+        border-right: 1px solid rgba(226, 232, 240, 0.7);
+    }
+
+    .sidebar-head {
+        padding: 16px;
+        border-bottom: 1px solid rgba(226, 232, 240, 0.7);
         display: flex;
-        justify-content: space-between;
-        gap: 20px;
-        margin-bottom: 18px;
-        .title-group {
+        align-items: center;
+        gap: 8px;
+
+        .back-btn {
+            padding: 4px 8px;
+            height: auto;
+            background: transparent;
+            border: none;
+
+            &:hover {
+                background: transparent;
+            }
+        }
+
+        .sidebar-title-group {
             flex: 1;
-            min-width: 0;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 12px;
         }
-        .ant-typography {
-            margin-bottom: 0;
+
+        span,
+        strong {
+            font-size: 10px;
+            font-weight: 600;
+            letter-spacing: 0.08em;
         }
-        h2.ant-typography {
-            margin-bottom: 12px;
-            color: #1F2D3D;
-            font-size: 32px;
-            line-height: 1.2;
+
+        span {
+            color: #566166;
         }
-    }
-    .hero-description {
-        max-width: 760px;
-        margin-bottom: 0;
-        color: #5C7086;
-        font-size: 15px;
-        line-height: 1.75;
-    }
-    .hero-action-group {
-        justify-content: flex-end;
-        align-self: flex-start;
-        max-width: 320px;
-        .ant-btn {
-            border-radius: 10px;
+
+        strong {
+            color: #2563eb;
         }
     }
-    .hero-meta-grid {
-        display: grid;
-        grid-template-columns: repeat(4, minmax(0, 1fr));
-        gap: 12px;
+
+    .sidebar-tree-wrap {
+        flex: 1;
+        min-height: 0;
+        overflow: auto;
+        padding: 8px;
+
+        .ant-empty {
+            margin-top: 48px;
+        }
+
+        .ant-tree {
+            background: transparent;
+            font-size: 12px;
+        }
+
+        .ant-tree-treenode {
+            width: 100%;
+        }
+
+        .ant-tree-switcher {
+            color: #64748b;
+            flex: 0 0 auto;
+        }
+
+        .ant-tree-node-content-wrapper {
+            min-height: 28px;
+            padding: 0;
+            width: 100%;
+            flex: 1 1 auto;
+            min-width: 0;
+
+            &:hover {
+                background: transparent;
+            }
+        }
+
+        .ant-tree-title {
+            display: block;
+            width: 100%;
+        }
+
+        .ant-tree-node-content-wrapper.ant-tree-node-selected,
+        .ant-tree-treenode-selected > .ant-tree-node-content-wrapper {
+            background: transparent;
+        }
     }
-    .hero-meta-card {
-        padding: 16px 18px;
-        border-radius: 14px;
-        border: 1px solid #E7EEF6;
-        background: linear-gradient(180deg, #FFF 0%, #F7FAFD 100%);
-        min-width: 0;
-        &.is-accent {
-            background: linear-gradient(135deg, #EAF3FF 0%, #F7FAFF 100%);
-            border-color: #D7E6FA;
+
+    .explorer-tree-item {
+        width: 100%;
+        min-height: 28px;
+        padding: 6px 8px;
+        border-left: 2px solid transparent;
+        border-radius: 2px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        color: #64748b;
+        line-height: 16px;
+        cursor: pointer;
+        user-select: none;
+
+        &.is-selected {
+            background: rgba(37, 99, 235, 0.08);
+            border-left-color: #2563eb;
+            color: #2563eb;
+            font-weight: 600;
         }
-        &.is-wide {
-            grid-column: span 2;
+
+        &:focus-visible {
+            outline: 1px solid rgba(37, 99, 235, 0.28);
+            outline-offset: 1px;
         }
     }
-    .hero-meta-label {
-        display: block;
-        margin-bottom: 8px;
-        color: #8A9AAE;
-        font-size: 12px;
-        letter-spacing: 0.08em;
-        text-transform: uppercase;
+
+    .sidebar-foot {
+        padding: 16px;
+        border-top: 1px solid rgba(226, 232, 240, 0.7);
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
     }
-    .hero-meta-value {
-        color: #23384D;
-        font-size: 15px;
+
+    .install-primary-btn {
+        height: 34px;
+        border-radius: 4px;
+        font-size: 12px;
         font-weight: 600;
-        line-height: 1.6;
-        word-break: break-word;
-        .anticon {
-            margin-right: 6px;
-            color: #D9A441;
-        }
+        background: #1658d5;
+        border-color: #1658d5;
     }
-    .hero-tag-list {
-        display: flex;
-        flex-wrap: wrap;
+
+    .sidebar-help-btn {
+        padding: 8px 6px;
+        border: 0;
+        background: transparent;
+        color: #64748b;
+        display: inline-flex;
+        align-items: center;
         gap: 8px;
-        margin-top: 16px;
+        cursor: pointer;
     }
-    .install-overview-card {
-        padding: 24px;
+
+    .detail-main-column {
+        min-width: 0;
+        min-height: 0;
+        padding: 12px 20px 20px;
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
         overflow: hidden;
-        .ant-card-body {
-            padding: 0;
-        }
+        align-items: stretch;
     }
-    .install-card-header {
+
+    .detail-hero-main {
+        width: 100%;
+        padding: 16px 24px;
+        min-height: 182px;
+        border-radius: 8px;
+        border: 1px solid rgba(169, 180, 185, 0.1);
+        background: #fff;
+        box-shadow: 0 0 0 1px rgba(169, 180, 185, 0.04);
         display: flex;
+        flex-direction: column;
         justify-content: space-between;
-        gap: 16px;
-        margin-bottom: 18px;
+        gap: 10px;
     }
-    .install-card-title {
-        display: block;
-        margin-bottom: 8px;
-        color: #1F2D3D;
-        font-size: 20px;
-        font-weight: 700;
+
+    .hero-head-row {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        gap: 20px;
     }
-    .install-card-caption {
-        margin-bottom: 0;
-        color: #60748A;
-        line-height: 1.7;
+
+    .hero-title-block {
+        min-width: 0;
+        display: flex;
+        align-items: flex-start;
+        gap: 20px;
+        flex: 1;
     }
-    .install-status-tag {
+
+    .skill-title-icon {
+        width: 64px;
+        height: 64px;
+        border-radius: 8px;
+        background: #dbe1ff;
         display: inline-flex;
         align-items: center;
+        justify-content: center;
+        flex: 0 0 auto;
+    }
+
+    .hero-copy {
+        min-width: 0;
+
+        h2.ant-typography {
+            margin-bottom: 4px;
+            color: #2a3439;
+            font-size: 24px;
+            font-family: var(--skill-detail-font-display);
+            font-weight: 700;
+            letter-spacing: -0.025em;
+            line-height: 32px;
+        }
+    }
+
+    .hero-description {
+        max-width: 760px;
+        margin-bottom: 0;
+        color: #566166;
+        font-size: 14px;
+        line-height: 24px;
+        display: -webkit-box;
+        overflow: hidden;
+        -webkit-line-clamp: 4;
+        -webkit-box-orient: vertical;
+    }
+
+    .hero-actions {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        flex: 0 0 auto;
+    }
+
+    .hero-stat-chip {
+        min-width: 54px;
         height: 32px;
         padding: 0 14px;
-        border-radius: 999px;
-        font-size: 13px;
+        border-radius: 4px;
+        background: #e8eff3;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+        color: #2a3439;
+        font-size: 14px;
+    }
+
+    .hero-fork-btn {
+        height: 32px;
+        padding: 0 16px;
+        border-radius: 4px;
         font-weight: 600;
-        white-space: nowrap;
-        &.is-ready {
-            color: #1F5FA6;
-            background: #E8F2FF;
-            border: 1px solid #CFE0F7;
-        }
-        &.is-fallback {
-            color: #9A6414;
-            background: #FFF5E8;
-            border: 1px solid #F4DFC0;
-        }
+        background: #0053db;
+        border-color: #0053db;
     }
-    .install-tabs {
-        .ant-tabs-nav {
-            margin-bottom: 16px;
-        }
-        .ant-tabs-tab {
-            padding: 10px 0;
+
+    .hero-meta-row {
+        padding-top: 14px;
+        border-top: 1px solid #f1f5f9;
+        display: flex;
+        align-items: center;
+        gap: 32px;
+        flex-wrap: nowrap;
+    }
+
+    .hero-meta-item {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+
+        span {
+            color: #566166;
+            font-size: 10px;
             font-weight: 600;
+            letter-spacing: 0.1em;
         }
-        .ant-tabs-ink-bar {
-            height: 3px;
-            border-radius: 999px;
-            background: #2F7BFF;
+
+        strong {
+            color: #2a3439;
+            font-size: 14px;
+            line-height: 20px;
         }
     }
-    .install-tab-panel {
+
+    .document-panel {
+        min-height: 0;
+        flex: 1;
+        width: 100%;
+        border-radius: 8px;
+        overflow: hidden;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+        background: #e8eff3;
         display: flex;
         flex-direction: column;
-        gap: 12px;
     }
-    .install-command-card {
-        padding: 14px;
-        border: 1px solid #E6EDF5;
-        border-radius: 14px;
-        background: #F7FAFD;
-    }
-    .install-command-header {
+
+    .document-toolbar {
+        height: 44px;
+        padding: 0 16px;
+        background: #e1e9ee;
         display: flex;
-        flex-direction: column;
-        gap: 4px;
-        margin-bottom: 10px;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+        flex: 0 0 auto;
     }
-    .install-command-title {
-        color: #29415A;
-        font-size: 14px;
+
+    .document-toolbar-left {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        color: #566166;
+        font-size: 12px;
         font-weight: 600;
+        letter-spacing: 0.03em;
     }
-    .detail-main-row {
-        margin-bottom: 20px;
-    }
-    .file-tree-card {
-        margin-bottom: 16px;
-        .ant-card-head {
-            border-bottom-color: #EEF3F8;
-        }
-        .ant-tree {
-            padding: 4px 10px 10px;
+
+    .document-toolbar-right {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+
+        span {
+            width: 10px;
+            height: 10px;
+            border-radius: 999px;
+            background: #cbd5e1;
         }
     }
-    .file-viewer-card {
-        min-height: 560px;
-        .ant-card-head {
-            border-bottom-color: #EEF3F8;
-        }
-        .ant-card-body {
-            max-height: 640px;
-            overflow: auto;
+
+    .document-loading-indicator {
+        width: auto !important;
+        height: auto !important;
+        border-radius: 0 !important;
+        background: transparent !important;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 8px;
+
+        .ant-spin {
+            color: #2563eb;
         }
     }
+
+    .document-scroll-area {
+        min-height: 0;
+        flex: 1;
+        overflow: auto;
+        background: #fff;
+        padding: 32px;
+    }
+
+    .document-content-shell {
+        position: relative;
+        min-height: 100%;
+    }
+
+    .file-viewer-loading {
+        min-height: 360px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
     .markdown-file-viewer {
+        .markdown-renderer {
+            color: #566166;
+            font-size: 16px;
+            line-height: 1.7;
+        }
+
+        h1,
+        h2,
+        h3 {
+            color: #2a3439;
+            font-family: var(--skill-detail-font-display);
+        }
+
         .frontmatter-table-wrap {
-            margin-bottom: 16px;
-            border: 1px solid #E5EDF6;
-            border-radius: 14px;
+            margin-bottom: 24px;
+            border: 1px solid #e2e8f0;
+            border-radius: 8px;
             overflow: hidden;
-            background: #FFF;
-            box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
         }
+
         .frontmatter-table {
             width: 100%;
             border-collapse: collapse;
-            table-layout: fixed;
-            position: relative;
-            &::before {
-                content: "";
-                position: absolute;
-                left: 0;
-                top: 0;
-                right: 0;
-                height: 3px;
-                background: linear-gradient(90deg, #2F7BFF 0%, #56A1FF 100%);
-            }
+
             th,
             td {
-                padding: 14px 18px;
+                padding: 14px 16px;
+                border-bottom: 1px solid #eef2f7;
                 vertical-align: top;
-                border-bottom: 1px solid #EEF3F8;
             }
-            tr:last-child {
-                th,
-                td {
-                    border-bottom: none;
-                }
+
+            tr:last-child th,
+            tr:last-child td {
+                border-bottom: 0;
             }
+
             th {
-                width: 176px;
-                color: #2D4A6A;
-                font-size: 15px;
+                width: 180px;
+                background: #f8fafc;
+                color: #2d4a6a;
+                font-size: 14px;
                 font-weight: 600;
                 text-align: left;
-                background: linear-gradient(180deg, #F7FAFF 0%, #F2F7FF 100%);
-                border-right: 1px solid #E8EEF7;
             }
+
             td {
-                font-size: 16px;
+                background: #fff;
                 color: #344054;
-                line-height: 1.7;
-                word-break: break-word;
-                background: #FFF;
-            }
-            .frontmatter-code {
-                margin: 0;
-                padding: 10px 12px;
-                border: 1px solid #E4EAF1;
-                border-radius: 8px;
-                background: #F7FAFC;
-                color: #1F2D3D;
                 font-size: 14px;
-                line-height: 1.55;
-                white-space: pre-wrap;
+                line-height: 1.7;
                 word-break: break-word;
             }
         }
+
+        .frontmatter-code {
+            margin: 0;
+            padding: 10px 12px;
+            border-radius: 6px;
+            background: #f8fafc;
+            white-space: pre-wrap;
+        }
     }
+
     .file-viewer-loading {
+        min-height: 320px;
         display: flex;
-        justify-content: center;
         align-items: center;
-        min-height: 420px;
+        justify-content: center;
+    }
+
+    .detail-right-sidebar {
+        padding: 12px 16px 16px;
+        border-left: 1px solid rgba(226, 232, 240, 0.7);
+        background: #f8fafc;
+        overflow-y: auto;
+        overflow-x: hidden;
+        gap: 12px;
+        align-items: stretch;
+
+        > * {
+            width: 100%;
+            min-width: 0;
+        }
     }
-    .action-card {
-        margin-bottom: 16px;
-        &:last-child {
-            margin-bottom: 0;
+
+    .sidebar-section-title {
+        margin-bottom: 8px;
+        color: #566166;
+        font-size: 10px;
+        font-weight: 600;
+        letter-spacing: 0.14em;
+    }
+
+    .install-option-card {
+        border: 1px solid #dbe5f0;
+        border-radius: 8px;
+        background: #fff;
+        overflow: hidden;
+
+        &.is-active {
+            border-color: #2563eb;
         }
-        .ant-card-head {
-            border-bottom-color: #EEF3F8;
+
+        &.is-collapsed {
+            margin-top: 8px;
         }
     }
-    .download-card {
-        .ant-card-extra {
-            color: #7B8EA3;
-            font-size: 12px;
-            text-transform: uppercase;
-            letter-spacing: 0.06em;
+
+    .install-option-trigger {
+        width: 100%;
+        min-height: 55px;
+        padding: 12px 16px;
+        border: 0;
+        background: #fff;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+        cursor: pointer;
+    }
+
+    .install-option-trigger:hover {
+        background: #fbfdff;
+    }
+
+    .install-option-meta {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        text-align: left;
+        min-width: 0;
+        flex: 1;
+    }
+
+    .install-option-icon-shell {
+        width: 40px;
+        height: 40px;
+        border-radius: 8px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex: 0 0 auto;
+
+        &.is-agent {
+            background: rgba(0, 83, 219, 0.1);
         }
+
+        &.is-human {
+            background: #f0fdfa;
+        }
+    }
+
+    .install-option-title {
+        color: #2a3439;
+        font-size: 14px;
+        font-weight: 600;
+        font-family: var(--skill-detail-font-display);
+        line-height: 1;
+    }
+
+    .install-option-description {
+        color: #64748b;
+        font-size: 11px;
+        line-height: 15px;
     }
-    .download-buttons {
+
+    .install-option-meta > div {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        min-width: 0;
+    }
+
+    .install-option-body {
+        display: grid;
+        grid-template-rows: 0fr;
+        padding: 0 12px;
+        opacity: 0;
+        transition:
+            grid-template-rows 180ms ease,
+            padding 180ms ease,
+            opacity 140ms ease;
+
+        &.is-open {
+            grid-template-rows: 1fr;
+            padding: 4px 12px 12px;
+            opacity: 1;
+        }
+
+        &.is-closed {
+            pointer-events: none;
+        }
+    }
+
+    .install-option-body-inner {
+        min-height: 0;
+        overflow: hidden;
         display: flex;
         flex-direction: column;
         gap: 12px;
     }
-    .command-block {
+
+    .human-command-card {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+    }
+
+    .human-command-title {
+        color: #566166;
+        font-size: 12px;
+        font-weight: 600;
+        line-height: 16px;
+    }
+
+    .download-panel,
+    .related-panel,
+    .meta-panel {
+        padding-top: 4px;
+    }
+
+    .download-btn {
+        height: 28px;
+        margin-bottom: 12px;
+        padding: 0 12px;
+        border-radius: 4px;
+        font-size: 12px;
+        font-weight: 600;
+        background: #0f172a;
+        border-color: #0f172a;
+        color: #fff;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+
+        &:hover,
+        &:focus {
+            background: #1b2438;
+            border-color: #1b2438;
+            color: #fff;
+        }
+
+        &:active {
+            background: #0b1220;
+            border-color: #0b1220;
+            color: #fff;
+        }
+    }
+
+    .install-panel,
+    .download-panel,
+    .related-panel,
+    .meta-panel {
+        flex: 0 0 auto;
+    }
+
+    .related-panel {
+        min-height: 0;
+        display: flex;
+        flex-direction: column;
+        flex: 1 1 auto;
+        width: 100%;
+        min-width: 0;
+        overflow: hidden;
+    }
+
+    .command-surface {
+        border-radius: 6px;
+        overflow: hidden;
+
+        &.is-dark {
+            background: #111827;
+            color: #f8fafc;
+        }
+
+        &.is-light {
+            border: 1px solid #e2e8f0;
+            background: #eef3f7;
+            color: #475569;
+        }
+
+        &.is-terminal {
+            border-radius: 4px;
+        }
+
+        code {
+            display: block;
+            padding: 0 14px 12px;
+            font-size: 12px;
+            line-height: 1.6;
+            white-space: pre-wrap;
+            word-break: break-word;
+        }
+
+        p {
+            margin: 0;
+            padding: 0 14px 12px;
+            color: inherit;
+            font-size: 12px;
+            line-height: 1.6;
+            opacity: 0.8;
+        }
+    }
+
+    .command-surface-inline {
+        min-height: 39px;
         display: flex;
         align-items: stretch;
         justify-content: space-between;
-        gap: 10px;
-        padding: 12px 14px;
-        border-radius: 12px;
-        border: 1px solid #E2EAF3;
-        background: #FFF;
-        code {
+        gap: 8px;
+        padding: 8px 10px;
+
+        .command-inline-code-wrap {
             flex: 1;
-            color: #1F2D3D;
-            white-space: pre-wrap;
-            word-break: break-all;
-            font-size: 13px;
-            line-height: 1.7;
+            min-width: 0;
+            overflow-x: auto;
+            overflow-y: hidden;
+            scrollbar-width: none;
+            -ms-overflow-style: none;
+
+            &::-webkit-scrollbar {
+                width: 0;
+                height: 0;
+                display: none;
+            }
         }
-        .command-copy-btn {
-            flex: 0 0 auto;
-            align-self: flex-start;
-            min-width: 40px;
-            height: 40px;
-            border: 1px solid #D7E1EC;
-            border-radius: 10px;
-            background: #FFF;
-            color: #2E4A66;
+
+        code {
+            display: inline-block;
+            min-width: max-content;
+            padding: 3px 2px;
+            white-space: nowrap;
+            line-height: 22px;
+        }
+    }
+
+    .command-surface.is-compact {
+        .command-surface-inline {
+            align-items: center;
+        }
+
+        .command-inline-code-wrap {
+            padding: 2px 0;
+        }
+    }
+
+    .terminal-head {
+        height: 25px;
+        padding: 0 12px;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .terminal-dots {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+
+        span {
+            width: 8px;
+            height: 8px;
+            border-radius: 999px;
+            background: #cbd5e1;
+        }
+    }
+
+    .terminal-label {
+        color: rgba(255, 255, 255, 0.46);
+        font-size: 9px;
+        font-weight: 600;
+        letter-spacing: 0.08em;
+    }
+
+    .terminal-body {
+        min-height: 57px;
+        padding: 11px 12px 12px;
+        display: grid;
+        grid-template-columns: auto 1fr auto;
+        align-items: start;
+        column-gap: 14px;
+
+        .terminal-prompt {
+            color: #34d399;
+            font-size: 12px;
+            line-height: 16px;
+            font-family: 'SFMono-Regular', Consolas, monospace;
+            margin-top: 2px;
+        }
+
+        code {
+            padding: 0;
+            color: #e2e8f0;
+            line-height: 16px;
+            word-break: break-word;
+            margin-top: 1px;
+        }
+    }
+
+    .command-copy-btn {
+        color: inherit;
+        width: 18px;
+        height: 20px;
+        min-width: 18px;
+        padding: 0;
+        border: 1px solid transparent;
+        border-radius: 4px;
+        align-self: center;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        box-shadow: none;
+
+        .ant-btn-icon {
+            margin: 0;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            line-height: 1;
+        }
+
+        &:hover,
+        &:focus {
+            color: inherit;
+            box-shadow: none;
+        }
+
+        &.is-terminal-copy {
+            border-color: transparent;
+            background: transparent;
+
             &:hover,
             &:focus {
-                color: #2F7BFF;
-                border-color: #2F7BFF;
-                background: #F4F9FF;
+                background: rgba(255, 255, 255, 0.08);
+                border-color: transparent;
             }
-            &[disabled] {
-                border-color: #E5E7EB;
-                background: #F8FAFC;
+        }
+
+        &.is-inline-copy {
+            border-color: rgba(203, 213, 225, 0.88);
+            background: #f8fafc;
+
+            &:hover,
+            &:focus {
+                background: #f1f5f9;
+                border-color: rgba(148, 163, 184, 0.72);
             }
         }
     }
-    .related-card-list {
-        .ant-card-head {
-            border-bottom-color: #EEF3F8;
+
+    .related-empty-state {
+        min-height: 112px;
+        border: 1px dashed #cbd5e1;
+        border-radius: 8px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+        color: #94a3b8;
+        font-size: 12px;
+        text-align: center;
+    }
+
+    .related-list {
+        flex: 1 1 auto;
+        min-height: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+        overflow-y: auto;
+        overflow-x: hidden;
+        padding-right: 4px;
+        width: 100%;
+        min-width: 0;
+    }
+
+    .related-item {
+        width: 100%;
+        min-width: 0;
+        padding: 0;
+        border: 0;
+        background: transparent;
+        text-align: left;
+        display: flex;
+        align-items: flex-start;
+        gap: 12px;
+        cursor: pointer;
+        white-space: normal;
+
+        &:hover,
+        &:focus {
+            background: transparent;
         }
-        .related-item-card {
-            height: 100%;
-            border-radius: 14px;
-            border: 1px solid #E7EDF5;
-            transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
-            &:hover {
-                border-color: #BFD6F2;
-                box-shadow: 0 12px 24px rgba(31, 45, 61, 0.08);
-                transform: translateY(-2px);
-            }
-            .related-title {
-                margin-bottom: 8px;
-                color: #1F2D3D;
-                font-size: 16px;
-                font-weight: 600;
-            }
+
+        .related-item-copy {
+            min-width: 0;
+            flex: 1 1 0;
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            gap: 2px;
+        }
+
+        strong {
+            display: block;
+            width: 100%;
+            color: #2a3439;
+            font-size: 12px;
+            font-weight: 500;
+            line-height: 16px;
+            word-break: break-word;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .related-item-description {
+            display: block;
+            width: 100%;
+            color: #64748b;
+            font-size: 10px;
+            line-height: 16.25px;
+            word-break: break-word;
+            white-space: normal;
+            overflow: hidden;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
         }
     }
 
-    @media (max-width: 1100px) {
-        .detail-hero {
-            grid-template-columns: 1fr;
+    .related-item-icon-shell {
+        width: 40px;
+        height: 40px;
+        border-radius: 4px;
+        border: 1px solid transparent;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex: 0 0 auto;
+        align-self: center;
+        transform: translateY(6px);
+
+        &.is-blue {
+            border-color: rgba(219, 234, 254, 0.5);
+            background-image: linear-gradient(
+                135deg,
+                rgba(59, 130, 246, 0.1) 0%,
+                rgba(99, 102, 241, 0.2) 100%
+            );
         }
-        .hero-title-row {
-            flex-direction: column;
+
+        &.is-green {
+            border-color: rgba(209, 250, 229, 0.5);
+            background-image: linear-gradient(
+                135deg,
+                rgba(16, 185, 129, 0.1) 0%,
+                rgba(20, 184, 166, 0.2) 100%
+            );
         }
-        .hero-action-group {
-            max-width: none;
-            justify-content: flex-start;
+
+        &.is-orange {
+            border-color: rgba(254, 243, 199, 0.5);
+            background-image: linear-gradient(
+                135deg,
+                rgba(245, 158, 11, 0.1) 0%,
+                rgba(249, 115, 22, 0.2) 100%
+            );
         }
     }
 
-    @media (max-width: 768px) {
-        padding: 16px;
+    .browse-market-link {
+        margin-top: 16px;
+        padding: 0;
+        border: 0;
+        background: transparent;
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        color: #0053db;
+        font-size: 10px;
+        line-height: 15px;
+        cursor: pointer;
+
+        &:hover,
+        &:focus {
+            background: transparent;
+            color: #0053db;
+        }
+    }
+
+    .meta-panel {
+        margin-top: auto;
+        flex: 0 0 auto;
+        padding-top: 20px;
+        border-top: 1px solid #e2e8f0;
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+    }
+
+    .meta-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+        color: #64748b;
+        font-size: 10px;
+
+        strong {
+            color: #2a3439;
+            font-weight: 600;
+        }
+    }
+
+    .contributors-stack {
+        display: inline-flex;
+        align-items: center;
+
+        img,
+        span {
+            width: 16px;
+            height: 16px;
+            border-radius: 999px;
+            border: 1px solid #fff;
+            margin-left: -4px;
+        }
+
+        img:first-child,
+        span:first-child {
+            margin-left: 0;
+        }
+
+        span {
+            background: #e2e8f0;
+            color: #566166;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 8px;
+        }
+    }
+
+    @media (max-width: 1200px) {
+        .skill-detail-shell {
+            grid-template-columns: 220px minmax(0, 1fr) 300px;
+        }
+
+        .detail-main-column {
+            padding: 24px;
+        }
+    }
+
+    @media (max-width: 1200px) {
+        .detail-main-column {
+            padding: 24px;
+        }
+
         .detail-hero-main,
-        .install-overview-card {
-            padding: 18px;
+        .document-panel {
+            width: 100%;
         }
-        .hero-meta-grid {
+    }
+
+    @media (max-width: 960px) {
+        height: auto;
+        overflow: auto;
+
+        .skill-detail-shell {
+            height: auto;
             grid-template-columns: 1fr;
         }
-        .hero-meta-card.is-wide {
-            grid-column: span 1;
+
+        .detail-left-sidebar,
+        .detail-right-sidebar {
+            border: 0;
+        }
+
+        .detail-main-column {
+            overflow: visible;
+            align-items: stretch;
         }
-        .command-block {
+
+        .document-panel {
+            min-height: 640px;
+        }
+    }
+
+    @media (max-width: 768px) {
+        .detail-main-column {
+            padding: 16px;
+        }
+
+        .hero-head-row {
             flex-direction: column;
-            .command-copy-btn {
-                align-self: flex-end;
-            }
+        }
+
+        .hero-title-block {
+            width: 100%;
+        }
+
+        .document-scroll-area {
+            padding: 20px 16px;
+        }
+
+        .hero-meta-row {
+            gap: 20px;
+            flex-wrap: wrap;
         }
     }
 }
diff --git a/app/web/scss/reset.scss b/app/web/scss/reset.scss
index 2725a4f..c48c346 100644
--- a/app/web/scss/reset.scss
+++ b/app/web/scss/reset.scss
@@ -2,6 +2,9 @@ html,
 body,
 #app {
     height: 100%;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
 }
 
 iframe {

From 383f3087711be6902359a1729de5cefca85967e4 Mon Sep 17 00:00:00 2001
From: huaiju <huaiju@dtstack.com>
Date: Sun, 22 Mar 2026 20:04:26 +0800
Subject: [PATCH 35/43] feat(skills): add like/star functionality with IP
 tracking

---
 app/controller/skillLike.js                   |  29 ++++
 app/model/skill_like.js                       |  41 +++++
 app/router.js                                 |   3 +
 app/service/skillLike.js                      | 112 ++++++++++++
 app/web/api/url.ts                            |  15 ++
 .../skills/detail/SkillDetailContent.tsx      |  67 ++++++--
 app/web/pages/skills/detail/style.scss        | 159 +++++++++++++++---
 7 files changed, 387 insertions(+), 39 deletions(-)
 create mode 100644 app/controller/skillLike.js
 create mode 100644 app/model/skill_like.js
 create mode 100644 app/service/skillLike.js

diff --git a/app/controller/skillLike.js b/app/controller/skillLike.js
new file mode 100644
index 0000000..1d8e41e
--- /dev/null
+++ b/app/controller/skillLike.js
@@ -0,0 +1,29 @@
+const Controller = require('egg').Controller;
+
+class SkillLikeController extends Controller {
+    async like() {
+        const { app, ctx } = this;
+        const { slug } = ctx.request.body || {};
+        const ip = ctx.service.skillLike.resolveClientIp();
+        const data = await ctx.service.skillLike.like(slug, ip);
+        ctx.body = app.utils.response(true, data);
+    }
+
+    async unlike() {
+        const { app, ctx } = this;
+        const { slug } = ctx.request.body || {};
+        const ip = ctx.service.skillLike.resolveClientIp();
+        const data = await ctx.service.skillLike.unlike(slug, ip);
+        ctx.body = app.utils.response(true, data);
+    }
+
+    async getLikeStatus() {
+        const { app, ctx } = this;
+        const { slug } = ctx.query || {};
+        const ip = ctx.service.skillLike.resolveClientIp();
+        const data = await ctx.service.skillLike.getLikeStatus(slug, ip);
+        ctx.body = app.utils.response(true, data);
+    }
+}
+
+module.exports = SkillLikeController;
diff --git a/app/model/skill_like.js b/app/model/skill_like.js
new file mode 100644
index 0000000..00a605d
--- /dev/null
+++ b/app/model/skill_like.js
@@ -0,0 +1,41 @@
+module.exports = (app) => {
+    const { INTEGER, STRING, DATE } = app.Sequelize;
+
+    const SkillLike = app.model.define(
+        'skill_like',
+        {
+            id: {
+                type: INTEGER,
+                primaryKey: true,
+                autoIncrement: true,
+            },
+            skill_id: {
+                type: INTEGER,
+                allowNull: false,
+                comment: '技能ID',
+            },
+            ip: {
+                type: STRING(64),
+                allowNull: false,
+                comment: '点赞用户IP',
+            },
+            created_at: {
+                type: DATE,
+                allowNull: false,
+                defaultValue: app.Sequelize.literal('CURRENT_TIMESTAMP'),
+            },
+        },
+        {
+            freezeTableName: true,
+            tableName: 'skill_likes',
+            timestamps: false,
+            indexes: [
+                { fields: ['skill_id', 'ip'], unique: true },
+                { fields: ['skill_id'] },
+                { fields: ['ip'] },
+            ],
+        }
+    );
+
+    return SkillLike;
+};
diff --git a/app/router.js b/app/router.js
index 0e2646d..2ce1e9b 100644
--- a/app/router.js
+++ b/app/router.js
@@ -158,6 +158,9 @@ module.exports = (app) => {
     app.post('/api/skills/import-file', app.controller.skills.importSkillFile);
     app.post('/api/skills/update', app.controller.skills.updateSkill);
     app.post('/api/skills/delete', app.controller.skills.deleteSkill);
+    app.post('/api/skills/like', app.controller.skillLike.like);
+    app.post('/api/skills/unlike', app.controller.skillLike.unlike);
+    app.get('/api/skills/like-status', app.controller.skillLike.getLikeStatus);
 
     // io.of('/').route('getShellCommand',  io.controller.home.getShellCommand)
     // 暂时close Terminal相关功能
diff --git a/app/service/skillLike.js b/app/service/skillLike.js
new file mode 100644
index 0000000..35a5c3b
--- /dev/null
+++ b/app/service/skillLike.js
@@ -0,0 +1,112 @@
+const Service = require('egg').Service;
+
+class SkillLikeService extends Service {
+    async ensureStorageReady() {
+        const { SkillLike, SkillsItem } = this.app.model;
+        if (!SkillLike || !SkillsItem) {
+            this.ctx.throw(500, 'SkillLike 数据模型未加载');
+        }
+        await SkillLike.sync();
+    }
+
+    resolveClientIp() {
+        const headers = this.ctx.request.headers;
+        const ip = headers['x-forwarded-for']?.split(',')[0]?.trim()
+            || headers['x-real-ip']
+            || this.ctx.ip
+            || '';
+        return String(ip).trim();
+    }
+
+    async getSkillBySlug(slug) {
+        const { SkillsItem } = this.app.model;
+        const skill = await SkillsItem.findOne({
+            where: { slug, is_delete: 0 },
+        });
+        return skill;
+    }
+
+    async like(skillSlug, ip) {
+        await this.ensureStorageReady();
+        const { SkillLike } = this.app.model;
+
+        const skill = await this.getSkillBySlug(skillSlug);
+        if (!skill) {
+            this.ctx.throw(404, '技能不存在');
+        }
+
+        const existing = await SkillLike.findOne({
+            where: { skill_id: skill.id, ip },
+        });
+
+        if (existing) {
+            return { liked: true, message: '已经点赞过了' };
+        }
+
+        await SkillLike.create({
+            skill_id: skill.id,
+            ip,
+        });
+
+        const likeCount = await SkillLike.count({
+            where: { skill_id: skill.id },
+        });
+
+        await skill.update({ stars: likeCount });
+
+        return { liked: true, likeCount };
+    }
+
+    async unlike(skillSlug, ip) {
+        await this.ensureStorageReady();
+        const { SkillLike } = this.app.model;
+
+        const skill = await this.getSkillBySlug(skillSlug);
+        if (!skill) {
+            this.ctx.throw(404, '技能不存在');
+        }
+
+        const existing = await SkillLike.findOne({
+            where: { skill_id: skill.id, ip },
+        });
+
+        if (!existing) {
+            return { liked: false, message: '还未点赞' };
+        }
+
+        await existing.destroy();
+
+        const likeCount = await SkillLike.count({
+            where: { skill_id: skill.id },
+        });
+
+        await skill.update({ stars: likeCount });
+
+        return { liked: false, likeCount };
+    }
+
+    async getLikeStatus(skillSlug, ip) {
+        await this.ensureStorageReady();
+        const { SkillLike } = this.app.model;
+
+        const skill = await this.getSkillBySlug(skillSlug);
+        if (!skill) {
+            this.ctx.throw(404, '技能不存在');
+        }
+
+        const existing = await SkillLike.findOne({
+            where: { skill_id: skill.id, ip },
+        });
+
+        const likeCount = await SkillLike.count({
+            where: { skill_id: skill.id },
+        });
+
+        return {
+            liked: !!existing,
+            likeCount,
+        };
+    }
+}
+
+module.exports = SkillLikeService;
diff --git a/app/web/api/url.ts b/app/web/api/url.ts
index 151a191..1c7986d 100644
--- a/app/web/api/url.ts
+++ b/app/web/api/url.ts
@@ -386,4 +386,19 @@ export default {
         method: 'post',
         url: '/api/skills/delete',
     },
+    // 点赞
+    likeSkill: {
+        method: 'post',
+        url: '/api/skills/like',
+    },
+    // 取消点赞
+    unlikeSkill: {
+        method: 'post',
+        url: '/api/skills/unlike',
+    },
+    // 获取点赞状态
+    getSkillLikeStatus: {
+        method: 'get',
+        url: '/api/skills/like-status',
+    },
 };
diff --git a/app/web/pages/skills/detail/SkillDetailContent.tsx b/app/web/pages/skills/detail/SkillDetailContent.tsx
index f0255f0..6cd644c 100644
--- a/app/web/pages/skills/detail/SkillDetailContent.tsx
+++ b/app/web/pages/skills/detail/SkillDetailContent.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { ArrowLeftOutlined, QuestionCircleOutlined } from '@ant-design/icons';
+import { ArrowLeftOutlined, DislikeOutlined, LikeOutlined, QuestionCircleOutlined, StarOutlined } from '@ant-design/icons';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import { atomOneLight } from 'react-syntax-highlighter/dist/cjs/styles/hljs';
 import { Button, Empty, Spin, Tree, Typography } from 'antd';
@@ -217,6 +217,8 @@ const SkillDetailContent: React.FC<SkillDetailContentProps> = ({ slug, history }
     const [selectedFilePath, setSelectedFilePath] = useState('');
     const [fileContent, setFileContent] = useState<SkillFileContent | null>(null);
     const [activeInstallPanel, setActiveInstallPanel] = useState<InstallPanelKey>('agent');
+    const [likeStatus, setLikeStatus] = useState({ liked: false, likeCount: 0 });
+    const [likeLoading, setLikeLoading] = useState(false);
 
     const fileTreeData = useMemo(
         () => buildFileTreeData(detail?.fileList || []),
@@ -293,6 +295,42 @@ const SkillDetailContent: React.FC<SkillDetailContentProps> = ({ slug, history }
         setFileLoading(true);
     };
 
+    const fetchLikeStatus = async () => {
+        try {
+            const res = await API.getSkillLikeStatus({ slug });
+            if (res.success) {
+                setLikeStatus({
+                    liked: res.data.liked,
+                    likeCount: res.data.likeCount,
+                });
+            }
+        } catch (error) {
+            console.error('获取点赞状态失败:', error);
+        }
+    };
+
+    const handleLike = async () => {
+        if (likeLoading) return;
+        setLikeLoading(true);
+        try {
+            if (likeStatus.liked) {
+                const res = await API.unlikeSkill({ slug });
+                if (res.success) {
+                    setLikeStatus({ liked: false, likeCount: res.data.likeCount });
+                }
+            } else {
+                const res = await API.likeSkill({ slug });
+                if (res.success) {
+                    setLikeStatus({ liked: true, likeCount: res.data.likeCount });
+                }
+            }
+        } catch (error) {
+            console.error('点赞操作失败:', error);
+        } finally {
+            setLikeLoading(false);
+        }
+    };
+
     useEffect(() => {
         setUiSelectedFilePath('');
         setSelectedFilePath('');
@@ -358,6 +396,7 @@ const SkillDetailContent: React.FC<SkillDetailContentProps> = ({ slug, history }
         };
 
         loadDetail();
+        fetchLikeStatus();
 
         return () => {
             cancelled = true;
@@ -589,7 +628,8 @@ const SkillDetailContent: React.FC<SkillDetailContentProps> = ({ slug, history }
                         <Button
                             type="primary"
                             block
-                            className="install-primary-btn"
+                            disabled={isInstallable}
+                            className={`install-primary-btn ${isInstallable ? 'is-disabled' : ''}`}
                             onClick={() => {
                                 setActiveInstallPanel('agent');
                                 copyToClipboard(
@@ -600,7 +640,7 @@ const SkillDetailContent: React.FC<SkillDetailContentProps> = ({ slug, history }
                                 );
                             }}
                         >
-                            {isInstallable ? '安装技能' : '下载技能'}
+                            {isInstallable ? '变更日志' : '下载技能'}
                         </Button>
                         <button
                             type="button"
@@ -632,17 +672,15 @@ const SkillDetailContent: React.FC<SkillDetailContentProps> = ({ slug, history }
                             </div>
 
                             <div className="hero-actions">
-                                <div className="hero-stat-chip">
-                                    <span>☆</span>
-                                    <strong>{detail.stars || 0}</strong>
-                                </div>
                                 <Button
-                                    type="primary"
-                                    className="hero-fork-btn"
-                                    onClick={() => window.open(sourceUrl, '_blank')}
-                                    disabled={!sourceUrl}
+                                    type="text"
+                                    onClick={handleLike}
+                                    className={`like-btn ${likeStatus.liked ? 'is-liked' : ''}`}
+                                    aria-pressed={likeStatus.liked}
+                                    disabled={likeLoading}
                                 >
-                                    Fork
+                                    {likeStatus.liked ? <LikeOutlined /> : <StarOutlined />}
+                                    {likeStatus.likeCount}
                                 </Button>
                             </div>
                         </div>
@@ -686,7 +724,10 @@ const SkillDetailContent: React.FC<SkillDetailContentProps> = ({ slug, history }
 
                 <aside className="detail-right-sidebar">
                     <section className="install-panel">
-                        <div className="sidebar-section-title">安装方式</div>
+                        <div className="sidebar-section-title">
+                            安装方式
+                            <span className="install-soon-badge">SOON</span>
+                        </div>
 
                         <div
                             className={`install-option-card ${
diff --git a/app/web/pages/skills/detail/style.scss b/app/web/pages/skills/detail/style.scss
index bfbef91..47fb9d7 100644
--- a/app/web/pages/skills/detail/style.scss
+++ b/app/web/pages/skills/detail/style.scss
@@ -69,8 +69,8 @@
         }
 
         &.is-related-skill-icon {
-            width: 18px;
-            height: 18px;
+            width: 20px;
+            height: 20px;
         }
 
         &.is-browse-market-arrow {
@@ -117,8 +117,8 @@
     }
 
     .sidebar-head {
-        padding: 16px;
-        border-bottom: 1px solid rgba(226, 232, 240, 0.7);
+        padding: 16px 16px 17px;
+        border-bottom: 1px solid rgba(226, 232, 240, 0.5);
         display: flex;
         align-items: center;
         gap: 8px;
@@ -144,9 +144,13 @@
 
         span,
         strong {
+            display: inline-flex;
+            align-items: center;
+            min-height: 16px;
             font-size: 10px;
+            line-height: 16px;
             font-weight: 600;
-            letter-spacing: 0.08em;
+            letter-spacing: 0.5px;
         }
 
         span {
@@ -155,6 +159,7 @@
 
         strong {
             color: #2563eb;
+            text-transform: uppercase;
         }
     }
 
@@ -247,6 +252,13 @@
         font-weight: 600;
         background: #1658d5;
         border-color: #1658d5;
+        &.is-disabled,
+        &:disabled,
+        &[disabled] {
+            background: #e5e7eb !important;
+            border-color: #d1d5db !important;
+            color: #9ca3af !important;
+        }
     }
 
     .sidebar-help-btn {
@@ -358,13 +370,86 @@
         font-size: 14px;
     }
 
-    .hero-fork-btn {
+    .like-btn.ant-btn {
+        min-width: 64px;
         height: 32px;
-        padding: 0 16px;
-        border-radius: 4px;
+        padding: 0 12px;
+        border: 1px solid #dbe5f0;
+        border-radius: 8px;
+        background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
+        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 6px;
+        color: #334155;
+        font-size: 14px;
         font-weight: 600;
-        background: #0053db;
-        border-color: #0053db;
+        line-height: 1;
+        transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease,
+            box-shadow 0.2s ease, transform 0.2s ease;
+
+        .anticon {
+            width: 14px;
+            font-size: 14px;
+            color: #64748b;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            transition: color 0.2s ease;
+        }
+
+        span:last-child {
+            min-width: 8px;
+            text-align: center;
+            font-variant-numeric: tabular-nums;
+        }
+
+        .ant-btn-loading-icon {
+            margin-right: 0;
+        }
+
+        &:hover,
+        &:focus {
+            border-color: #bfd3f8;
+            background: linear-gradient(180deg, #ffffff 0%, #edf4ff 100%);
+            color: #174ea6;
+            box-shadow: 0 4px 10px rgba(37, 99, 235, 0.12);
+
+            .anticon {
+                color: #174ea6;
+            }
+        }
+
+        &:active {
+            transform: translateY(1px);
+            box-shadow: 0 2px 6px rgba(37, 99, 235, 0.1);
+        }
+
+        &[disabled],
+        &[disabled]:hover,
+        &[disabled]:focus {
+            border-color: #dbe5f0;
+            background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
+            box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+            color: #334155;
+            opacity: 1;
+
+            .anticon {
+                color: #64748b;
+            }
+        }
+
+        &.is-liked {
+            border-color: rgba(22, 88, 213, 0.24);
+            background: linear-gradient(180deg, #f5f9ff 0%, #e9f1ff 100%);
+            color: #1658d5;
+            box-shadow: 0 4px 12px rgba(22, 88, 213, 0.12);
+
+            .anticon {
+                color: #1658d5;
+            }
+        }
     }
 
     .hero-meta-row {
@@ -568,6 +653,21 @@
         font-size: 10px;
         font-weight: 600;
         letter-spacing: 0.14em;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+    }
+
+    .install-soon-badge {
+        display: inline-flex;
+        align-items: center;
+        padding: 2px 6px;
+        font-size: 9px;
+        font-weight: 700;
+        letter-spacing: 0.05em;
+        color: #c2410c;
+        background: #fed7aa;
+        border-radius: 4px;
     }
 
     .install-option-card {
@@ -948,7 +1048,7 @@
         min-height: 0;
         display: flex;
         flex-direction: column;
-        gap: 16px;
+        gap: 0;
         overflow-y: auto;
         overflow-x: hidden;
         padding-right: 4px;
@@ -959,16 +1059,22 @@
     .related-item {
         width: 100%;
         min-width: 0;
-        padding: 0;
+        min-height: 72px;
+        padding: 10px 0;
         border: 0;
         background: transparent;
         text-align: left;
         display: flex;
-        align-items: flex-start;
-        gap: 12px;
+        align-items: center;
+        gap: 14px;
         cursor: pointer;
         white-space: normal;
 
+        & + .related-item {
+            margin-top: 8px;
+            padding-top: 18px;
+        }
+
         &:hover,
         &:focus {
             background: transparent;
@@ -979,17 +1085,19 @@
             flex: 1 1 0;
             display: flex;
             flex-direction: column;
+            justify-content: center;
             align-items: flex-start;
-            gap: 2px;
+            gap: 6px;
         }
 
         strong {
             display: block;
             width: 100%;
-            color: #2a3439;
-            font-size: 12px;
-            font-weight: 500;
-            line-height: 16px;
+            color: #24313a;
+            font-size: 13px;
+            font-weight: 600;
+            line-height: 18px;
+            letter-spacing: 0.01em;
             word-break: break-word;
             white-space: nowrap;
             overflow: hidden;
@@ -999,9 +1107,9 @@
         .related-item-description {
             display: block;
             width: 100%;
-            color: #64748b;
-            font-size: 10px;
-            line-height: 16.25px;
+            color: #6b7b8c;
+            font-size: 11px;
+            line-height: 17px;
             word-break: break-word;
             white-space: normal;
             overflow: hidden;
@@ -1012,16 +1120,15 @@
     }
 
     .related-item-icon-shell {
-        width: 40px;
-        height: 40px;
-        border-radius: 4px;
+        width: 44px;
+        height: 44px;
+        border-radius: 8px;
         border: 1px solid transparent;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         flex: 0 0 auto;
         align-self: center;
-        transform: translateY(6px);
 
         &.is-blue {
             border-color: rgba(219, 234, 254, 0.5);

From 1f34aa00cddb97773f56c5619daf0dfeec58a7c3 Mon Sep 17 00:00:00 2001
From: huaiju <huaiju@dtstack.com>
Date: Sun, 22 Mar 2026 20:04:33 +0800
Subject: [PATCH 36/43] feat(skills): simplify import flow, remove URL import

---
 app/service/skills.js           | 109 +++++++++++++++++++++++++++++---
 app/web/pages/skills/index.tsx  |  27 ++++++--
 app/web/pages/skills/style.scss |  37 ++++++++++-
 test/skills-install-key.test.js |  70 ++++++++++++++++++++
 4 files changed, 227 insertions(+), 16 deletions(-)

diff --git a/app/service/skills.js b/app/service/skills.js
index 07fb3ea..b97ab2c 100644
--- a/app/service/skills.js
+++ b/app/service/skills.js
@@ -103,6 +103,21 @@ function resolveSkillIdentifier(identifier, indexes = {}) {
     return null;
 }
 
+function createUniqueSkillNames(skillNames = []) {
+    const values = [];
+    const seen = new Set();
+
+    skillNames.forEach((item) => {
+        const name = String(item || '').trim();
+        if (!name) return;
+        if (seen.has(name)) return;
+        seen.add(name);
+        values.push(name);
+    });
+
+    return values;
+}
+
 const SKILL_CATEGORY_OPTIONS = [
     '通用',
     '前端',
@@ -267,7 +282,7 @@ class SkillsService extends Service {
             tags: this.parseJsonArray(row.tags),
             allowedTools: this.parseJsonArray(row.allowed_tools),
             stars: Number(row.stars) || 0,
-            updatedAt: (row.updated_at_remote || row.updated_at || row.created_at || new Date()).toISOString(),
+            updatedAt: (row.updated_at || row.updated_at_remote || row.created_at || new Date()).toISOString(),
             sourceRepo: row.source_repo || '',
             sourcePath: row.source_path || '',
             skillMd: row.skill_md || '',
@@ -712,22 +727,37 @@ class SkillsService extends Service {
         return `npx skills add ${source} --skill "${name}"`;
     }
 
-    buildUploadSourceMeta(fileName = '') {
-        const baseName = path.basename(String(fileName || '').trim(), '.skill');
+    buildUploadSourceMeta(fileName = '', identityKey = '') {
+        const parsedName = path.parse(String(fileName || '').trim());
+        const baseName = parsedName.name || parsedName.base || 'uploaded-skill';
         const normalizedName = this.sanitizeSlugSegment(baseName) || 'uploaded-skill';
+        const identityText = String(identityKey || '').trim();
+        const normalizedIdentity = this.sanitizeSlugSegment(identityText);
+        const identityHash = identityText ? this.hashString(identityText).slice(0, 8) : '';
+        const sourceKey = [ normalizedName, normalizedIdentity, identityHash ].filter(Boolean).join('-') || normalizedName;
         return {
-            sourceUrl: `upload://${normalizedName}.skill`,
+            sourceUrl: `upload://${sourceKey}.skill`,
             sourceType: 'upload',
             cloneUrl: '',
             sourceRepo: '',
             ref: '',
             subpath: '',
             repoHost: 'upload',
-            repoPath: normalizedName,
+            repoPath: sourceKey,
             originalAction: 'upload',
         };
     }
 
+    getUploadIdentityKey(skillRecords = [], preferredName = '') {
+        const name = String(preferredName || '').trim();
+        if (name) return name;
+        return skillRecords
+            .map((item) => String(item?.name || '').trim())
+            .filter(Boolean)
+            .sort((a, b) => a.localeCompare(b))
+            .join('|');
+    }
+
     extractDescription(content) {
         const stripped = content
             .split('\n')
@@ -1368,6 +1398,46 @@ class SkillsService extends Service {
         return await SkillsSource.create(payload);
     }
 
+    async assertSkillNamesUnique(skillNames = [], options = {}) {
+        const names = createUniqueSkillNames(skillNames);
+        if (names.length === 0) return;
+
+        if (names.length !== skillNames.map((item) => String(item || '').trim()).filter(Boolean).length) {
+            this.ctx.throw(400, '导入失败：技能名称不能重复');
+        }
+
+        const { SkillsItem } = this.app.model;
+        const { Op } = this.app.Sequelize;
+        const where = {
+            is_delete: 0,
+            name: {
+                [Op.in]: names,
+            },
+        };
+
+        if (options.excludeSkillId) {
+            where.id = {
+                [Op.ne]: options.excludeSkillId,
+            };
+        }
+
+        if (options.excludeSourceId) {
+            where.source_id = {
+                [Op.ne]: options.excludeSourceId,
+            };
+        }
+
+        const existing = await SkillsItem.findOne({
+            where,
+            attributes: [ 'id', 'name' ],
+            transaction: options.transaction,
+        });
+
+        if (existing) {
+            this.ctx.throw(400, `技能名称“${existing.name}”已存在，请更换名称`);
+        }
+    }
+
     async importSkill(params = {}) {
         const source = String(params.source || '').trim();
         const skillName = String(params.skillName || '').trim();
@@ -1410,6 +1480,11 @@ class SkillsService extends Service {
                 this.ctx.throw(400, '未匹配到指定技能，请检查 skillName 是否正确');
             }
 
+            await this.assertSkillNamesUnique(
+                skillRecords.map((item) => item.name),
+                { excludeSourceId: sourceRecord.id }
+            );
+
             const importedSkills = await this.persistSkillsForSource(sourceRecord.id, parsedSource, skillRecords);
 
             await sourceRecord.update({
@@ -1481,12 +1556,10 @@ class SkillsService extends Service {
 
         await this.ensureStorageReady();
 
-        const parsedSource = this.buildUploadSourceMeta(fileName);
         let sourceRecord = null;
         let tempDir = '';
 
         try {
-            sourceRecord = await this.upsertSourceRecord(parsedSource, 'syncing');
             tempDir = fs.mkdtempSync(path.join(os.tmpdir(), 'skills-upload-'));
 
             try {
@@ -1501,6 +1574,12 @@ class SkillsService extends Service {
                 this.ctx.throw(400, '.zip 包内未发现有效技能（缺少 SKILL.md）');
             }
 
+            if (skillName && discoveredSkillDirs.length !== 1) {
+                this.ctx.throw(400, '填写技能名称时，.zip 包必须且只能包含一个技能目录');
+            }
+
+            const parsedSource = this.buildUploadSourceMeta(fileName, skillName);
+
             const skillRecords = discoveredSkillDirs.map((skillDir) => {
                 const record = this.prepareSkillRecord(skillDir, tempDir, parsedSource, category, tags);
                 if (skillName) {
@@ -1509,9 +1588,17 @@ class SkillsService extends Service {
                 return record;
             });
 
+            await this.assertSkillNamesUnique(skillRecords.map((item) => item.name));
+
+            const uploadSourceMeta = this.buildUploadSourceMeta(
+                fileName,
+                this.getUploadIdentityKey(skillRecords, skillName)
+            );
+            sourceRecord = await this.upsertSourceRecord(uploadSourceMeta, 'syncing');
+
             const importedSkills = await this.persistSkillsForSource(
                 sourceRecord.id,
-                parsedSource,
+                uploadSourceMeta,
                 skillRecords
             );
 
@@ -1645,6 +1732,11 @@ class SkillsService extends Service {
                 this.ctx.throw(404, '技能不存在');
             }
 
+            await this.assertSkillNamesUnique([ name ], {
+                excludeSkillId: itemRow.id,
+                transaction,
+            });
+
             const payload = {
                 name,
                 category,
@@ -2203,3 +2295,4 @@ class SkillsService extends Service {
 module.exports = SkillsService;
 module.exports.createInstallKeyMap = createInstallKeyMap;
 module.exports.resolveSkillIdentifier = resolveSkillIdentifier;
+module.exports.createUniqueSkillNames = createUniqueSkillNames;
diff --git a/app/web/pages/skills/index.tsx b/app/web/pages/skills/index.tsx
index c4f045c..e5a1c04 100644
--- a/app/web/pages/skills/index.tsx
+++ b/app/web/pages/skills/index.tsx
@@ -321,8 +321,8 @@ const SkillsMarket: React.FC<any> = ({ history }) => {
                 {skills.length === 0 ? (
                     <Empty description="没有符合条件的 Skills" />
                 ) : (
-                    <>
-                        <Row gutter={[16, 16]}>
+                    <div className="skills-list-section">
+                        <Row gutter={[16, 16]} className="skills-grid">
                             {skills.map((skill) => (
                                 <Col key={skill.slug} xs={24} sm={12} lg={8}>
                                     <Card
@@ -392,7 +392,7 @@ const SkillsMarket: React.FC<any> = ({ history }) => {
                                 }
                             />
                         </div>
-                    </>
+                    </div>
                 )}
             </Spin>
 
@@ -422,8 +422,18 @@ const SkillsMarket: React.FC<any> = ({ history }) => {
                             <Button icon={<UploadOutlined />}>选择 .zip 文件</Button>
                         </Upload>
                     </Form.Item>
-                    <Form.Item name="skillName" label="技能名称（可选）">
-                        <Input placeholder="作为项目名称使用，不参与过滤" />
+                    <Form.Item
+                        name="skillName"
+                        label="技能名称（可选）"
+                        extra="填写后将作为该技能卡片的唯一名称；留空则使用压缩包中的默认名称"
+                        rules={[
+                            {
+                                max: 255,
+                                message: '技能名称不能超过 255 个字符',
+                            },
+                        ]}
+                    >
+                        <Input placeholder="例如：skill-creator-prod" />
                     </Form.Item>
                     <Form.Item
                         name="category"
@@ -502,9 +512,12 @@ const SkillsMarket: React.FC<any> = ({ history }) => {
                     <Form.Item
                         name="name"
                         label="技能名称"
-                        rules={[{ required: true, message: '请输入技能名称' }]}
+                        rules={[
+                            { required: true, message: '请输入技能名称' },
+                            { max: 255, message: '技能名称不能超过 255 个字符' },
+                        ]}
                     >
-                        <Input placeholder="请输入技能名称" maxLength={255} />
+                        <Input placeholder="请输入技能名称" />
                     </Form.Item>
                     <Form.Item
                         name="category"
diff --git a/app/web/pages/skills/style.scss b/app/web/pages/skills/style.scss
index 96c63ad..2ae49fe 100644
--- a/app/web/pages/skills/style.scss
+++ b/app/web/pages/skills/style.scss
@@ -1,9 +1,15 @@
 .page-skills {
+    height: 100%;
+    min-height: 0;
     padding: 20px 24px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
     .skills-header {
         display: flex;
         align-items: center;
         justify-content: space-between;
+        flex-shrink: 0;
     }
     .title-group {
         .page-title {
@@ -23,6 +29,7 @@
         align-items: center;
         gap: 16px;
         margin-top: 18px;
+        flex-shrink: 0;
         .keyword-search {
             width: 620px;
             max-width: 100%;
@@ -123,10 +130,38 @@
             margin-bottom: 10px;
         }
     }
+    > .ant-divider {
+        flex-shrink: 0;
+    }
+    > .ant-spin-nested-loading {
+        flex: 1;
+        min-height: 0;
+        display: flex;
+        flex-direction: column;
+    }
+    > .ant-spin-nested-loading > .ant-spin-container {
+        flex: 1;
+        min-height: 0;
+        display: flex;
+        flex-direction: column;
+    }
+    .skills-list-section {
+        flex: 1;
+        min-height: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        gap: 16px;
+    }
+    .skills-grid {
+        flex-shrink: 0;
+    }
     .pagination-wrap {
         display: flex;
         justify-content: flex-end;
-        margin-top: 20px;
+        flex-shrink: 0;
+        margin-top: auto;
+        padding-bottom: 4px;
     }
 }
 
diff --git a/test/skills-install-key.test.js b/test/skills-install-key.test.js
index 77e09c0..a074f0f 100644
--- a/test/skills-install-key.test.js
+++ b/test/skills-install-key.test.js
@@ -89,3 +89,73 @@ test('getInstallMeta returns installKey and installDirName aligned to user-facin
     assert.equal(meta.installDirName, 'skill-creator');
     assert.equal(meta.downloadUrl, 'https://doraemon.test/api/skills/download?slug=upload-skill-creator-default-skill-creator');
 });
+
+test('buildUploadSourceMeta keeps same zip with different custom names isolated', () => {
+    const service = Object.create(SkillsService.prototype);
+    service.hashString = SkillsService.prototype.hashString;
+    service.sanitizeSlugSegment = SkillsService.prototype.sanitizeSlugSegment;
+
+    const first = service.buildUploadSourceMeta('skill-creator.zip', 'skill-creator-a');
+    const second = service.buildUploadSourceMeta('skill-creator.zip', 'skill-creator-b');
+
+    assert.notEqual(first.sourceUrl, second.sourceUrl);
+    assert.notEqual(first.repoPath, second.repoPath);
+});
+
+test('assertSkillNamesUnique rejects duplicated names in one import batch', async () => {
+    const service = Object.create(SkillsService.prototype);
+    service.ctx = {
+        throw(status, message) {
+            const error = new Error(message);
+            error.status = status;
+            throw error;
+        },
+    };
+    service.app = {
+        model: {
+            SkillsItem: {
+                findOne: async () => null,
+            },
+        },
+        Sequelize: {
+            Op: {
+                in: 'in',
+                ne: 'ne',
+            },
+        },
+    };
+
+    await assert.rejects(
+        () => service.assertSkillNamesUnique([ 'skill-a', 'skill-a' ]),
+        (error) => error.status === 400 && error.message === '导入失败：技能名称不能重复'
+    );
+});
+
+test('assertSkillNamesUnique rejects existing skill name', async () => {
+    const service = Object.create(SkillsService.prototype);
+    service.ctx = {
+        throw(status, message) {
+            const error = new Error(message);
+            error.status = status;
+            throw error;
+        },
+    };
+    service.app = {
+        model: {
+            SkillsItem: {
+                findOne: async () => ({ id: 9, name: 'skill-creator' }),
+            },
+        },
+        Sequelize: {
+            Op: {
+                in: 'in',
+                ne: 'ne',
+            },
+        },
+    };
+
+    await assert.rejects(
+        () => service.assertSkillNamesUnique([ 'skill-creator' ]),
+        (error) => error.status === 400 && error.message === '技能名称“skill-creator”已存在，请更换名称'
+    );
+});

From db499733ba32cd37a267dbb48f5eacebfe127ee4 Mon Sep 17 00:00:00 2001
From: huaiju <huaiju@dtstack.com>
Date: Tue, 24 Mar 2026 09:39:33 +0800
Subject: [PATCH 37/43] refactor(api): remove redundant method-name validation

The method-name lookup already guarantees a valid function via the
ternary branch, making the extra if-check self-contradictory.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/web/api/index.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/app/web/api/index.ts b/app/web/api/index.ts
index fc7bbef..f3353af 100644
--- a/app/web/api/index.ts
+++ b/app/web/api/index.ts
@@ -14,9 +14,6 @@ function mapUrlObjToFuncObj(urlObj: any) {
                 typeof (http as any)[rawMethod] === 'function'
                     ? rawMethod
                     : rawMethod.toLowerCase();
-            if (typeof (http as any)[methodName] !== 'function') {
-                throw new Error(`Unsupported API method: ${item.method}`);
-            }
             // eslint-disable-next-line no-return-await
             return await (http as any)[methodName](item.url, params);
         };

From 40f4aed0621df8631349f1ab4d252d13a62ac972 Mon Sep 17 00:00:00 2001
From: huaiju <huaiju@dtstack.com>
Date: Tue, 24 Mar 2026 09:40:45 +0800
Subject: [PATCH 38/43] chore: update mcpDeployDir to /opt path

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 env.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/env.json b/env.json
index ab3e9ae..144c691 100644
--- a/env.json
+++ b/env.json
@@ -8,7 +8,7 @@
     "mysql": {
         "prod": {}
     },
-    "mcpDeployDir": "/tmp/doraemon/mcp-server/",
+    "mcpDeployDir": "/opt/doraemon/mcp-server/",
     "mcpEndpointPort": 7005,
     "mcpInspectorWebPort": 7003,
     "mcpInspectorServerPort": 7004,

From b5402d3df859fe64a8ce8e448799789f533b3fa7 Mon Sep 17 00:00:00 2001
From: huaiju <huaiju@dtstack.com>
Date: Tue, 24 Mar 2026 09:42:07 +0800
Subject: [PATCH 39/43] chore: remove docs/research from history and ignore
 future research files

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .gitignore | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.gitignore b/.gitignore
index ebb9c12..4f79674 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,3 +7,6 @@ cache
 public
 resources
 app/view
+
+# Research docs (working notes, not for commit)
+docs/research

From d6423b7d76e195ce8151c7cd6ef98bb8454a2978 Mon Sep 17 00:00:00 2001
From: huaiju <huaiju@dtstack.com>
Date: Tue, 24 Mar 2026 18:54:11 +0800
Subject: [PATCH 40/43] fix(skills): preserve skill item ids on source sync

---
 app/service/skills.js | 100 +++++++++++++++++++++++++-----------------
 sql/doraemon.sql      |  97 +++++++++++++++++++++++++++++++++++++++-
 2 files changed, 156 insertions(+), 41 deletions(-)

diff --git a/app/service/skills.js b/app/service/skills.js
index b97ab2c..715ae0b 100644
--- a/app/service/skills.js
+++ b/app/service/skills.js
@@ -1886,7 +1886,7 @@ class SkillsService extends Service {
                     source_id: sourceId,
                     is_delete: 0,
                 },
-                attributes: [ 'id', 'stars' ],
+                attributes: [ 'id', 'slug', 'stars' ],
                 order: [ [ 'stars', 'DESC' ], [ 'id', 'DESC' ] ],
                 transaction,
             });
@@ -1896,52 +1896,47 @@ class SkillsService extends Service {
                 typeof repoStars === 'number' && Number.isFinite(repoStars) && repoStars >= 0
                     ? repoStars
                     : fallbackStars;
-
-            if (oldRows.length > 0) {
-                const oldIds = oldRows.map((item) => item.id);
-                await SkillsFile.destroy({
-                    where: {
-                        skill_id: {
-                            [Op.in]: oldIds,
-                        },
-                    },
-                    transaction,
-                });
-            }
-
-            await SkillsItem.destroy({
-                where: {
-                    source_id: sourceId,
-                },
-                transaction,
-            });
+            const oldRowMap = new Map(oldRows.map((item) => [ item.slug, item ]));
 
             const usedSlugs = new Set();
             const createdSkills = [];
 
             for (const record of skillRecords) {
                 const slug = this.buildSkillSlug(sourceMeta, record.sourcePath, record.name, usedSlugs);
-                const itemRow = await SkillsItem.create(
-                    {
-                        source_id: sourceId,
-                        slug,
-                        name: record.name,
-                        description: record.description,
-                        category: record.category,
-                        version: record.version || '',
-                        tags: JSON.stringify(record.tags || []),
-                        allowed_tools: JSON.stringify(record.allowedTools || []),
-                        stars: resolvedStars,
-                        updated_at_remote: record.updatedAt,
-                        source_repo: record.sourceRepo,
-                        source_path: record.sourcePath,
-                        skill_md: record.skillMd,
-                        install_command: record.installCommand,
-                        file_count: record.files.length,
-                        is_delete: 0,
+                const payload = {
+                    source_id: sourceId,
+                    slug,
+                    name: record.name,
+                    description: record.description,
+                    category: record.category,
+                    version: record.version || '',
+                    tags: JSON.stringify(record.tags || []),
+                    allowed_tools: JSON.stringify(record.allowedTools || []),
+                    stars: resolvedStars,
+                    updated_at_remote: record.updatedAt,
+                    source_repo: record.sourceRepo,
+                    source_path: record.sourcePath,
+                    skill_md: record.skillMd,
+                    install_command: record.installCommand,
+                    file_count: record.files.length,
+                    is_delete: 0,
+                };
+                const existingRow = oldRowMap.get(slug);
+
+                let itemRow = existingRow;
+                if (existingRow) {
+                    await existingRow.update(payload, { transaction });
+                    oldRowMap.delete(slug);
+                } else {
+                    itemRow = await SkillsItem.create(payload, { transaction });
+                }
+
+                await SkillsFile.destroy({
+                    where: {
+                        skill_id: itemRow.id,
                     },
-                    { transaction }
-                );
+                    transaction,
+                });
 
                 if (record.files.length > 0) {
                     const fileRows = record.files.map((fileItem) => ({
@@ -1967,6 +1962,31 @@ class SkillsService extends Service {
                 });
             }
 
+            const removedIds = Array.from(oldRowMap.values()).map((item) => item.id);
+            if (removedIds.length > 0) {
+                await SkillsFile.destroy({
+                    where: {
+                        skill_id: {
+                            [Op.in]: removedIds,
+                        },
+                    },
+                    transaction,
+                });
+                await SkillsItem.update(
+                    {
+                        is_delete: 1,
+                    },
+                    {
+                        where: {
+                            id: {
+                                [Op.in]: removedIds,
+                            },
+                        },
+                        transaction,
+                    }
+                );
+            }
+
             return createdSkills;
         });
     }
diff --git a/sql/doraemon.sql b/sql/doraemon.sql
index 4dcfb47..38260b4 100644
--- a/sql/doraemon.sql
+++ b/sql/doraemon.sql
@@ -292,4 +292,99 @@ CREATE TABLE IF NOT EXISTS `mcp_servers` (
     `updated_at` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
     PRIMARY KEY (`id`),
     UNIQUE KEY `uk_server_id` (`server_id`)
-  ) ENGINE = InnoDB AUTO_INCREMENT = 1 DEFAULT CHARSET = utf8 COLLATE = utf8_bin
+  ) ENGINE = InnoDB AUTO_INCREMENT = 1 DEFAULT CHARSET = utf8 COLLATE = utf8_bin;
+
+-- ----------------------------
+-- Table structure for skills_sources
+-- ----------------------------
+DROP TABLE IF EXISTS `skills_sources`;
+CREATE TABLE `skills_sources` (
+  `id` int NOT NULL AUTO_INCREMENT,
+  `source_url` varchar(512) NOT NULL COMMENT '用户输入的来源地址',
+  `source_type` varchar(32) NOT NULL DEFAULT 'git' COMMENT '来源类型 github/gitlab/git/local',
+  `clone_url` varchar(1000) NOT NULL COMMENT '用于 clone 的仓库地址',
+  `source_repo` varchar(1000) NOT NULL COMMENT '用于安装命令展示的仓库地址',
+  `ref` varchar(255) DEFAULT NULL COMMENT '分支或标签',
+  `subpath` varchar(1000) DEFAULT NULL COMMENT '仓库内相对子目录',
+  `repo_host` varchar(255) DEFAULT NULL COMMENT '仓库域名',
+  `repo_path` varchar(500) DEFAULT NULL COMMENT '仓库路径 owner/repo 或 group/subgroup/repo',
+  `sync_status` varchar(32) NOT NULL DEFAULT 'idle' COMMENT '同步状态 idle/syncing/failed',
+  `sync_error` text COMMENT '最近一次同步错误',
+  `last_synced_at` datetime DEFAULT NULL COMMENT '最近同步时间',
+  `is_delete` tinyint NOT NULL DEFAULT '0',
+  `created_at` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  `updated_at` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+  PRIMARY KEY (`id`),
+  UNIQUE KEY `uk_skills_source_url` (`source_url`),
+  KEY `idx_skills_repo_host` (`repo_host`),
+  KEY `idx_skills_repo_path` (`repo_path`),
+  KEY `idx_skills_sync_status` (`sync_status`)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci COMMENT='技能来源表';
+
+-- ----------------------------
+-- Table structure for skills_items
+-- ----------------------------
+DROP TABLE IF EXISTS `skills_items`;
+CREATE TABLE `skills_items` (
+  `id` int NOT NULL AUTO_INCREMENT,
+  `source_id` int NOT NULL COMMENT '来源记录ID',
+  `slug` varchar(255) NOT NULL COMMENT '详情页唯一标识',
+  `name` varchar(255) NOT NULL,
+  `description` text,
+  `category` varchar(64) NOT NULL DEFAULT '通用',
+  `version` varchar(128) NOT NULL DEFAULT '' COMMENT '技能版本号',
+  `tags` longtext COMMENT 'JSON字符串数组',
+  `allowed_tools` longtext COMMENT 'JSON字符串数组',
+  `stars` int NOT NULL DEFAULT '0',
+  `updated_at_remote` datetime DEFAULT NULL COMMENT '源仓库文件更新时间',
+  `source_repo` varchar(1000) DEFAULT NULL COMMENT '仓库地址',
+  `source_path` varchar(1000) DEFAULT NULL COMMENT '仓库内 skill 相对路径',
+  `skill_md` longtext COMMENT 'SKILL.md 原文',
+  `install_command` text COMMENT '推荐安装命令',
+  `file_count` int NOT NULL DEFAULT '0',
+  `is_delete` tinyint NOT NULL DEFAULT '0',
+  `created_at` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  `updated_at` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+  PRIMARY KEY (`id`),
+  UNIQUE KEY `uk_skills_slug` (`slug`),
+  KEY `idx_skills_source_id` (`source_id`),
+  KEY `idx_skills_category` (`category`),
+  KEY `idx_skills_stars` (`stars`),
+  KEY `idx_skills_updated_at_remote` (`updated_at_remote`)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci COMMENT='技能条目表';
+
+-- ----------------------------
+-- Table structure for skills_files
+-- ----------------------------
+DROP TABLE IF EXISTS `skills_files`;
+CREATE TABLE `skills_files` (
+  `id` int NOT NULL AUTO_INCREMENT,
+  `skill_id` int NOT NULL COMMENT 'skills_items.id',
+  `file_path` varchar(512) NOT NULL COMMENT '文件相对路径',
+  `language` varchar(64) NOT NULL DEFAULT 'text',
+  `size` int NOT NULL DEFAULT '0',
+  `is_binary` tinyint NOT NULL DEFAULT '0',
+  `encoding` varchar(16) NOT NULL DEFAULT 'utf8',
+  `content` longtext COMMENT '文本内容或base64内容',
+  `updated_at_remote` datetime DEFAULT NULL COMMENT '源仓库文件更新时间',
+  `is_delete` tinyint NOT NULL DEFAULT '0',
+  `created_at` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  `updated_at` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+  PRIMARY KEY (`id`),
+  KEY `idx_skills_file_skill_id` (`skill_id`)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci COMMENT='技能文件表';
+
+-- ----------------------------
+-- Table structure for skill_likes
+-- ----------------------------
+DROP TABLE IF EXISTS `skill_likes`;
+CREATE TABLE `skill_likes` (
+  `id` int NOT NULL AUTO_INCREMENT,
+  `skill_id` int NOT NULL COMMENT '技能ID',
+  `ip` varchar(64) NOT NULL COMMENT '点赞用户IP',
+  `created_at` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  PRIMARY KEY (`id`),
+  UNIQUE KEY `uk_skill_like_skill_ip` (`skill_id`, `ip`),
+  KEY `idx_skill_like_skill_id` (`skill_id`),
+  KEY `idx_skill_like_ip` (`ip`)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci COMMENT='技能点赞表';

From f4ddec1bd75adfbdb7fa1c5b0b9d37543ce2e2d4 Mon Sep 17 00:00:00 2001
From: huaiju <huaiju@dtstack.com>
Date: Tue, 24 Mar 2026 18:57:07 +0800
Subject: [PATCH 41/43] fix(skills): reject oversized files during import

---
 app/service/skills.js | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/app/service/skills.js b/app/service/skills.js
index 715ae0b..6e67249 100644
--- a/app/service/skills.js
+++ b/app/service/skills.js
@@ -1292,11 +1292,16 @@ class SkillsService extends Service {
                 try {
                     const stat = fs.statSync(fullPath);
                     const size = Number(stat.size) || 0;
-                    const buffer = size > MAX_STORED_FILE_CONTENT_SIZE ? null : fs.readFileSync(fullPath);
-                    const isBinary = buffer ? this.isLikelyBinary(buffer) : false;
+                    if (size > MAX_STORED_FILE_CONTENT_SIZE) {
+                        this.ctx.throw(
+                            400,
+                            `文件 ${relativePath} 超过 ${Math.floor(MAX_STORED_FILE_CONTENT_SIZE / 1024 / 1024)}MB 限制，拒绝导入`
+                        );
+                    }
+                    const buffer = fs.readFileSync(fullPath);
+                    const isBinary = this.isLikelyBinary(buffer);
                     const encoding = isBinary ? 'base64' : 'utf8';
-                    const content =
-                        !buffer ? null : isBinary ? buffer.toString('base64') : buffer.toString('utf8');
+                    const content = isBinary ? buffer.toString('base64') : buffer.toString('utf8');
 
                     files.push({
                         filePath: relativePath,
@@ -1308,6 +1313,9 @@ class SkillsService extends Service {
                         updatedAt: stat.mtime,
                     });
                 } catch (error) {
+                    if (error.status) {
+                        throw error;
+                    }
                     // 忽略不可读取文件，避免单文件损坏阻塞整次导入。
                 }
             });

From ae698e04a15ebf6f15b5621f553de83579cf8e30 Mon Sep 17 00:00:00 2001
From: huaiju <huaiju@dtstack.com>
Date: Wed, 25 Mar 2026 09:31:14 +0800
Subject: [PATCH 42/43] style: fix prettier issues in skills pages

---
 app/controller/skills.js                      |  4 +-
 app/model/skills_file.js                      |  4 +-
 app/service/skillLike.js                      |  9 ++--
 .../skills/detail/SkillDetailContent.tsx      | 41 +++++++++++--------
 .../detail/SkillSummaryModalContent.tsx       | 10 ++---
 app/web/pages/skills/index.tsx                | 11 +----
 6 files changed, 39 insertions(+), 40 deletions(-)

diff --git a/app/controller/skills.js b/app/controller/skills.js
index 480ad99..b040ef3 100644
--- a/app/controller/skills.js
+++ b/app/controller/skills.js
@@ -52,7 +52,7 @@ class SkillsController extends Controller {
         const files = ctx.request.files
             ? Array.isArray(ctx.request.files)
                 ? ctx.request.files
-                : [ ctx.request.files ]
+                : [ctx.request.files]
             : [];
         const file = files[0];
 
@@ -80,7 +80,7 @@ class SkillsController extends Controller {
         const files = ctx.request.files
             ? Array.isArray(ctx.request.files)
                 ? ctx.request.files
-                : [ ctx.request.files ]
+                : [ctx.request.files]
             : [];
         const file = files[0] || null;
 
diff --git a/app/model/skills_file.js b/app/model/skills_file.js
index fc22409..631adb4 100644
--- a/app/model/skills_file.js
+++ b/app/model/skills_file.js
@@ -69,9 +69,7 @@ module.exports = (app) => {
             timestamps: true,
             createdAt: 'created_at',
             updatedAt: 'updated_at',
-            indexes: [
-                { fields: ['skill_id'] },
-            ],
+            indexes: [{ fields: ['skill_id'] }],
         }
     );
 
diff --git a/app/service/skillLike.js b/app/service/skillLike.js
index 35a5c3b..e0e2da4 100644
--- a/app/service/skillLike.js
+++ b/app/service/skillLike.js
@@ -11,10 +11,11 @@ class SkillLikeService extends Service {
 
     resolveClientIp() {
         const headers = this.ctx.request.headers;
-        const ip = headers['x-forwarded-for']?.split(',')[0]?.trim()
-            || headers['x-real-ip']
-            || this.ctx.ip
-            || '';
+        const ip =
+            headers['x-forwarded-for']?.split(',')[0]?.trim() ||
+            headers['x-real-ip'] ||
+            this.ctx.ip ||
+            '';
         return String(ip).trim();
     }
 
diff --git a/app/web/pages/skills/detail/SkillDetailContent.tsx b/app/web/pages/skills/detail/SkillDetailContent.tsx
index 6cd644c..086e2ea 100644
--- a/app/web/pages/skills/detail/SkillDetailContent.tsx
+++ b/app/web/pages/skills/detail/SkillDetailContent.tsx
@@ -1,5 +1,11 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { ArrowLeftOutlined, DislikeOutlined, LikeOutlined, QuestionCircleOutlined, StarOutlined } from '@ant-design/icons';
+import {
+    ArrowLeftOutlined,
+    DislikeOutlined,
+    LikeOutlined,
+    QuestionCircleOutlined,
+    StarOutlined,
+} from '@ant-design/icons';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import { atomOneLight } from 'react-syntax-highlighter/dist/cjs/styles/hljs';
 import { Button, Empty, Spin, Tree, Typography } from 'antd';
@@ -54,7 +60,8 @@ const relatedSkillIconUrls = [
 ];
 
 const relatedSkillShellClasses = ['is-blue', 'is-green', 'is-orange'];
-const browseMarketArrowIcon = 'http://localhost:3845/assets/d1b40a8f52f64c4290b2006b356fc8b61c18d6fc.svg';
+const browseMarketArrowIcon =
+    'http://localhost:3845/assets/d1b40a8f52f64c4290b2006b356fc8b61c18d6fc.svg';
 
 const FigmaIcon: React.FC<FigmaIconProps> = ({ src, className = '', alt = '' }) => (
     <img
@@ -647,7 +654,8 @@ const SkillDetailContent: React.FC<SkillDetailContentProps> = ({ slug, history }
                             className="sidebar-help-btn"
                             onClick={() =>
                                 window.open(
-                                    sourceUrl || 'https://github.com/JackWang032/doraemon-proxy-tool',
+                                    sourceUrl ||
+                                        'https://github.com/JackWang032/doraemon-proxy-tool',
                                     '_blank'
                                 )
                             }
@@ -667,7 +675,9 @@ const SkillDetailContent: React.FC<SkillDetailContentProps> = ({ slug, history }
                                 </div>
                                 <div className="hero-copy">
                                     <Title level={2}>{detail.name}</Title>
-                                    <Paragraph className="hero-description">{heroSummary}</Paragraph>
+                                    <Paragraph className="hero-description">
+                                        {heroSummary}
+                                    </Paragraph>
                                 </div>
                             </div>
 
@@ -693,7 +703,6 @@ const SkillDetailContent: React.FC<SkillDetailContentProps> = ({ slug, history }
                                 </div>
                             ))}
                         </div>
-
                     </section>
 
                     <section className="document-panel">
@@ -715,9 +724,7 @@ const SkillDetailContent: React.FC<SkillDetailContentProps> = ({ slug, history }
                         </div>
 
                         <div className="document-scroll-area">
-                            <div className="document-content-shell">
-                                {renderFileViewer()}
-                            </div>
+                            <div className="document-content-shell">{renderFileViewer()}</div>
                         </div>
                     </section>
                 </main>
@@ -757,9 +764,7 @@ const SkillDetailContent: React.FC<SkillDetailContentProps> = ({ slug, history }
                                     <div>
                                         <div className="install-option-title">智能体</div>
                                         <div className="install-option-description">
-                                            {isInstallable
-                                                ? '自动化安装'
-                                                : '下载后安装'}
+                                            {isInstallable ? '自动化安装' : '下载后安装'}
                                         </div>
                                     </div>
                                 </div>
@@ -786,7 +791,7 @@ const SkillDetailContent: React.FC<SkillDetailContentProps> = ({ slug, history }
                                         agentTerminalCommand,
                                         isInstallable
                                             ? 'Agent 安装命令已复制到剪贴板'
-                                            : '下载命令已复制到剪贴板',
+                                            : '下载命令已复制到剪贴板'
                                     )}
                                 </div>
                             </div>
@@ -819,9 +824,7 @@ const SkillDetailContent: React.FC<SkillDetailContentProps> = ({ slug, history }
                                     </span>
                                     <div>
                                         <div className="install-option-title">手动安装</div>
-                                        <div className="install-option-description">
-                                            手动配置
-                                        </div>
+                                        <div className="install-option-description">手动配置</div>
                                     </div>
                                 </div>
                                 <FigmaIcon
@@ -844,7 +847,9 @@ const SkillDetailContent: React.FC<SkillDetailContentProps> = ({ slug, history }
                             >
                                 <div className="install-option-body-inner">
                                     <div className="human-command-card">
-                                        <div className="human-command-title">先安装 Doraemon CLI</div>
+                                        <div className="human-command-title">
+                                            先安装 Doraemon CLI
+                                        </div>
                                         {renderInlineCommand(
                                             cliInstallPlaceholderCommand,
                                             'CLI 安装命令已复制到剪贴板',
@@ -944,7 +949,9 @@ const SkillDetailContent: React.FC<SkillDetailContentProps> = ({ slug, history }
                     <section className="meta-panel">
                         <div className="meta-row">
                             <span>仓库大小</span>
-                            <strong>{fileContent ? formatFileSize(fileContent.size) : '1.2 MB'}</strong>
+                            <strong>
+                                {fileContent ? formatFileSize(fileContent.size) : '1.2 MB'}
+                            </strong>
                         </div>
                         <div className="meta-row">
                             <span>近 30 天下载</span>
diff --git a/app/web/pages/skills/detail/SkillSummaryModalContent.tsx b/app/web/pages/skills/detail/SkillSummaryModalContent.tsx
index f412f45..afecf96 100644
--- a/app/web/pages/skills/detail/SkillSummaryModalContent.tsx
+++ b/app/web/pages/skills/detail/SkillSummaryModalContent.tsx
@@ -234,16 +234,16 @@ const SkillSummaryModalContent: React.FC<SkillSummaryModalContentProps> = ({ slu
                             <div className="summary-action-panel">
                                 <Text className="summary-section-label">快捷操作</Text>
                                 <div className="summary-actions">
-                                    <Button type="primary" onClick={() => history.push(deepLinkPath)}>
+                                    <Button
+                                        type="primary"
+                                        onClick={() => history.push(deepLinkPath)}
+                                    >
                                         打开独立详情页
                                     </Button>
                                     <Button
                                         icon={<ShareAltOutlined />}
                                         onClick={() =>
-                                            copyToClipboard(
-                                                deepLinkUrl,
-                                                '详情页深链已复制到剪贴板'
-                                            )
+                                            copyToClipboard(deepLinkUrl, '详情页深链已复制到剪贴板')
                                         }
                                     >
                                         复制深链
diff --git a/app/web/pages/skills/index.tsx b/app/web/pages/skills/index.tsx
index e5a1c04..4c2cf71 100644
--- a/app/web/pages/skills/index.tsx
+++ b/app/web/pages/skills/index.tsx
@@ -75,12 +75,7 @@ const EditIcon = () => (
             strokeLinecap="round"
             strokeLinejoin="round"
         />
-        <path
-            d="M7.583 11.667h3.5"
-            stroke="currentColor"
-            strokeWidth="1.2"
-            strokeLinecap="round"
-        />
+        <path d="M7.583 11.667h3.5" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
     </svg>
 );
 
@@ -473,9 +468,7 @@ const SkillsMarket: React.FC<any> = ({ history }) => {
                         />
                     </Form.Item>
                 </Form>
-                <Text type="secondary">
-                    提示：.zip 包内部应包含 `技能目录/SKILL.md`
-                </Text>
+                <Text type="secondary">提示：.zip 包内部应包含 `技能目录/SKILL.md`</Text>
             </Modal>
 
             <Modal

From 63b45d494fb5adf8acfcbcf4f34ea6e5fb307d26 Mon Sep 17 00:00:00 2001
From: huaiju <huaiju@dtstack.com>
Date: Wed, 25 Mar 2026 10:02:37 +0800
Subject: [PATCH 43/43] fix: resolve skills detail CI and icon assets

---
 app/service/skills.js                         | 234 +++++++---
 .../skills-detail-figma/external-link-xs.svg  |   3 +
 .../related-skill-docs.svg                    |   3 +
 .../related-skill-security.svg                |   3 +
 .../skills-detail-figma/related-skill-sql.svg |   3 +
 app/web/layouts/basicLayout/style.scss        |  10 +-
 .../skills/detail/SkillDetailContent.tsx      |  24 +-
 app/web/pages/skills/detail/stitchAssets.scss |  41 +-
 app/web/pages/skills/detail/style.scss        | 407 +++++-------------
 app/web/pages/skills/detail/summaryModal.scss |   1 -
 app/web/router/index.ts                       |   7 +-
 scripts/doraemon-skills-lib.js                |  14 +-
 test/doraemon-skills-config.test.js           |  16 +-
 test/skills-install-key.test.js               |  35 +-
 14 files changed, 378 insertions(+), 423 deletions(-)
 create mode 100644 app/web/asset/images/skills-detail-figma/external-link-xs.svg
 create mode 100644 app/web/asset/images/skills-detail-figma/related-skill-docs.svg
 create mode 100644 app/web/asset/images/skills-detail-figma/related-skill-security.svg
 create mode 100644 app/web/asset/images/skills-detail-figma/related-skill-sql.svg

diff --git a/app/service/skills.js b/app/service/skills.js
index 6e67249..ef76fee 100644
--- a/app/service/skills.js
+++ b/app/service/skills.js
@@ -39,7 +39,9 @@ function createInstallKeyCandidates(skill = {}) {
 
     pushCandidate(skill.name);
 
-    const sourcePath = String(skill.sourcePath || '').trim().replace(/\\/g, '/');
+    const sourcePath = String(skill.sourcePath || '')
+        .trim()
+        .replace(/\\/g, '/');
     if (sourcePath) {
         const segments = sourcePath.split('/').filter(Boolean);
         if (segments.length > 0) {
@@ -174,7 +176,7 @@ class SkillsService extends Service {
     }
 
     getSkillCategoryOptions() {
-        return [ ...SKILL_CATEGORY_OPTIONS ];
+        return [...SKILL_CATEGORY_OPTIONS];
     }
 
     getSkillsConfig() {
@@ -282,7 +284,12 @@ class SkillsService extends Service {
             tags: this.parseJsonArray(row.tags),
             allowedTools: this.parseJsonArray(row.allowed_tools),
             stars: Number(row.stars) || 0,
-            updatedAt: (row.updated_at || row.updated_at_remote || row.created_at || new Date()).toISOString(),
+            updatedAt: (
+                row.updated_at ||
+                row.updated_at_remote ||
+                row.created_at ||
+                new Date()
+            ).toISOString(),
             sourceRepo: row.source_repo || '',
             sourcePath: row.source_path || '',
             skillMd: row.skill_md || '',
@@ -299,10 +306,10 @@ class SkillsService extends Service {
         const rows = await SkillsItem.findAll({
             where: { is_delete: 0 },
             order: [
-                [ 'stars', 'DESC' ],
-                [ 'updated_at_remote', 'DESC' ],
-                [ 'updated_at', 'DESC' ],
-                [ 'id', 'DESC' ],
+                ['stars', 'DESC'],
+                ['updated_at_remote', 'DESC'],
+                ['updated_at', 'DESC'],
+                ['id', 'DESC'],
             ],
         });
 
@@ -333,7 +340,7 @@ class SkillsService extends Service {
         const safePageSize = Math.max(parseInt(pageSize, 10) || 20, 1);
         const { skills, categories } = this.skillCache;
 
-        let list = [ ...skills ];
+        let list = [...skills];
         if (keyword) {
             const value = String(keyword).toLowerCase();
             list = list.filter(
@@ -359,7 +366,9 @@ class SkillsService extends Service {
 
         const total = list.length;
         const offset = (safePageNum - 1) * safePageSize;
-        const pageList = list.slice(offset, offset + safePageSize).map((item) => this.toPublicSkill(item));
+        const pageList = list
+            .slice(offset, offset + safePageSize)
+            .map((item) => this.toPublicSkill(item));
 
         return {
             list: pageList,
@@ -403,8 +412,8 @@ class SkillsService extends Service {
                 skill_id: skill.id,
                 is_delete: 0,
             },
-            attributes: [ 'file_path' ],
-            order: [ [ 'file_path', 'ASC' ] ],
+            attributes: ['file_path'],
+            order: [['file_path', 'ASC']],
             limit: MAX_FILE_LIST_COUNT,
         });
 
@@ -458,7 +467,7 @@ class SkillsService extends Service {
                 skill_id: skill.id,
                 is_delete: 0,
             },
-            order: [ [ 'file_path', 'ASC' ] ],
+            order: [['file_path', 'ASC']],
             limit: MAX_FILE_LIST_COUNT,
         });
 
@@ -504,8 +513,8 @@ class SkillsService extends Service {
                 skill_id: skillId,
                 is_delete: 0,
             },
-            attributes: [ 'file_path' ],
-            order: [ [ 'file_path', 'ASC' ] ],
+            attributes: ['file_path'],
+            order: [['file_path', 'ASC']],
             limit: MAX_FILE_LIST_COUNT,
         });
 
@@ -516,7 +525,9 @@ class SkillsService extends Service {
             };
         }
 
-        const hasSkillMd = rows.some((row) => path.basename(row.file_path).toLowerCase() === 'skill.md');
+        const hasSkillMd = rows.some(
+            (row) => path.basename(row.file_path).toLowerCase() === 'skill.md'
+        );
         if (!hasSkillMd) {
             return {
                 installable: false,
@@ -578,10 +589,7 @@ class SkillsService extends Service {
             this.ctx.throw(400, '缺少文件路径');
         }
 
-        const normalized = path
-            .normalize(value)
-            .replace(/\\/g, '/')
-            .replace(/^\/+/, '');
+        const normalized = path.normalize(value).replace(/\\/g, '/').replace(/^\/+/, '');
 
         if (!normalized || normalized === '.' || normalized.startsWith('..')) {
             this.ctx.throw(400, '非法文件路径');
@@ -625,7 +633,9 @@ class SkillsService extends Service {
     }
 
     buildSkillSlug(sourceMeta, relativeSkillPath, skillName, usedSlugs = new Set()) {
-        const sourceKey = `${sourceMeta.repoHost || 'local'}-${sourceMeta.repoPath || sourceMeta.sourceUrl || ''}-${sourceMeta.ref || 'default'}`;
+        const sourceKey = `${sourceMeta.repoHost || 'local'}-${
+            sourceMeta.repoPath || sourceMeta.sourceUrl || ''
+        }-${sourceMeta.ref || 'default'}`;
         const relativeKey = String(relativeSkillPath || skillName || 'skill').replace(/\\/g, '/');
         const base = this.sanitizeSlugSegment(`${sourceKey}-${relativeKey}`) || 'skill';
         let slug = base;
@@ -637,7 +647,8 @@ class SkillsService extends Service {
         let index = 2;
         while (usedSlugs.has(slug)) {
             const suffix = `-${index}`;
-            const head = slug.length + suffix.length > 255 ? slug.slice(0, 255 - suffix.length) : slug;
+            const head =
+                slug.length + suffix.length > 255 ? slug.slice(0, 255 - suffix.length) : slug;
             slug = `${head}${suffix}`;
             index += 1;
         }
@@ -734,7 +745,9 @@ class SkillsService extends Service {
         const identityText = String(identityKey || '').trim();
         const normalizedIdentity = this.sanitizeSlugSegment(identityText);
         const identityHash = identityText ? this.hashString(identityText).slice(0, 8) : '';
-        const sourceKey = [ normalizedName, normalizedIdentity, identityHash ].filter(Boolean).join('-') || normalizedName;
+        const sourceKey =
+            [normalizedName, normalizedIdentity, identityHash].filter(Boolean).join('-') ||
+            normalizedName;
         return {
             sourceUrl: `upload://${sourceKey}.skill`,
             sourceType: 'upload',
@@ -860,7 +873,9 @@ class SkillsService extends Service {
     }
 
     parseSshGitSource(source) {
-        const match = String(source || '').trim().match(/^git@([^:]+):(.+?)(?:\.git)?$/i);
+        const match = String(source || '')
+            .trim()
+            .match(/^git@([^:]+):(.+?)(?:\.git)?$/i);
         if (!match) return null;
         const host = match[1];
         const repoPath = match[2].replace(/^\/+|\/+$/g, '');
@@ -941,15 +956,19 @@ class SkillsService extends Service {
         let actionTail = [];
 
         const dashIndex = segments.indexOf('-');
-        if (dashIndex > 0 && [ 'tree', 'blob' ].includes(segments[dashIndex + 1])) {
+        if (dashIndex > 0 && ['tree', 'blob'].includes(segments[dashIndex + 1])) {
             repoSegments = segments.slice(0, dashIndex);
             action = segments[dashIndex + 1];
             actionTail = segments.slice(dashIndex + 2);
-        } else if ([ 'tree', 'blob' ].includes(segments[2])) {
+        } else if (['tree', 'blob'].includes(segments[2])) {
             repoSegments = segments.slice(0, 2);
             action = segments[2];
             actionTail = segments.slice(3);
-        } else if (String(url.hostname || '').toLowerCase().includes('github')) {
+        } else if (
+            String(url.hostname || '')
+                .toLowerCase()
+                .includes('github')
+        ) {
             repoSegments = segments.slice(0, 2);
         } else {
             repoSegments = segments;
@@ -959,7 +978,7 @@ class SkillsService extends Service {
             this.ctx.throw(400, `无法识别仓库路径: ${value}`);
         }
 
-        const normalizedRepoSegments = [ ...repoSegments ];
+        const normalizedRepoSegments = [...repoSegments];
         normalizedRepoSegments[normalizedRepoSegments.length - 1] = normalizedRepoSegments[
             normalizedRepoSegments.length - 1
         ].replace(/\.git$/i, '');
@@ -1027,7 +1046,7 @@ class SkillsService extends Service {
         try {
             const { stdout } = await this.runCommand(
                 'git',
-                [ ...authArgs, 'ls-remote', '--heads', cloneUrl ],
+                [...authArgs, 'ls-remote', '--heads', cloneUrl],
                 GIT_COMMAND_TIMEOUT_MS,
                 process.cwd(),
                 env
@@ -1058,24 +1077,39 @@ class SkillsService extends Service {
 
         // 子目录导入优先使用 sparse clone，避免大仓库全量 clone 导致长时间卡顿。
         if (hasSubpath) {
-            const sparseCloneArgs = [ ...authArgs, 'clone', '--depth', '1', '--filter=blob:none', '--sparse' ];
+            const sparseCloneArgs = [
+                ...authArgs,
+                'clone',
+                '--depth',
+                '1',
+                '--filter=blob:none',
+                '--sparse',
+            ];
             if (parsedSource.ref) {
                 sparseCloneArgs.push('--branch', parsedSource.ref);
             }
             sparseCloneArgs.push(parsedSource.cloneUrl, targetDir);
 
             try {
-                await this.runCommand('git', sparseCloneArgs, GIT_COMMAND_TIMEOUT_MS, process.cwd(), env);
                 await this.runCommand(
                     'git',
-                    [ '-C', targetDir, 'sparse-checkout', 'set', parsedSource.subpath ],
+                    sparseCloneArgs,
+                    GIT_COMMAND_TIMEOUT_MS,
+                    process.cwd(),
+                    env
+                );
+                await this.runCommand(
+                    'git',
+                    ['-C', targetDir, 'sparse-checkout', 'set', parsedSource.subpath],
                     GIT_COMMAND_TIMEOUT_MS,
                     process.cwd(),
                     env
                 );
                 return;
             } catch (error) {
-                this.ctx.logger.warn(`[skills] sparse clone 失败，回退普通 clone: ${error.message}`);
+                this.ctx.logger.warn(
+                    `[skills] sparse clone 失败，回退普通 clone: ${error.message}`
+                );
                 if (fs.existsSync(targetDir)) {
                     try {
                         fs.rmSync(targetDir, { recursive: true, force: true });
@@ -1089,7 +1123,7 @@ class SkillsService extends Service {
             }
         }
 
-        const cloneArgs = [ ...authArgs, 'clone', '--depth', '1' ];
+        const cloneArgs = [...authArgs, 'clone', '--depth', '1'];
         if (parsedSource.ref) {
             cloneArgs.push('--branch', parsedSource.ref);
         }
@@ -1145,12 +1179,17 @@ class SkillsService extends Service {
     }
 
     shouldSkipDirName(dirName) {
-        return dirName === '.git' || dirName === 'node_modules' || dirName === '.idea' || dirName === '.vscode';
+        return (
+            dirName === '.git' ||
+            dirName === 'node_modules' ||
+            dirName === '.idea' ||
+            dirName === '.vscode'
+        );
     }
 
     findSkillsRootDirs(baseDir, maxDepth = SKILLS_ROOT_DISCOVER_DEPTH_LIMIT) {
         const roots = [];
-        const queue = [ { dir: baseDir, depth: 0 } ];
+        const queue = [{ dir: baseDir, depth: 0 }];
         const visited = new Set();
         let visitCount = 0;
 
@@ -1187,7 +1226,7 @@ class SkillsService extends Service {
 
     findSkillDirsWithin(baseDir, maxDepth = DISCOVER_DEPTH_LIMIT) {
         const result = [];
-        const queue = [ { dir: baseDir, depth: 0 } ];
+        const queue = [{ dir: baseDir, depth: 0 }];
         const visited = new Set();
         let visitCount = 0;
 
@@ -1228,13 +1267,13 @@ class SkillsService extends Service {
             if (path.basename(selectedPath) !== 'SKILL.md') {
                 this.ctx.throw(400, '文件来源仅支持 SKILL.md');
             }
-            return [ path.dirname(selectedPath) ];
+            return [path.dirname(selectedPath)];
         }
 
         const selectedDir = path.resolve(selectedPath);
 
         if (this.containsSkillMd(selectedDir)) {
-            return [ selectedDir ];
+            return [selectedDir];
         }
 
         const roots = this.findSkillsRootDirs(selectedDir, SKILLS_ROOT_DISCOVER_DEPTH_LIMIT);
@@ -1261,7 +1300,7 @@ class SkillsService extends Service {
 
     collectSkillFiles(skillDir) {
         const files = [];
-        const queue = [ skillDir ];
+        const queue = [skillDir];
         const visited = new Set();
 
         while (queue.length > 0) {
@@ -1295,7 +1334,9 @@ class SkillsService extends Service {
                     if (size > MAX_STORED_FILE_CONTENT_SIZE) {
                         this.ctx.throw(
                             400,
-                            `文件 ${relativePath} 超过 ${Math.floor(MAX_STORED_FILE_CONTENT_SIZE / 1024 / 1024)}MB 限制，拒绝导入`
+                            `文件 ${relativePath} 超过 ${Math.floor(
+                                MAX_STORED_FILE_CONTENT_SIZE / 1024 / 1024
+                            )}MB 限制，拒绝导入`
                         );
                     }
                     const buffer = fs.readFileSync(fullPath);
@@ -1335,9 +1376,11 @@ class SkillsService extends Service {
         const frontmatter = this.parseFrontmatter(content);
         const body = frontmatter.__body || content;
 
-        const name = String(frontmatter.name || path.basename(skillDir)).trim() || path.basename(skillDir);
+        const name =
+            String(frontmatter.name || path.basename(skillDir)).trim() || path.basename(skillDir);
         const description =
-            String(frontmatter.description || this.extractDescription(body)).trim() || this.extractDescription(content);
+            String(frontmatter.description || this.extractDescription(body)).trim() ||
+            this.extractDescription(content);
         const version = String(frontmatter.version || '').trim();
         const allowedTools = this.parseArrayLike(
             frontmatter['allowed-tools'] || frontmatter.allowedTools || frontmatter.allowed_tools
@@ -1369,12 +1412,18 @@ class SkillsService extends Service {
     }
 
     filterSkillByName(skills, skillName) {
-        const expected = String(skillName || '').trim().toLowerCase();
+        const expected = String(skillName || '')
+            .trim()
+            .toLowerCase();
         if (!expected) return skills;
 
         return skills.filter((item) => {
-            const name = String(item.name || '').trim().toLowerCase();
-            const folderName = String(path.basename(item.sourcePath || '')).trim().toLowerCase();
+            const name = String(item.name || '')
+                .trim()
+                .toLowerCase();
+            const folderName = String(path.basename(item.sourcePath || ''))
+                .trim()
+                .toLowerCase();
             return name === expected || folderName === expected;
         });
     }
@@ -1410,7 +1459,10 @@ class SkillsService extends Service {
         const names = createUniqueSkillNames(skillNames);
         if (names.length === 0) return;
 
-        if (names.length !== skillNames.map((item) => String(item || '').trim()).filter(Boolean).length) {
+        if (
+            names.length !==
+            skillNames.map((item) => String(item || '').trim()).filter(Boolean).length
+        ) {
             this.ctx.throw(400, '导入失败：技能名称不能重复');
         }
 
@@ -1437,7 +1489,7 @@ class SkillsService extends Service {
 
         const existing = await SkillsItem.findOne({
             where,
-            attributes: [ 'id', 'name' ],
+            attributes: ['id', 'name'],
             transaction: options.transaction,
         });
 
@@ -1493,7 +1545,11 @@ class SkillsService extends Service {
                 { excludeSourceId: sourceRecord.id }
             );
 
-            const importedSkills = await this.persistSkillsForSource(sourceRecord.id, parsedSource, skillRecords);
+            const importedSkills = await this.persistSkillsForSource(
+                sourceRecord.id,
+                parsedSource,
+                skillRecords
+            );
 
             await sourceRecord.update({
                 sync_status: 'idle',
@@ -1589,7 +1645,13 @@ class SkillsService extends Service {
             const parsedSource = this.buildUploadSourceMeta(fileName, skillName);
 
             const skillRecords = discoveredSkillDirs.map((skillDir) => {
-                const record = this.prepareSkillRecord(skillDir, tempDir, parsedSource, category, tags);
+                const record = this.prepareSkillRecord(
+                    skillDir,
+                    tempDir,
+                    parsedSource,
+                    category,
+                    tags
+                );
                 if (skillName) {
                     record.name = skillName;
                 }
@@ -1654,7 +1716,9 @@ class SkillsService extends Service {
                 try {
                     fs.rmSync(tempDir, { recursive: true, force: true });
                 } catch (error) {
-                    this.ctx.logger.warn(`[skills] 清理上传解压目录失败: ${tempDir}, ${error.message}`);
+                    this.ctx.logger.warn(
+                        `[skills] 清理上传解压目录失败: ${tempDir}, ${error.message}`
+                    );
                 }
             }
         }
@@ -1679,7 +1743,13 @@ class SkillsService extends Service {
             }
 
             return discoveredSkillDirs.map((skillDir) => {
-                const record = this.prepareSkillRecord(skillDir, tempDir, parsedSource, category, tags);
+                const record = this.prepareSkillRecord(
+                    skillDir,
+                    tempDir,
+                    parsedSource,
+                    category,
+                    tags
+                );
                 if (skillName) {
                     record.name = skillName;
                 }
@@ -1690,14 +1760,18 @@ class SkillsService extends Service {
                 try {
                     fs.rmSync(tempDir, { recursive: true, force: true });
                 } catch (error) {
-                    this.ctx.logger.warn(`[skills] 清理上传解压目录失败: ${tempDir}, ${error.message}`);
+                    this.ctx.logger.warn(
+                        `[skills] 清理上传解压目录失败: ${tempDir}, ${error.message}`
+                    );
                 }
             }
         }
     }
 
     validateVersion(value) {
-        return String(value || '').trim().slice(0, 128);
+        return String(value || '')
+            .trim()
+            .slice(0, 128);
     }
 
     async updateSkill(params = {}, file) {
@@ -1740,7 +1814,7 @@ class SkillsService extends Service {
                 this.ctx.throw(404, '技能不存在');
             }
 
-            await this.assertSkillNamesUnique([ name ], {
+            await this.assertSkillNamesUnique([name], {
                 excludeSkillId: itemRow.id,
                 transaction,
             });
@@ -1894,8 +1968,11 @@ class SkillsService extends Service {
                     source_id: sourceId,
                     is_delete: 0,
                 },
-                attributes: [ 'id', 'slug', 'stars' ],
-                order: [ [ 'stars', 'DESC' ], [ 'id', 'DESC' ] ],
+                attributes: ['id', 'slug', 'stars'],
+                order: [
+                    ['stars', 'DESC'],
+                    ['id', 'DESC'],
+                ],
                 transaction,
             });
 
@@ -1904,13 +1981,18 @@ class SkillsService extends Service {
                 typeof repoStars === 'number' && Number.isFinite(repoStars) && repoStars >= 0
                     ? repoStars
                     : fallbackStars;
-            const oldRowMap = new Map(oldRows.map((item) => [ item.slug, item ]));
+            const oldRowMap = new Map(oldRows.map((item) => [item.slug, item]));
 
             const usedSlugs = new Set();
             const createdSkills = [];
 
             for (const record of skillRecords) {
-                const slug = this.buildSkillSlug(sourceMeta, record.sourcePath, record.name, usedSlugs);
+                const slug = this.buildSkillSlug(
+                    sourceMeta,
+                    record.sourcePath,
+                    record.name,
+                    usedSlugs
+                );
                 const payload = {
                     source_id: sourceId,
                     slug,
@@ -2094,7 +2176,9 @@ class SkillsService extends Service {
             const html = await response.text();
             return this.extractStarsFromGitHubHtml(html);
         } catch (error) {
-            this.ctx.logger.warn(`[skills] HTML兜底获取 stars 异常: ${repoFullName}, ${error.message}`);
+            this.ctx.logger.warn(
+                `[skills] HTML兜底获取 stars 异常: ${repoFullName}, ${error.message}`
+            );
             return null;
         } finally {
             clearTimeout(timer);
@@ -2140,7 +2224,9 @@ class SkillsService extends Service {
             if (!Number.isFinite(stars) || stars < 0) return null;
             return stars;
         } catch (error) {
-            this.ctx.logger.warn(`[skills] 获取 GitHub stars 异常: ${repoFullName}, ${error.message}`);
+            this.ctx.logger.warn(
+                `[skills] 获取 GitHub stars 异常: ${repoFullName}, ${error.message}`
+            );
             return null;
         } finally {
             clearTimeout(timer);
@@ -2215,11 +2301,16 @@ class SkillsService extends Service {
             return env;
         }
 
-        [ 'http_proxy', 'https_proxy', 'HTTP_PROXY', 'HTTPS_PROXY', 'all_proxy', 'ALL_PROXY' ].forEach(
-            (key) => {
-                delete env[key];
-            }
-        );
+        [
+            'http_proxy',
+            'https_proxy',
+            'HTTP_PROXY',
+            'HTTPS_PROXY',
+            'all_proxy',
+            'ALL_PROXY',
+        ].forEach((key) => {
+            delete env[key];
+        });
 
         const noProxyValue = this.appendNoProxyHost(env.NO_PROXY || env.no_proxy || '', host);
         env.NO_PROXY = noProxyValue;
@@ -2235,7 +2326,13 @@ class SkillsService extends Service {
     resolveGitlabHostWhitelist() {
         const list = this.getSkillsConfig().gitlabHostWhitelist;
         if (!Array.isArray(list)) return [];
-        return list.map((item) => String(item || '').trim().toLowerCase()).filter(Boolean);
+        return list
+            .map((item) =>
+                String(item || '')
+                    .trim()
+                    .toLowerCase()
+            )
+            .filter(Boolean);
     }
 
     getGitAuthPrefixArgs(remoteUrl = '') {
@@ -2251,10 +2348,7 @@ class SkillsService extends Service {
         }
 
         const basicToken = Buffer.from(`oauth2:${token}`).toString('base64');
-        return [
-            '-c',
-            `http.https://${host}/.extraHeader=Authorization: Basic ${basicToken}`,
-        ];
+        return ['-c', `http.https://${host}/.extraHeader=Authorization: Basic ${basicToken}`];
     }
 
     runCommand(
diff --git a/app/web/asset/images/skills-detail-figma/external-link-xs.svg b/app/web/asset/images/skills-detail-figma/external-link-xs.svg
new file mode 100644
index 0000000..90f17ef
--- /dev/null
+++ b/app/web/asset/images/skills-detail-figma/external-link-xs.svg
@@ -0,0 +1,3 @@
+<svg width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 9C0.725 9 0.489583 8.90208 0.29375 8.70625C0.0979166 8.51042 0 8.275 0 8V1C0 0.725 0.0979166 0.489583 0.29375 0.29375C0.489583 0.0979166 0.725 0 1 0H4.5V1H1V8H8V4.5H9V8C9 8.275 8.90208 8.51042 8.70625 8.70625C8.51042 8.90208 8.275 9 8 9H1ZM3.35 6.35L2.65 5.65L7.3 1H5.5V0H9V3.5H8V1.7L3.35 6.35Z" fill="#0053DB"/>
+</svg>
diff --git a/app/web/asset/images/skills-detail-figma/related-skill-docs.svg b/app/web/asset/images/skills-detail-figma/related-skill-docs.svg
new file mode 100644
index 0000000..8abff9b
--- /dev/null
+++ b/app/web/asset/images/skills-detail-figma/related-skill-docs.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 5L14.2083 3.29167L12.5 2.5L14.2083 1.70833L15 0L15.7917 1.70833L17.5 2.5L15.7917 3.29167L15 5ZM5.41667 5L4.625 3.29167L2.91667 2.5L4.625 1.70833L5.41667 0L6.20833 1.70833L7.91667 2.5L6.20833 3.29167L5.41667 5ZM15 14.5833L14.2083 12.875L12.5 12.0833L14.2083 11.2917L15 9.58333L15.7917 11.2917L17.5 12.0833L15.7917 12.875L15 14.5833ZM2.58333 17.25L0.25 14.9167C0.0833333 14.75 0 14.5486 0 14.3125C0 14.0764 0.0833333 13.875 0.25 13.7083L9.54167 4.41667C9.70833 4.25 9.90972 4.16667 10.1458 4.16667C10.3819 4.16667 10.5833 4.25 10.75 4.41667L13.0833 6.75C13.25 6.91667 13.3333 7.11806 13.3333 7.35417C13.3333 7.59028 13.25 7.79167 13.0833 7.95833L3.79167 17.25C3.625 17.4167 3.42361 17.5 3.1875 17.5C2.95139 17.5 2.75 17.4167 2.58333 17.25ZM3.20833 15.5L9.16667 9.5L8 8.33333L2 14.2917L3.20833 15.5Z" fill="#D97706"/>
+</svg>
diff --git a/app/web/asset/images/skills-detail-figma/related-skill-security.svg b/app/web/asset/images/skills-detail-figma/related-skill-security.svg
new file mode 100644
index 0000000..06bc84c
--- /dev/null
+++ b/app/web/asset/images/skills-detail-figma/related-skill-security.svg
@@ -0,0 +1,3 @@
+<svg width="13" height="19" viewBox="0 0 13 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.66667 18.3333C1.20833 18.3333 0.815972 18.1701 0.489583 17.8438C0.163194 17.5174 0 17.125 0 16.6667V1.66667C0 1.20833 0.163194 0.815972 0.489583 0.489583C0.815972 0.163194 1.20833 0 1.66667 0H10C10.4583 0 10.8507 0.163194 11.1771 0.489583C11.5035 0.815972 11.6667 1.20833 11.6667 1.66667V4.25C11.9167 4.34722 12.1181 4.5 12.2708 4.70833C12.4236 4.91667 12.5 5.15278 12.5 5.41667V7.08333C12.5 7.34722 12.4236 7.58333 12.2708 7.79167C12.1181 8 11.9167 8.15278 11.6667 8.25V16.6667C11.6667 17.125 11.5035 17.5174 11.1771 17.8438C10.8507 18.1701 10.4583 18.3333 10 18.3333H1.66667ZM1.66667 16.6667H10V1.66667H1.66667V16.6667ZM1.66667 16.6667V1.66667V16.6667ZM5.04167 11.6667L9.16667 7.54167L8 6.375L5.04167 9.33333L3.875 8.16667L2.70833 9.33333L5.04167 11.6667Z" fill="#059669"/>
+</svg>
diff --git a/app/web/asset/images/skills-detail-figma/related-skill-sql.svg b/app/web/asset/images/skills-detail-figma/related-skill-sql.svg
new file mode 100644
index 0000000..9a4c7f8
--- /dev/null
+++ b/app/web/asset/images/skills-detail-figma/related-skill-sql.svg
@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.5 15C5.40278 15 3.62847 14.6771 2.17708 14.0312C0.725694 13.3854 0 12.5972 0 11.6667V3.33333C0 2.41667 0.732639 1.63194 2.19792 0.979167C3.66319 0.326389 5.43056 0 7.5 0C9.56944 0 11.3368 0.326389 12.8021 0.979167C14.2674 1.63194 15 2.41667 15 3.33333V11.6667C15 12.5972 14.2743 13.3854 12.8229 14.0312C11.3715 14.6771 9.59722 15 7.5 15ZM7.5 5.02083C8.73611 5.02083 9.97917 4.84375 11.2292 4.48958C12.4792 4.13542 13.1806 3.75694 13.3333 3.35417C13.1806 2.95139 12.4826 2.56944 11.2396 2.20833C9.99653 1.84722 8.75 1.66667 7.5 1.66667C6.23611 1.66667 4.99653 1.84375 3.78125 2.19792C2.56597 2.55208 1.86111 2.9375 1.66667 3.35417C1.86111 3.77083 2.56597 4.15278 3.78125 4.5C4.99653 4.84722 6.23611 5.02083 7.5 5.02083ZM7.5 9.16667C8.08333 9.16667 8.64583 9.13889 9.1875 9.08333C9.72917 9.02778 10.2465 8.94792 10.7396 8.84375C11.2326 8.73958 11.6979 8.61111 12.1354 8.45833C12.5729 8.30556 12.9722 8.13194 13.3333 7.9375V5.4375C12.9722 5.63194 12.5729 5.80556 12.1354 5.95833C11.6979 6.11111 11.2326 6.23958 10.7396 6.34375C10.2465 6.44792 9.72917 6.52778 9.1875 6.58333C8.64583 6.63889 8.08333 6.66667 7.5 6.66667C6.91667 6.66667 6.34722 6.63889 5.79167 6.58333C5.23611 6.52778 4.71181 6.44792 4.21875 6.34375C3.72569 6.23958 3.26389 6.11111 2.83333 5.95833C2.40278 5.80556 2.01389 5.63194 1.66667 5.4375V7.9375C2.01389 8.13194 2.40278 8.30556 2.83333 8.45833C3.26389 8.61111 3.72569 8.73958 4.21875 8.84375C4.71181 8.94792 5.23611 9.02778 5.79167 9.08333C6.34722 9.13889 6.91667 9.16667 7.5 9.16667ZM7.5 13.3333C8.13889 13.3333 8.78819 13.2847 9.44792 13.1875C10.1076 13.0903 10.7153 12.9618 11.2708 12.8021C11.8264 12.6424 12.2917 12.4618 12.6667 12.2604C13.0417 12.059 13.2639 11.8542 13.3333 11.6458V9.60417C12.9722 9.79861 12.5729 9.97222 12.1354 10.125C11.6979 10.2778 11.2326 10.4062 10.7396 10.5104C10.2465 10.6146 9.72917 10.6944 9.1875 10.75C8.64583 10.8056 8.08333 10.8333 7.5 10.8333C6.91667 10.8333 6.34722 10.8056 5.79167 10.75C5.23611 10.6944 4.71181 10.6146 4.21875 10.5104C3.72569 10.4062 3.26389 10.2778 2.83333 10.125C2.40278 9.97222 2.01389 9.79861 1.66667 9.60417V11.6667C1.73611 11.875 1.95486 12.0764 2.32292 12.2708C2.69097 12.4653 3.15278 12.6424 3.70833 12.8021C4.26389 12.9618 4.875 13.0903 5.54167 13.1875C6.20833 13.2847 6.86111 13.3333 7.5 13.3333Z" fill="#0053DB"/>
+</svg>
diff --git a/app/web/layouts/basicLayout/style.scss b/app/web/layouts/basicLayout/style.scss
index c2fc1dc..b4ac03e 100644
--- a/app/web/layouts/basicLayout/style.scss
+++ b/app/web/layouts/basicLayout/style.scss
@@ -2,31 +2,26 @@
     height: 100vh;
     padding-top: 64px;
     box-sizing: border-box;
-
     .logo_img {
         width: 30px;
         height: 30px;
         margin: 0 8px 8px 12px;
     }
-
     .system-title {
         font-size: 21px;
         font-weight: 700;
         color: #FFF;
     }
-
     .local-ip {
         color: #FFF;
         font-size: 16px;
     }
-
     .main-content {
         height: 100%;
         display: flex;
         flex: 1;
         background: #F2F7FA;
     }
-
     .context_container {
         flex: 1;
         min-height: 0;
@@ -34,10 +29,8 @@
         width: 100%;
         overflow: auto;
     }
-
     &.is-skill-detail-layout {
         overflow: hidden;
-
         .main-content {
             flex: 1;
             height: 0;
@@ -45,11 +38,10 @@
             background: #F2F7FA;
             overflow: hidden;
         }
-
         .context_container {
             height: 100%;
             padding: 0;
             overflow: hidden;
         }
     }
-}
\ No newline at end of file
+}
diff --git a/app/web/pages/skills/detail/SkillDetailContent.tsx b/app/web/pages/skills/detail/SkillDetailContent.tsx
index 086e2ea..691387c 100644
--- a/app/web/pages/skills/detail/SkillDetailContent.tsx
+++ b/app/web/pages/skills/detail/SkillDetailContent.tsx
@@ -1,13 +1,12 @@
 import React, { useEffect, useMemo, useState } from 'react';
+import SyntaxHighlighter from 'react-syntax-highlighter';
+import { atomOneLight } from 'react-syntax-highlighter/dist/cjs/styles/hljs';
 import {
     ArrowLeftOutlined,
-    DislikeOutlined,
     LikeOutlined,
     QuestionCircleOutlined,
     StarOutlined,
 } from '@ant-design/icons';
-import SyntaxHighlighter from 'react-syntax-highlighter';
-import { atomOneLight } from 'react-syntax-highlighter/dist/cjs/styles/hljs';
 import { Button, Empty, Spin, Tree, Typography } from 'antd';
 import type { DataNode } from 'antd/lib/tree';
 
@@ -20,16 +19,20 @@ import contributorTwo from '@/asset/images/skills-detail-figma/contributor-2.png
 import copyDarkIcon from '@/asset/images/skills-detail-figma/copy-dark.svg';
 import downloadIcon from '@/asset/images/skills-detail-figma/download.svg';
 import emptyRelatedIcon from '@/asset/images/skills-detail-figma/empty-related.svg';
+import externalLinkXsIcon from '@/asset/images/skills-detail-figma/external-link-xs.svg';
 import fileDocIcon from '@/asset/images/skills-detail-figma/file-doc.svg';
 import folderOpenBlueIcon from '@/asset/images/skills-detail-figma/folder-open-blue.svg';
 import heroSkillIcon from '@/asset/images/skills-detail-figma/hero-skill.svg';
 import humanIcon from '@/asset/images/skills-detail-figma/human.svg';
+import relatedSkillDocsIcon from '@/asset/images/skills-detail-figma/related-skill-docs.svg';
+import relatedSkillSecurityIcon from '@/asset/images/skills-detail-figma/related-skill-security.svg';
+import relatedSkillSqlIcon from '@/asset/images/skills-detail-figma/related-skill-sql.svg';
 import MarkdownRenderer from '@/components/markdownRenderer';
 import { copyToClipboard } from '@/utils/copyUtils';
 import { SkillDetail, SkillFileContent, SkillInstallMeta, SkillItem } from '../types';
 import './style.scss';
 
-const { Title, Text, Paragraph } = Typography;
+const { Title, Paragraph } = Typography;
 
 interface SkillTreeNode extends DataNode {
     children?: SkillTreeNode[];
@@ -53,15 +56,10 @@ interface FigmaIconProps {
 
 type InstallPanelKey = 'agent' | 'human' | null;
 
-const relatedSkillIconUrls = [
-    'http://localhost:3845/assets/7abff42ee9b5b6b17c3f0b4350bc40d2918871d6.svg',
-    'http://localhost:3845/assets/b2b47e5541ef2b4c45ad4fb4cd42a7290d758d19.svg',
-    'http://localhost:3845/assets/46261c14a19d03261c20a3df79aa4c0ed3b263ab.svg',
-];
+const relatedSkillIconUrls = [relatedSkillSqlIcon, relatedSkillSecurityIcon, relatedSkillDocsIcon];
 
 const relatedSkillShellClasses = ['is-blue', 'is-green', 'is-orange'];
-const browseMarketArrowIcon =
-    'http://localhost:3845/assets/d1b40a8f52f64c4290b2006b356fc8b61c18d6fc.svg';
+const browseMarketArrowIcon = externalLinkXsIcon;
 
 const FigmaIcon: React.FC<FigmaIconProps> = ({ src, className = '', alt = '' }) => (
     <img
@@ -268,10 +266,6 @@ const SkillDetailContent: React.FC<SkillDetailContentProps> = ({ slug, history }
         }
         return formatDownloadCommand(`${currentOrigin}${downloadPath}`, archiveFileName);
     }, [archiveFileName, currentOrigin, downloadPath, installMeta?.downloadUrl]);
-    const frontmatterInfo = useMemo(
-        () => parseMarkdownFrontmatter(detail?.skillMd || ''),
-        [detail?.skillMd]
-    );
     const heroMetaItems = useMemo(
         () => [
             {
diff --git a/app/web/pages/skills/detail/stitchAssets.scss b/app/web/pages/skills/detail/stitchAssets.scss
index b5b2ee0..9078ad6 100644
--- a/app/web/pages/skills/detail/stitchAssets.scss
+++ b/app/web/pages/skills/detail/stitchAssets.scss
@@ -1,34 +1,47 @@
 @font-face {
-    font-family: 'SkillDetailMaterialSymbols';
+    font-family: SkillDetailMaterialSymbols;
     font-style: normal;
     font-weight: 400;
     font-display: block;
-    src: url('../../../asset/font/material-symbols/material-symbols-outlined-subset.woff2')
-        format('woff2');
+    src:
+        url("../../../asset/font/material-symbols/material-symbols-outlined-subset.woff2")
+        format("woff2");
 }
 
 @font-face {
-    font-family: 'SkillDetailInter';
+    font-family: SkillDetailInter;
     font-style: normal;
     font-weight: 400 600;
     font-display: swap;
-    src: url('../../../asset/font/material-symbols/inter-latin.woff2') format('woff2');
+    src: url("../../../asset/font/material-symbols/inter-latin.woff2") format("woff2");
 }
 
 @font-face {
-    font-family: 'SkillDetailManrope';
+    font-family: SkillDetailManrope;
     font-style: normal;
     font-weight: 400 800;
     font-display: swap;
-    src: url('../../../asset/font/material-symbols/manrope-latin.woff2') format('woff2');
+    src: url("../../../asset/font/material-symbols/manrope-latin.woff2") format("woff2");
 }
 
 .page-skill-detail {
-    --skill-detail-font-body: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
-        -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-    --skill-detail-font-display: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
-        -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-    --skill-detail-font-icon: 'SkillDetailMaterialSymbols';
+    --skill-detail-font-body:
+        "PingFang SC",
+        "Hiragino Sans GB",
+        "Microsoft YaHei",
+        -apple-system,
+        blinkmacsystemfont,
+        "Segoe UI",
+        sans-serif;
+    --skill-detail-font-display:
+        "PingFang SC",
+        "Hiragino Sans GB",
+        "Microsoft YaHei",
+        -apple-system,
+        blinkmacsystemfont,
+        "Segoe UI",
+        sans-serif;
+    --skill-detail-font-icon: "SkillDetailMaterialSymbols";
 }
 
 .skill-detail-material-symbol {
@@ -44,7 +57,7 @@
     justify-content: center;
     white-space: nowrap;
     direction: ltr;
-    -webkit-font-feature-settings: 'liga';
+    -webkit-font-feature-settings: "liga";
     -webkit-font-smoothing: antialiased;
-    font-feature-settings: 'liga';
+    font-feature-settings: "liga";
 }
diff --git a/app/web/pages/skills/detail/style.scss b/app/web/pages/skills/detail/style.scss
index 47fb9d7..05b8ecb 100644
--- a/app/web/pages/skills/detail/style.scss
+++ b/app/web/pages/skills/detail/style.scss
@@ -1,91 +1,75 @@
-@import './stitchAssets.scss';
+@import "./stitchAssets.scss";
 
 .page-skill-detail {
     height: 100%;
     min-height: 0;
     overflow: hidden;
-    background: #f7f9fb;
+    background: #F7F9FB;
     font-family: var(--skill-detail-font-body);
-    color: #2a3439;
-
+    color: #2A3439;
     .skill-detail-figma-icon {
         display: inline-block;
         object-fit: contain;
         flex: 0 0 auto;
-
         &.is-hero {
             width: 25px;
             height: 25px;
         }
-
         &.is-tree-node {
             width: 12px;
             height: 12px;
         }
-
         &.is-option-icon {
             width: 22px;
             height: 19px;
         }
-
         &.is-agent-icon {
             width: 22px;
             height: 19px;
         }
-
         &.is-human-icon {
             width: 16px;
             height: 16px;
         }
-
         &.is-chevron {
             width: 7px;
             height: 5px;
         }
-
         &.is-chevron-right {
             width: 5px;
             height: 7px;
         }
-
         &.is-copy-dark {
             width: 10px;
             height: 12px;
         }
-
         &.is-download {
             width: 10px;
             height: 10px;
         }
-
         &.is-article {
             width: 11px;
             height: 11px;
         }
-
         &.is-empty-related {
             width: 22px;
             height: 28px;
         }
-
         &.is-related-skill-icon {
             width: 20px;
             height: 20px;
         }
-
         &.is-browse-market-arrow {
             width: 9px;
             height: 9px;
         }
     }
-
     &.loading-wrap,
     &.page-skill-detail-empty {
         display: flex;
         align-items: center;
         justify-content: center;
     }
-
     .skill-detail-shell {
         height: 100%;
         min-height: 0;
@@ -93,7 +77,6 @@
         grid-template-columns: 256px minmax(0, 1fr) 320px;
         overflow: hidden;
     }
-
     .detail-left-sidebar,
     .detail-right-sidebar {
         height: 100%;
@@ -102,38 +85,36 @@
         flex-direction: column;
         overflow: hidden;
     }
-
     .detail-main-column {
         height: 100%;
         min-height: 0;
+        min-width: 0;
+        padding: 12px 20px 20px;
         display: flex;
         flex-direction: column;
+        gap: 16px;
         overflow: auto;
+        align-items: stretch;
     }
-
     .detail-left-sidebar {
-        background: #f1f5f9;
+        background: #F1F5F9;
         border-right: 1px solid rgba(226, 232, 240, 0.7);
     }
-
     .sidebar-head {
         padding: 16px 16px 17px;
         border-bottom: 1px solid rgba(226, 232, 240, 0.5);
         display: flex;
         align-items: center;
         gap: 8px;
-
         .back-btn {
             padding: 4px 8px;
             height: auto;
             background: transparent;
             border: none;
-
             &:hover {
                 background: transparent;
             }
         }
-
         .sidebar-title-group {
             flex: 1;
             display: flex;
@@ -141,7 +122,6 @@
             justify-content: space-between;
             gap: 12px;
         }
-
         span,
         strong {
             display: inline-flex;
@@ -152,64 +132,52 @@
             font-weight: 600;
             letter-spacing: 0.5px;
         }
-
         span {
             color: #566166;
         }
-
         strong {
-            color: #2563eb;
+            color: #2563EB;
             text-transform: uppercase;
         }
     }
-
     .sidebar-tree-wrap {
         flex: 1;
         min-height: 0;
         overflow: auto;
         padding: 8px;
-
         .ant-empty {
             margin-top: 48px;
         }
-
         .ant-tree {
             background: transparent;
             font-size: 12px;
         }
-
         .ant-tree-treenode {
             width: 100%;
         }
-
         .ant-tree-switcher {
-            color: #64748b;
+            color: #64748B;
             flex: 0 0 auto;
         }
-
         .ant-tree-node-content-wrapper {
             min-height: 28px;
             padding: 0;
             width: 100%;
             flex: 1 1 auto;
             min-width: 0;
-
             &:hover {
                 background: transparent;
             }
         }
-
         .ant-tree-title {
             display: block;
             width: 100%;
         }
-
         .ant-tree-node-content-wrapper.ant-tree-node-selected,
         .ant-tree-treenode-selected > .ant-tree-node-content-wrapper {
             background: transparent;
         }
     }
-
     .explorer-tree-item {
         width: 100%;
         min-height: 28px;
@@ -219,24 +187,21 @@
         display: flex;
         align-items: center;
         gap: 8px;
-        color: #64748b;
+        color: #64748B;
         line-height: 16px;
         cursor: pointer;
         user-select: none;
-
         &.is-selected {
             background: rgba(37, 99, 235, 0.08);
-            border-left-color: #2563eb;
-            color: #2563eb;
+            border-left-color: #2563EB;
+            color: #2563EB;
             font-weight: 600;
         }
-
         &:focus-visible {
             outline: 1px solid rgba(37, 99, 235, 0.28);
             outline-offset: 1px;
         }
     }
-
     .sidebar-foot {
         padding: 16px;
         border-top: 1px solid rgba(226, 232, 240, 0.7);
@@ -244,66 +209,50 @@
         flex-direction: column;
         gap: 8px;
     }
-
     .install-primary-btn {
         height: 34px;
         border-radius: 4px;
         font-size: 12px;
         font-weight: 600;
-        background: #1658d5;
-        border-color: #1658d5;
+        background: #1658D5;
+        border-color: #1658D5;
         &.is-disabled,
         &:disabled,
         &[disabled] {
-            background: #e5e7eb !important;
-            border-color: #d1d5db !important;
-            color: #9ca3af !important;
+            background: #E5E7EB !important;
+            border-color: #D1D5DB !important;
+            color: #9CA3AF !important;
         }
     }
-
     .sidebar-help-btn {
         padding: 8px 6px;
         border: 0;
         background: transparent;
-        color: #64748b;
+        color: #64748B;
         display: inline-flex;
         align-items: center;
         gap: 8px;
         cursor: pointer;
     }
-
-    .detail-main-column {
-        min-width: 0;
-        min-height: 0;
-        padding: 12px 20px 20px;
-        display: flex;
-        flex-direction: column;
-        gap: 16px;
-        overflow: hidden;
-        align-items: stretch;
-    }
-
     .detail-hero-main {
         width: 100%;
         padding: 16px 24px;
         min-height: 182px;
         border-radius: 8px;
         border: 1px solid rgba(169, 180, 185, 0.1);
-        background: #fff;
+        background: #FFF;
         box-shadow: 0 0 0 1px rgba(169, 180, 185, 0.04);
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         gap: 10px;
     }
-
     .hero-head-row {
         display: flex;
         align-items: flex-start;
         justify-content: space-between;
         gap: 20px;
     }
-
     .hero-title-block {
         min-width: 0;
         display: flex;
@@ -311,24 +260,21 @@
         gap: 20px;
         flex: 1;
     }
-
     .skill-title-icon {
         width: 64px;
         height: 64px;
         border-radius: 8px;
-        background: #dbe1ff;
+        background: #DBE1FF;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         flex: 0 0 auto;
     }
-
     .hero-copy {
         min-width: 0;
-
         h2.ant-typography {
             margin-bottom: 4px;
-            color: #2a3439;
+            color: #2A3439;
             font-size: 24px;
             font-family: var(--skill-detail-font-display);
             font-weight: 700;
@@ -336,7 +282,6 @@
             line-height: 32px;
         }
     }
-
     .hero-description {
         max-width: 760px;
         margin-bottom: 0;
@@ -348,35 +293,32 @@
         -webkit-line-clamp: 4;
         -webkit-box-orient: vertical;
     }
-
     .hero-actions {
         display: flex;
         align-items: center;
         gap: 8px;
         flex: 0 0 auto;
     }
-
     .hero-stat-chip {
         min-width: 54px;
         height: 32px;
         padding: 0 14px;
         border-radius: 4px;
-        background: #e8eff3;
+        background: #E8EFF3;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         gap: 8px;
-        color: #2a3439;
+        color: #2A3439;
         font-size: 14px;
     }
-
     .like-btn.ant-btn {
         min-width: 64px;
         height: 32px;
         padding: 0 12px;
-        border: 1px solid #dbe5f0;
+        border: 1px solid #DBE5F0;
         border-radius: 8px;
-        background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
+        background: linear-gradient(180deg, #FFF 0%, #F8FBFF 100%);
         box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
         display: inline-flex;
         align-items: center;
@@ -386,100 +328,89 @@
         font-size: 14px;
         font-weight: 600;
         line-height: 1;
-        transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease,
-            box-shadow 0.2s ease, transform 0.2s ease;
-
+        transition:
+            border-color 0.2s ease,
+            background 0.2s ease,
+            color 0.2s ease,
+            box-shadow 0.2s ease,
+            transform 0.2s ease;
         .anticon {
             width: 14px;
             font-size: 14px;
-            color: #64748b;
+            color: #64748B;
             display: inline-flex;
             align-items: center;
             justify-content: center;
             transition: color 0.2s ease;
         }
-
         span:last-child {
             min-width: 8px;
             text-align: center;
             font-variant-numeric: tabular-nums;
         }
-
         .ant-btn-loading-icon {
             margin-right: 0;
         }
-
         &:hover,
         &:focus {
-            border-color: #bfd3f8;
-            background: linear-gradient(180deg, #ffffff 0%, #edf4ff 100%);
-            color: #174ea6;
+            border-color: #BFD3F8;
+            background: linear-gradient(180deg, #FFF 0%, #EDF4FF 100%);
+            color: #174EA6;
             box-shadow: 0 4px 10px rgba(37, 99, 235, 0.12);
-
             .anticon {
-                color: #174ea6;
+                color: #174EA6;
             }
         }
-
         &:active {
             transform: translateY(1px);
             box-shadow: 0 2px 6px rgba(37, 99, 235, 0.1);
         }
-
         &[disabled],
         &[disabled]:hover,
         &[disabled]:focus {
-            border-color: #dbe5f0;
-            background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
+            border-color: #DBE5F0;
+            background: linear-gradient(180deg, #FFF 0%, #F8FBFF 100%);
             box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
             color: #334155;
             opacity: 1;
-
             .anticon {
-                color: #64748b;
+                color: #64748B;
             }
         }
-
         &.is-liked {
             border-color: rgba(22, 88, 213, 0.24);
-            background: linear-gradient(180deg, #f5f9ff 0%, #e9f1ff 100%);
-            color: #1658d5;
+            background: linear-gradient(180deg, #F5F9FF 0%, #E9F1FF 100%);
+            color: #1658D5;
             box-shadow: 0 4px 12px rgba(22, 88, 213, 0.12);
-
             .anticon {
-                color: #1658d5;
+                color: #1658D5;
             }
         }
     }
-
     .hero-meta-row {
         padding-top: 14px;
-        border-top: 1px solid #f1f5f9;
+        border-top: 1px solid #F1F5F9;
         display: flex;
         align-items: center;
         gap: 32px;
         flex-wrap: nowrap;
     }
-
     .hero-meta-item {
         display: flex;
         flex-direction: column;
         gap: 2px;
-
         span {
             color: #566166;
             font-size: 10px;
             font-weight: 600;
             letter-spacing: 0.1em;
         }
-
         strong {
-            color: #2a3439;
+            color: #2A3439;
             font-size: 14px;
             line-height: 20px;
         }
     }
-
     .document-panel {
         min-height: 0;
         flex: 1;
@@ -487,22 +418,20 @@
         border-radius: 8px;
         overflow: hidden;
         box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-        background: #e8eff3;
+        background: #E8EFF3;
         display: flex;
         flex-direction: column;
     }
-
     .document-toolbar {
         height: 44px;
         padding: 0 16px;
-        background: #e1e9ee;
+        background: #E1E9EE;
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 12px;
         flex: 0 0 auto;
     }
-
     .document-toolbar-left {
         display: inline-flex;
         align-items: center;
@@ -512,20 +441,17 @@
         font-weight: 600;
         letter-spacing: 0.03em;
     }
-
     .document-toolbar-right {
         display: inline-flex;
         align-items: center;
         gap: 4px;
-
         span {
             width: 10px;
             height: 10px;
             border-radius: 999px;
-            background: #cbd5e1;
+            background: #CBD5E1;
         }
     }
-
     .document-loading-indicator {
         width: auto !important;
         height: auto !important;
@@ -535,118 +461,95 @@
         align-items: center;
         justify-content: center;
         margin-right: 8px;
-
         .ant-spin {
-            color: #2563eb;
+            color: #2563EB;
         }
     }
-
     .document-scroll-area {
         min-height: 0;
         flex: 1;
         overflow: auto;
-        background: #fff;
+        background: #FFF;
         padding: 32px;
     }
-
     .document-content-shell {
         position: relative;
         min-height: 100%;
     }
-
     .file-viewer-loading {
         min-height: 360px;
         display: flex;
         align-items: center;
         justify-content: center;
     }
-
     .markdown-file-viewer {
         .markdown-renderer {
             color: #566166;
             font-size: 16px;
             line-height: 1.7;
         }
-
         h1,
         h2,
         h3 {
-            color: #2a3439;
+            color: #2A3439;
             font-family: var(--skill-detail-font-display);
         }
-
         .frontmatter-table-wrap {
             margin-bottom: 24px;
-            border: 1px solid #e2e8f0;
+            border: 1px solid #E2E8F0;
             border-radius: 8px;
             overflow: hidden;
         }
-
         .frontmatter-table {
             width: 100%;
             border-collapse: collapse;
-
             th,
             td {
                 padding: 14px 16px;
-                border-bottom: 1px solid #eef2f7;
+                border-bottom: 1px solid #EEF2F7;
                 vertical-align: top;
             }
-
             tr:last-child th,
             tr:last-child td {
                 border-bottom: 0;
             }
-
             th {
                 width: 180px;
-                background: #f8fafc;
-                color: #2d4a6a;
+                background: #F8FAFC;
+                color: #2D4A6A;
                 font-size: 14px;
                 font-weight: 600;
                 text-align: left;
             }
-
             td {
-                background: #fff;
+                background: #FFF;
                 color: #344054;
                 font-size: 14px;
                 line-height: 1.7;
                 word-break: break-word;
             }
         }
-
         .frontmatter-code {
             margin: 0;
             padding: 10px 12px;
             border-radius: 6px;
-            background: #f8fafc;
+            background: #F8FAFC;
             white-space: pre-wrap;
         }
     }
-
-    .file-viewer-loading {
-        min-height: 320px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-
     .detail-right-sidebar {
         padding: 12px 16px 16px;
         border-left: 1px solid rgba(226, 232, 240, 0.7);
-        background: #f8fafc;
+        background: #F8FAFC;
         overflow-y: auto;
         overflow-x: hidden;
         gap: 12px;
         align-items: stretch;
-
         > * {
             width: 100%;
             min-width: 0;
         }
     }
-
     .sidebar-section-title {
         margin-bottom: 8px;
         color: #566166;
@@ -657,7 +560,6 @@
         align-items: center;
         gap: 6px;
     }
-
     .install-soon-badge {
         display: inline-flex;
         align-items: center;
@@ -665,43 +567,37 @@
         font-size: 9px;
         font-weight: 700;
         letter-spacing: 0.05em;
-        color: #c2410c;
-        background: #fed7aa;
+        color: #C2410C;
+        background: #FED7AA;
         border-radius: 4px;
     }
-
     .install-option-card {
-        border: 1px solid #dbe5f0;
+        border: 1px solid #DBE5F0;
         border-radius: 8px;
-        background: #fff;
+        background: #FFF;
         overflow: hidden;
-
         &.is-active {
-            border-color: #2563eb;
+            border-color: #2563EB;
         }
-
         &.is-collapsed {
             margin-top: 8px;
         }
     }
-
     .install-option-trigger {
         width: 100%;
         min-height: 55px;
         padding: 12px 16px;
         border: 0;
-        background: #fff;
+        background: #FFF;
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 12px;
         cursor: pointer;
     }
-
     .install-option-trigger:hover {
-        background: #fbfdff;
+        background: #FBFDFF;
     }
-
     .install-option-meta {
         display: flex;
         align-items: center;
@@ -710,7 +606,6 @@
         min-width: 0;
         flex: 1;
     }
-
     .install-option-icon-shell {
         width: 40px;
         height: 40px;
@@ -719,37 +614,31 @@
         align-items: center;
         justify-content: center;
         flex: 0 0 auto;
-
         &.is-agent {
             background: rgba(0, 83, 219, 0.1);
         }
-
         &.is-human {
-            background: #f0fdfa;
+            background: #F0FDFA;
         }
     }
-
     .install-option-title {
-        color: #2a3439;
+        color: #2A3439;
         font-size: 14px;
         font-weight: 600;
         font-family: var(--skill-detail-font-display);
         line-height: 1;
     }
-
     .install-option-description {
-        color: #64748b;
+        color: #64748B;
         font-size: 11px;
         line-height: 15px;
     }
-
     .install-option-meta > div {
         display: flex;
         flex-direction: column;
         gap: 2px;
         min-width: 0;
     }
-
     .install-option-body {
         display: grid;
         grid-template-rows: 0fr;
@@ -759,18 +648,15 @@
             grid-template-rows 180ms ease,
             padding 180ms ease,
             opacity 140ms ease;
-
         &.is-open {
             grid-template-rows: 1fr;
             padding: 4px 12px 12px;
             opacity: 1;
         }
-
         &.is-closed {
             pointer-events: none;
         }
     }
-
     .install-option-body-inner {
         min-height: 0;
         overflow: hidden;
@@ -778,26 +664,22 @@
         flex-direction: column;
         gap: 12px;
     }
-
     .human-command-card {
         display: flex;
         flex-direction: column;
         gap: 8px;
     }
-
     .human-command-title {
         color: #566166;
         font-size: 12px;
         font-weight: 600;
         line-height: 16px;
     }
-
     .download-panel,
     .related-panel,
     .meta-panel {
         padding-top: 4px;
     }
-
     .download-btn {
         height: 28px;
         margin-bottom: 12px;
@@ -805,35 +687,31 @@
         border-radius: 4px;
         font-size: 12px;
         font-weight: 600;
-        background: #0f172a;
-        border-color: #0f172a;
-        color: #fff;
+        background: #0F172A;
+        border-color: #0F172A;
+        color: #FFF;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         gap: 8px;
-
         &:hover,
         &:focus {
-            background: #1b2438;
-            border-color: #1b2438;
-            color: #fff;
+            background: #1B2438;
+            border-color: #1B2438;
+            color: #FFF;
         }
-
         &:active {
-            background: #0b1220;
-            border-color: #0b1220;
-            color: #fff;
+            background: #0B1220;
+            border-color: #0B1220;
+            color: #FFF;
         }
     }
-
     .install-panel,
     .download-panel,
     .related-panel,
     .meta-panel {
         flex: 0 0 auto;
     }
-
     .related-panel {
         min-height: 0;
         display: flex;
@@ -843,26 +721,21 @@
         min-width: 0;
         overflow: hidden;
     }
-
     .command-surface {
         border-radius: 6px;
         overflow: hidden;
-
         &.is-dark {
             background: #111827;
-            color: #f8fafc;
+            color: #F8FAFC;
         }
-
         &.is-light {
-            border: 1px solid #e2e8f0;
-            background: #eef3f7;
+            border: 1px solid #E2E8F0;
+            background: #EEF3F7;
             color: #475569;
         }
-
         &.is-terminal {
             border-radius: 4px;
         }
-
         code {
             display: block;
             padding: 0 14px 12px;
@@ -871,7 +744,6 @@
             white-space: pre-wrap;
             word-break: break-word;
         }
-
         p {
             margin: 0;
             padding: 0 14px 12px;
@@ -881,7 +753,6 @@
             opacity: 0.8;
         }
     }
-
     .command-surface-inline {
         min-height: 39px;
         display: flex;
@@ -889,7 +760,6 @@
         justify-content: space-between;
         gap: 8px;
         padding: 8px 10px;
-
         .command-inline-code-wrap {
             flex: 1;
             min-width: 0;
@@ -897,14 +767,12 @@
             overflow-y: hidden;
             scrollbar-width: none;
             -ms-overflow-style: none;
-
             &::-webkit-scrollbar {
                 width: 0;
                 height: 0;
                 display: none;
             }
         }
-
         code {
             display: inline-block;
             min-width: max-content;
@@ -913,17 +781,14 @@
             line-height: 22px;
         }
     }
-
     .command-surface.is-compact {
         .command-surface-inline {
             align-items: center;
         }
-
         .command-inline-code-wrap {
             padding: 2px 0;
         }
     }
-
     .terminal-head {
         height: 25px;
         padding: 0 12px;
@@ -932,27 +797,23 @@
         align-items: center;
         justify-content: space-between;
     }
-
     .terminal-dots {
         display: inline-flex;
         align-items: center;
         gap: 6px;
-
         span {
             width: 8px;
             height: 8px;
             border-radius: 999px;
-            background: #cbd5e1;
+            background: #CBD5E1;
         }
     }
-
     .terminal-label {
         color: rgba(255, 255, 255, 0.46);
         font-size: 9px;
         font-weight: 600;
         letter-spacing: 0.08em;
     }
-
     .terminal-body {
         min-height: 57px;
         padding: 11px 12px 12px;
@@ -960,24 +821,21 @@
         grid-template-columns: auto 1fr auto;
         align-items: start;
         column-gap: 14px;
-
         .terminal-prompt {
-            color: #34d399;
+            color: #34D399;
             font-size: 12px;
             line-height: 16px;
-            font-family: 'SFMono-Regular', Consolas, monospace;
+            font-family: SFMono-Regular, Consolas, monospace;
             margin-top: 2px;
         }
-
         code {
             padding: 0;
-            color: #e2e8f0;
+            color: #E2E8F0;
             line-height: 16px;
             word-break: break-word;
             margin-top: 1px;
         }
     }
-
     .command-copy-btn {
         color: inherit;
         width: 18px;
@@ -991,7 +849,6 @@
         align-items: center;
         justify-content: center;
         box-shadow: none;
-
         .ant-btn-icon {
             margin: 0;
             display: inline-flex;
@@ -999,50 +856,43 @@
             justify-content: center;
             line-height: 1;
         }
-
         &:hover,
         &:focus {
             color: inherit;
             box-shadow: none;
         }
-
         &.is-terminal-copy {
             border-color: transparent;
             background: transparent;
-
             &:hover,
             &:focus {
                 background: rgba(255, 255, 255, 0.08);
                 border-color: transparent;
             }
         }
-
         &.is-inline-copy {
             border-color: rgba(203, 213, 225, 0.88);
-            background: #f8fafc;
-
+            background: #F8FAFC;
             &:hover,
             &:focus {
-                background: #f1f5f9;
+                background: #F1F5F9;
                 border-color: rgba(148, 163, 184, 0.72);
             }
         }
     }
-
     .related-empty-state {
         min-height: 112px;
-        border: 1px dashed #cbd5e1;
+        border: 1px dashed #CBD5E1;
         border-radius: 8px;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         gap: 8px;
-        color: #94a3b8;
+        color: #94A3B8;
         font-size: 12px;
         text-align: center;
     }
-
     .related-list {
         flex: 1 1 auto;
         min-height: 0;
@@ -1055,7 +905,6 @@
         width: 100%;
         min-width: 0;
     }
-
     .related-item {
         width: 100%;
         min-width: 0;
@@ -1069,17 +918,14 @@
         gap: 14px;
         cursor: pointer;
         white-space: normal;
-
         & + .related-item {
             margin-top: 8px;
             padding-top: 18px;
         }
-
         &:hover,
         &:focus {
             background: transparent;
         }
-
         .related-item-copy {
             min-width: 0;
             flex: 1 1 0;
@@ -1089,11 +935,10 @@
             align-items: flex-start;
             gap: 6px;
         }
-
         strong {
             display: block;
             width: 100%;
-            color: #24313a;
+            color: #24313A;
             font-size: 13px;
             font-weight: 600;
             line-height: 18px;
@@ -1103,11 +948,9 @@
             overflow: hidden;
             text-overflow: ellipsis;
         }
-
         .related-item-description {
-            display: block;
             width: 100%;
-            color: #6b7b8c;
+            color: #6B7B8C;
             font-size: 11px;
             line-height: 17px;
             word-break: break-word;
@@ -1118,7 +961,6 @@
             -webkit-box-orient: vertical;
         }
     }
-
     .related-item-icon-shell {
         width: 44px;
         height: 44px;
@@ -1129,35 +971,34 @@
         justify-content: center;
         flex: 0 0 auto;
         align-self: center;
-
         &.is-blue {
             border-color: rgba(219, 234, 254, 0.5);
-            background-image: linear-gradient(
-                135deg,
-                rgba(59, 130, 246, 0.1) 0%,
-                rgba(99, 102, 241, 0.2) 100%
-            );
+            background-image:
+                linear-gradient(
+                    135deg,
+                    rgba(59, 130, 246, 0.1) 0%,
+                    rgba(99, 102, 241, 0.2) 100%
+                );
         }
-
         &.is-green {
             border-color: rgba(209, 250, 229, 0.5);
-            background-image: linear-gradient(
-                135deg,
-                rgba(16, 185, 129, 0.1) 0%,
-                rgba(20, 184, 166, 0.2) 100%
-            );
+            background-image:
+                linear-gradient(
+                    135deg,
+                    rgba(16, 185, 129, 0.1) 0%,
+                    rgba(20, 184, 166, 0.2) 100%
+                );
         }
-
         &.is-orange {
             border-color: rgba(254, 243, 199, 0.5);
-            background-image: linear-gradient(
-                135deg,
-                rgba(245, 158, 11, 0.1) 0%,
-                rgba(249, 115, 22, 0.2) 100%
-            );
+            background-image:
+                linear-gradient(
+                    135deg,
+                    rgba(245, 158, 11, 0.1) 0%,
+                    rgba(249, 115, 22, 0.2) 100%
+                );
         }
     }
-
     .browse-market-link {
         margin-top: 16px;
         padding: 0;
@@ -1166,62 +1007,54 @@
         display: inline-flex;
         align-items: center;
         gap: 4px;
-        color: #0053db;
+        color: #0053DB;
         font-size: 10px;
         line-height: 15px;
         cursor: pointer;
-
         &:hover,
         &:focus {
             background: transparent;
-            color: #0053db;
+            color: #0053DB;
         }
     }
-
     .meta-panel {
         margin-top: auto;
         flex: 0 0 auto;
         padding-top: 20px;
-        border-top: 1px solid #e2e8f0;
+        border-top: 1px solid #E2E8F0;
         display: flex;
         flex-direction: column;
         gap: 10px;
     }
-
     .meta-row {
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 12px;
-        color: #64748b;
+        color: #64748B;
         font-size: 10px;
-
         strong {
-            color: #2a3439;
+            color: #2A3439;
             font-weight: 600;
         }
     }
-
     .contributors-stack {
         display: inline-flex;
         align-items: center;
-
         img,
         span {
             width: 16px;
             height: 16px;
             border-radius: 999px;
-            border: 1px solid #fff;
+            border: 1px solid #FFF;
             margin-left: -4px;
         }
-
         img:first-child,
         span:first-child {
             margin-left: 0;
         }
-
         span {
-            background: #e2e8f0;
+            background: #E2E8F0;
             color: #566166;
             display: inline-flex;
             align-items: center;
@@ -1234,7 +1067,6 @@
         .skill-detail-shell {
             grid-template-columns: 220px minmax(0, 1fr) 300px;
         }
-
         .detail-main-column {
             padding: 24px;
         }
@@ -1244,7 +1076,6 @@
         .detail-main-column {
             padding: 24px;
         }
-
         .detail-hero-main,
         .document-panel {
             width: 100%;
@@ -1254,22 +1085,18 @@
     @media (max-width: 960px) {
         height: auto;
         overflow: auto;
-
         .skill-detail-shell {
             height: auto;
             grid-template-columns: 1fr;
         }
-
         .detail-left-sidebar,
         .detail-right-sidebar {
             border: 0;
         }
-
         .detail-main-column {
             overflow: visible;
             align-items: stretch;
         }
-
         .document-panel {
             min-height: 640px;
         }
@@ -1279,19 +1106,15 @@
         .detail-main-column {
             padding: 16px;
         }
-
         .hero-head-row {
             flex-direction: column;
         }
-
         .hero-title-block {
             width: 100%;
         }
-
         .document-scroll-area {
             padding: 20px 16px;
         }
-
         .hero-meta-row {
             gap: 20px;
             flex-wrap: wrap;
diff --git a/app/web/pages/skills/detail/summaryModal.scss b/app/web/pages/skills/detail/summaryModal.scss
index 293bc6a..c968311 100644
--- a/app/web/pages/skills/detail/summaryModal.scss
+++ b/app/web/pages/skills/detail/summaryModal.scss
@@ -326,7 +326,6 @@
                 width: 100%;
             }
         }
-        .summary-install-header,
         .summary-install-header {
             flex-direction: column;
         }
diff --git a/app/web/router/index.ts b/app/web/router/index.ts
index 1039107..95d3d3e 100644
--- a/app/web/router/index.ts
+++ b/app/web/router/index.ts
@@ -1,5 +1,6 @@
-import BasicLayout from '@/layouts/basicLayout';
 import Loadable from 'react-loadable';
+
+import BasicLayout from '@/layouts/basicLayout';
 // 文章订阅管理
 import ArticleSubscriptionList from '@/pages/articleSubscription';
 // 配置中心
@@ -19,10 +20,10 @@ import McpServerInspector from '@/pages/mcpServer/inspector';
 import McpServerManagement from '@/pages/mcpServer/management';
 import McpServerMarket from '@/pages/mcpServer/mcpMarket';
 import McpServerRegistryCenter from '@/pages/mcpServer/registryCenter';
-import SkillDetail from '@/pages/skills/detail';
-import SkillsMarket from '@/pages/skills';
 // 代理服务
 import ProxyServer from '@/pages/proxyServer';
+import SkillsMarket from '@/pages/skills';
+import SkillDetail from '@/pages/skills/detail';
 // hosts列表
 import SwitchHostsList from '@/pages/switchHosts';
 import TagsManagement from '@/pages/tagsManagement';
diff --git a/scripts/doraemon-skills-lib.js b/scripts/doraemon-skills-lib.js
index 92749c7..1716aac 100644
--- a/scripts/doraemon-skills-lib.js
+++ b/scripts/doraemon-skills-lib.js
@@ -10,7 +10,9 @@ function fail(message) {
 
 function normalizeServerUrl(server) {
     if (!server) {
-        fail('Server is required. Provide --server <url>, set DORAEMON_SKILLS_SERVER, or configure ~/.doraemon/skills.json.');
+        fail(
+            'Server is required. Provide --server <url>, set DORAEMON_SKILLS_SERVER, or configure ~/.doraemon/skills.json.'
+        );
     }
     try {
         const parsed = new URL(server);
@@ -69,7 +71,8 @@ function readBootstrapConfigServer({ homedir = os.homedir } = {}) {
 }
 
 function resolveServer(options = {}, { env = process.env, homedir = os.homedir } = {}) {
-    const value = options.server || env.DORAEMON_SKILLS_SERVER || readBootstrapConfigServer({ homedir });
+    const value =
+        options.server || env.DORAEMON_SKILLS_SERVER || readBootstrapConfigServer({ homedir });
     return normalizeServerUrl(value);
 }
 
@@ -116,9 +119,10 @@ async function requestInstallMeta(server, installKey) {
 
     const payload = await readJsonResponse(response);
     if (!response.ok) {
-        const message = payload && (payload.message || payload.msg)
-            ? payload.message || payload.msg
-            : `Request failed with status ${response.status}.`;
+        const message =
+            payload && (payload.message || payload.msg)
+                ? payload.message || payload.msg
+                : `Request failed with status ${response.status}.`;
         fail(message);
     }
 
diff --git a/test/doraemon-skills-config.test.js b/test/doraemon-skills-config.test.js
index 417b31e..38fb461 100644
--- a/test/doraemon-skills-config.test.js
+++ b/test/doraemon-skills-config.test.js
@@ -19,10 +19,13 @@ test('resolveServer falls back to bootstrap-written config when option and env a
         'utf8'
     );
 
-    const server = cliLib.resolveServer({}, {
-        env: {},
-        homedir: () => tempHome,
-    });
+    const server = cliLib.resolveServer(
+        {},
+        {
+            env: {},
+            homedir: () => tempHome,
+        }
+    );
 
     assert.equal(server, 'https://doraemon.example.com/');
 });
@@ -32,7 +35,10 @@ test('buildInstallMetaUrl queries install-meta with installKey instead of exposi
 
     const metaUrl = cliLib.buildInstallMetaUrl('https://doraemon.example.com', 'skill-creator');
 
-    assert.equal(metaUrl.toString(), 'https://doraemon.example.com/api/skills/install-meta?installKey=skill-creator');
+    assert.equal(
+        metaUrl.toString(),
+        'https://doraemon.example.com/api/skills/install-meta?installKey=skill-creator'
+    );
     assert.equal(metaUrl.searchParams.get('installKey'), 'skill-creator');
     assert.equal(metaUrl.searchParams.get('slug'), null);
 });
diff --git a/test/skills-install-key.test.js b/test/skills-install-key.test.js
index a074f0f..24e24d1 100644
--- a/test/skills-install-key.test.js
+++ b/test/skills-install-key.test.js
@@ -20,10 +20,22 @@ test('createInstallKeyMap derives user-facing install keys and keeps them unique
         },
     ]);
 
-    assert.equal(result.bySlug.get('upload-skill-creator-default-skill-creator').installKey, 'skill-creator');
-    assert.equal(result.bySlug.get('upload-skill-creator-default-skill-creator-2').installKey, 'skill-creator-alt');
-    assert.equal(result.byInstallKey.get('skill-creator').slug, 'upload-skill-creator-default-skill-creator');
-    assert.equal(result.byInstallKey.get('skill-creator-alt').slug, 'upload-skill-creator-default-skill-creator-2');
+    assert.equal(
+        result.bySlug.get('upload-skill-creator-default-skill-creator').installKey,
+        'skill-creator'
+    );
+    assert.equal(
+        result.bySlug.get('upload-skill-creator-default-skill-creator-2').installKey,
+        'skill-creator-alt'
+    );
+    assert.equal(
+        result.byInstallKey.get('skill-creator').slug,
+        'upload-skill-creator-default-skill-creator'
+    );
+    assert.equal(
+        result.byInstallKey.get('skill-creator-alt').slug,
+        'upload-skill-creator-default-skill-creator-2'
+    );
 });
 
 test('resolveSkillIdentifier accepts installKey without exposing internal slug', () => {
@@ -70,7 +82,8 @@ test('getInstallMeta returns installKey and installDirName aligned to user-facin
     service.ensureSkillCache = async () => {};
     service.getSkillPackageInstallability = async () => ({ installable: true, reason: '' });
     service.getSkillArchive = async () => ({ content: Buffer.from('zip-content') });
-    service.buildSkillDownloadUrl = (slug) => `https://doraemon.test/api/skills/download?slug=${slug}`;
+    service.buildSkillDownloadUrl = (slug) =>
+        `https://doraemon.test/api/skills/download?slug=${slug}`;
 
     const skill = {
         id: 1,
@@ -87,7 +100,10 @@ test('getInstallMeta returns installKey and installDirName aligned to user-facin
     assert.equal(meta.slug, 'upload-skill-creator-default-skill-creator');
     assert.equal(meta.installKey, 'skill-creator');
     assert.equal(meta.installDirName, 'skill-creator');
-    assert.equal(meta.downloadUrl, 'https://doraemon.test/api/skills/download?slug=upload-skill-creator-default-skill-creator');
+    assert.equal(
+        meta.downloadUrl,
+        'https://doraemon.test/api/skills/download?slug=upload-skill-creator-default-skill-creator'
+    );
 });
 
 test('buildUploadSourceMeta keeps same zip with different custom names isolated', () => {
@@ -126,7 +142,7 @@ test('assertSkillNamesUnique rejects duplicated names in one import batch', asyn
     };
 
     await assert.rejects(
-        () => service.assertSkillNamesUnique([ 'skill-a', 'skill-a' ]),
+        () => service.assertSkillNamesUnique(['skill-a', 'skill-a']),
         (error) => error.status === 400 && error.message === '导入失败：技能名称不能重复'
     );
 });
@@ -155,7 +171,8 @@ test('assertSkillNamesUnique rejects existing skill name', async () => {
     };
 
     await assert.rejects(
-        () => service.assertSkillNamesUnique([ 'skill-creator' ]),
-        (error) => error.status === 400 && error.message === '技能名称“skill-creator”已存在，请更换名称'
+        () => service.assertSkillNamesUnique(['skill-creator']),
+        (error) =>
+            error.status === 400 && error.message === '技能名称“skill-creator”已存在，请更换名称'
     );
 });