skills.rest
Auto-one-Family
Auto-one-FamilyCOMMUNITY
Explore all skills by this author →
GitHub

frontend-development

Provide Vue 3 TypeScript patterns for components, Pinia stores, and WebSocket integration.

Updated Aug 23, 2026
Search Tags:#typescript#dashboard#iot#tailwind#vue3#websocket#pinia
One-click install
npx skills add https://github.com/Auto-one-Family/Automation-One --skill frontend-development-auto-one-family
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-development
Source: https://github.com/Auto-one-Family/Automation-One/tree/main/.claude/skills/frontend-development
Command: npx skills add https://github.com/Auto-one-Family/Automation-One --skill frontend-development-auto-one-family

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about frontend-development

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a Vue 3 IoT dashboard for ESP32 sensor data?▼

To build a Vue 3 IoT dashboard, use TypeScript component templates and Pinia stores to manage ESP32 sensor data. This provides standardized scaffolds for sensor cards, WebSocket subscriptions, and GridStack drag-and-drop layouts.

How do I implement WebSocket reconnection and subscription in a Vue 3 application?▼

Implement WebSocket reconnection in Vue 3 using defined service patterns for subscriptions and rate-limiting. This ensures stable real-time IoT data streams and automatic recovery when network connectivity drops.

What is the best way to manage state in a TypeScript Vue 3 dashboard?▼

The best way to manage state in a TypeScript Vue 3 dashboard is using Pinia store architecture. This provides strict type safety and structured state management for sensor and actuator data across UI components.

How do I set up Axios interceptors with token refresh for a Vue 3 frontend?▼

Set up Axios interceptors with token refresh by applying standard authentication patterns for the Vue 3 frontend. This automatically handles token expiration and retry logic for API requests without interrupting user sessions.

How do I create a drag-and-drop dashboard layout with GridStack in Vue 3?▼

Create a drag-and-drop dashboard layout with GridStack in Vue 3 by using provided dashboard editor patterns. This enables customizable widget zones and editable sensor cards within a strict TypeScript configuration.

How do I test Vue 3 components and WebSocket integrations using Vitest and MSW?▼

Test Vue 3 components and WebSocket integrations using Vitest and MSW testing conventions. This allows you to mock API requests and verify sensor data flows and component rendering in isolated environments.

Related Skills

Explore More Software Engineering Skills→
camptocampcamptocamp
3

vue-vite-setup

Bootstrap Vue 3 and Vite projects with Tailwind CSS and TypeScript.

Official
Intermediate
NicoVIIINicoVIII

add-devcontainer

Generate devcontainer configurations that pin tool versions and integrate with GitHub Actions.

Community
Advanced
daffy0208daffy0208
34

iot-developer

Integrate sensors and devices into IoT systems using MQTT and WebSocket communications.

Community
Intermediate
coreyjacoreyja
6

Frontend Components

Design reusable frontend components with TypeScript props and state management.

Community
Basic