Codex Vue Component Scaffolding with Typed Props and Less
Create a Vue 3 component structure that follows the source project's TypeScript, named events and scoped Less conventions.
中文Install in Codex
Open a Vue 3 project in Codex with TypeScript and Less configured, and provide the component's props and events.
- Review `.agents/skills/component-generator/SKILL.md` and its requirements at the pinned GitHub commit.
- Create `.agents/skills/component-generator/` in your project and save the reviewed file as `.agents/skills/component-generator/SKILL.md`.
- Start Codex from that project's root, then type `$component-generator` and select the matching skill.
Example task
Plan the component file for this sample label control.
{"component":"LabelBadge","prop":"text:string","event":"remove","path":"src/components"}What to check
Use `src/components/LabelBadge.vue` with typed `text`, a `remove` event and scoped Less styling.
Original SKILL.md on GitHub · Updated
Frequently asked question
Do I need to add complex state logic in the scaffold?
Start with the component's current needs. Add state only when a real behavior requires it.