Clui Cc Claude Overlay
Install and configure Clui CC—a floating macOS overlay for Claude Code with tabs, permission hooks, voice, and a local skills marketplace.
Overview
Clui CC — Claude Overlay is an agent skill for the Build phase that sets up a floating macOS desktop UI for Claude Code with tabs, permissions, voice, and skills marketplace.
Install
npx skills add https://github.com/aradotso/trending-skills --skill clui-cc-claude-overlayWhat is this skill?
- Transparent floating macOS overlay on top of the authenticated Claude Code CLI with multi-tab sessions
- PreToolUse HTTP hooks power an in-overlay permission approval UI before tools run
- Voice input via Whisper CLI plus conversation history and a skills marketplace
- Local-only operation—no telemetry or cloud dependency per skill description
- Documented prerequisites table: macOS 13+, Node 18+, Python 3.10+, Claude CLI, Whisper for voice
- Prerequisites table lists five stack requirements including macOS 13+, Node 18+, Python 3.10+, Claude CLI, and Whisper
Adoption & trust: 1.2k installs on skills.sh; 31 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You run Claude Code in plain terminals and lack a fast way to manage sessions, approve tool use, or use voice without constant context switching.
Who is it for?
Indie developers on macOS 13+ who want a persistent, multi-tab Claude Code overlay with explicit permission approval.
Skip if: Windows or Linux setups, headless CI agents, or teams that forbid local native module builds and GUI overlays.
When should I use this skill?
Triggers include set up clui cc, floating overlay for Claude Code, permission approval UI, multi-tab sessions, and voice input configuration on macOS.
What do I get? / Deliverables
You have Clui CC configured on macOS with authenticated Claude CLI, optional Whisper voice, and overlay features for tabs, permissions, and local skill browsing.
- Verified toolchain versions and install commands for Clui CC dependencies
- Configured overlay workflow: tabs, permission PreToolUse hooks, and optional voice
- Local skills marketplace usage notes aligned to authenticated Claude CLI
Recommended Skills
Journey fit
Desktop agent ergonomics and CLI overlay setup are Build work when you standardize how you drive Claude Code day to day. The skill is entirely about Claude Code host UI and hooks—not app frontend or production ops—so agent-tooling is the right shelf.
How it compares
macOS desktop shell around the Claude CLI—not an MCP server and not a cross-platform IDE extension guide.
Common Questions / FAQ
Who is clui-cc-claude-overlay for?
Solo builders on macOS who use Claude Code daily and want a floating overlay with sessions, permissions, and voice input.
When should I use clui-cc-claude-overlay?
During Build agent-tooling setup when you install or configure Clui CC, permission hooks, multi-tab workflow, or voice for Claude Code.
Is clui-cc-claude-overlay safe to install?
The skill describes a local overlay with no telemetry; still review the Security Audits panel on this Prism page and audit PreToolUse HTTP hooks before approving tools.
SKILL.md
READMESKILL.md - Clui Cc Claude Overlay
# Clui CC — Claude Code Desktop Overlay > Skill by [ara.so](https://ara.so) — Daily 2026 Skills collection. Clui CC wraps the Claude Code CLI in a transparent, floating macOS overlay with multi-tab sessions, a permission approval UI (PreToolUse HTTP hooks), voice input via Whisper, conversation history, and a skills marketplace. It requires an authenticated `claude` CLI and runs entirely local — no telemetry or cloud dependency. --- ## Prerequisites | Requirement | Minimum | Notes | |---|---|---| | macOS | 13+ | Overlay is macOS-only | | Node.js | 18+ | LTS 20 or 22 recommended | | Python | 3.10+ | Needs `setuptools` on 3.12+ | | Claude Code CLI | any | Must be authenticated | | Whisper CLI | any | For voice input | ```bash # 1. Xcode CLI tools (native module compilation) xcode-select --install # 2. Node.js via Homebrew brew install node node --version # confirm ≥18 # 3. Python setuptools (required on Python 3.12+) python3 -m pip install --upgrade pip setuptools # 4. Claude Code CLI npm install -g @anthropic-ai/claude-code # 5. Authenticate Claude Code claude # 6. Whisper for voice input brew install whisper-cli ``` --- ## Installation ### Recommended: App installer (non-developer) ```bash git clone https://github.com/lcoutodemos/clui-cc.git # Then open the clui-cc folder in Finder and double-click install-app.command ``` On first launch macOS may block the unsigned app — go to **System Settings → Privacy & Security → Open Anyway**. ### Developer workflow ```bash git clone https://github.com/lcoutodemos/clui-cc.git cd clui-cc npm install npm run dev # Hot-reloads renderer; restart for main-process changes ``` ### Command scripts ```bash ./commands/setup.command # Environment check + install deps ./commands/start.command # Build and launch from source ./commands/stop.command # Stop all Clui CC processes npm run build # Production build (no packaging) npm run dist # Package as macOS .app → release/ npm run doctor # Environment diagnostic ``` --- ## Key Shortcuts | Shortcut | Action | |---|---| | `⌥ + Space` | Show / hide the overlay | | `Cmd + Shift + K` | Fallback toggle (if ⌥+Space is claimed) | --- ## Architecture ``` UI prompt → Main process spawns claude -p → NDJSON stream → live render → tool call? → permission UI → approve/deny ``` ### Process flow 1. Each tab spawns `claude -p --output-format stream-json` as a subprocess. 2. `RunManager` parses NDJSON; `EventNormalizer` normalizes events. 3. `ControlPlane` manages tab lifecycle: `connecting → idle → running → completed/failed/dead`. 4. Tool permission requests arrive via HTTP hooks to `PermissionServer` (localhost only). 5. Renderer polls backend health every 1.5 s and reconciles tab state. 6. Sessions resume with `--resume <session-id>`. ### Project structure ``` src/ ├── main/ │ ├── claude/ # ControlPlane, RunManager, EventNormalizer │ ├── hooks/ # PermissionServer (PreToolUse HTTP hooks) │ ├── marketplace/ # Plugin catalog fetch + install │ ├── skills/ # Skill auto-installer │ └── index.ts # Window creation, IPC handlers, tray ├── renderer/ │ ├── components/ # TabStrip, ConversationView, InputBar, … │ ├── stores/ # Zustand session store │ ├── hooks/ # Event listeners, health reconciliation │ └── theme.ts # Dual palette + CSS custom properties ├── preload/ # Secure IPC bridge (window.clui API) └