frontend-development

What problem does it solve?

This Skill provides a comprehensive, opinionated reference and operational instructions to accelerate building and maintaining the Vue 3 + TypeScript frontend for the AutomationOne IoT framework, reducing integration errors and ensuring consistent patterns for components, stores, WebSocket contracts, and testing.

Core Features & Use Cases

• Component & Template Conventions: Standard component scaffold, props/events typing, lifecycle patterns, and styling guidance with Tailwind.
• State & Realtime Patterns: Pinia store architecture, WebSocket service patterns (subscriptions, reconnect, rate-limiting) and Axios interceptors with token refresh.
• Dashboard & UX Building Blocks: GridStack dashboard editor patterns, drag-and-drop zone management, Sensor/Actuator cards, and composables for common behaviors.
• Testing & Deployment: Vitest + MSW testing conventions, Vite config, Docker dev/prod targets, and CI-friendly build/test recommendations.
• Use Case Example: Onboard a new developer to implement a SensorCard connected to sensor_data WebSocket events, register it in the esp store, and add an editable widget to the custom dashboard.

Quick Start

Ask the frontend agent to scaffold a new Vue 3 TypeScript component that follows the project's component template, registers with the esp store, and subscribes to the sensor_data WebSocket event.