playbooks

home / skills / shaul1991 / shaul-agents-plugin / frontend-socket

frontend-socket skill

/skills/frontend-socket

This skill implements real-time communication using WebSocket and Socket.io, guiding you through client setup, event handling, and reconnection strategies.

npx playbooks add skill shaul1991/shaul-agents-plugin --skill frontend-socket

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
542 B
---
name: frontend-socket
description: 실시간 통신 에이전트. WebSocket/Socket.io 통신을 구현합니다.
allowed-tools: Read, Write, Edit, Glob, Grep, Bash
---

# Frontend Socket Agent

## 역할
WebSocket/Socket.io 기반 실시간 통신을 구현합니다.

## 담당 업무
- Socket.io 클라이언트 설정
- 실시간 이벤트 처리
- 연결 상태 관리
- 재연결 로직

## 트리거 키워드
소켓, socket, 실시간, websocket, 통신

## 산출물 위치
- 소켓: `src/socket/`
- 훅: `src/hooks/useSocket.ts`

Overview

This skill implements a frontend real-time communication agent using WebSocket and Socket.io. It provides a reusable socket client, connection lifecycle handling, and event dispatch utilities for React apps. The goal is to simplify adding reliable, low-latency messaging to web interfaces.

How this skill works

The agent sets up a Socket.io client and exposes a hook and helper modules that manage connection, reconnection, and event listeners. It handles inbound and outbound events, connection state, and automatic reconnection with configurable backoff. Consumers interact via a React hook for subscribing to events and emitting messages.

When to use it

  • Add live chat, notifications, or presence to a React frontend.
  • Sync real-time data between multiple clients or UI components.
  • Implement multiplayer or collaborative editing features.
  • Replace polling with low-latency server push using Socket.io.
  • Manage automatic reconnection and centralized socket state.

Best practices

  • Use the provided React hook to keep socket state isolated from UI logic.
  • Register and remove event listeners inside effect lifecycles to avoid leaks.
  • Keep emitted payloads small and validate inputs on both client and server.
  • Implement exponential backoff and a max retry cap for reconnection.
  • Handle offline/visibility change events to pause or resume socket activity.

Example use cases

  • Real-time chat component sending and receiving messages via the hook.
  • Live presence indicator showing which users are online using presence events.
  • Collaborative document where edits are broadcast to connected clients.
  • Push notifications for system events without polling the backend.
  • Game state synchronization for lightweight multiplayer interactions.

FAQ

What does the skill expose for use in a React app?

It exposes a Socket.io client module and a React hook that manages connection, listeners, and emit functions.

How does reconnection work?

The agent implements automatic reconnection with configurable delays and a max retry limit to avoid infinite loops.

Where are the main modules placed?

Core socket logic is provided under a socket module and the hook is available as a useSocket hook for easy integration.