add-new-component

What problem does it solve?

It removes uncertainty and repetitive manual steps when adding standardized, reusable components to the project's common components folder by providing a clear checklist, file templates, naming rules, TypeScript typing guidance, documentation format, and required test page conventions.

Core Features & Use Cases

• Standardized scaffolding: Defines folder layout with index.vue, types.ts, and index.md and enforces kebab-case folder names for predictable imports and auto-registration.
• TypeScript and props guidance: Prescribes exporting Props interfaces with JSDoc, using withDefaults and defineProps in script setup, and naming conventions for types.
• Documentation and test pages: Requires a usage document and a dedicated test page under src/pages/test-use to demonstrate all props and scenarios.
• Real-world use: Ideal for creating cross-page UI elements such as form-section-title, activity-actions, activity-info, and z-paging-loading that must be typed, documented, and demoed.

Quick Start

Use the add-new-component skill to scaffold a new reusable component named form-section-title in src/components/common with a types file, an index.md usage document, and a test page under src/pages/test-use.