create-component

Generate Wot UI component skeletons with typings, Vue files, and styles.

284|31|Updated Jan 15, 2026
One-click install
npx skills add https://github.com/wot-ui/wot-ui --skill create-component-wot-ui
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: create-component
Source: https://github.com/wot-ui/wot-ui/tree/main/.agents/skills/create-component
Command: npx skills add https://github.com/wot-ui/wot-ui --skill create-component-wot-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Creating a new UI component from scratch in a large codebase with consistent structure and registration points is repetitive and error-prone.

Core Features & Use Cases

  • Auto-generates component directory and essential files (types.ts, wd-{组件名}.vue, index.scss) following the wot-ui baseline.
  • Provides a clear scaffold for further development, demo pages, tests, and docs via separate skills.
  • Use case: a developer adds a new wd-button to extend the component library with consistent typings and styling hooks.

Quick Start

Create a new component skeleton under src/uni_modules/wot-ui/components named wd-{组件名} and set up the base files.

Frequently Asked Questions about create-component

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I scaffold a new Vue component in a TypeScript project?

To scaffold a new Vue component in a TypeScript project, this tool automatically generates the component directory alongside base typings, Vue files, and SCSS styles. It ensures a consistent project structure and proper registration points for immediate integration.

What files are needed when creating a UI component from scratch?

When creating a UI component from scratch, you need a dedicated directory along with types.ts for typings, a .vue file for the template and logic, and index.scss for styles. The scaffolding process creates these files automatically to establish a clear baseline for further development.

Does the wot-ui component scaffold work with Vue and TypeScript?

Yes, the wot-ui component scaffold works with Vue and TypeScript by generating a standardized component skeleton under the wot-ui codebase. It targets component development by creating the necessary typings and Vue files following the shared baseline structure.

Why does manually creating UI components in a large codebase lead to errors?

Manually creating UI components in a large codebase leads to errors because the repetitive process of setting up consistent directory structures and registration points is highly error-prone. Automating the skeleton creation ensures baseline typings and styling hooks remain uniform across the project.

Can I generate demo pages and tests during the initial component scaffolding?

No, you cannot generate demo pages and tests during the initial component scaffolding. This process provides the clear component scaffold for further development, while demo pages, tests, and docs are handled via separate skills after the base files are ready.