skills.rest
wot-ui
wot-uiOFFICIAL
Explore all skills by this author →
GitHub

create-demo-page

Automate component demo page creation under src/subPages/<component>/Index.vue.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams quickly create and standardize component demonstration pages, ensuring consistent organization across the project.

Core Features & Use Cases

  • Automates generation and restructuring of src/subPages/<component>/Index.vue demo pages.
  • Enforces two-layer grouping with demo-group and demo-group-item to showcase capabilities.
  • Supports reuse of a baseline template and promotes consistency across components.

Quick Start

Create or restructure the component demo page at src/subPages/<component>/Index.vue using the two-layer demo-group and demo-group-item structure.

Frequently Asked Questions about create-demo-page

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

FAQPage Schema
How do I create a standardized component demo page in Vue?▼

To create a component demo page, generate a file at src/subPages/<component>/Index.vue using a two-layer demo-group and demo-group-item structure to ensure consistent organization across your project.

What is the best way to organize UI component demos by category?▼

Organize component demos by grouping them into five core categories—Type, State, Variant, Style, and Special Style—using demo-group and demo-group-item layers for clear, structured showcases.

Does Wot UI support automated restructuring of existing demo pages?▼

Yes, you can restructure existing demo pages in Wot UI by applying this skill to regenerate and reorganize the src/subPages/<component>/Index.vue file into the standardized two-layer grouping layout.

Can I add custom groups beyond the five core categories in my component demos?▼

Yes, while the skill enforces five core categories—Type, State, Variant, Style, and Special Style—it also supports adding optional groups as needed to fit your specific component capabilities.

How do I ensure consistent file layout across multiple component demos?▼

Ensure consistent file layout by enforcing a standardized structure at src/subPages/<component>/Index.vue, reusing a baseline template with demo-group and demo-group-item layers for every component.

Related Skills

Explore More Design & Creative Skills→
wot-uiwot-ui
284

generate-theme

Generate a single-file SCSS theme for Wot UI with fixed color tokens.

Official
Intermediate
pch007pch007
1

image

Render SVG and PNG images from JSON render specs using Satori.

Community
Advanced
wot-uiwot-ui
284

create-component

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

Official
Intermediate
SensLiaoSensLiao

qa-component-behavior

Automate UI component testing for React, Vue, Svelte, and Angular with Testing Library and Storybook.

Community
Intermediate