[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$fBRpkH4i4fclF-shkFvX5hjc4ymTebUYrVxOl1yS2v10":3,"$fJU-4tot_gC5fDkujNeoE-cGsdMy5V_KcdUXLuAnTFgw":18,"$fIEKsyQsxEicYBDinP__SpeBQ9_YWnHDisMKiPKGuI90":423},{"slug":4,"title":5,"description":6,"content":7,"content_html":8,"pub_date":9,"tags":10,"draft":17},"ide-skills-guide","Agent Skills 完全指南：21 款第三方 Skill 深度评测与使用心得","全面评测 21 款第三方 Agent Skills，涵盖 Vue 生态、前端设计、构建工具、实用工具四大分类。从安装配置到实际使用场景，带你了解每个 Skill 的功能特点、最佳实践与使用心得。","## 引言\n\n在现代软件开发中，AI Agent 已经不再只是对话机器人——它正在深入我们的 IDE，成为真正的编码伙伴。Agent Skills 机制让 AI 助手能够根据任务类型动态加载专门的「技能」，从而提供更精准、更专业的辅助。这一理念由 Anthropic 于 2025 年 10 月正式发布，目前已发展为开放标准（agentskills.io），被 Claude Code、Cursor、Codex、Warp、OpenCode 等众多平台广泛采用。\n\nAgent Skills 的核心设计采用**渐进式披露（Progressive Disclosure）**策略：第一层只加载约 100 tokens 的元数据（name + description）用作索引；第二层在任务匹配时加载完整的 SKILL.md 指令（通常 \u003C 5000 tokens）；第三层按需加载脚本、模板等附属资源。这意味着你可以安装大量 Skills 而不会撑爆上下文窗口。\n\n目前我的 IDE 中安装了 **21 款第三方 Agent Skills**，覆盖了 Vue 生态、前端设计、构建工具、CSS 动画、图标检索、演示文稿等多个领域。经过一段时间的深度使用，我想把这些 Skills 分类整理出来，结合官方文档和社区评测，分享功能特点、使用体验和实际应用场景。\n\n---\n\n## 一、技能总览\n\n21 款第三方 Skills 按功能可以分为四大类：\n\n| 分类 | 包含 Skills | 核心价值 |\n|------|------------|----------|\n| **Vue 生态** | vue, vue-best-practices, vue-router-best-practices, vue-testing-best-practices, vueuse-functions, pinia, nuxt | Vue 开发全链路覆盖 |\n| **前端设计 & UX** | frontend-design, impeccable, design-taste-frontend, web-design-guidelines, web-dev, css-animations | 从视觉设计到代码实现的完整工具链 |\n| **构建工具 & 框架** | vite-plus, unocss, vitepress, bun-runtime | 构建标准化、原子化 CSS 与文档站建设 |\n| **实用工具** | better-icons, find-skills, skill-creator, slidev | 图标检索、技能发现、技能创建、演示文稿 |\n\n---\n\n## 二、Vue 生态 Skills（7 款）\n\n### 2.1 vue\n\n**简介**：Vue 3 Composition API 核心知识 Skill。涵盖 `\u003Cscript setup>` 语法、`defineProps` \u002F `defineEmits` \u002F `defineModel` 宏、响应式系统（ref \u002F reactive \u002F computed \u002F watch）、以及内置组件（Transition \u002F Teleport \u002F Suspense \u002F KeepAlive）。社区版本的 Vue Expert Skill 综合了 133 个 Claude Code 子智能体的知识，横跨 12 个主要领域——从核心响应式到 SSR、插件开发、性能优化等。\n\n**核心能力**：\n- 理解 Vue 的响应式依赖追踪机制，知道何时使用 `ref()` vs `reactive()`，以及为什么要避免解构导致响应式丢失\n- 自动使用 Composition API 惯例编写组件，理解 `\u003Cscript setup>` 语法糖\n- 合理的组件架构：执行 provide\u002Finject 避免 prop drilling、使用 slot 组合模式、renderless 组件和 composable 封装\n\n**实际场景**：从零搭建一个带搜索、分页、排序的表格组件时，AI 能直接生成类型安全的 `defineProps\u003CT>()`、正确的 `defineModel` 双向绑定和 `computed` 过滤逻辑，不需要你反复解释 Vue 3 的基础用法。\n\n### 2.2 vue-best-practices\n\n**简介**：强制性推荐 Composition API + `\u003Cscript setup>` + TypeScript 作为标准方案。当检测到 Options API 写法时会主动建议迁移。\n\n**核心能力**：\n- 新代码统一使用 `\u003Cscript setup lang=\"ts\">` 风格\n- 建议使用 `defineModel` 替代手写 `v-model` 双向绑定 props\n- 提醒添加 `generic` 类型参数到 `defineProps`\n\n**实际场景**：维护一个 Vue 2 遗留项目逐步迁移到 Vue 3 时，这个 Skill 能确保所有新代码遵循 Vue 3 最佳实践，避免「用 Vue 2 思维写 Vue 3 代码」。\n\n### 2.3 vue-router-best-practices\n\n**简介**：Vue Router 4 模式与最佳实践，覆盖导航守卫、路由参数、组件生命周期交互。\n\n**核心能力**：\n- 生成带类型安全的路由配置 `RouteRecordRaw`\n- 正确处理 `onBeforeRouteUpdate` 和 `onBeforeRouteLeave` 导航守卫\n- 嵌套路由与命名 `\u003Crouter-view>` 的正确用法\n\n**实际场景**：实现「离开当前页面时提示保存」功能，AI 自动生成 `onBeforeRouteLeave` + confirm 弹窗的完整逻辑。\n\n### 2.4 vue-testing-best-practices\n\n**简介**：Vue.js 测试完整指南，涵盖 Vitest、Vue Test Utils、组件测试、Mock 策略和 Playwright E2E 测试。\n\n**核心能力**：\n- 根据组件类型推荐正确的测试策略：纯逻辑用 Vitest 单元测试，交互用 Vue Test Utils 组件测试，端到端流程用 Playwright\n- 正确处理异步组件和 Suspense 的测试场景\n- 为 Pinia Store 生成包含 `setActivePinia(createPinia())` 和 `vi.mock` 的完整测试用例\n\n### 2.5 vueuse-functions\n\n**简介**：适时应用 VueUse 组合式函数构建更简洁的 Vue \u002F Nuxt 功能。\n\n**核心能力**：\n- 自动识别可用 VueUse 替代的手写逻辑（如 `useStorage` 替代手写 localStorage + watch）\n- 推荐最适合场景的 composable 函数\n- 暗色模式：`useDark()` + `useToggle()` 三行代码搞定\n\n### 2.6 pinia\n\n**简介**：Pinia 官方 Vue 状态管理库，类型安全且可扩展。\n\n**核心能力**：\n- 清晰的 Store 结构（state \u002F getters \u002F actions），自动推断类型\n- Setup Store 和 Options Store 两种写法的互相转换\n- 合理的状态切片策略和 store 间依赖处理\n\n### 2.7 nuxt\n\n**简介**：Nuxt 全栈 Vue 框架，覆盖 SSR、自动导入、文件路由、`useFetch` \u002F `useAsyncData` 等。\n\n**核心能力**：\n- 自动处理 SSR 安全（服务端状态泄露）和客户端水合（hydration）问题\n- 生成 Nuxt 4 目录结构的最佳实践代码\n- Server Routes 的正确用法和缓存策略\n\n:::tip Vue 生态总结\n这 7 款 Skills 覆盖了 Vue 开发的全生命周期：组件编写 → 路由 → 状态管理 → 测试 → 元框架。组合使用后，Vue 项目的开发效率有质的提升——AI 不再只是「会写 Vue 语法」，而是真正「懂 Vue 架构」。\n:::\n\n---\n\n## 三、前端设计 & UX Skills（6 款）\n\n### 3.1 frontend-design\n\n**简介**：Anthropic 官方出品，Agent Skills 生态中安装量最高的 Skill（211K+）。核心目标是解决 AI 生成 UI \"千篇一律\"的问题——Inter 字体、白底紫渐变、无脑圆角、卡片套卡片。\n\nAnthropic 官方博客指出，这一问题的根源在于**分布收敛（Distributional Convergence）**：LLM 在采样时会倾向于训练数据中的高频安全模式。如果不给明确的美学方向，Claude 就会从高概率中心采样，产出「AI 味」十足的界面。\n\n**核心能力**：\n- **设计思维阶段**：先确定 Purpose（解决什么问题）、Tone（极简 brutalist 还是极繁 maximalist）、Differentiation（什么让人过目不忘），再开始写代码\n- **字体**：禁止使用 Inter、Roboto、Arial、system fonts，推荐有独特个性的字体搭配（display font + body font 高低对比）\n- **色彩**：主色占 60-70%，配锐利强调色，禁用均匀分布的调色板\n- **动效**：聚焦高影响力时刻——一次精心编排的页面加载 + 交错渐现（animation-delay）胜过分散在各处的微交互\n- **空间**：不对称布局、叠加、对角线流动、打破网格的元素\n\n**社区评价**：\"没有 frontend-design，Claude 生成的是功能性但平庸的 Bootstrap 风格 UI；装上它，立刻有了设计师品味——有意义的字体层级、正确的比例、不再随机的色彩强调。\"\n\n### 3.2 impeccable\n\n**简介**：由前 Google\u002FVerily 设计工程师 Paul Bakaus 构建的开源 Skill，被社区称为「给 Claude Code 装上设计语言的工具」。包含 **23 个命令**、7 大设计支柱，以及浏览器内实时编辑模式。\n\n**核心命令**：\n- `\u002Faudit` — 可访问性、性能、响应式质量检查\n- `\u002Fcritique` — UX 审查：视觉层次、清晰度、情感共鸣\n- `\u002Fpolish` — 发布前最终打磨（对齐、间距、细节）\n- `\u002Fdistill` — 剥离到本质，删除不产生价值的复杂度\n- `\u002Fbolder` \u002F `\u002Fquieter` — 增强过于安全的 \u002F 弱化过于激进的设计\n- `\u002Fanimate` — 添加有目的的动效（而非装饰性抖动）\n- `\u002Fcolorize` — 为单色界面引入战略性色彩\n- `\u002Fdelight` — 添加令人愉悦的微交互\n- `\u002Fharden` — 错误处理、i18n、边界情况\n- `\u002Foverdrive` — 技术性大胆效果（着色器、弹簧物理、滚动驱动的揭示）\n- `\u002Fteach-impeccable` — 一次性收集设计上下文，保存到项目根目录的 `.impeccable.md`\n\n**7 大设计支柱**：Typography（字体）、Color（色彩）、Spatial Design（空间）、Responsiveness（响应式）、Interactions（交互）、Motion（动效）、UX Writing（UX 文案）。\n\n**社区评价**：ChaseAI 评测指出，\"AI 没有品味的原因是大多数 prompt 也没有品味。当你告诉 Claude '让它更好看' 时，你让它在猜。当你告诉 Claude '运行 impeccable \u002Fbolder with three variants' 时，你给了它设计师的词汇和结构化操作。这就是 impeccable 的全部价值。\"\n\n### 3.3 design-taste-frontend\n\n**简介**：「高级 UI\u002FUX 工程师」定位的 Skill，通过工程化的规则主动覆盖 LLM 的统计性设计偏见。\n\n**核心能力**：\n- **DESIGN_VARIANCE: 8**（1=完美对称，10=艺术性混沌），默认偏好高设计差异度\n- **确定性字体规则**：展示\u002F标题用 `text-4xl md:text-6xl tracking-tighter leading-none`，正文用 `text-base leading-relaxed max-w-[65ch]`\n- **反 AI 紫色禁令**：最大 1 个强调色，饱和度 \u003C 80%，禁止 AI 常见紫\u002F蓝渐变\n- **反 emoji 政策**：禁止 emoji，用 Radix\u002FPhosphor 图标替代\n- **CSS Grid 优先**：禁止复杂的 flexbox 百分比数学（`w-[calc(33%-1rem)]`），用 `grid grid-cols-3 gap-6`\n- **Viewport 稳定性**：禁止 `h-screen` 全高 Hero，用 `min-h-[100dvh]` 避免移动端 Safari 布局跳动\n- **RSC 安全**：全局状态仅限 Client Component，交互式 UI 必须以 `'use client'` 隔离\n- **依赖检查 [强制]**：使用任何第三方库前必须先检查 `package.json`，缺失时输出安装命令\n\n### 3.4 web-design-guidelines\n\n**简介**：审查 UI 代码是否符合 Web Interface Guidelines 标准（由 Vercel Labs 社区维护），用于无障碍审计、UX 检查等。\n\n**核心能力**：\n- 自动检测无障碍问题：对比度不足、缺少 aria 标签、键盘导航缺失、`\u003Cinput>` 缺少关联 `\u003Clabel>`\n- 检查 UX 最佳实践：点击区域不小于 44px、错误提示关联 `aria-describedby`、表单提交按钮可辨识\n- 提供 WAI-ARIA 合规建议\n\n### 3.5 web-dev\n\n**简介**：创建具有高设计质量的生产级 Web 界面，适合\"从零构建\"场景——全新网站、页面、WebApp。\n\n**核心能力**：\n- 自动生成完整项目结构\n- 注重代码质量与设计一致性\n- 适合快速原型和 MVP 构建\n\n### 3.6 css-animations\n\n**简介**：CSS 动画适配器模式 Skill，解决 CSS 动画在预览和渲染中需要「确定性 seek」的问题。\n\n**核心能力**：\n- 精细控制 CSS-only 动画的时序（animation-delay、animation-fill-mode、animation-play-state）\n- 使用 CSS 自定义属性 + `animation-delay: calc(var(--index) * 100ms)` 实现交错动画\n- 与 GSAP \u002F Anime.js 协同使用\n\n:::warning 设计 Skills 工作流建议\n设计类 Skills 的最佳使用方式是**链式调用**：先用 `\u002Fteach-impeccable` 收集上下文，再用 frontend-design 出方案，用 `\u002Fcritique` 审查，最后用 `\u002Fpolish` 打磨。单独使用任何一个效果都远不如组合。\n:::\n\n---\n\n## 四、构建工具 & 框架 Skills（4 款）\n\n### 4.1 vite-plus\n\n**简介**：将前端仓库对齐到标准 Vite+ 工作流，包括 `vp` CLI、`vite-plus\u002Ftest` 等。\n\n**核心能力**：\n- 自动化项目标准化：将 package.json scripts 对齐到 `vp` 规范\n- 统一 CI、测试、打包、Hook 流程\n- 用 Vite+ 等价物替换直接调用的包管理器和 Vitest 命令\n\n### 4.2 unocss\n\n**简介**：UnoCSS 即时原子 CSS 引擎，Tailwind CSS 的超集。支持 Wind、Icons、Attributify 等预设。\n\n**核心能力**：\n- 配置 rules、shortcuts 和 variants\n- UnoCSS Icons 预设实现按需加载图标，无需引入整个 @iconify 包\n- 从 Tailwind 迁移到 UnoCSS 的完整指导\n\n### 4.3 vitepress\n\n**简介**：VitePress 静态站点生成器，由 Vite + Vue 驱动，适合搭建文档站点。\n\n**核心能力**：\n- 配置侧边栏、导航栏、主题\n- 编写带 Vue 组件的 Markdown 文档\n- 带 Props 表格和 Live Demo 的组件文档模板\n\n### 4.4 bun-runtime\n\n**简介**：Bun 作为运行时、包管理器、打包器和测试运行器的使用指导。Anthropic 官方 Claude Code 插件之一。\n\n**核心能力**：\n- 包安装速度是 npm\u002Fpnpm 的 25-30 倍\n- 内置 TypeScript 和 JSX 支持，零配置\n- CI 从 npm 切换到 Bun 后，构建时间从数分钟缩短到数十秒\n- Bun 与 Node 原生模块的兼容性注意事项及 workaround\n\n---\n\n## 五、实用工具 Skills（4 款）\n\n### 5.1 better-icons\n\n**简介**：Agent Skills 生态的 Iconify 搜索工具，覆盖 200+ 图标库。支持自然语言搜索：描述「moon icon with stars」即可获取多个候选 SVG，无需知道图标名称或浏览图标库。\n\n### 5.2 find-skills\n\n**简介**：Agent Skills 的「搜索引擎」。根据你的需求描述，自动从 claude-plugins.dev 等注册中心的数千个 Skills 中检索并推荐合适的 Skill。社区版本的 skills-discovery 已被安装 6.5K 次，支持跨平台（Claude Code、Cursor、Codex 等）。\n\n### 5.3 skill-creator\n\n**简介**：Anthropic 官方出品的 Skill 创建工具（SKILL.md 引导式生成器），来自 anthropics\u002Fskills 仓库。Claude Code 中位于 `document-skills@anthropic-agent-skills` 插件内。\n\nAnthropic 官方指南给出了 5 步创建流程：\n1. 明确需求：这个 Skill 解决什么具体问题？（好例子：「从 PDF 中提取财务数据并格式化为 CSV」 坏例子：「帮我处理财务」）\n2. 写 name：小写加连字符（如 `pdf-editor`、`brand-guidelines`）\n3. 写 description：description 是唯一影响 Skill 触发判断的字段，需要包含具体动词、触发场景和能力边界\n4. 写 SKILL.md 主体：使用 Markdown 标题、列表、代码块的层次化结构\n5. 上传并验证：放入 `.agents\u002Fskills\u002F` 目录自动生效\n\n**社区评价**：\"Skill Creator 在整个生态中的角色好比 Webpack 之于前端——虽然你手动也能写 SKILL.md，但用它创建可以确保格式合规、触发条件准确、评估标准完整。\"\n\n### 5.4 slidev\n\n**简介**：Slidev 面向开发者的 Web 幻灯片 Skill，用 Markdown + Vue 组件制作演示文稿。支持代码高亮、逐行动画、演讲者模式、录屏和 PDF 导出。\n\n---\n\n## 六、安装与管理\n\n### 安装方式\n\nAgent Skills 的安装因平台而异，但都极为简单：\n\n**Claude Code**：\n```\n\u002Fplugin marketplace add anthropics\u002Fskills\n\u002Fplugin install document-skills@anthropic-agent-skills\n```\n\n**Cursor \u002F Codex \u002F OpenCode 等共享平台**（安装到 `.agents\u002Fskills\u002F`）：\n```bash\nnpx skills-installer add @anthropics\u002Fclaude-code\u002Ffrontend-design\n```\n\n**Claude.ai**：付费计划用户的所有 Skills 自动内置可用。\n\n### 管理原则\n\n- **按需安装，7-10 个为最佳范围**：Skills 越多，触发匹配精度越低\n- **设计类 + 编码类搭配**：每个前端项目建议至少 2 个设计类 Skill + 核心框架 Skill\n- **定期审查**：项目结束后移除不再相关的领域 Skill\n- **善用 find-skills**：遇到新需求先搜索，大概率有现成方案\n\n---\n\n## 七、使用心得与总结\n\n### Skills 的核心价值：上下文专业化\n\nSkills 机制最大的价值不是替代 Prompt，而是在需要时提供**刚好够用的领域知识**。同一个「写 Vue 组件」的任务，加载 vue + vue-best-practices 后 AI 自动使用 TypeScript 类型注解、`\u003Cscript setup>` 语法、类型安全的 props 定义——而这些规则不需要你每次写进 Prompt。\n\nAnthropic 官方将 Skills 定位为\"可复用的专业知识包\"，而非一次性 Prompt。这个定位非常精准：Skills 的本质是把反复使用的专业指导封装为按需加载的模块，避免每次都从零描述业务规范。\n\n### 设计 Skills 的独特价值\n\nfrontend-design + impeccable + design-taste-frontend 这一设计 Skill 链的使用，让开发者——即使是\"非设计师\"——也能产出有辨识度的界面。其中 impeccable 的 `\u002Faudit` 和 `\u002Fcritique` 命令尤为实用：焦点管理、空状态引导、加载骨架屏、按钮层级权重——这些容易被忽略的细节，AI 在 Skill 加持下能够系统性检查。\n\n### 工具链标准化的长期收益\n\nvite-plus 和 bun-runtime 这类工具 Skills 让项目配置从\"翻阅文档 + StackOverflow\"变成自动对齐标准。标准化工作流的核心价值不在\"少写几行配置\"，而在**保证一致性**——新成员拉取代码后，开发体验与老成员完全一致。\n\n### 黄金法则\n\n1. **不要贪多**：7-10 个 Skill 是最佳范围\n2. **设计+编码搭配**：每个前端项目至少配 2 个设计类 + 核心框架 Skill\n3. **定期清理**：完成对应阶段后移除不再需要的领域 Skill\n4. **链式调用**：设计类 Skills 配合使用效果远超单独使用\n\n### 最终建议\n\nAgent Skills 生态正在快速发展——从 Anthropic 2025 年 10 月发布 Skills 机制，到 12 月开放为标准（agentskills.io），再到 2026 年社区涌现数百个插件和数千个 Skills，不过短短半年。\n\n如果你刚开始接触 Agent Skills，强烈建议从 **vue + vue-best-practices + frontend-design + impeccable** 四件套开始——这四款的组合体验最成熟、社区验证最充分。当你熟悉了它们的运作方式后再逐步扩展到其他领域 Skills。","\u003Ch2 id=\"引言\">引言\u003C\u002Fh2>\n\u003Cp>在现代软件开发中，AI Agent 已经不再只是对话机器人——它正在深入我们的 IDE，成为真正的编码伙伴。Agent Skills 机制让 AI 助手能够根据任务类型动态加载专门的「技能」，从而提供更精准、更专业的辅助。这一理念由 Anthropic 于 2025 年 10 月正式发布，目前已发展为开放标准（\u003Ca href=\"http:\u002F\u002Fagentskills.io\">agentskills.io\u003C\u002Fa>），被 Claude Code、Cursor、Codex、Warp、OpenCode 等众多平台广泛采用。\u003C\u002Fp>\n\u003Cp>Agent Skills 的核心设计采用**渐进式披露（Progressive Disclosure）**策略：第一层只加载约 100 tokens 的元数据（name + description）用作索引；第二层在任务匹配时加载完整的 \u003Ca href=\"http:\u002F\u002FSKILL.md\">SKILL.md\u003C\u002Fa> 指令（通常 < 5000 tokens）；第三层按需加载脚本、模板等附属资源。这意味着你可以安装大量 Skills 而不会撑爆上下文窗口。\u003C\u002Fp>\n\u003Cp>目前我的 IDE 中安装了 \u003Cstrong>21 款第三方 Agent Skills\u003C\u002Fstrong>，覆盖了 Vue 生态、前端设计、构建工具、CSS 动画、图标检索、演示文稿等多个领域。经过一段时间的深度使用，我想把这些 Skills 分类整理出来，结合官方文档和社区评测，分享功能特点、使用体验和实际应用场景。\u003C\u002Fp>\n\u003Chr>\n\u003Ch2 id=\"一-技能总览\">一、技能总览\u003C\u002Fh2>\n\u003Cp>21 款第三方 Skills 按功能可以分为四大类：\u003C\u002Fp>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>分类\u003C\u002Fth>\n\u003Cth>包含 Skills\u003C\u002Fth>\n\u003Cth>核心价值\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>\u003Cstrong>Vue 生态\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd>vue, vue-best-practices, vue-router-best-practices, vue-testing-best-practices, vueuse-functions, pinia, nuxt\u003C\u002Ftd>\n\u003Ctd>Vue 开发全链路覆盖\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Cstrong>前端设计 & UX\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd>frontend-design, impeccable, design-taste-frontend, web-design-guidelines, web-dev, css-animations\u003C\u002Ftd>\n\u003Ctd>从视觉设计到代码实现的完整工具链\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Cstrong>构建工具 & 框架\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd>vite-plus, unocss, vitepress, bun-runtime\u003C\u002Ftd>\n\u003Ctd>构建标准化、原子化 CSS 与文档站建设\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Cstrong>实用工具\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd>better-icons, find-skills, skill-creator, slidev\u003C\u002Ftd>\n\u003Ctd>图标检索、技能发现、技能创建、演示文稿\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Chr>\n\u003Ch2 id=\"二-vue-生态-skills-7-款\">二、Vue 生态 Skills（7 款）\u003C\u002Fh2>\n\u003Ch3 id=\"2-1-vue\">2.1 vue\u003C\u002Fh3>\n\u003Cp>\u003Cstrong>简介\u003C\u002Fstrong>：Vue 3 Composition API 核心知识 Skill。涵盖 \u003Ccode><script setup>\u003C\u002Fcode> 语法、\u003Ccode>defineProps\u003C\u002Fcode> \u002F \u003Ccode>defineEmits\u003C\u002Fcode> \u002F \u003Ccode>defineModel\u003C\u002Fcode> 宏、响应式系统（ref \u002F reactive \u002F computed \u002F watch）、以及内置组件（Transition \u002F Teleport \u002F Suspense \u002F KeepAlive）。社区版本的 Vue Expert Skill 综合了 133 个 Claude Code 子智能体的知识，横跨 12 个主要领域——从核心响应式到 SSR、插件开发、性能优化等。\u003C\u002Fp>\n\u003Cp>\u003Cstrong>核心能力\u003C\u002Fstrong>：\u003C\u002Fp>\n\u003Cul>\n\u003Cli>理解 Vue 的响应式依赖追踪机制，知道何时使用 \u003Ccode>ref()\u003C\u002Fcode> vs \u003Ccode>reactive()\u003C\u002Fcode>，以及为什么要避免解构导致响应式丢失\u003C\u002Fli>\n\u003Cli>自动使用 Composition API 惯例编写组件，理解 \u003Ccode><script setup>\u003C\u002Fcode> 语法糖\u003C\u002Fli>\n\u003Cli>合理的组件架构：执行 provide\u002Finject 避免 prop drilling、使用 slot 组合模式、renderless 组件和 composable 封装\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cstrong>实际场景\u003C\u002Fstrong>：从零搭建一个带搜索、分页、排序的表格组件时，AI 能直接生成类型安全的 \u003Ccode>defineProps<T>()\u003C\u002Fcode>、正确的 \u003Ccode>defineModel\u003C\u002Fcode> 双向绑定和 \u003Ccode>computed\u003C\u002Fcode> 过滤逻辑，不需要你反复解释 Vue 3 的基础用法。\u003C\u002Fp>\n\u003Ch3 id=\"2-2-vue-best-practices\">2.2 vue-best-practices\u003C\u002Fh3>\n\u003Cp>\u003Cstrong>简介\u003C\u002Fstrong>：强制性推荐 Composition API + \u003Ccode><script setup>\u003C\u002Fcode> + TypeScript 作为标准方案。当检测到 Options API 写法时会主动建议迁移。\u003C\u002Fp>\n\u003Cp>\u003Cstrong>核心能力\u003C\u002Fstrong>：\u003C\u002Fp>\n\u003Cul>\n\u003Cli>新代码统一使用 \u003Ccode><script setup lang="ts">\u003C\u002Fcode> 风格\u003C\u002Fli>\n\u003Cli>建议使用 \u003Ccode>defineModel\u003C\u002Fcode> 替代手写 \u003Ccode>v-model\u003C\u002Fcode> 双向绑定 props\u003C\u002Fli>\n\u003Cli>提醒添加 \u003Ccode>generic\u003C\u002Fcode> 类型参数到 \u003Ccode>defineProps\u003C\u002Fcode>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cstrong>实际场景\u003C\u002Fstrong>：维护一个 Vue 2 遗留项目逐步迁移到 Vue 3 时，这个 Skill 能确保所有新代码遵循 Vue 3 最佳实践，避免「用 Vue 2 思维写 Vue 3 代码」。\u003C\u002Fp>\n\u003Ch3 id=\"2-3-vue-router-best-practices\">2.3 vue-router-best-practices\u003C\u002Fh3>\n\u003Cp>\u003Cstrong>简介\u003C\u002Fstrong>：Vue Router 4 模式与最佳实践，覆盖导航守卫、路由参数、组件生命周期交互。\u003C\u002Fp>\n\u003Cp>\u003Cstrong>核心能力\u003C\u002Fstrong>：\u003C\u002Fp>\n\u003Cul>\n\u003Cli>生成带类型安全的路由配置 \u003Ccode>RouteRecordRaw\u003C\u002Fcode>\u003C\u002Fli>\n\u003Cli>正确处理 \u003Ccode>onBeforeRouteUpdate\u003C\u002Fcode> 和 \u003Ccode>onBeforeRouteLeave\u003C\u002Fcode> 导航守卫\u003C\u002Fli>\n\u003Cli>嵌套路由与命名 \u003Ccode><router-view>\u003C\u002Fcode> 的正确用法\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cstrong>实际场景\u003C\u002Fstrong>：实现「离开当前页面时提示保存」功能，AI 自动生成 \u003Ccode>onBeforeRouteLeave\u003C\u002Fcode> + confirm 弹窗的完整逻辑。\u003C\u002Fp>\n\u003Ch3 id=\"2-4-vue-testing-best-practices\">2.4 vue-testing-best-practices\u003C\u002Fh3>\n\u003Cp>\u003Cstrong>简介\u003C\u002Fstrong>：Vue.js 测试完整指南，涵盖 Vitest、Vue Test Utils、组件测试、Mock 策略和 Playwright E2E 测试。\u003C\u002Fp>\n\u003Cp>\u003Cstrong>核心能力\u003C\u002Fstrong>：\u003C\u002Fp>\n\u003Cul>\n\u003Cli>根据组件类型推荐正确的测试策略：纯逻辑用 Vitest 单元测试，交互用 Vue Test Utils 组件测试，端到端流程用 Playwright\u003C\u002Fli>\n\u003Cli>正确处理异步组件和 Suspense 的测试场景\u003C\u002Fli>\n\u003Cli>为 Pinia Store 生成包含 \u003Ccode>setActivePinia(createPinia())\u003C\u002Fcode> 和 \u003Ccode>vi.mock\u003C\u002Fcode> 的完整测试用例\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3 id=\"2-5-vueuse-functions\">2.5 vueuse-functions\u003C\u002Fh3>\n\u003Cp>\u003Cstrong>简介\u003C\u002Fstrong>：适时应用 VueUse 组合式函数构建更简洁的 Vue \u002F Nuxt 功能。\u003C\u002Fp>\n\u003Cp>\u003Cstrong>核心能力\u003C\u002Fstrong>：\u003C\u002Fp>\n\u003Cul>\n\u003Cli>自动识别可用 VueUse 替代的手写逻辑（如 \u003Ccode>useStorage\u003C\u002Fcode> 替代手写 localStorage + watch）\u003C\u002Fli>\n\u003Cli>推荐最适合场景的 composable 函数\u003C\u002Fli>\n\u003Cli>暗色模式：\u003Ccode>useDark()\u003C\u002Fcode> + \u003Ccode>useToggle()\u003C\u002Fcode> 三行代码搞定\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3 id=\"2-6-pinia\">2.6 pinia\u003C\u002Fh3>\n\u003Cp>\u003Cstrong>简介\u003C\u002Fstrong>：Pinia 官方 Vue 状态管理库，类型安全且可扩展。\u003C\u002Fp>\n\u003Cp>\u003Cstrong>核心能力\u003C\u002Fstrong>：\u003C\u002Fp>\n\u003Cul>\n\u003Cli>清晰的 Store 结构（state \u002F getters \u002F actions），自动推断类型\u003C\u002Fli>\n\u003Cli>Setup Store 和 Options Store 两种写法的互相转换\u003C\u002Fli>\n\u003Cli>合理的状态切片策略和 store 间依赖处理\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3 id=\"2-7-nuxt\">2.7 nuxt\u003C\u002Fh3>\n\u003Cp>\u003Cstrong>简介\u003C\u002Fstrong>：Nuxt 全栈 Vue 框架，覆盖 SSR、自动导入、文件路由、\u003Ccode>useFetch\u003C\u002Fcode> \u002F \u003Ccode>useAsyncData\u003C\u002Fcode> 等。\u003C\u002Fp>\n\u003Cp>\u003Cstrong>核心能力\u003C\u002Fstrong>：\u003C\u002Fp>\n\u003Cul>\n\u003Cli>自动处理 SSR 安全（服务端状态泄露）和客户端水合（hydration）问题\u003C\u002Fli>\n\u003Cli>生成 Nuxt 4 目录结构的最佳实践代码\u003C\u002Fli>\n\u003Cli>Server Routes 的正确用法和缓存策略\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cdiv class=\"callout callout-tip\">\u003Cp class=\"callout-title\">💡 Vue 生态总结\u003C\u002Fp>\n\u003Cp>这 7 款 Skills 覆盖了 Vue 开发的全生命周期：组件编写 → 路由 → 状态管理 → 测试 → 元框架。组合使用后，Vue 项目的开发效率有质的提升——AI 不再只是「会写 Vue 语法」，而是真正「懂 Vue 架构」。\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Chr>\n\u003Ch2 id=\"三-前端设计-ux-skills-6-款\">三、前端设计 & UX Skills（6 款）\u003C\u002Fh2>\n\u003Ch3 id=\"3-1-frontend-design\">3.1 frontend-design\u003C\u002Fh3>\n\u003Cp>\u003Cstrong>简介\u003C\u002Fstrong>：Anthropic 官方出品，Agent Skills 生态中安装量最高的 Skill（211K+）。核心目标是解决 AI 生成 UI "千篇一律"的问题——Inter 字体、白底紫渐变、无脑圆角、卡片套卡片。\u003C\u002Fp>\n\u003Cp>Anthropic 官方博客指出，这一问题的根源在于\u003Cstrong>分布收敛（Distributional Convergence）\u003C\u002Fstrong>：LLM 在采样时会倾向于训练数据中的高频安全模式。如果不给明确的美学方向，Claude 就会从高概率中心采样，产出「AI 味」十足的界面。\u003C\u002Fp>\n\u003Cp>\u003Cstrong>核心能力\u003C\u002Fstrong>：\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>设计思维阶段\u003C\u002Fstrong>：先确定 Purpose（解决什么问题）、Tone（极简 brutalist 还是极繁 maximalist）、Differentiation（什么让人过目不忘），再开始写代码\u003C\u002Fli>\n\u003Cli>\u003Cstrong>字体\u003C\u002Fstrong>：禁止使用 Inter、Roboto、Arial、system fonts，推荐有独特个性的字体搭配（display font + body font 高低对比）\u003C\u002Fli>\n\u003Cli>\u003Cstrong>色彩\u003C\u002Fstrong>：主色占 60-70%，配锐利强调色，禁用均匀分布的调色板\u003C\u002Fli>\n\u003Cli>\u003Cstrong>动效\u003C\u002Fstrong>：聚焦高影响力时刻——一次精心编排的页面加载 + 交错渐现（animation-delay）胜过分散在各处的微交互\u003C\u002Fli>\n\u003Cli>\u003Cstrong>空间\u003C\u002Fstrong>：不对称布局、叠加、对角线流动、打破网格的元素\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cstrong>社区评价\u003C\u002Fstrong>：“没有 frontend-design，Claude 生成的是功能性但平庸的 Bootstrap 风格 UI；装上它，立刻有了设计师品味——有意义的字体层级、正确的比例、不再随机的色彩强调。”\u003C\u002Fp>\n\u003Ch3 id=\"3-2-impeccable\">3.2 impeccable\u003C\u002Fh3>\n\u003Cp>\u003Cstrong>简介\u003C\u002Fstrong>：由前 Google\u002FVerily 设计工程师 Paul Bakaus 构建的开源 Skill，被社区称为「给 Claude Code 装上设计语言的工具」。包含 \u003Cstrong>23 个命令\u003C\u002Fstrong>、7 大设计支柱，以及浏览器内实时编辑模式。\u003C\u002Fp>\n\u003Cp>\u003Cstrong>核心命令\u003C\u002Fstrong>：\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ccode>\u002Faudit\u003C\u002Fcode> — 可访问性、性能、响应式质量检查\u003C\u002Fli>\n\u003Cli>\u003Ccode>\u002Fcritique\u003C\u002Fcode> — UX 审查：视觉层次、清晰度、情感共鸣\u003C\u002Fli>\n\u003Cli>\u003Ccode>\u002Fpolish\u003C\u002Fcode> — 发布前最终打磨（对齐、间距、细节）\u003C\u002Fli>\n\u003Cli>\u003Ccode>\u002Fdistill\u003C\u002Fcode> — 剥离到本质，删除不产生价值的复杂度\u003C\u002Fli>\n\u003Cli>\u003Ccode>\u002Fbolder\u003C\u002Fcode> \u002F \u003Ccode>\u002Fquieter\u003C\u002Fcode> — 增强过于安全的 \u002F 弱化过于激进的设计\u003C\u002Fli>\n\u003Cli>\u003Ccode>\u002Fanimate\u003C\u002Fcode> — 添加有目的的动效（而非装饰性抖动）\u003C\u002Fli>\n\u003Cli>\u003Ccode>\u002Fcolorize\u003C\u002Fcode> — 为单色界面引入战略性色彩\u003C\u002Fli>\n\u003Cli>\u003Ccode>\u002Fdelight\u003C\u002Fcode> — 添加令人愉悦的微交互\u003C\u002Fli>\n\u003Cli>\u003Ccode>\u002Fharden\u003C\u002Fcode> — 错误处理、i18n、边界情况\u003C\u002Fli>\n\u003Cli>\u003Ccode>\u002Foverdrive\u003C\u002Fcode> — 技术性大胆效果（着色器、弹簧物理、滚动驱动的揭示）\u003C\u002Fli>\n\u003Cli>\u003Ccode>\u002Fteach-impeccable\u003C\u002Fcode> — 一次性收集设计上下文，保存到项目根目录的 \u003Ccode>.impeccable.md\u003C\u002Fcode>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cstrong>7 大设计支柱\u003C\u002Fstrong>：Typography（字体）、Color（色彩）、Spatial Design（空间）、Responsiveness（响应式）、Interactions（交互）、Motion（动效）、UX Writing（UX 文案）。\u003C\u002Fp>\n\u003Cp>\u003Cstrong>社区评价\u003C\u002Fstrong>：ChaseAI 评测指出，“AI 没有品味的原因是大多数 prompt 也没有品味。当你告诉 Claude ‘让它更好看’ 时，你让它在猜。当你告诉 Claude ‘运行 impeccable \u002Fbolder with three variants’ 时，你给了它设计师的词汇和结构化操作。这就是 impeccable 的全部价值。”\u003C\u002Fp>\n\u003Ch3 id=\"3-3-design-taste-frontend\">3.3 design-taste-frontend\u003C\u002Fh3>\n\u003Cp>\u003Cstrong>简介\u003C\u002Fstrong>：「高级 UI\u002FUX 工程师」定位的 Skill，通过工程化的规则主动覆盖 LLM 的统计性设计偏见。\u003C\u002Fp>\n\u003Cp>\u003Cstrong>核心能力\u003C\u002Fstrong>：\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>DESIGN_VARIANCE: 8\u003C\u002Fstrong>（1=完美对称，10=艺术性混沌），默认偏好高设计差异度\u003C\u002Fli>\n\u003Cli>\u003Cstrong>确定性字体规则\u003C\u002Fstrong>：展示\u002F标题用 \u003Ccode>text-4xl md:text-6xl tracking-tighter leading-none\u003C\u002Fcode>，正文用 \u003Ccode>text-base leading-relaxed max-w-[65ch]\u003C\u002Fcode>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>反 AI 紫色禁令\u003C\u002Fstrong>：最大 1 个强调色，饱和度 < 80%，禁止 AI 常见紫\u002F蓝渐变\u003C\u002Fli>\n\u003Cli>\u003Cstrong>反 emoji 政策\u003C\u002Fstrong>：禁止 emoji，用 Radix\u002FPhosphor 图标替代\u003C\u002Fli>\n\u003Cli>\u003Cstrong>CSS Grid 优先\u003C\u002Fstrong>：禁止复杂的 flexbox 百分比数学（\u003Ccode>w-[calc(33%-1rem)]\u003C\u002Fcode>），用 \u003Ccode>grid grid-cols-3 gap-6\u003C\u002Fcode>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Viewport 稳定性\u003C\u002Fstrong>：禁止 \u003Ccode>h-screen\u003C\u002Fcode> 全高 Hero，用 \u003Ccode>min-h-[100dvh]\u003C\u002Fcode> 避免移动端 Safari 布局跳动\u003C\u002Fli>\n\u003Cli>\u003Cstrong>RSC 安全\u003C\u002Fstrong>：全局状态仅限 Client Component，交互式 UI 必须以 \u003Ccode>'use client'\u003C\u002Fcode> 隔离\u003C\u002Fli>\n\u003Cli>\u003Cstrong>依赖检查 [强制]\u003C\u002Fstrong>：使用任何第三方库前必须先检查 \u003Ccode>package.json\u003C\u002Fcode>，缺失时输出安装命令\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3 id=\"3-4-web-design-guidelines\">3.4 web-design-guidelines\u003C\u002Fh3>\n\u003Cp>\u003Cstrong>简介\u003C\u002Fstrong>：审查 UI 代码是否符合 Web Interface Guidelines 标准（由 Vercel Labs 社区维护），用于无障碍审计、UX 检查等。\u003C\u002Fp>\n\u003Cp>\u003Cstrong>核心能力\u003C\u002Fstrong>：\u003C\u002Fp>\n\u003Cul>\n\u003Cli>自动检测无障碍问题：对比度不足、缺少 aria 标签、键盘导航缺失、\u003Ccode><input>\u003C\u002Fcode> 缺少关联 \u003Ccode><label>\u003C\u002Fcode>\u003C\u002Fli>\n\u003Cli>检查 UX 最佳实践：点击区域不小于 44px、错误提示关联 \u003Ccode>aria-describedby\u003C\u002Fcode>、表单提交按钮可辨识\u003C\u002Fli>\n\u003Cli>提供 WAI-ARIA 合规建议\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3 id=\"3-5-web-dev\">3.5 web-dev\u003C\u002Fh3>\n\u003Cp>\u003Cstrong>简介\u003C\u002Fstrong>：创建具有高设计质量的生产级 Web 界面，适合"从零构建"场景——全新网站、页面、WebApp。\u003C\u002Fp>\n\u003Cp>\u003Cstrong>核心能力\u003C\u002Fstrong>：\u003C\u002Fp>\n\u003Cul>\n\u003Cli>自动生成完整项目结构\u003C\u002Fli>\n\u003Cli>注重代码质量与设计一致性\u003C\u002Fli>\n\u003Cli>适合快速原型和 MVP 构建\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3 id=\"3-6-css-animations\">3.6 css-animations\u003C\u002Fh3>\n\u003Cp>\u003Cstrong>简介\u003C\u002Fstrong>：CSS 动画适配器模式 Skill，解决 CSS 动画在预览和渲染中需要「确定性 seek」的问题。\u003C\u002Fp>\n\u003Cp>\u003Cstrong>核心能力\u003C\u002Fstrong>：\u003C\u002Fp>\n\u003Cul>\n\u003Cli>精细控制 CSS-only 动画的时序（animation-delay、animation-fill-mode、animation-play-state）\u003C\u002Fli>\n\u003Cli>使用 CSS 自定义属性 + \u003Ccode>animation-delay: calc(var(--index) * 100ms)\u003C\u002Fcode> 实现交错动画\u003C\u002Fli>\n\u003Cli>与 GSAP \u002F Anime.js 协同使用\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cdiv class=\"callout callout-warning\">\u003Cp class=\"callout-title\">⚠️ 设计 Skills 工作流建议\u003C\u002Fp>\n\u003Cp>设计类 Skills 的最佳使用方式是\u003Cstrong>链式调用\u003C\u002Fstrong>：先用 \u003Ccode>\u002Fteach-impeccable\u003C\u002Fcode> 收集上下文，再用 frontend-design 出方案，用 \u003Ccode>\u002Fcritique\u003C\u002Fcode> 审查，最后用 \u003Ccode>\u002Fpolish\u003C\u002Fcode> 打磨。单独使用任何一个效果都远不如组合。\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Chr>\n\u003Ch2 id=\"四-构建工具-框架-skills-4-款\">四、构建工具 & 框架 Skills（4 款）\u003C\u002Fh2>\n\u003Ch3 id=\"4-1-vite-plus\">4.1 vite-plus\u003C\u002Fh3>\n\u003Cp>\u003Cstrong>简介\u003C\u002Fstrong>：将前端仓库对齐到标准 Vite+ 工作流，包括 \u003Ccode>vp\u003C\u002Fcode> CLI、\u003Ccode>vite-plus\u002Ftest\u003C\u002Fcode> 等。\u003C\u002Fp>\n\u003Cp>\u003Cstrong>核心能力\u003C\u002Fstrong>：\u003C\u002Fp>\n\u003Cul>\n\u003Cli>自动化项目标准化：将 package.json scripts 对齐到 \u003Ccode>vp\u003C\u002Fcode> 规范\u003C\u002Fli>\n\u003Cli>统一 CI、测试、打包、Hook 流程\u003C\u002Fli>\n\u003Cli>用 Vite+ 等价物替换直接调用的包管理器和 Vitest 命令\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3 id=\"4-2-unocss\">4.2 unocss\u003C\u002Fh3>\n\u003Cp>\u003Cstrong>简介\u003C\u002Fstrong>：UnoCSS 即时原子 CSS 引擎，Tailwind CSS 的超集。支持 Wind、Icons、Attributify 等预设。\u003C\u002Fp>\n\u003Cp>\u003Cstrong>核心能力\u003C\u002Fstrong>：\u003C\u002Fp>\n\u003Cul>\n\u003Cli>配置 rules、shortcuts 和 variants\u003C\u002Fli>\n\u003Cli>UnoCSS Icons 预设实现按需加载图标，无需引入整个 @iconify 包\u003C\u002Fli>\n\u003Cli>从 Tailwind 迁移到 UnoCSS 的完整指导\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3 id=\"4-3-vitepress\">4.3 vitepress\u003C\u002Fh3>\n\u003Cp>\u003Cstrong>简介\u003C\u002Fstrong>：VitePress 静态站点生成器，由 Vite + Vue 驱动，适合搭建文档站点。\u003C\u002Fp>\n\u003Cp>\u003Cstrong>核心能力\u003C\u002Fstrong>：\u003C\u002Fp>\n\u003Cul>\n\u003Cli>配置侧边栏、导航栏、主题\u003C\u002Fli>\n\u003Cli>编写带 Vue 组件的 Markdown 文档\u003C\u002Fli>\n\u003Cli>带 Props 表格和 Live Demo 的组件文档模板\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3 id=\"4-4-bun-runtime\">4.4 bun-runtime\u003C\u002Fh3>\n\u003Cp>\u003Cstrong>简介\u003C\u002Fstrong>：Bun 作为运行时、包管理器、打包器和测试运行器的使用指导。Anthropic 官方 Claude Code 插件之一。\u003C\u002Fp>\n\u003Cp>\u003Cstrong>核心能力\u003C\u002Fstrong>：\u003C\u002Fp>\n\u003Cul>\n\u003Cli>包安装速度是 npm\u002Fpnpm 的 25-30 倍\u003C\u002Fli>\n\u003Cli>内置 TypeScript 和 JSX 支持，零配置\u003C\u002Fli>\n\u003Cli>CI 从 npm 切换到 Bun 后，构建时间从数分钟缩短到数十秒\u003C\u002Fli>\n\u003Cli>Bun 与 Node 原生模块的兼容性注意事项及 workaround\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Chr>\n\u003Ch2 id=\"五-实用工具-skills-4-款\">五、实用工具 Skills（4 款）\u003C\u002Fh2>\n\u003Ch3 id=\"5-1-better-icons\">5.1 better-icons\u003C\u002Fh3>\n\u003Cp>\u003Cstrong>简介\u003C\u002Fstrong>：Agent Skills 生态的 Iconify 搜索工具，覆盖 200+ 图标库。支持自然语言搜索：描述「moon icon with stars」即可获取多个候选 SVG，无需知道图标名称或浏览图标库。\u003C\u002Fp>\n\u003Ch3 id=\"5-2-find-skills\">5.2 find-skills\u003C\u002Fh3>\n\u003Cp>\u003Cstrong>简介\u003C\u002Fstrong>：Agent Skills 的「搜索引擎」。根据你的需求描述，自动从 claude-plugins.dev 等注册中心的数千个 Skills 中检索并推荐合适的 Skill。社区版本的 skills-discovery 已被安装 6.5K 次，支持跨平台（Claude Code、Cursor、Codex 等）。\u003C\u002Fp>\n\u003Ch3 id=\"5-3-skill-creator\">5.3 skill-creator\u003C\u002Fh3>\n\u003Cp>\u003Cstrong>简介\u003C\u002Fstrong>：Anthropic 官方出品的 Skill 创建工具（\u003Ca href=\"http:\u002F\u002FSKILL.md\">SKILL.md\u003C\u002Fa> 引导式生成器），来自 anthropics\u002Fskills 仓库。Claude Code 中位于 \u003Ccode>document-skills@anthropic-agent-skills\u003C\u002Fcode> 插件内。\u003C\u002Fp>\n\u003Cp>Anthropic 官方指南给出了 5 步创建流程：\u003C\u002Fp>\n\u003Col>\n\u003Cli>明确需求：这个 Skill 解决什么具体问题？（好例子：「从 PDF 中提取财务数据并格式化为 CSV」 坏例子：「帮我处理财务」）\u003C\u002Fli>\n\u003Cli>写 name：小写加连字符（如 \u003Ccode>pdf-editor\u003C\u002Fcode>、\u003Ccode>brand-guidelines\u003C\u002Fcode>）\u003C\u002Fli>\n\u003Cli>写 description：description 是唯一影响 Skill 触发判断的字段，需要包含具体动词、触发场景和能力边界\u003C\u002Fli>\n\u003Cli>写 \u003Ca href=\"http:\u002F\u002FSKILL.md\">SKILL.md\u003C\u002Fa> 主体：使用 Markdown 标题、列表、代码块的层次化结构\u003C\u002Fli>\n\u003Cli>上传并验证：放入 \u003Ccode>.agents\u002Fskills\u002F\u003C\u002Fcode> 目录自动生效\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>\u003Cstrong>社区评价\u003C\u002Fstrong>：“Skill Creator 在整个生态中的角色好比 Webpack 之于前端——虽然你手动也能写 \u003Ca href=\"http:\u002F\u002FSKILL.md\">SKILL.md\u003C\u002Fa>，但用它创建可以确保格式合规、触发条件准确、评估标准完整。”\u003C\u002Fp>\n\u003Ch3 id=\"5-4-slidev\">5.4 slidev\u003C\u002Fh3>\n\u003Cp>\u003Cstrong>简介\u003C\u002Fstrong>：Slidev 面向开发者的 Web 幻灯片 Skill，用 Markdown + Vue 组件制作演示文稿。支持代码高亮、逐行动画、演讲者模式、录屏和 PDF 导出。\u003C\u002Fp>\n\u003Chr>\n\u003Ch2 id=\"六-安装与管理\">六、安装与管理\u003C\u002Fh2>\n\u003Ch3 id=\"安装方式\">安装方式\u003C\u002Fh3>\n\u003Cp>Agent Skills 的安装因平台而异，但都极为简单：\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Claude Code\u003C\u002Fstrong>：\u003C\u002Fp>\n\u003Cpre>\u003Ccode>\u002Fplugin marketplace add anthropics\u002Fskills\n\u002Fplugin install document-skills@anthropic-agent-skills\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cstrong>Cursor \u002F Codex \u002F OpenCode 等共享平台\u003C\u002Fstrong>（安装到 \u003Ccode>.agents\u002Fskills\u002F\u003C\u002Fcode>）：\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-bash\">npx skills-installer add @anthropics\u002Fclaude-code\u002Ffrontend-design\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cstrong>\u003Ca href=\"http:\u002F\u002FClaude.ai\">Claude.ai\u003C\u002Fa>\u003C\u002Fstrong>：付费计划用户的所有 Skills 自动内置可用。\u003C\u002Fp>\n\u003Ch3 id=\"管理原则\">管理原则\u003C\u002Fh3>\n\u003Cul>\n\u003Cli>\u003Cstrong>按需安装，7-10 个为最佳范围\u003C\u002Fstrong>：Skills 越多，触发匹配精度越低\u003C\u002Fli>\n\u003Cli>\u003Cstrong>设计类 + 编码类搭配\u003C\u002Fstrong>：每个前端项目建议至少 2 个设计类 Skill + 核心框架 Skill\u003C\u002Fli>\n\u003Cli>\u003Cstrong>定期审查\u003C\u002Fstrong>：项目结束后移除不再相关的领域 Skill\u003C\u002Fli>\n\u003Cli>\u003Cstrong>善用 find-skills\u003C\u002Fstrong>：遇到新需求先搜索，大概率有现成方案\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Chr>\n\u003Ch2 id=\"七-使用心得与总结\">七、使用心得与总结\u003C\u002Fh2>\n\u003Ch3 id=\"skills-的核心价值-上下文专业化\">Skills 的核心价值：上下文专业化\u003C\u002Fh3>\n\u003Cp>Skills 机制最大的价值不是替代 Prompt，而是在需要时提供\u003Cstrong>刚好够用的领域知识\u003C\u002Fstrong>。同一个「写 Vue 组件」的任务，加载 vue + vue-best-practices 后 AI 自动使用 TypeScript 类型注解、\u003Ccode><script setup>\u003C\u002Fcode> 语法、类型安全的 props 定义——而这些规则不需要你每次写进 Prompt。\u003C\u002Fp>\n\u003Cp>Anthropic 官方将 Skills 定位为"可复用的专业知识包"，而非一次性 Prompt。这个定位非常精准：Skills 的本质是把反复使用的专业指导封装为按需加载的模块，避免每次都从零描述业务规范。\u003C\u002Fp>\n\u003Ch3 id=\"设计-skills-的独特价值\">设计 Skills 的独特价值\u003C\u002Fh3>\n\u003Cp>frontend-design + impeccable + design-taste-frontend 这一设计 Skill 链的使用，让开发者——即使是"非设计师"——也能产出有辨识度的界面。其中 impeccable 的 \u003Ccode>\u002Faudit\u003C\u002Fcode> 和 \u003Ccode>\u002Fcritique\u003C\u002Fcode> 命令尤为实用：焦点管理、空状态引导、加载骨架屏、按钮层级权重——这些容易被忽略的细节，AI 在 Skill 加持下能够系统性检查。\u003C\u002Fp>\n\u003Ch3 id=\"工具链标准化的长期收益\">工具链标准化的长期收益\u003C\u002Fh3>\n\u003Cp>vite-plus 和 bun-runtime 这类工具 Skills 让项目配置从"翻阅文档 + StackOverflow"变成自动对齐标准。标准化工作流的核心价值不在"少写几行配置"，而在\u003Cstrong>保证一致性\u003C\u002Fstrong>——新成员拉取代码后，开发体验与老成员完全一致。\u003C\u002Fp>\n\u003Ch3 id=\"黄金法则\">黄金法则\u003C\u002Fh3>\n\u003Col>\n\u003Cli>\u003Cstrong>不要贪多\u003C\u002Fstrong>：7-10 个 Skill 是最佳范围\u003C\u002Fli>\n\u003Cli>\u003Cstrong>设计+编码搭配\u003C\u002Fstrong>：每个前端项目至少配 2 个设计类 + 核心框架 Skill\u003C\u002Fli>\n\u003Cli>\u003Cstrong>定期清理\u003C\u002Fstrong>：完成对应阶段后移除不再需要的领域 Skill\u003C\u002Fli>\n\u003Cli>\u003Cstrong>链式调用\u003C\u002Fstrong>：设计类 Skills 配合使用效果远超单独使用\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Ch3 id=\"最终建议\">最终建议\u003C\u002Fh3>\n\u003Cp>Agent Skills 生态正在快速发展——从 Anthropic 2025 年 10 月发布 Skills 机制，到 12 月开放为标准（\u003Ca href=\"http:\u002F\u002Fagentskills.io\">agentskills.io\u003C\u002Fa>），再到 2026 年社区涌现数百个插件和数千个 Skills，不过短短半年。\u003C\u002Fp>\n\u003Cp>如果你刚开始接触 Agent Skills，强烈建议从 \u003Cstrong>vue + vue-best-practices + frontend-design + impeccable\u003C\u002Fstrong> 四件套开始——这四款的组合体验最成熟、社区验证最充分。当你熟悉了它们的运作方式后再逐步扩展到其他领域 Skills。\u003C\u002Fp>\n","2026-06-15",[11,12,13,14,15,16],"agent","skills","AI","效率工具","前端","Vue",false,[19,22,33,45,55,62,69,76,83,90,100,109,119,128,136,144,153,162,171,181,188,198,204,211,217,226,233,240,248,258,267,276,286,296,306,314,324,335,345,354,362,368,376,384,392,400,408,415],{"slug":4,"title":5,"description":6,"pub_date":9,"tags":20,"draft":17,"word_count":21},[11,12,13,14,15,16],4169,{"slug":23,"title":24,"description":25,"pub_date":26,"tags":27,"draft":17,"word_count":32},"linux-kernel-skeleton-struct-funcptr-container_of","Linux 内核骨架：struct、函数指针与 container_of","读懂 Linux 内核源码的三件套：巨大的 struct 组合代替继承、函数指针表实现虚派发、container_of 宏从嵌入成员找回完整对象。","2026-05-09",[28,29,30,31],"linux","kernel","C","container_of",1369,{"slug":34,"title":35,"description":36,"pub_date":37,"tags":38,"draft":17,"word_count":44},"astro-complete-guide-2025","Astro 5 深度剖析：Islands 架构原理、构建优化与 Cloudflare Workers 边缘部署","从编译器视角解析 Astro 5 的 Islands 架构实现原理，Content Layer API 的 Vite 插件机制，Server Islands 的流式渲染，以及如何在 Cloudflare Workers + D1 边缘环境下榨干性能。","2026-05-08",[39,40,41,42,43],"astro","frontend","cloudflare","performance","architecture",3663,{"slug":46,"title":47,"description":48,"pub_date":49,"tags":50,"draft":17,"word_count":54},"llm-prompt-engineering","Prompt Engineering 实战：让 LLM 真正听话的技巧","System prompt 怎么写、Few-shot 怎么设计、Chain-of-Thought 原理，以及常见失败模式和调试方法。","2026-05-03",[51,52,53],"ai","llm","工程实践",1723,{"slug":56,"title":57,"description":58,"pub_date":49,"tags":59,"draft":17,"word_count":61},"rag-system-design","RAG 系统设计：从 naive 到 production-ready","Retrieval-Augmented Generation 不只是「向量数据库 + LLM」，分块策略、召回质量、重排序、缓存才是工程核心。",[51,60,52,53],"rag",1613,{"slug":63,"title":64,"description":65,"pub_date":49,"tags":66,"draft":17,"word_count":68},"git-advanced-workflow","Git 进阶工作流：rebase、cherry-pick、bisect 的正确使用","merge 会了，但 rebase 总搞错？bisect 找 bug 提交？interactive rebase 整理历史？这篇一次说清楚。",[67,53],"git",1396,{"slug":70,"title":71,"description":72,"pub_date":49,"tags":73,"draft":17,"word_count":75},"docker-practical-guide","Docker 实战：从会用到用好","会 docker run 不够，Dockerfile 最佳实践、多阶段构建、Compose 编排、镜像瘦身才是日常真正需要的。",[74,28,53],"docker",1268,{"slug":77,"title":78,"description":79,"pub_date":49,"tags":80,"draft":17,"word_count":82},"anthropics-skills-guide","anthropics\u002Fskills：Anthropic 官方 Agent Skills 仓库解析","Anthropic 官方开源的 Agent Skills 标准仓库，127k stars，解析 SKILL.md 规范、17 个示例 skill 的设计模式，以及如何在 Claude Code \u002F Claude.ai \u002F API 中使用",[51,81,11,12],"Claude",2090,{"slug":84,"title":85,"description":86,"pub_date":49,"tags":87,"draft":17,"word_count":89},"karpathy-claude-code-guidelines","Karpathy 的 LLM 编码批评与 CLAUDE.md 最佳实践","基于 Andrej Karpathy 对 LLM 编程助手的观察，forrestchang 提炼出一个 CLAUDE.md 文件，4 条原则解决 AI 编码的典型失控问题：乱猜假设、过度设计、乱改代码、目标不清",[51,81,88,53],"Claude Code",2699,{"slug":91,"title":92,"description":93,"pub_date":49,"tags":94,"draft":17,"word_count":99},"typescript-advanced-patterns","TypeScript 高级模式：让类型系统为你工作","基础 TS 会了但类型总是 any？条件类型、映射类型、模板字面量类型、infer 关键字才是 TS 的真正威力。",[95,96,97,98],"typescript","类型系统","前端工程","高级模式",1419,{"slug":101,"title":102,"description":103,"pub_date":49,"tags":104,"draft":17,"word_count":108},"linux-performance-tuning","Linux 性能调优实战：从 top 到 perf 的完整工具链","遇到性能问题不知道从哪下手？这篇建立系统化的排查思路，从 CPU\u002F内存\u002FIO\u002F网络逐层分析。",[28,105,106,107],"性能","运维","系统编程",1524,{"slug":110,"title":111,"description":112,"pub_date":49,"tags":113,"draft":17,"word_count":118},"python-functional-programming","Python 函数式编程：map\u002Ffilter\u002Freduce 之外","Python 不是纯函数式语言，但 functools、itertools、偏函数、闭包这些工具用好了能让代码简洁一个量级。",[114,115,116,117],"python","函数式","闭包","装饰器",1867,{"slug":120,"title":121,"description":122,"pub_date":49,"tags":123,"draft":17,"word_count":127},"python-oop-guide","Python 面向对象：__init__ 之外你需要知道的","Python OOP 不只是 class + __init__，魔术方法、描述符、元类才是真正的武器。",[114,124,125,126],"OOP","面向对象","魔术方法",1792,{"slug":129,"title":130,"description":131,"pub_date":49,"tags":132,"draft":17,"word_count":135},"python-data-structures","Python 内置数据结构深度解析","list、dict、set、tuple 不只是数据容器，搞懂它们的底层实现和时间复杂度，才能写出高性能 Python。",[114,133,105,134],"数据结构","算法",1517,{"slug":137,"title":138,"description":139,"pub_date":49,"tags":140,"draft":17,"word_count":143},"python-basics-quick-start","Python 快速上手：写给有编程基础的人","已经会其他语言，想快速掌握 Python 的语法特性和思维方式，这篇是捷径。",[114,141,142],"入门","基础",1607,{"slug":145,"title":146,"description":147,"pub_date":49,"tags":148,"draft":17,"word_count":152},"python-dataclass-pydantic","Python dataclass vs Pydantic：数据类选型指南","dataclass 是标准库的轻量选择，Pydantic v2 是带验证的重武器，什么时候用哪个，这篇说清楚。",[114,149,150,151],"dataclass","pydantic","数据验证",1323,{"slug":154,"title":155,"description":156,"pub_date":49,"tags":157,"draft":17,"word_count":161},"python-asyncio-practical","Python asyncio 实战：从回调地狱到协程优雅","asyncio 是 Python 异步编程的核心，搞懂 event loop、Task、gather 这些概念才能写出真正高效的异步代码。",[114,158,159,160],"asyncio","并发","网络编程",1258,{"slug":163,"title":164,"description":165,"pub_date":49,"tags":166,"draft":17,"word_count":170},"python-type-hints-guide","Python 类型注解完全指南：从入门到实践","Python 3.5+ 引入类型注解，配合 mypy\u002Fpyright 让 Python 也能享受静态类型检查的好处。",[114,167,168,169],"typescript-style","type-hints","工具链",1102,{"slug":172,"title":173,"description":174,"pub_date":175,"tags":176,"draft":17,"word_count":180},"pwa-install-update-button","PWA 踩坑：为什么安装按钮从来不出现","从 beforeinstallprompt 到 Service Worker waiting，把 PWA 的安装与更新提示真正做对","2026-05-02",[177,178,179],"pwa","javascript","web",1683,{"slug":182,"title":183,"description":184,"pub_date":185,"tags":186,"draft":17,"word_count":187},"openclaw-vs-hermes-agent","OpenClaw vs Hermes Agent：两个本地优先 Agent 的设计差异","OpenClaw（Novita AI）和 Hermes Agent（Nous Research）都是本地运行的个人 AI Agent，但在记忆系统、技能学习、运行环境和模型生态上走了不同的路。深入对比两种架构的核心差异。","2026-05-01",[51,11,52],1679,{"slug":189,"title":190,"description":191,"pub_date":185,"tags":192,"draft":17,"word_count":197},"cpp-random-design-patterns","C++ 设计模式实战：RAII、观察者、工厂","用现代 C++（C++17\u002F20）实现三种高频设计模式：RAII 资源管理、观察者模式事件系统、工厂模式插件架构。每种模式给出问题场景、实现代码和真实工程案例。",[193,194,195,196],"cpp","设计模式","c++17","工程",2613,{"slug":199,"title":200,"description":201,"pub_date":185,"tags":202,"draft":17,"word_count":203},"data-structures-fundamentals","数据结构基础：从数组到红黑树","系统梳理常用数据结构的核心原理、时间复杂度和适用场景。数组、链表、栈、队列、哈希表、二叉树、堆、图，每种结构附实现要点和 C++ 代码片段。",[133,134,193,142],3004,{"slug":205,"title":206,"description":207,"pub_date":208,"tags":209,"draft":17,"word_count":210},"ai-agent-what-is","什么是 AI Agent？从 LLM 到自主执行","LLM 本身是无状态问答机，Agent 是什么让它’动’起来的？本文深入解析 Agent 的四个核心能力、ReAct 框架、工具调用原理，以及主流框架横向对比。","2026-04-30",[51,11,52],2116,{"slug":212,"title":213,"description":214,"pub_date":208,"tags":215,"draft":17,"word_count":216},"ai-agent-memory","AI Agent 的记忆系统：从上下文窗口到长期记忆","深入拆解 AI Agent 的四种记忆类型、上下文窗口压缩策略、RAG 向量检索原理，以及三种典型失败模式和工程选型建议。",[51,11,60],2052,{"slug":218,"title":219,"description":220,"pub_date":208,"tags":221,"draft":17,"word_count":225},"network-proxy-vpn-guide","代理与翻墙技术原理：从 HTTP 代理到现代协议","深入解析代理与 VPN 的本质区别，梳理从 SOCKS5 到 Shadowsocks、V2Ray\u002FXray、Hysteria2 的协议演进，以及机场订阅的技术本质。",[222,223,224],"网络","代理","协议",2148,{"slug":227,"title":228,"description":229,"pub_date":208,"tags":230,"draft":17,"word_count":143},"algorithm-binary-search","二分查找：永远写不对？记住这个模板","彻底搞清楚二分查找的边界问题：闭区间和左闭右开两套模板、三道经典 LeetCode 题目完整 C++ 实现，以及二分答案的进阶思路。",[134,231,232,193],"二分查找","leetcode",{"slug":234,"title":235,"description":236,"pub_date":208,"tags":237,"draft":17,"word_count":239},"algorithm-sliding-window","滑动窗口算法：从暴力到 O(n) 的思维跃迁","系统讲解滑动窗口算法的核心模板、适用题型，配合三道经典 LeetCode 题目的完整 C++ 实现，彻底理解双指针收缩思路。",[134,238,232,193],"滑动窗口",1943,{"slug":241,"title":242,"description":243,"pub_date":208,"tags":244,"draft":17,"word_count":247},"network-clash-config","Clash \u002F Mihomo 配置详解：规则、策略组与分流","深入解析 Clash\u002FMihomo 的核心配置结构，包括代理节点、策略组类型、规则优先级、DNS fake-ip 模式，以及一份实用的完整配置模板。",[222,245,223,246],"clash","配置",1292,{"slug":249,"title":250,"description":251,"pub_date":252,"tags":253,"draft":17,"word_count":257},"hid-hotplug","HID 设备热插拔检测：从 udev 到 node-hid","在 Linux 上用 node-hid + usb 库实现可靠的 USB HID 设备热插拔检测，踩坑记录","2026-04-28",[193,254,28,255,256],"hid","nodejs","electron",2039,{"slug":259,"title":260,"description":261,"pub_date":262,"tags":263,"draft":17,"word_count":266},"electron-ipc-types","Electron IPC 类型安全：从 any 到完全类型化","用 TypeScript 泛型封装 Electron IPC，彻底消灭 any，preload 契约集中管理","2026-04-25",[256,95,264,265],"ipc","vue",1446,{"slug":268,"title":269,"description":270,"pub_date":271,"tags":272,"draft":17,"word_count":275},"element-plus-popover-hide","手动关闭多个 el-popover（不用 v-model:visible）","通过 ref + Reflect.get 调用 hide() 方法手动关闭 Element Plus Popover，解释 Vue3 Proxy 导致无法直接调用实例方法的原因。","2024-10-25",[265,273,274],"element-plus","vue3",1321,{"slug":277,"title":278,"description":279,"pub_date":280,"tags":281,"draft":17,"word_count":285},"vite-vue3-ts-elementplus-pinia","用 Vite+（vp）从零搭建 Vue3 + TypeScript + Element Plus + Pinia + Vue Router","使用 Vite+ 统一工具链（vp）一条命令搭建 Vue3 全家桶，涵盖按需导入、Pinia store、路由配置，以及常见坑的解决方案。","2024-08-27",[265,282,95,273,283,284],"vite","pinia","vite-plus",1960,{"slug":287,"title":288,"description":289,"pub_date":290,"tags":291,"draft":17,"word_count":295},"cef-lnk2038-iterator-debug-level","CEF LNK2038：解决 _ITERATOR_DEBUG_LEVEL 不匹配错误","分析 CEF（Chromium Embedded Framework）集成时出现的 LNK2038 _ITERATOR_DEBUG_LEVEL 链接错误，从根本原因到解决方案的完整指南。","2024-05-07",[193,292,293,294],"CEF","Visual Studio","链接错误",1509,{"slug":297,"title":298,"description":299,"pub_date":300,"tags":301,"draft":17,"word_count":305},"npm-electron-install-fix","彻底解决 npm 安装 Electron 失败的问题","分析 npm install electron 失败的根本原因（下载二进制超时\u002F被墙），通过国内镜像（npmmirror）彻底解决，并介绍多种备选方案和常见错误排查。","2024-03-01",[256,302,303,304],"npm","前端工具链","国内镜像",1494,{"slug":307,"title":308,"description":309,"pub_date":310,"tags":311,"draft":17,"word_count":313},"git-out-of-memory","解决 git 报错：Fatal: Out of memory, malloc failed","分析 git 大仓库操作时出现 Out of memory malloc failed 的根本原因，通过调整 pack.windowMemory、http.postBuffer 和 git repack 彻底解决。","2024-01-31",[67,28,312],"工具",2244,{"slug":315,"title":316,"description":317,"pub_date":318,"tags":319,"draft":17,"word_count":323},"vmware-tools-install","在 VMware 虚拟机中安装 open-vm-tools 完整指南","详解 VMware Tools 的作用、open-vm-tools 与官方 VMware Tools 的区别，以及在 Ubuntu 虚拟机中安装并生效的完整步骤和常见问题排查。","2023-11-21",[320,28,321,322],"VMware","Ubuntu","虚拟机",2523,{"slug":325,"title":326,"description":327,"pub_date":328,"tags":329,"draft":17,"word_count":334},"load-balancing-algorithms","负载均衡算法完全指南：从轮询到一致性哈希","系统梳理静态与动态负载均衡算法，涵盖轮询、随机、权重、IP Hash、一致性 Hash、最少连接、最快响应等，并对比 Nginx、Dubbo、Spring Cloud LoadBalancer 的实现差异。","2023-11-15",[330,331,332,333],"分布式","负载均衡","Nginx","微服务",1764,{"slug":336,"title":337,"description":338,"pub_date":339,"tags":340,"draft":17,"word_count":344},"win-cw2a-ca2w","ATL 字符串转换：CW2A 与 CA2W 完全指南","详解 ATL 宏 CW2A\u002FCA2W 在 Unicode 与 ANSI 之间的字符串转换用法、头文件依赖、USES_CONVERSION 宏的作用与常见陷阱。","2023-06-09",[193,341,342,343],"windows","ATL","字符串",1665,{"slug":346,"title":347,"description":348,"pub_date":339,"tags":349,"draft":17,"word_count":353},"csharp-sendmessage-cpp","C# 通过 SendMessage 向 C++ 窗口发送消息与字符串","使用 P\u002FInvoke 调用 user32.dll 的 SendMessage，从 C# 发送自定义 WM_USER 消息及字符串指针给 C++ 原生窗口，并在 C++ 侧正确接收和转换。",[350,193,341,351,352],"C#","互操作","PInvoke",1554,{"slug":355,"title":356,"description":357,"pub_date":358,"tags":359,"draft":17,"word_count":361},"win-postmessage-vector","Windows PostMessage 跨线程传递 std::vector 指针","通过 PostMessage 在 Windows 消息队列中传递 std::vector 指针，使用 reinterpret_cast 将指针装入 LPARAM，并在接收方正确释放内存。","2023-05-26",[193,341,360],"WinAPI",1823,{"slug":363,"title":364,"description":365,"pub_date":358,"tags":366,"draft":17,"word_count":367},"exe-dll-single-package","将 EXE 和 DLL 打包成单一可执行文件","介绍两种将 exe 和依赖 dll 打包成单文件的方案：Enigma Virtual Box 和 WinRAR 自解压，适合发布 Windows 桌面程序时简化分发流程。",[341,193,312],1619,{"slug":369,"title":370,"description":371,"pub_date":358,"tags":372,"draft":17,"word_count":375},"cpp-random-mt19937","C++ 现代随机数生成：用 mt19937 彻底告别 rand()","深入讲解为什么 rand() 不够用，以及如何用 C++11 的 \u003Crandom> 库正确生成高质量随机数，涵盖 mt19937、各种分布和线程安全。",[193,373,374],"c++11","random",1549,{"slug":377,"title":378,"description":379,"pub_date":380,"tags":381,"draft":17,"word_count":383},"win-startup-registry","C++ 实现程序开机自启动：注册表方式详解","通过操作 Windows 注册表 Run 键实现程序开机自启动，包括 HKCU 与 HKLM 区别、完整封装代码、工作目录问题和 UAC 权限处理。","2022-12-26",[341,193,382],"registry",1201,{"slug":385,"title":386,"description":387,"pub_date":388,"tags":389,"draft":17,"word_count":391},"mfc-cstring-wparam","MFC 中 CString 与 WPARAM 之间的转换","详解 MFC 消息传递中 CString 无法直接强转为 WPARAM 的原因，以及两种正确的转换方案，并介绍结构体指针传递的正确姿势。","2022-11-25",[390,193,341],"mfc",1546,{"slug":393,"title":394,"description":395,"pub_date":396,"tags":397,"draft":17,"word_count":399},"duilib-static-build","正确编译 Duilib 静态库：避免 ATL 依赖和链接错误","详解如何用 DuiLib_Static.vcxproj 编译 Duilib 静态库，解决 VARIANT 未定义、Unicode 配置不匹配和 ATL 依赖等常见问题。","2022-08-24",[193,398,341,390],"duilib",2639,{"slug":401,"title":402,"description":403,"pub_date":404,"tags":405,"draft":17,"word_count":407},"mfc-dpi-adaptive","MFC 界面自适应不同分辨率","MFC 对话框程序实现控件和字体随分辨率自动缩放的完整方案，附 DPI Awareness 配置说明","2022-08-17",[390,193,341,406],"dpi",1414,{"slug":409,"title":410,"description":411,"pub_date":412,"tags":413,"draft":17,"word_count":414},"mfc-drag-window","MFC 无标题栏窗口客户区拖动：三种方法对比","MFC 对话框去掉标题栏后如何实现拖动移动窗口，三种方案完整实现与适用场景分析","2022-08-16",[390,193,341],1633,{"slug":416,"title":417,"description":418,"pub_date":419,"tags":420,"draft":17,"word_count":422},"algorithm-number-complement","整数的补数：位运算掩码解法","LeetCode 476 题，用掩码 XOR 实现整数补数，附 C++\u002FPython\u002FJava 三种实现及补数与补码的区别","2021-03-08",[134,421,232],"位运算",1374,[]]