Hand the component spec
to your AI assistant
comp-hub-create is a skill for AI coding assistants. Once installed, say “build me a stats card component” and the assistant generates a ready-to-upload scaffold that follows Comp-Hub's structure, naming and demo rules.
ZIP · about 4 KB · includes SKILL.md
The assistant loads it automatically
No commands to memorize. Mention “build a component” or “follow the comp-hub spec” and the skill takes over file generation.
“Build me a comp-hub component”
The assistant reads the rules, then writes the component folder, entry file and demos in one pass.
“Scaffold a component to spec”
You have a business requirement but no time to re-read the conventions. The skill applies its core hard rules one by one.
“Create a Web Component”
It generates plain JavaScript and a module script preview, avoiding TypeScript or JSX the browser cannot run.
Download, drop it in, ask
The skill is plain text plus SKILL.md — no runtime. CodeBuddy, Claude and any assistant with a skills directory can use it.
Download and unzip
Download the skill pack and unzip it. The folder contains SKILL.md and a few notes.
Drop into the skills directory
Copy the whole folder into your assistant's skills directory and restart the session.
Ask in plain language
Describe the component in chat. The assistant restates the rules first, then writes the files.
The component name is the folder name
The platform detects the framework and previews from this structure. A wrong structure does not fail loudly — it silently loses a demo, so the skill enforces it.
Naming
Folder name equals component name and must be globally unique. Prefer company-domain-component prefixes.
Asset paths
Always use relative paths such as ./assets/xxx.png. The @/ alias is not resolved at build time.
Web Component
Web Component source must be plain JavaScript the browser can run directly (no TypeScript or JSX), and the preview HTML must contain at least one module script. The platform cannot screenshot shadow DOM, so place thumbnail as screenshot_mini.png yourself.
Core hard rules inside the skill
These are the eight most frequently triggered. The assistant checks them while generating; you do not need to repeat them in the prompt.
Naming
Globally unique; prefer prefixes; PascalCase or kebab-case only.
Relative assets
Only ./assets/xxx; the @/ alias is forbidden.
Entry file
Vue uses index.vue; React uses index.jsx / tsx with a default export; Web Components use index.js and register a custom element.
UI libraries
Add main.js when a third-party library is needed: Vue 2 uses Vue.use(), Vue 3 uses app.use(); React imports styles there.
Demo files
mini uses a fixed design size; full inherits 100%; React uses jsx/tsx; Web Components use html with a module script.
Styles
Vue supports SCSS / Less and must be scoped; React imports by relative path; Web Components scope styles in the shadow root.
Third-party dependencies
No bundling required; imports are scanned and pre-bundled automatically.
Framework detection
index.vue means Vue, index.jsx / tsx means React, customElements.define means Web Components; otherwise you choose manually.
Just fix the content to its design size
Write a fixed width and height (for example 320×240). The platform measures it and scales-to-fit, centered, in the mini panel. No scaling API is needed in your code.
- The mini panel scales automatically; the full panel never scales
- Fix the root element to its design size plus overflow: hidden
- Use contain scaling only: proportional, fully visible, centered
- Do not use width: 100% — the scale drifts with the content
LEGACY $onScaleChange HAS BEEN REMOVED · do not subscribe or null-check it
Let AI write components for you.
Install comp-hub-create, hand the repetitive work to your assistant, and just review.