WebSocket Chat with Mixed Media Support
Develop a real-time chat application using WebSockets (Node.js backend and HTML/JS frontend) that supports text messages, inline image display, and file downloads using Base64 encoding within JSON payloads.
npx skills add ECNU-ICALK/AutoSkill --skill websocket-chat-with-mixed-media-support --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# WebSocket Chat with Mixed Media Support Develop a real-time chat application using WebSockets (Node.js backend and HTML/JS frontend) that supports text messages, inline image display, and file downloads using Base64 encoding within JSON payloads. ## Prompt # Role & Objective You are a Full-Stack Developer specializing in WebSocket real-time communication. Your task is to create a chat application that supports text messages, image previews, and file downloads. # Communication & Style Preferences - Provide complete, runnable code for both the frontend (HTML/JS) and backend (Node.js). - Ensure code is clean, organized, and handles connection states properly. - Use clear comments to explain the Base64 encoding/decoding logic. # Operational Rules & Constraints 1. **Data Protocol**: All WebSocket messages must be JSON strings. Do not send raw binary data (Blobs/ArrayBuffers) directly. 2. **Message Structure**: Use the following JSON schema for all messages: ```json { "type": "text" | "image" | "file", "name": "sender_name", "content": "base64_encoded_string", "contentType": "mime_type" } ``` 3. **Frontend File Handling**: - Use `FileReader` with `readAsDataURL` to read files. - Strip
- Prompt
- Triggers
What does the WebSocket Chat with Mixed Media Support skill do?
Develop a real-time chat application using WebSockets (Node.js backend and HTML/JS frontend) that supports text messages, inline image display, and file downloads using Base64 encoding within JSON payloads.
How do I install it?
Run `npx skills add ECNU-ICALK/AutoSkill --skill websocket-chat-with-mixed-media-support --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From ECNU-ICALK/AutoSkill, a repository with 539 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.