How do I install the Create Component skill?

Run npx skillmds@latest add tencentblueking/create-component in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Create Component skill do?

创建组件，新建组件，生成组件 It is listed under Web & Frontend on SkillMD.

Is Create Component safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Create Component?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Create Component free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Create Component?

tencentblueking (@tencentblueking) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Create Component

Name: Create Component
Author: tencentblueking

创建组件，新建组件，生成组件

tencentblueking 059d34a 697 B Updated Sep 17, 2026

Web & Frontend

Install

Press C to copy

$ npx skillmds@latest add tencentblueking/create-component

Installs into ~/.claude/skills (or .claude/skills inside a project). Restart Claude Code to pick it up.

Download SKILL.md

＋ Add to collection

README badge

[![SkillMD](https://skillmd.com/badge/tencentblueking/create-component.svg)](https://skillmd.com/skills/tencentblueking/create-component)

Trust & safety

Audits pending

Not yet audited · commit 059d34a

Works with: Claude Code Claude.ai OpenAI Codex +

File contents

组件路径与文件命名

目录位置

通用组件：src/components/<component-name>/Index.vue
业务组件：放在所属业务目录下，如 src/views/db-manage/<db>/<feature>/components/

命名规则

组件目录：kebab-case，如 cluster-selector
组件入口文件：固定为 Index.vue
子组件文件：PascalCase，如 SubPart.vue
仅本组件使用的子组件，放在同级 components/ 目录下

结构示例

src/components/
  my-component/
    Index.vue          # 组件入口
    components/        # 子组件（可选）
      SubPart.vue

tencentblueking/blueking-dbm/tree/main/dbm-ui/frontend/.agents/skills/create-component commit 059d34a0f6

Frequently asked questions

npx skillmds@latest add tencentblueking/create-component