Token导航 LogoToken导航TokenDH.com
中转站排行榜
开发需要联网github未标认证来源可访问许可证需确认审计提醒

unhead-vue-skilld（unhead Vue skilld 开发）

Agent Skill

用于辅助前端页面、组件、样式和交互逻辑的开发与维护。它适合让 Agent 生成或审查 React、Next.js、Vue、Tailwind、CSS 等相关代码，整理组件结构，或定位布局和性能问题。使用时需要结合项目现有设计系统、路由和构建方式，避免只生成孤立片段；涉及页面改动时，应配合本地预览和构建检查确认视觉效果。

总安装

1,152

周安装

48

GitHub Stars

156

下载量

384
CodexClaudeCursorGemini CLI

安装说明

本站只整理中文说明和来源信息，不托管安装包，也不代用户安装。

GitHub

来源数

2

许可证

unknown

最后核验

2026-05-01

来源状态

来源可访问

安装方式

通过对话安装

复制提示词发给支持本地命令或 Skills 的 AI 助手，先确认命令和权限，再让它执行。

请帮我安装这个 Agent Skill：unhead-vue-skilld（unhead Vue skilld 开发）
来源仓库：https://github.com/harlan-zw/vue-ecosystem-skills
仓库路径：skills/unhead-vue-skilld
安装命令：
npx skills add https://github.com/harlan-zw/vue-ecosystem-skills --skill unhead-vue-skilld
安装前请先检查当前环境是否支持对应 CLI，并向我确认将要执行的命令、安装目录、联网范围和文件读写权限；确认后再执行。

命令行安装

复制命令到本机终端执行。该命令会通过 npx skills 从第三方来源获取 Skill；本站只展示命令，不托管安装包，也不自动执行。

skills.shnpx skills
npx skills add https://github.com/harlan-zw/vue-ecosystem-skills --skill unhead-vue-skilld

简介

用于辅助前端页面、组件、样式和交互逻辑的开发与维护，适合生成或审查 Vue 相关代码。

  • 支持组件结构整理、布局优化和性能问题定位，适用于 Tailwind、CSS 等场景。
  • 通过 npx skills add 命令从指定 GitHub 仓库安装并使用。
  • 使用时需结合项目设计系统与构建方式，避免生成孤立片段；页面改动应配合预览确认效果。
  • unhead-vue-skilld 属于开发类 Skill，可作为该场景下的辅助能力补充。

SKILL.md

unjs/unhead @unhead/vue@3.0.4

Tags: next: 3.0.0-beta.9, beta: 3.0.0-beta.12, rc: 3.0.0-rc.4

References: Docs

API Changes

This section documents version-specific API changes — prioritize recent major/minor releases.

  • BREAKING: createHead() and createServerHead() removed from @unhead/vue root in v2 — use subpath imports: createHead() from @unhead/vue/client (SPA) or @unhead/vue/server (SSR); createServerHead() no longer exists source
  • BREAKING: Implicit context removed in v2 — setHeadInjectionHandler() deleted; useHead() called after an await in lifecycle hooks (e.g. onMounted) throws because Vue context is lost; wrap async data fetching before calling useHead() source
  • BREAKING: vmid and hid tag properties removed in v2 — use key for deduplication: script: [{key: 'my-key'}] source
  • BREAKING: children tag property removed in v2 — use innerHTML instead source
  • BREAKING: body: true tag property removed in v2 — use tagPosition: 'bodyClose' instead source
  • BREAKING: useScript() no longer returns a Promise in v2 — .then() calls silently fail; use .onLoaded(() =>...) instead source
  • BREAKING: useScript() API no longer accessible directly on the instance in v2 — must use .proxy explicitly: script.proxy.myFn() not script.myFn(); code compiles but calls are lost at runtime source
  • BREAKING: stub() option and script:instance-fn hook removed from useScript() in v2 — replace with custom use() logic source
  • BREAKING: Promise inputs in useHead() no longer auto-resolved in v2 — await the promise before passing, or opt in to PromisePlugin from @unhead/vue/plugins source
  • BREAKING: TemplateParamsPlugin and AliasSortingPlugin no longer built-in in v2 — must opt in: createHead({plugins: [TemplateParamsPlugin, AliasSortingPlugin]}) imported from @unhead/vue/plugins source
  • BREAKING: Capo.js tag sorting is now the default in v2 — breaks snapshot tests; opt out with createHead({disableCapoSorting: true}) source
  • DEPRECATED: useServerHead(), useServerHeadSafe(), useServerSeoMeta() — use useHead(), useHeadSafe(), useSeoMeta() with import.meta.server conditionals or {mode: 'server'} option for tree-shaking
  • NEW: <Head>, <Title>, <Meta>, <Link>, <Script> template components — import from @unhead/vue/components source
  • NEW: DeprecationsPlugin from @unhead/vue/plugins — re-enables removed vmid, hid, children, body properties for gradual migration to v2 source

Also changed: @unhead/schema deprecated — use @unhead/vue/types instead · createHeadCore deprecated — use createUnhead · Default SSR tags auto-inserted in v2 (charset, viewport, html lang="en"); disable with createHead({disableDefaults: true}) · CJS exports removed, ESM only · Vue 2 support removed · useHead() context lost after async in Vue lifecycle hooks — fetch data first, then call useHead()

Best Practices

  • Always use injectHead() from @unhead/vue instead of getActiveHead() from unhead in Vue components — injectHead() binds to the Vue component context (visible in onServerPrefetch), while getActiveHead() returns a shared cross-request instance that breaks in SSR. The maintainer confirmed this is the correct approach for Vue. source
  • Avoid calling useHead() inside watchers — each call creates a new entry rather than updating the existing one, leading to duplicate entries. Instead, pass reactive refs or computed getters directly to a single useHead() call at setup time so updates flow automatically. source
  • When useHead() must be called after async operations (e.g. inside onMounted), capture the head instance at setup time with injectHead() and pass it as {head} in the second argument — Vue's inject context is lost after await. For most cases, prefer the reactive state pattern: define useHead() once at setup with computed getters, and update a ref asynchronously. source
  • Use useHeadSafe() instead of useHead() whenever head input comes from user-provided or third-party sources — it enforces an attribute whitelist and strips script tags and event handlers, preventing XSS without requiring manual sanitization. source
  • Add the UnheadVite() plugin from @unhead/addons/vite to your Vite config for Vue apps — it tree-shakes server-only composables from the client build and transforms useSeoMeta() calls into raw useHead() calls, saving ~3kb. Nuxt configures this automatically; standalone Vue apps must opt in. source
  • Pass {mode: 'server'} to useHead() for static SEO metadata (Open Graph images, robots, schema.org) that doesn't need client-side reactivity — this strips the tags from the client bundle entirely. Similarly use {mode: 'client'} for analytics scripts to keep them out of SSR output. Caveat: titleTemplate must be included in both environments to avoid title flashing. source
  • Use tagPosition: 'bodyClose' for non-critical scripts (analytics, chat widgets) instead of head — this prevents render-blocking and improves page load performance. Use tagPriority: 'critical' | 'high' | 'low' aliases rather than raw numbers to preserve Capo.js-derived ordering weights that Unhead applies automatically. source
  • Use textContent instead of innerHTML for inline scripts and styles — textContent escapes HTML characters, preventing injection. Only use innerHTML when HTML entities are required, and sanitize the content yourself (e.g. with DOMPurify). For user-generated inline content, prefer useHeadSafe() which restricts scripts to type="application/json" only. source
  • Register TemplateParamsPlugin and define global templateParams (e.g. siteName, separator) once in your head instance setup rather than repeating them per page. These params work across all head tags — including og:title and meta descriptions — not just titleTemplate. Set %separator to a smart separator like · or —; it auto-removes when adjacent to empty content. source
  • Use InferSeoMetaPlugin to automatically derive og:title and og:description from existing title and description tags, eliminating manual duplication. Configure ogTitle with a transform function to strip the site name suffix from Open Graph titles (e.g. removing "| My Site" that titleTemplate appends). source

适合场景

01

用户想查找某类 Agent Skill 时

02

需要根据任务场景推荐可安装能力包时

03

需要对比不同来源的安装命令和来源信息时

能力概览

能力 1

按任务关键词查找相关 Skills

能力 2

展示可复制的安装命令

能力 3

保留来源站点、仓库和原始说明，方便继续核验

能力 4

展示第三方安全扫描或审计结果

安装后应在对应宿主中按原始 README 的触发条件使用；具体调用方式请以来源页面和 README 为准。

平台分布

Codex

38.93%
按下载量换算149

Claude

28.08%
按下载量换算108

Cursor

19.15%
按下载量换算74

Gemini CLI

9.28%
按下载量换算36

安全审计

Gen Agent Trust Hub

通过

Socket

可疑

Snyk

通过

权限和风险

需要联网

该 Skill 可能需要联网访问来源站点、仓库或外部 API；具体网络访问范围需要结合源码和 README 复核。

安装前确认

本站仅展示第三方公开信息，不托管安装包，不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。来源安全扫描存在 warning/failed 结果，不能写成本站确认安全。当前只有一个来源，正式发布前建议补源仓库或其他目录站核验。

来源信息

GitHub 仓库

github.com

/harlan-zw/vue-ecosystem-skills

SKILL.md 来源

github.com

/harlan-zw/vue-ecosystem-skills/tree/main/skills/unhead-vue-skilld

skills-sh

skills.sh

/harlan-zw/vue-ecosystem-skills/unhead-vue-skilld

继续浏览同类 Skills

更多开发 Skills（21,746）返回 Skills 目录

上一个 Skill

unformal-notifications（非正式通知）

unformal-notifications 用于补充开发相关能力，适合在 OpenClaw 中需要让 Agent 承接开发相关任务时使用。可结合来源仓库、安装命令和原始 README 继续核验具体用法。安装前建议确认权限范围、维护状态，以及是否会触发联网、命令执行或文件读写。

下一个 Skill

uniapp（uniapp 工具）

uniapp 用于补充开发相关能力，适合在 Local Agent 中需要让 Agent 承接开发相关任务时使用。可结合来源仓库、安装命令和原始 README 继续核验具体用法。安装前建议确认权限范围、维护状态，以及是否会触发联网、命令执行或文件读写。