Type Declarations
nubjs/nub
Add, audit, or update @nubjs/types declarations for Nub runtime APIs.
Create declarative modals using the modal library API. An agent skill from marcus/sidecar.
$ npx skills add marcus/sidecar --skill create-modal -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install marcus/sidecar create-modal --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/marcus/sidecar.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/create-modal .claude/skills/create-modal && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "create-modal" agent skill from https://github.com/marcus/sidecar/tree/main/.claude/skills/create-modal into .claude/skills/create-modal/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "create-modal", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/marcus/sidecar/tree/main/.claude/skills/create-modalType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add marcus/sidecar --skill create-modal -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install marcus/sidecar create-modal --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/marcus/sidecar.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.claude/skills/create-modal .agents/skills/create-modal && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "create-modal" agent skill from https://github.com/marcus/sidecar/tree/main/.claude/skills/create-modal into .agents/skills/create-modal/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "create-modal", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add marcus/sidecar --skill create-modal -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install marcus/sidecar create-modal --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/marcus/sidecar.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.claude/skills/create-modal .cursor/skills/create-modal && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "create-modal" agent skill from https://github.com/marcus/sidecar/tree/main/.claude/skills/create-modal into .cursor/skills/create-modal/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "create-modal", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/marcus/sidecar.git --path .claude/skills/create-modal--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add marcus/sidecar --skill create-modal -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install marcus/sidecar create-modal --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/marcus/sidecar.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.claude/skills/create-modal .gemini/skills/create-modal && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "create-modal" agent skill from https://github.com/marcus/sidecar/tree/main/.claude/skills/create-modal into .gemini/skills/create-modal/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "create-modal", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install marcus/sidecar create-modalInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add marcus/sidecar --skill create-modal -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/marcus/sidecar.git skills-src && mkdir -p .github/skills && cp -r skills-src/.claude/skills/create-modal .github/skills/create-modal && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "create-modal" agent skill from https://github.com/marcus/sidecar/tree/main/.claude/skills/create-modal into .github/skills/create-modal/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "create-modal", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add marcus/sidecar --skill create-modal -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install marcus/sidecar create-modal --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/marcus/sidecar.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.claude/skills/create-modal .opencode/skills/create-modal && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "create-modal" agent skill from https://github.com/marcus/sidecar/tree/main/.claude/skills/create-modal into .opencode/skills/create-modal/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "create-modal", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
create-modalCreate declarative modals using the modal library API. An agent skill from marcus/sidecar.
Create Modal is an agent skill from marcus/sidecar. Create declarative modals using the modal library API. Covers modal types (confirm, input, select, form), sections (Text, Buttons, Input, Textarea, Checkbox, Select, List, Combo, When, Custom), rendering with OverlayModal, and keyboard/mouse handling. Use when adding modals or dialogs to the application.
Its SKILL.md is about 2.6k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files, including reference files (for example `references/complete-example.md`).
The repository describes itself as: Use sidecar next to CLI agents for diffs, file trees, conversation history, and task management with td. The licence is MIT.
Read from SKILL.md and the folder at commit 3792a4e. It shows what the files ask for, not the result of running them.
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
No scripts in the folder and no shell commands in SKILL.md (its code samples are go).
From the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Create Modal loads about 2.6k tokens when it runs, and up to ~3.2k if it reads all its reference files. Until then it costs about 80 tokens; SKILL.md has 702 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
The full file from marcus/sidecar at commit 3792a4e, republished under its MIT licence (© marcus). 702 words, ~2,643 tokens.
.claude/skills/create-modal/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.Use the internal/modal package. The library handles keyboard navigation, mouse hit regions, hover states, and scrolling automatically.
import "github.com/marcus/sidecar/internal/modal"
// 1. Create the modal
m := modal.New("Delete Worktree?",
modal.WithWidth(58),
modal.WithVariant(modal.VariantDanger),
modal.WithPrimaryAction("delete"),
).
AddSection(modal.Text("Name: " + wt.Name)).
AddSection(modal.Spacer()).
AddSection(modal.Buttons(
modal.Btn(" Delete ", "delete", modal.BtnDanger()),
modal.Btn(" Cancel ", "cancel"),
))
// 2. Render in View
func (p *Plugin) View(width, height int) string {
background := p.renderListView(width, height)
rendered := p.myModal.Render(width, height, p.mouseHandler)
return ui.OverlayModal(background, rendered, width, height)
}
// 3. Handle input in Update
case tea.KeyMsg:
action, cmd := p.myModal.HandleKey(msg)
if action != "" {
return p.handleAction(action) // "delete", "cancel", etc.
}
return p, cmd
case tea.MouseMsg:
action := p.myModal.HandleMouse(msg, p.mouseHandler)
if action != "" {
return p.handleAction(action)
}
return p, nilThe modal must exist before input handling. Create an ensure function called in both View and Update:
func (p *Plugin) ensureMyModal() {
if p.targetItem == nil {
return // Required state missing
}
modalW := 50
if modalW > p.width-4 {
modalW = p.width - 4
}
if modalW < 20 {
modalW = 20
}
// Only rebuild if needed
if p.myModal != nil && p.myModalWidthCache == modalW {
return
}
p.myModalWidthCache = modalW
p.myModal = modal.New("Title", modal.WithWidth(modalW), ...).
AddSection(...)
}Call ensureModal() before the nil check in key handlers:
func (p *Plugin) handleMyModalKeys(msg tea.KeyMsg) tea.Cmd {
p.ensureMyModal() // CRITICAL: Before nil check
if p.myModal == nil {
return nil
}
action, cmd := p.myModal.HandleKey(msg)
// ...
}Without this, the first keypress after opening drops because View runs after Update in bubbletea.
m := modal.New(title string, opts ...Option)| Option | Description | Default |
|---|---|---|
WithWidth(int) | Modal width in characters | 50 |
WithVariant(Variant) | Visual style | VariantDefault |
WithPrimaryAction(string) | Action ID for Enter on inputs | "" |
WithHints(bool) | Show "Tab to switch..." hint | true |
WithCloseOnBackdropClick(bool) | Backdrop click returns "cancel" | true |
Variants: VariantDefault, VariantDanger (red), VariantWarning (yellow), VariantInfo (blue)
modal.Text("Static text with auto line wrapping")
modal.Spacer() // Single blank linemodal.Buttons(
modal.Btn(" Save ", "save"), // Standard button
modal.Btn(" Delete ", "delete", modal.BtnDanger()), // Red
modal.Btn(" Submit ", "submit", modal.BtnPrimary()), // Primary
modal.Btn(" Cancel ", "cancel"),
)" Save " not "Save"var nameInput textinput.Model
modal.Input("name-input", &nameInput)
modal.InputWithLabel("name-input", "Name:", &nameInput)
modal.Input("name-input", &nameInput,
modal.WithSubmitOnEnter(true), // Default: true
modal.WithSubmitAction("submit"), // Override primary action
)var msgArea textarea.Model
modal.Textarea("message", &msgArea, 5) // height in lines
modal.TextareaWithLabel("message", "Label:", &msgArea, 5)items := []modal.DropdownItem{
{ID: "main", Label: "main", Value: "main"},
{ID: "dev", Label: "dev", Value: "dev"},
}
var selectedIdx int
modal.Combo("branch", &branchInput, items, &selectedIdx)selected is an items index (same as List)var includeFiles bool
modal.Checkbox("include-files", "Include untracked files", &includeFiles)items := []modal.SelectItem{
{ID: "shell", Label: "Shell", Description: "new agent/shell session"},
{ID: "worktree", Label: "Worktree", Description: "shell in a new worktree"},
}
var selectedIdx int
modal.Select("kind", items, &selectedIdx,
modal.WithMaxVisible(6),
modal.WithDisabled(func(i int) string { return reasons[i] }),
modal.WithOnSelect(func(i int) { rebuildAround(i) }),
)modal.List is the low-level column of rows for lists that are not a single choice.[ A | B | C ] under five choices, a ❯-cursor full-width list with an aligned description column at five or more (and the list whenever the segments would not fit the width). WithShape(modal.ShapeList) / WithShape(modal.ShapeSegmented) forces one.modal.Input's does (BorderNormal idle, Primary focused, TextMuted hovered). A click on a border cell focuses the control and selects nothing. The selected row keeps its Primary fill either way — the fill says which choice is active, the border says where the keyboard is.modal.WidthForSections(sections...), capped to your frame, to modal.WithWidth — otherwise a control too wide for the box truncates into a stub. See viewModalWidth in internal/pluginbrowser/overlays.go.WithDisabled(func(i int) string) keeps a choice visible and muted with its reason in place of its description, and makes it unreachable by key or click.WithMaxVisible(n) scrolls the rest, with ↑ more above / ↓ more below.WithOnSelect(func(i int)) reports every change; WithSelectAction(id) makes activation return a fixed action instead of the row's ID, for a selector embedded in a form.docs/reference/design-language.md ("Selectors").items := []modal.ListItem{
{ID: "item-1", Label: "First item", Data: someValue},
{ID: "item-2", Label: "Second item"},
}
var selectedIdx int
modal.List("my-list", items, &selectedIdx, modal.WithMaxVisible(5))modal.When(func() bool { return showWarning },
modal.Text("Warning: This action is irreversible!"),
)modal.Custom(
func(contentWidth int, focusID, hoverID string) modal.RenderedSection {
return modal.RenderedSection{
Content: content,
Focusables: []modal.FocusableInfo{
{ID: "custom-btn", OffsetX: 0, OffsetY: 2, Width: 10, Height: 1},
},
}
},
func(msg tea.Msg, focusID string) (string, tea.Cmd) {
return "", nil // can be nil if no custom input handling
},
)action, cmd := m.HandleKey(msg)| Key | Behavior |
|---|---|
| Tab | Focus next element |
| Shift+Tab | Focus previous element |
| Enter | Return focused element's ID (or primaryAction for inputs). Checkbox Enter submits primary without toggling. Combo Enter commits then submits. |
| Esc | Offered to the focused section first (Combo closes its overlay). Otherwise "cancel". |
| Other | Forwarded to focused section |
action := m.HandleMouse(msg, p.mouseHandler)| Event | Behavior |
|---|---|
| Click backdrop | Return "cancel" (if enabled) |
| Click button/checkbox | Return element ID |
| Hover element | Update hover state |
| Scroll on modal | Scroll content |
m.FocusedID() string // Currently focused element ID
m.HoveredID() string // Currently hovered element ID
m.SetFocus(id string) // Focus specific element
m.Reset() // Reset focus, hover, scroll to initial stateAlways use ui.OverlayModal for dimmed background:
func (p *Plugin) View(width, height int) string {
background := p.renderNormalView(width, height)
rendered := p.myModal.Render(width, height, p.mouseHandler)
return ui.OverlayModal(background, rendered, width, height)
}Do not:
lipgloss.Place (OverlayModal handles centering)Reset() when closing and reopening modals| Issue | Solution |
|---|---|
| First keypress dropped | Call ensureModal() before nil check in Update |
| Modal too wide/narrow | Use width clamping: modalW > p.width-4 |
| Hover not updating | Pass mouseHandler to both Render and HandleMouse |
| Input not receiving keys | Check FocusedID() |
| Modal rebuilds every frame | Cache by width |
| Modal shows with wrong focus | Call m.Reset() when showing modal |
See references/complete-example.md for a full plugin implementation with delete confirmation modal.
© marcus, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 1 other file (references) in .claude/skills/create-modal of marcus/sidecar.
Open the folder on GitHubat commit 3792a4e
Create Modal next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Create Modal this skillmarcus/sidecar | 1.1k | — | ~2.6k | Automated safety check: Pass | MIT | |
| Type Declarationsnubjs/nub | 4.4k | — | ~2.4k | Automated safety check: Pass | MIT | |
| Imperative Modal APIlobehub/lobehub | 83k | — | ~1.3k | Automated safety check: Pass | Custom licence | |
| ModalK-Dense-AI/scientific-agent-skills | 48k | 1 repos | ~4.5k | Automated safety check: Notes | Apache-2.0 | |
| Rust Path Typesopeninterpreter/openinterpreter | 69k | 2 repos | ~605 | Automated safety check: Pass | Apache-2.0 | |
| Python Type Safetywshobson/agents | 40k | — | ~1.4k | Automated safety check: Pass | MIT |
nubjs/nub
Add, audit, or update @nubjs/types declarations for Nub runtime APIs.
lobehub/lobehub
Shows how to build modals, dialogs and confirmations in LobeHub with the base-ui imperative API (createModal, confirmModal, ModalHost) instead of declarative Modal components.
K-Dense-AI/scientific-agent-skills
Modal is a serverless cloud platform for running Python on demand, including on-demand GPUs.
openinterpreter/openinterpreter
Rules for choosing Rust types for filesystem paths in new Codex code, covering protocol types, internal use and model tool arguments.
wshobson/agents
Python type safety with type hints, generics, protocols, and strict type checking.
davila7/claude-code-templates
Run Python code in the cloud with serverless containers, GPUs, and autoscaling.
marcus/sidecar
Create conversation adapters for importing AI chat history from different tools (Claude Code, Cursor, Warp, Codex, etc.).
marcus/sidecar
Create new sidecar plugins implementing the plugin.Plugin interface, rendering views with Bubble Tea, handling keyboard input via keymap contexts, and integrating with the app shell (footer hints…
marcus/sidecar
Project switching implementation in sidecar: project discovery, state management, UI flow, modal rendering, filtering, theme preview, and plugin reinitialization.
marcus/sidecar
Interactive shell/TTY integration with tmux session management, shell command execution, control-mode output capture with polling fallback, native cursor rendering, lazy scrollback, selection, paste…
marcus/sidecar
Writing and maintaining the Sidecar Docusaurus documentation site, including page structure, doc authoring, blog posts, styling, images, and deployment workflow.
marcus/sidecar
Implementing UI/UX features in sidecar including modals (internal/modal library), keyboard shortcuts, mouse support, scrolling, pill/tab rendering, and pane resizing.
Create declarative modals using the modal library API. An agent skill from marcus/sidecar. Create Modal is an agent skill from marcus/sidecar. Create declarative modals using the modal library API.
Create Modal fits situations like: dialogs to the application.
Run `npx skills add marcus/sidecar --skill create-modal -a claude-code`. Or copy the skill folder (.claude/skills/create-modal in marcus/sidecar) into .claude/skills/create-modal in your project. Claude Code loads it when a task matches its description.
Run `npx skills add marcus/sidecar --skill create-modal -a codex`. Or copy the skill folder (.claude/skills/create-modal in marcus/sidecar) into .agents/skills/create-modal in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add marcus/sidecar --skill create-modal -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/create-modal, .gemini/skills/create-modal, .github/skills/create-modal and .opencode/skills/create-modal in your project.
SKILL.md names no scripts, command-line tools or credentials: Create Modal is instructions for the agent only.
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
Create Modal is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 2.6k tokens (SKILL.md is roughly 11k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 558 tokens, read only when the agent opens those files.
Skills that share tags, products or a category with Create Modal: Type Declarations (nubjs/nub, 4.4k stars), Imperative Modal API (lobehub/lobehub, 83k stars), Modal (K-Dense-AI/scientific-agent-skills, 48k stars) and Rust Path Types (openinterpreter/openinterpreter, 69k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
marcus (a GitHub user) maintains it in marcus/sidecar, which has 1,085 GitHub stars. The repository holds 19 skills in this directory. The repository was last updated on October 5, 2026.
Source: marcus/sidecar on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.