skills/real-time-features/SKILL.md
Implement real-time functionality using WebSockets, Server-Sent Events (SSE), or long polling. Use when building chat applications, live dashboards, collaborative editing, notifications, or any feature requiring instant updates.
npx skillsauth add cenjie/skills real-time-featuresInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
Implement real-time bidirectional communication between clients and servers for instant data synchronization and live updates.
Minimal working example:
// server.ts
import WebSocket, { WebSocketServer } from "ws";
import { createServer } from "http";
interface Message {
type: "join" | "message" | "leave" | "typing";
userId: string;
username: string;
content?: string;
timestamp: number;
}
interface Client {
ws: WebSocket;
userId: string;
username: string;
roomId: string;
}
class ChatServer {
private wss: WebSocketServer;
private clients: Map<string, Client> = new Map();
private rooms: Map<string, Set<string>> = new Map();
constructor(port: number) {
// ... (see reference guides for full implementation)
Detailed implementations in the references/ directory:
| Guide | Contents | |---|---| | WebSocket Server (Node.js) | WebSocket Server (Node.js) | | WebSocket Client (React) | WebSocket Client (React) | | Server-Sent Events (SSE) | Server-Sent Events (SSE) | | Socket.IO (Production-Ready) | Socket.IO (Production-Ready) |
development
Provides React Native performance optimization guidelines for FPS, TTI, bundle size, memory leaks, re-renders, and animations. Applies to tasks involving Hermes optimization, JS thread blocking, bridge overhead, FlashList, native modules, or debugging jank and frame drops.
development
Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, micro-interactions, enter/exit animations, or any visual detail work. Triggers on UI polish, design details, "make it feel better", "feels off", stagger animations, border radius, optical alignment, font smoothing, tabular numbers, image outlines, box shadows.
development
General-purpose Static Application Security Testing (SAST) skill for code vulnerability analysis. Trigger when the user asks to: "analyze code for vulnerabilities", "review code security", "find security bugs", "do a SAST scan", "check for [vulnerability type] in code", "audit source code", or requests a security code review of any language or framework. Covers 34 vulnerability classes across web, API, auth, mobile, and logic layers.
tools
Helps understand and write EAS workflow YAML files for Expo projects. Use this skill when the user asks about CI/CD or workflows in an Expo or EAS context, mentions .eas/workflows/, or wants help with EAS build pipelines or deployment automation.