← All skill packs

UI Design & Frontend Skills

Skill pack
3 skills0 selected
indianicSkills in this pack

Use when implementing any mock backend behaviour for Phases 1–3 — the BroadcastChannel-backed event bus, in-memory fixture stores, soft-lock timers, AI takeover state. Throwaway by design but must mirror the Socket.IO API so Phase 5 swap is mechanical.

English

Use when touching any WebRTC code during the mockup phase — local getUserMedia, peer connection, remote stream simulation, signalling stubs. The contract is: real local stream + faithfully-faked remote stream, so the code path is identical when real signalling lands in Phase 5.

English

Use when building any UI piece inside packages/widget — the embeddable vanilla-JS chat widget. Establishes the Shadow-DOM + tokens.css contract and bundle-size guardrails that keep the embed safe to drop on any host page.

English

Includes Mock State, Webrtc Mock, and Widget Component.

Install with
Claude CodeCodexCursorGitHub CopilotGemini CLI

Supported by the Atlas install prompt. Skill-specific requirements vary.

Pack stats

Skills3CategorygeneralStars0

What’s included

Mock State

Use when implementing any mock backend behaviour for Phases 1–3 — the BroadcastChannel-backed event bus, in-memory fixture stores, soft-lock timers, AI takeover state. Throwaway by design but must mirror the Socket.IO API so Phase 5 swap is mechanical.

Webrtc Mock

Use when touching any WebRTC code during the mockup phase — local getUserMedia, peer connection, remote stream simulation, signalling stubs. The contract is: real local stream + faithfully-faked remote stream, so the code path is identical when real signalling lands in Phase 5.

Widget Component

Use when building any UI piece inside packages/widget — the embeddable vanilla-JS chat widget. Establishes the Shadow-DOM + tokens.css contract and bundle-size guardrails that keep the embed safe to drop on any host page.

Quick start

  1. Choose your skills. Select individual skills above, or choose the entire pack.
  2. Copy the install prompt. Use Copy install prompt above the list.
  3. Send it to your agent. Paste into your coding agent’s chat. Your agent reviews the source and guides the setup.

Try it with your agent

After installation, start with a request like:

Example request
Use the Mock State skill to help with my task.
Ask me for the context you need before getting started.

Requirements & license

  • A coding agent that can access your project files and install skills.
  • Your agent checks each skill’s instructions, dependencies, and permissions during setup.
  • Reported license for the skills shown: MIT. The author’s terms apply.