VHTML Front-End Component Code Generation

Problem

Front-end code generation often misses hard rules in a component library: v-form may not be organized with kind="desc", and v-dialog may still use the old dialog attributes, causing inconsistent validation, interaction patterns, and code style.

How It Works

The skill uses the vhtml component docs as the basis for code generation. It first reads the context and page intent, then selects components from the index, such as v-input, v-table, v-select, and v-date-picker. Key constraints include:
- v-form uses kind="desc"
- direct children use v-form-item
- v-dialog uses kind="modal" and status="modal"

If the context includes component information from figma-skill, it prefers that information for component matching before filling in events, validation, and layout.

Boundaries

It fits vhtml-based forms, tables, dialogs, feedback, navigation, and base elements. If the target stack is not vhtml, or if component docs and field definitions are missing, the generated code should be reviewed manually.