comp-hub-create skill
Hand the comp-hub component spec to your AI assistant — one prompt generates a ready-to-upload component scaffold
ZIP · ~5 KB · includes SKILL.md
- name
- comp-hub-create
- description
- Scaffold comp-hub business components (index.vue for Vue, index.jsx for React, index.js for Web Components, each with demo + README + comp.json). Use when creating, uploading or publishing a comp-hub component.
When it kicks in
Your assistant loads comp-hub-create automatically once it detects these intents
Three steps to install
Download it, drop it into your assistant's skills folder, then just ask in plain language
Download and unzip
Download comp-hub-create.zip and unzip it to get the comp-hub-create folder
Drop into the skills folder
Copy the whole folder into your assistant's skills directory — works for CodeBuddy and Claude
# CodeBuddy
~/.codebuddy/skills/comp-hub-create/
# Claude Code
~/.claude/skills/comp-hub-create/Ask in plain language
Describe what you need in the chat; the assistant loads the skill and generates a compliant component
帮我创建一个 comp-hub 组件：用户排行榜Generated structure
The component name is the folder name and must be globally unique; the platform writes __id__ into comp.json
ComponentName/
├── index.vue # 入口文件（必需）
├── README.md # 组件文档（建议）
├── comp.json # 配置文件（自动生成 name + version + __id__）
├── main.js # UI 框架注册（可选）
├── demo/
│ ├── mini.vue # 小窗预览（列表页展示）
│ └── full.vue # 全屏预览（详情页展示）
└── assets/ # 静态资源（如有）ComponentName/
├── index.jsx # 入口文件（必需，须 default export）
├── README.md # 组件文档（建议）
├── comp.json # 配置文件（自动生成 name + version + __id__）
├── main.js # UI 库全局样式（可选）
├── demo/
│ ├── mini.jsx # 小窗预览（列表页展示）
│ └── full.jsx # 全屏预览（详情页展示）
└── assets/ # 静态资源（如有）MyElement/
├── index.js # 入口文件（必需）：注册自定义元素
├── README.md # 组件文档（建议）
├── comp.json # 配置文件（自动生成 name + version + __id__）
├── demo/
│ ├── mini.html # 小窗预览（须含 <script type="module">）
│ └── full.html # 全屏预览
└── screenshot_mini.png # 缩略图（平台无法自动截图，需自行放置）Web Component source must be plain JavaScript the browser can run directly (no TypeScript / JSX) and the preview HTML must contain at least one <script type="module">; the platform cannot auto-screenshot shadow DOM either, so place screenshot_mini.png yourself
Core rules
Hard constraints baked into the skill — generated code follows them automatically
Naming
Component names are globally unique; prefer the prefix form company-domain-component, PascalCase or kebab-case only
Relative asset paths
Always import assets with relative paths like ./assets/xxx.png — the @/ alias is not supported
Component entry
Vue requires index.vue; React entries are index.jsx / index.js / index.tsx and must have a default export; Web Components use index.js and must register a custom element
UI framework support
Vue and React: add main.js for a third-party UI library (Vue.use() for Vue 2, Vue.app.use() for Vue 3; React imports the library's CSS and other global side effects there); Web Components: just import it — no main.js
Demo files
demo/mini uses a fixed size plus the scaling API; demo/full simply inherits 100% width and height. React uses .jsx / .tsx; Web Components use .html with at least one <script type="module">
Styles and preprocessors
Vue supports SCSS / Less and should always be scoped; React imports css / scss / less with a relative path; Web Components scope styles inside the shadow root
Third-party dependencies
No bundling needed — import statements are scanned and matched automatically at preview time
Framework detection
No declaration needed — the platform probes the source: index.vue means Vue, index.jsx / .tsx means React, customElements.define( means Web Component; if none match you pick manually
import Vue from "vue";
import Antd from "ant-design-vue";
import "ant-design-vue/dist/antd.css";
Vue.use(Antd);import * as Vue from "vue";
import ArcoVue from "@arco-design/web-vue";
import "@arco-design/web-vue/dist/arco.css";
Vue.app.use(ArcoVue);// main.js —— 只被预览环境执行
import "antd/dist/reset.css";
// index.jsx —— 组件入口，使用方 import 的就是它
import { Card } from "antd";
import "./index.css";
export default function MyCard() {
return <Card>Hello</Card>;
}// index.js
import dayjs from "dayjs";
class MyElement extends HTMLElement {
connectedCallback() {
this.textContent = dayjs().format("YYYY-MM-DD");
}
}
customElements.define("my-element", MyElement);Automatic scaling for mini previews
Just fix the demo content to its design size (e.g. 320×240) — the platform measures it and scales-to-fit with contain, centered, with no scaling API in your code
For the mini preview only (demo/mini.vue / demo/mini.jsx / demo/mini.html). The legacy $onScaleChange / onScaleChange / window.compHub.onScaleChange have been removed — do not write subscriptions or null checks in demos.
<template>
<div class="mini-content">
<!-- 按 320×240 设计的内容 -->
</div>
</template>
<script setup></script>
<style scoped>
.mini-content {
width: 320px;
height: 240px;
overflow: hidden;
}
</style>Best practices
- The mini panel scales automatically; the full panel never scales (inherits width/height: 100%)
- Fix the root element to its design size (e.g. 320×240) + overflow: hidden; never use width: 100% (it measures the content's natural size and the scale drifts with the content)
- Content must really fit the fixed box — overflow is clipped, overflow: hidden is only a fallback
- The platform only does contain (proportional, fully visible, centered) and recalculates when the panel or content changes
Let AI write components for you
Install comp-hub-create, hand the repetitive work to your assistant, and just review the result