message-components-creator

Standardize Vue3 chat message components by enforcing a uniform MessageComponents-* naming convention and separating component-specific UI state into dedicated stores. This ensures consistent structure and reduces refactor risks across the frontend codebase.

Set up isolated debugging by creating per-component mock cases and wiring a DevPage registry-based debugging interface. This enables automatic component discovery and renders debugging interfaces with consistent structure for seamless iteration.

Decouple chat message component state into a dedicated Pinia store to reduce coupling and enforce centralized state management. Splitting component-specific UI state under chat-message-store minimizes dependencies and streamlines frontend refactoring workflows.

Refactoring frontend message components with this Skill requires no external dependencies. It operates within the existing Vue3 and Pinia tech stack to enforce naming conventions, generate mocks, and wire DevPage debugging without additional packages.

Add mock demonstrations by creating corresponding mocks under the chat-message-mock directory for each new component. Relying on DevPage auto-discovery ensures these mocks render debugging interfaces automatically, enabling isolated testing.