MCPInstall

cmux-sidebar-builder

Build, inspect, or revise cmux custom sidebar views using the runtime SwiftUI-style interpreter. Use for sidebar vibe coding, custom sidebars in Bonsplit panes, left sidebar picker previews, interpreted Swift sidebars, /.config/cmux/sidebars/.swift, cmux docs sidebars, or Aziz's Swift interpreter work.

Installs
643
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/manaflow-ai/cmux-skills --skill cmux-sidebar-builder
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads cmux-sidebar-builder automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

cmux sidebar builder

Use this skill when the task is to create or modify a cmux custom sidebar view. These are user/agent-authored .swift files in ~/.config/cmux/sidebars/ rendered by cmux's runtime SwiftUI-style interpreter, not compiled app code. The primary dogfood surface is a normal Bonsplit pane tab opened with cmux sidebar open <name>; the left sidebar picker remains useful for previews.

Orientation

  • The original work is PR https://github.com/manaflow-ai/cmux/pull/5254 by Aziz Albahar.
  • The feature is opt-in behind the UserDefaults-backed key customSidebars.beta.enabled.
  • Custom sidebars live under ~/.config/cmux/sidebars/. They can be opened as normal Bonsplit pane tabs with cmux sidebar open <name> and appear in the left sidebar picker when the beta is enabled.
  • Start from the cmux app checkout docs: repo/docs/custom-sidebars.md.

Important cmux source entrypoints:

  • repo/Packages/CmuxSwiftRender/Sources/CmuxSwiftRender/SwiftViewInterpreter.swift
  • repo/Packages/CmuxSwiftRender/Sources/CmuxSwiftRender/ExpressionEvaluator.swift
  • repo/Packages/CmuxSwiftRender/Sources/CmuxSwiftRender/RenderNode.swift
  • repo/Packages/CmuxSwiftRenderUI/Sources/CmuxSwiftRenderUI/Sidebar/CustomSidebarView.swift
  • repo/Sources/ContentView.swift, around customSidebarsDirectory, customSidebarDataContext, and CustomSidebarView(...).
  • repo/Sources/Panels/CustomSidebarPanel.swift for the Bonsplit pane host.
  • repo/Sources/Workspace+CustomSidebarPane.swift and repo/Sources/TerminalController+CustomSidebarCommands.swift for the cmux sidebar open <name> path.

Follow-up implementation branches to inspect when needed:

  • origin/feat-interpreter-primitives for the broader supported SwiftUI-ish primitive surface.
  • origin/feat-sidebar-interpreter-isolation for the out-of-process crash-isolated interpreter worker.

Workflow

  1. Inspect the current app docs and interpreter surface before authoring:

    sed -n '1,220p' repo/docs/custom-sidebars.md
    rg -n "struct SwiftViewInterpreter|func evaluate|func parse|enum RenderNode|customSidebarDataContext|customSidebarsDirectory" repo/Packages/CmuxSwiftRender repo/Packages/CmuxSwiftRenderUI repo/Sources/ContentView.swift
    
  2. Create or edit the sidebar file in the user's config directory:

    mkdir -p ~/.config/cmux/sidebars
    $EDITOR ~/.config/cmux/sidebars/<name>.swift
    
  3. Stay inside the interpreted subset. Prefer simple SwiftUI-style expressions: VStack, HStack, Text, Image, Button, ForEach, conditionals, supported modifiers, and data from the provided context. Do not assume arbitrary Swift, imports, async work, filesystem access, networking, custom types, or compiled dependencies are available.

  4. Use the provided data context instead of shelling out. If the sidebar needs data that is not exposed, identify the missing field in customSidebarDataContext and treat adding it as an app code change in a cmux worktree.

  5. If you change app/runtime code, follow the cmux repo workflow: create a worktree, read repo-local instructions, localize user-facing strings, test appropriately, and reload with a tag before dogfood handoff. Config-only sidebar .swift edits do not require an app rebuild.

Authoring rules

  • Do not use cmux right-sidebar set <name> or right-sidebar configuration for custom sidebars. Custom sidebars should render in a Bonsplit pane via cmux sidebar open <name> when the user wants to see the sidebar next to their work.
  • The left sidebar picker is a preview/selection surface. Do not treat the right sidebar as a custom-sidebar host.
  • Do not use ExtensionKit unless the user explicitly asks for that surface.
  • Keep custom sidebar files small and inspectable. If a design gets complicated, split behavior into simple helper functions only if the interpreter supports them.
  • Make every visible action explicit through supported Button action payloads. Do not invent action ids without checking repo/Packages/CmuxSwiftRender/Sources/CmuxSwiftRender/ActionCommand.swift and app dispatch wiring.
  • Prefer real workspace, surface, notification, port, git, and progress fields from the cmux context. Avoid placeholder dashboards unless the task is only a mockup.
  • When a rendering failure happens, reduce to the smallest sidebar file that reproduces it, then compare against CmuxSwiftRender tests and corpus examples.

Verification

For config-only sidebars:

ls ~/.config/cmux/sidebars
cmux sidebar validate <name>
cmux sidebar open <name>

Do not change the user's selected/default sidebar as part of normal authoring. The original workspaces sidebar should remain the default unless the user explicitly asks to activate the custom sidebar.

After opening, verify the custom sidebar is a pane surface, not the right sidebar:

cmux identify --json --id-format both
cmux tree --workspace <workspace-ref> --json --id-format both
cmux right-sidebar set <name>   # should fail on current builds; do not use this for setup

For tagged dogfood, use the tag-bound dev CLI and socket, for example ~/.local/bin/cmux-dev --socket /tmp/cmux-debug-<tag>.sock sidebar open <name> --json, then verify the focused surface reports surface_type: customSidebar.

If the running cmux build supports it, reload valid custom sidebars without selecting one:

cmux sidebar reload --all

Editing a sidebar file alone should not be treated as a reload signal. Use the CLI reload command after writes are complete so half-written files do not replace a mounted sidebar.

Only when the user explicitly asks to activate the custom sidebar, validate and select it:

cmux sidebar select <name>

For older cmux builds without cmux sidebar, ask the user to pick the named sidebar from the left sidebar picker. Avoid defaults write for sidebar selection unless the user explicitly requests temporary local dogfood setup, and state that it is not a product default.

For interpreter or app changes, prefer focused package tests for CmuxSwiftRender plus the smallest real dogfood reload. Do not run local cmux xcodebuild ... test; use the project's remote or CI test guidance.

FAQ

What does the cmux-sidebar-builder skill do?

Build, inspect, or revise cmux custom sidebar views using the runtime SwiftUI-style interpreter. Use for sidebar vibe coding, custom sidebars in Bonsplit panes, left sidebar picker previews, interpreted Swift sidebars, /.config/cmux/sidebars/.swift, cmux docs sidebars, or Aziz's Swift interpreter work.

How do I install cmux-sidebar-builder?

Run npx skills add https://github.com/manaflow-ai/cmux-skills --skill cmux-sidebar-builder in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/cmux-sidebar-builder/ (personal) or .claude/skills/cmux-sidebar-builder/ (project).

Which AI agents can use cmux-sidebar-builder?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is cmux-sidebar-builder safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains cmux-sidebar-builder?

It is published by manaflow-ai in manaflow-ai/cmux-skills. It has 643 recorded installs.

More from manaflow-ai/cmux-skills

View all →

cmux-cli

manaflow-ai/cmux-skills

Comprehensive cmux CLI usage guide. Use when the user asks about cmux CLI, cmux --help, socket commands, command discovery, workspaces, panes, surfaces, browser CLI, hooks, feed, settings, or automation through the cmux command.

cmux-workspace

manaflow-ai/cmux-skills

Work inside the current cmux workspace and terminal. Use for cmux workspace, current workspace, caller surface, panes, surfaces, tagged reloads, socket targeting, and non-interfering cmux automation.

cmux-browser

manaflow-ai/cmux-skills

Automate the browser inside cmux. Use for cmux browser, browser surface, webview, current workspace browser, snapshot refs, DOM actions, waits, screenshots, cookies, storage, tabs, downloads, console, errors, and browser session state.

cmux-ref

manaflow-ai/cmux-skills

Interpret pasted cmux workspace, pane, surface, or window refs and IDs. Use for cmux-ref, cmux-id, workspaceref, workspaceid, paneref, paneid, surfaceref, surfaceid, windowref, or windowid context blocks.

718 installs

cmux-config

manaflow-ai/cmux-skills

Configure cmux through /.config/cmux/cmux.json: settings (appearance, sidebar, notifications, automation, browser, shortcuts, set/get/validate by JSON path), customization (tab bar buttons, plus-button click and right-click menus, custom actions/commands/menus, right sidebar), and sidebar workspace groups (anchor workspaces, group CLI/socket ops, per-cwd group config). Triggers: 'cmux config', 'cmux.json', 'change cmux setting', 'set in cmux', 'rebind a cmux shortcut', 'cmux-customize', 'customize cmux', 'tab bar button', 'add cmux action', 'workspace group', 'group sidebar', 'anchor workspace', 'workspaceGroups'.

cmux-artifact

manaflow-ai/cmux-skills

Create durable HTML walkthrough artifacts for cmux dogfood, verification, demos, evidence pages, artifact previews, and open helpful tabs or splits in the current cmux workspace.

Frontend & Design665 installs

Popular mobile skills

View category →

design-mobile-apps

designed-by-ai/skills

Design mobile app screens with Sleek, edit Sleek projects, and implement their designs in React Native or HTML.

Mobile1.1M installs

ios-design

uizze.sh

Design and review iOS UI/UX for iPhone apps in SwiftUI, UIKit, or React Native. Use for mobile app design, screen redesigns, navigation flows, typography, forms, keyboard and safe-area layout, and accessibility checks. Apply Apple Human Interface Guidelines and consult real product references through the optional Uizze connection.

Mobile416.5K installs

vercel-react-native-skills

vercel-labs/agent-skills

React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.

OfficialMobile256.7K installs

animate-expo

emilkowalski/skills

Build animations in React Native and Expo, making the decisions in the order that determines whether they feel right — should it animate, which thread it runs on, which properties, spring or timing, how the gesture hands off, how it degrades. Writes the implementation with Reanimated, Gesture Handler, Expo Router and expo-haptics. Use when animating anything in an Expo app, adding gestures, sheets, screen transitions, press feedback or haptics, or fixing motion that stutters on device. For web animation use animate.

Mobile140.1K installs

xcode-project-setup

firebase/agent-skills

Safely modifies Xcode projects (.pbxproj) to add Swift Packages and link files. Use this skill whenever an iOS project needs dependencies installed (e.g. Firebase, Alamofire).

OfficialMobile131.2K installs

firebase-remote-config-basics

firebase/agent-skills

Manages Firebase Remote Config templates, feature flags, loading strategies, and SDKs (Android, iOS). Use when downloading/deploying remoteconfig JSON templates, managing version history/feature flags, setting in-app defaults, fetchAndActivate(), real-time listeners, or SDK setup. Don't use for Firebase Hosting, Auth, Firestore, Data Connect, Crashlytics, or App Hosting.

OfficialMobile121.7K installs