New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Create Demo Page

by wot-ui in wot-ui/wot-ui

为组件创建演示页面并统一组织结构。用户要求新建/重构组件 Demo、统一展示顺序或用 demo-group 与 demo-group-item 编排时调用。

MITAuto-check passedFrontend & Design

Install Create Demo Page

skills CLI
$ npx skills add wot-ui/wot-ui --skill create-demo-page -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install wot-ui/wot-ui create-demo-page --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/wot-ui/wot-ui.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/create-demo-page .claude/skills/create-demo-page && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
create-demo-page
GitHub stars
387
Token cost
~547 tokens
SKILL.md length
137 words
Files
1
Skills in repo
10
Repo updated
First seen
Licence
MIT

At a glance

为组件创建演示页面并统一组织结构。用户要求新建/重构组件 Demo、统一展示顺序或用 demo-group 与 demo-group-item 编排时调用。

  • Works in 5 steps: 组件类型（Type） → 组件状态（State） → 组件变体（Variant） → …
  • Frontend & Design work in your project
  • SKILL.md covers 职责边界, 何时使用, 目标输出 and 固定组织顺序, plus 8 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Create Demo Page is an agent skill from wot-ui/wot-ui. 为组件创建演示页面并统一组织结构。用户要求新建/重构组件 Demo、统一展示顺序或用 demo-group 与 demo-group-item 编排时调用。

Its SKILL.md is about 550 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design. It works with Vue.js. The repository describes itself as: 一个轻量、美观、AI友好的 uni-app 组件库。 The licence is MIT.

When your agent uses it

  • Frontend & Design work in your project

Example prompts

  • “/create-demo-page”

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  1. 组件类型（Type）
  2. 组件状态（State）
  3. 组件变体（Variant）
  4. 组件样式（Style）
  5. 特殊样式（Special Style）

What it can do on your machine

Read from SKILL.md and the folder at commit 58d027d. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are vue).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Create Demo Page loads about 547 tokens when it runs. Until then it costs about 24 tokens; SKILL.md has 137 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~24
When it runs · the whole SKILL.md, loaded when a task matches
~547

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from wot-ui/wot-ui at commit 58d027d, republished under its MIT licence (© wot-ui). 137 words, ~547 tokens.

Download SKILL.mdSave it as .claude/skills/create-demo-page/SKILL.md (or your agent's skills folder).
name
create-demo-page
description
为组件创建演示页面并统一组织结构。用户要求新建/重构组件 Demo、统一展示顺序或用 demo-group 与 demo-group-item 编排时调用。

组件演示页面编写技能

本技能用于在 wot-ui 中创建或重构组件演示页，输出统一、可迁移、可维护的示例结构。

默认遵循 wot-ui-component-baseline 中的共享约束。

职责边界

  • 本 Skill 只负责 src/subPages/<component>/Index.vue 及其演示组织。
  • 不负责 Markdown 文档表结构迁移。
  • 不负责纯文档 API 一致性审计。

何时使用

  • 用户要求“给某组件写 Demo 页”。
  • 用户要求“整理/重构示例页结构”。
  • 用户要求“统一演示顺序、标题口径、展示规范”。
  • 用户明确要求使用 demo-group 与 demo-group-item。

目标输出

  • 产出 src/subPages/<component>/Index.vue 的规范化演示结构。
  • 使用两层容器：
    • 第一层：demo-group（能力域）
    • 第二层：demo-group-item（能力切面）
  • 保证示例覆盖核心能力，并具备可复制到其他组件的组织模板。

固定组织顺序

按以下顺序编排分组：

  1. 组件类型（Type）
  2. 组件状态（State）
  3. 组件变体（Variant）
  4. 组件样式（Style）
  5. 特殊样式（Special Style）

按需分组（内部规则：仅在满足条件时启用；对外标题不标注“可选”）：

  • 内容形态（Content Form）：存在 icon/text/slot 形态差异时启用。
  • 布局能力（Layout）：存在 block/方向/密度/排列差异时启用。

条目编排规则

  • 单一变量原则：一个 demo-group-item 只突出一个核心变量。
  • 对照原则：优先同屏展示“默认 vs 变化态”。
  • 完整原则：关键能力至少包含正常态和边界态（如 disabled/loading）。
  • 顺序稳定：同类类型固定顺序 primary -> success -> info -> warning -> danger。
  • 语义标题：标题直接说明当前演示变量，避免模糊命名。

模板结构

vue
<template>
  <page-wraper>
    <view class="page-xxx">
      <demo-group title="组件类型">
        <demo-group-item title="类型">
          <!-- 示例 -->
        </demo-group-item>
      </demo-group>
    </view>
  </page-wraper>
</template>

实施步骤

  1. 盘点组件能力：props / slots / events / states / variants。
  2. 映射分组：先放入五个核心分组，再判断可选分组是否启用。
  3. 编排条目：每个 item 保持单变量，形成对照。
  4. 复用渲染：对重复矩阵使用数组 + v-for。
  5. 收敛样式：统一按钮间距与行间距，减少内联样式。
  6. 校验结果：确认示例覆盖、命名一致、页面无语法/类型错误。

数据驱动约定

  • 建议在 <script setup> 中声明：
    • typeItems
    • stateItems
    • variantItems
    • sizeItems
    • styleItems
    • 其他可选能力数据项
  • 使用 as const 固定字面量类型，保证模板推导稳定。

命名与文案约定

  • 分组标题优先使用规范词汇：组件类型、组件状态、组件变体、组件样式、特殊样式。
  • 按需分组标题直接写“内容形态”“布局能力”，不在标题后追加“（可选）”。
  • 条目标题尽量简短直述，不加“状态：/样式：/内容：/布局：”前缀，如“禁用”“加载”“镂空”“尺寸”。
  • 文案优先使用 $t()，临时中文文案控制在最小范围。

样式约定

  • 页面根类：.page-<component>
  • 公共行容器：.demo-row
  • 统一间距在页面 scoped 样式中维护，避免大段内联 style。

验收清单

  • 已使用 demo-group > demo-group-item 两层结构。
  • 分组顺序符合“核心五分类 + 条件可选分组”规则。
  • 核心能力未遗漏，且无明显重复。
  • 重复矩阵已数据驱动化。
  • 页面诊断与 lint 通过（至少校验当前文件）。

示例参考（Button）

  • src/subPages/button/Index.vue 可作为首个落地参考。

© wot-ui, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .agents/skills/create-demo-page of wot-ui/wot-ui.

Open the folder on GitHubat commit 58d027d

Compare with similar skills

Create Demo Page next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Create Demo Page compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Create Demo Page this skillwot-ui/wot-ui387—~547Automated safety check: PassMIT
Tailwindcss Developmentanonaddy/anonaddy4.9k10 repos~865Automated safety check: PassMIT
GSAP Core Animationgreensock/gsap-skills16k3 repos~3.7kAutomated safety check: PassMIT
GSAP in Vue, Nuxt and Sveltegreensock/gsap-skills16k3 repos~2.6kAutomated safety check: PassMIT
Vuetify Playgroundvuetifyjs/vuetify41k—~730Automated safety check: PassCustom licence
Boneyard0xGF/boneyard7.5k—~2.2kAutomated safety check: NotesMIT

Similar skills

  • Tailwindcss Development

    anonaddy/anonaddy

    Always invoke when the user's message includes 'tailwind' in any form.

    4.9k GitHub starsUsed in 10 repos~865 tokens
    Frontend & DesignAuto-check passed

  • GSAP Core Animation

    greensock/gsap-skills

    Covers the GSAP core API for tweens, easing, staggers, defaults and matchMedia, and when to choose GSAP over CSS animations or other JavaScript animation libraries.

    16k GitHub starsUsed in 3 repos~3.7k tokens
    Frontend & DesignAuto-check passed

  • GSAP in Vue, Nuxt and Svelte

    greensock/gsap-skills

    Shows how to use GSAP in Vue, Nuxt, Svelte and other lifecycle-based frameworks: create after mount, scope selectors to the component, and revert on unmount.

    16k GitHub starsUsed in 3 repos~2.6k tokens
    Frontend & DesignAuto-check passed

  • Vuetify Playground

    vuetifyjs/vuetify

    Maintains the Vuetify repo's local Playground.vue so contributors get a realistic reproduction and a short demo they can paste into a pull request description.

    41k GitHub stars~730 tokensUpdated today
    Frontend & DesignAuto-check passed

  • Boneyard

    0xGF/boneyard

    Use boneyard-js to add, configure, debug, or rebuild skeleton screens.

    7.5k GitHub stars~2.2k tokensUpdated 1 mo ago
    Frontend & DesignAuto-check: notes

  • Buefy Vue UI Components

    buefy/buefy

    Rules for writing Vue 3 templates with Buefy components on Bulma CSS: install options, prop conventions, b-field wrapping, tables, theming and dialogs.

    9.5k GitHub stars~8.2k tokensUpdated 1 mo ago
    Frontend & DesignAuto-check passed

More from wot-ui/wot-ui

All 10 skills in this repo

  • Create Component

    wot-ui/wot-ui

    在 wot-ui 项目中创建新组件骨架与必要注册点。用户要求从零创建组件源码、补齐 types.vue.scss 结构或注册全局组件类型时调用；不负责 Demo 页、测试和文档迁移。

    387 GitHub stars~2.1k tokensUpdated today
    Auto-check passed

  • Generate Scss Variables

    wot-ui/wot-ui

    为新组件或新特性快速生成符合设计系统规范的 SCSS 变量定义代码，或检查现有变量是否合规. An agent skill from wot-ui/wot-ui.

    387 GitHub stars~906 tokensUpdated today
    Auto-check passed

  • Generate Theme

    wot-ui/wot-ui

    为 wot-ui 生成单文件主题 SCSS，并在 App.vue 中挂载语义变量. An agent skill from wot-ui/wot-ui.

    387 GitHub stars~2.4k tokensUpdated today
    Auto-check passed

  • Optimize Page Styles

    wot-ui/wot-ui

    优化 subPages 演示页面中的样式，将硬编码的颜色、字号、间距、圆角等替换为 wot-ui 设计系统语义变量。允许直接使用已全局注入的 variable.scss Sass 变量，也允许使用 CSS 自定义属性；不需要额外引入 variable.scss。消除手写的暗色模式覆盖块，统一使用语义变量实现自适应主题。同时将 class 命名统一为 BEM 规范。

    387 GitHub stars~4.9k tokensUpdated today
    Auto-check passed

  • Vue Comment

    wot-ui/wot-ui

    统一 Vue 与 wot-ui 组件源码中的注释和命名规范。用户要求规范组件 Props 注释、函数命名、类型说明、变量命名或在创建组件后补齐代码注释时调用；不负责 Demo、测试和文档迁移。

    387 GitHub stars~965 tokensUpdated today
    Auto-check passed

  • Migrate Component Doc

    wot-ui/wot-ui

    迁移组件 Markdown 文档到新规范。用户明确要求迁移文档结构、重排 Demo 章节、合并 Attributes/Options 列、迁移最低版本标记或升级旧文档格式时调用；不用于仅做一致性核对。

    387 GitHub stars~610 tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Create Demo Page

What does Create Demo Page do?

为组件创建演示页面并统一组织结构。用户要求新建/重构组件 Demo、统一展示顺序或用 demo-group 与 demo-group-item 编排时调用。. Create Demo Page is an agent skill from wot-ui/wot-ui.

When should I use Create Demo Page?

Create Demo Page fits situations like: frontend & Design work in your project.

How do I install Create Demo Page in Claude Code?

Run `npx skills add wot-ui/wot-ui --skill create-demo-page -a claude-code`. Or copy the skill folder (.agents/skills/create-demo-page in wot-ui/wot-ui) into .claude/skills/create-demo-page in your project. Claude Code loads it when a task matches its description.

How do I install Create Demo Page in Codex?

Run `npx skills add wot-ui/wot-ui --skill create-demo-page -a codex`. Or copy the skill folder (.agents/skills/create-demo-page in wot-ui/wot-ui) into .agents/skills/create-demo-page in your project. Codex loads it when a task matches its description.

Can I use Create Demo Page in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add wot-ui/wot-ui --skill create-demo-page -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/create-demo-page, .gemini/skills/create-demo-page, .github/skills/create-demo-page and .opencode/skills/create-demo-page in your project.

What does Create Demo Page need to run?

SKILL.md names no scripts, command-line tools or credentials: Create Demo Page is instructions for the agent only.

Does Create Demo Page access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Create Demo Page safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Create Demo Page use?

Create Demo Page is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Create Demo Page use?

About 547 tokens (SKILL.md is roughly 2.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Create Demo Page?

Skills that share tags, products or a category with Create Demo Page: Tailwindcss Development (anonaddy/anonaddy, 4.9k stars), GSAP Core Animation (greensock/gsap-skills, 16k stars), GSAP in Vue, Nuxt and Svelte (greensock/gsap-skills, 16k stars) and Vuetify Playground (vuetifyjs/vuetify, 41k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Create Demo Page?

wot-ui (a GitHub organization) maintains it in wot-ui/wot-ui, which has 387 GitHub stars. The repository holds 10 skills in this directory. The repository was last updated on October 10, 2026.

Source: wot-ui/wot-ui on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.