docs-page

Create or update component documentation pages in packages/ui/docs. Use when adding docs, demos, DocumentPage, usage.vue, or component doc routes.

安装方式

默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

直接命令不会经过审查 Prompt；运行前请先检查来源。

npx skills add https://github.com/indielayer/ui --skill docs-page

命令会保持在同一行。复制前请横向滚动并检查完整内容。

想先保存到本地？可下载 SkillsMP 当前能够提供的文件。

决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。

SKILL.md

来源说明 · 只读预览

name	docs-page
description	Create or update component documentation pages in packages/ui/docs. Use when adding docs, demos, DocumentPage, usage.vue, or component doc routes.
disable-model-invocation	true

Create packages/ui/docs/pages/component/<name>/index.vue:

const title, const description, const demos, const components
description: factual 1–2 sentences (~120–180 chars) — what it is and when to use it; avoid generic filler
Use double quotes for descriptions that contain apostrophes
Every demo needs a short description (sentence case) explaining what the example shows
Import demos and ?raw code for <document-page>
Set back / next to sibling folder names (preserve casing, e.g. inputGroup)
Demos use kebab-case: <x-button>

Add demo SFCs alongside (usage.vue, variants.vue, …).

Author API copy in the component SFC (not only on the docs page):

Add description on each prop option object (and shared factories in composables / variantBooleanProps)
On the plain <script> default export, add docs: { slots, emits, methods } string maps (same place as validators)
Reference: packages/ui/src/components/button/Button.vue
Live API tables read these via DocumentPage; pnpm gen:llms embeds them in public/md/component/*.md

From packages/ui:

pnpm gen:search
pnpm gen:llms   # writes llms.txt, llms-full.txt, and public/md/component/*.md
pnpm gen:sitemap

pnpm build:docs   # vite-ssg prerender
pnpm dev

Reference: packages/ui/docs/pages/component/button/index.vue