Dify Component Writing Guide
langgenius/dify
Use when implementing or refactoring React/TypeScript components and the task requires decisions about component ownership, feature boundaries, state, data…
Inline text editing implementation within the file browser preview pane using tmux PTY backend, cursor movement, text manipulation, and editor state management.
$ npx skills add marcus/sidecar --skill inline-editor -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install marcus/sidecar inline-editor --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/inline-editor .claude/skills/inline-editor && 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 "inline-editor" agent skill from https://github.com/marcus/sidecar/tree/main/.claude/skills/inline-editor into .claude/skills/inline-editor/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "inline-editor", 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/inline-editorType 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 inline-editor -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install marcus/sidecar inline-editor --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/inline-editor .agents/skills/inline-editor && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "inline-editor" agent skill from https://github.com/marcus/sidecar/tree/main/.claude/skills/inline-editor into .agents/skills/inline-editor/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "inline-editor", 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 inline-editor -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install marcus/sidecar inline-editor --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/inline-editor .cursor/skills/inline-editor && 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 "inline-editor" agent skill from https://github.com/marcus/sidecar/tree/main/.claude/skills/inline-editor into .cursor/skills/inline-editor/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "inline-editor", 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/inline-editor--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 inline-editor -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install marcus/sidecar inline-editor --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/inline-editor .gemini/skills/inline-editor && 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 "inline-editor" agent skill from https://github.com/marcus/sidecar/tree/main/.claude/skills/inline-editor into .gemini/skills/inline-editor/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "inline-editor", 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 inline-editorInstalls 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 inline-editor -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/inline-editor .github/skills/inline-editor && 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 "inline-editor" agent skill from https://github.com/marcus/sidecar/tree/main/.claude/skills/inline-editor into .github/skills/inline-editor/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "inline-editor", 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 inline-editor -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 inline-editor --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/inline-editor .opencode/skills/inline-editor && 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 "inline-editor" agent skill from https://github.com/marcus/sidecar/tree/main/.claude/skills/inline-editor into .opencode/skills/inline-editor/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "inline-editor", 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.
inline-editorInline text editing implementation within the file browser preview pane using tmux PTY backend, cursor movement, text manipulation, and editor state management.
Inline Editor is an agent skill from marcus/sidecar. Inline text editing implementation within the file browser preview pane using tmux PTY backend, cursor movement, text manipulation, and editor state management. Covers entry/exit lifecycle, dimension calculations, confirmation dialogs, click-away detection, mouse forwarding, and app-level key routing. Use when working on inline editing features, text input components, or debugging editor rendering/input issues in the file browser plugin.
Its SKILL.md is about 2.6k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Frontend & Design, covering State management. It works with tmux. 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.
8 steps, taken from the step headings in SKILL.md.
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 and json).
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.
Inline Editor loads about 2.6k tokens when it runs. Until then it costs about 114 tokens; SKILL.md has 674 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). 674 words, ~2,625 tokens.
.claude/skills/inline-editor/SKILL.md (or your agent's skills folder).The inline editor (tmux_inline_edit) lets users edit files directly within the file browser preview pane using their preferred terminal editor (vim, nvim, nano, etc.) without leaving the TUI. The file tree remains visible during editing.
Core Principle: This is NOT a terminal emulator. Tmux manages the PTY backend; Sidecar acts as an input/output relay, similar to the workspace plugin's interactive mode.
internal/plugins/filebrowser/inline_edit.go): Creates tmux sessions, manages editor lifecycleinternal/plugins/filebrowser/view.go, inline_edit.go): Renders editor content within preview paneinternal/plugins/filebrowser/plugin.go, mouse.go): Routes keys/clicks to editor or confirmation dialoginternal/tty/tty.go): Handles tmux capture, cursor overlay, and input forwardingUser presses 'e' on file
-> enterInlineEditMode()
-> tmux new-session -d -s {sessionName} {editor} {path}
-> InlineEditStartedMsg
-> handleInlineEditStarted()
-> tty.Model.Enter()
-> Start polling tmux capture-pane
-> renderInlineEditorContent() in preview pane
-> User types -> tty.Model forwards to tmux
-> User exits -> SessionDeadMsg or exit keys
-> exitInlineEditMode()
-> Refresh preview| File | Purpose |
|---|---|
internal/plugins/filebrowser/inline_edit.go | Editor lifecycle, confirmation dialog, dimension calculations |
internal/plugins/filebrowser/view.go | Preview pane rendering, gradient border |
internal/plugins/filebrowser/mouse.go | Click-away detection |
internal/plugins/filebrowser/plugin.go | State management, Update routing |
internal/tty/tty.go | TTY model for tmux interaction (shared with workspace) |
internal/app/update.go | App-level key routing for inline edit context |
The editor renders within renderPreviewPane(), NOT as a full-screen takeover. The file tree stays visible.
// view.go - renderPreviewPane()
func (p *Plugin) renderPreviewPane(visibleHeight int) string {
if p.inlineEditMode && p.inlineEditor != nil && p.inlineEditor.IsActive() {
return p.renderInlineEditorContent(visibleHeight)
}
// ... normal preview rendering
}The tty.Model needs exact dimensions matching the preview pane content area:
func (p *Plugin) calculateInlineEditorWidth() int {
if !p.treeVisible {
return p.width - 4 // borders + padding
}
p.calculatePaneWidths()
return p.previewWidth - 4
}
func (p *Plugin) calculateInlineEditorHeight() int {
paneHeight := p.height
innerHeight := paneHeight - 2 // pane borders
contentHeight := innerHeight - 2 // header lines
if len(p.tabs) > 1 {
contentHeight-- // tab line
}
return contentHeight
}These MUST stay in sync with renderInlineEditorContent() layout calculations.
Rule: session alive = show confirmation, session dead = exit immediately.
Always show confirmation when the session is alive, regardless of file modification status. Vim's modification status cannot be reliably detected externally.
func (p *Plugin) isInlineEditSessionAlive() bool {
if p.inlineEditSession == "" {
return false
}
err := exec.Command("tmux", "has-session", "-t", p.inlineEditSession).Run()
return err == nil
}Check session alive status:
Update() when in inline edit mode - if dead, exit immediatelyState fields:
showExitConfirmation bool // Dialog visible
pendingClickRegion string // Where user clicked
pendingClickData interface{} // Click data (tree index, tab index)
exitConfirmSelection int // 0=Save&Exit, 1=Exit without saving, 2=CancelOptions:
Mouse regions are registered during render. Clicks between items may miss regions, so always include position-based fallback:
if p.inlineEditMode && p.inlineEditor != nil && p.inlineEditor.IsActive() {
action := p.mouseHandler.HandleMouse(msg)
handleClickAway := func(regionID string, regionData interface{}) (*Plugin, tea.Cmd) {
if !p.isInlineEditSessionAlive() {
p.exitInlineEditMode()
p.pendingClickRegion = regionID
p.pendingClickData = regionData
return p.processPendingClickAction()
}
p.pendingClickRegion = regionID
p.pendingClickData = regionData
p.showExitConfirmation = true
p.exitConfirmSelection = 0
return p, nil
}
if action.Type == mouse.ActionClick {
if action.Region != nil {
switch action.Region.ID {
case regionTreePane, regionTreeItem, regionPreviewTab:
return handleClickAway(action.Region.ID, action.Region.Data)
}
}
// Fallback: position-based detection
if p.treeVisible && action.X < p.treeWidth {
return handleClickAway(regionTreePane, nil)
}
}
// Forward to tty model
return p, p.inlineEditor.Update(msg)
}Visual indicator that edit mode is active:
if p.inlineEditMode && p.inlineEditor != nil && p.inlineEditor.IsActive() {
rightPane = styles.RenderPanelWithGradient(previewContent, p.previewWidth,
paneHeight, styles.GetInteractiveGradient())
}Full mouse interaction including text selection via SGR (1006) protocol. Mouse events are forwarded to the tty model which translates them into SGR escape sequences: \x1b[<button;x;y;M/m where M = press/drag, m = release.
sendEditorSaveAndQuit() detects which editor is running and sends the appropriate sequence:
| Editor | Save & Quit Command |
|---|---|
| vim, nvim, vi | Escape :wq Enter |
| nano | Ctrl+O Enter Ctrl+X |
| emacs | Ctrl+X Ctrl+S Ctrl+X Ctrl+C |
| helix | Escape :wq Enter |
| micro | Ctrl+S Ctrl+Q |
| kakoune | Escape :write-quit Enter |
| joe | Ctrl+K X |
| ne | Escape :SaveQuit Enter |
| amp | Ctrl+S Ctrl+Q |
| Method | Confirmation | Description |
|---|---|---|
Ctrl+\ | No | Immediate exit (tty.Config.ExitKey) |
| Double-ESC | No | Exit with 150ms delay (vim ESC compatibility) |
:q, :wq in vim | No | Normal editor exit, session death detected |
| Click tree/tab | Yes (if alive) | Shows confirmation when session alive; exits immediately if dead |
inlineEditor *tty.Model // Embeddable tty model
inlineEditMode bool // Currently editing
inlineEditSession string // Tmux session name
inlineEditFile string // File being edited
showExitConfirmation bool
pendingClickRegion string
pendingClickData interface{}
exitConfirmSelection intfunc (p *Plugin) Update(msg tea.Msg) (plugin.Plugin, tea.Cmd) {
// 1. Handle exit confirmation dialog FIRST
if p.showExitConfirmation { /* j/k navigation, Enter confirm, Esc cancel */ }
// 2. Handle inline edit mode
if p.inlineEditMode && p.inlineEditor.IsActive() { /* Delegate to tty.Model */ }
// 3. Normal plugin handling
}The app intercepts global shortcuts (q, 1-5, `, ~, ?, !, @) before plugins. For inline edit to receive ALL keys, internal/app/update.go must recognize the context:
if m.activeContext == "workspace-interactive" || m.activeContext == "file-browser-inline-edit" {
// Forward ALL keys to plugin
}The plugin returns "file-browser-inline-edit" from FocusContext().
IsActive() on every message - tty model can become inactive asynchronously; without this check, users get a blank screen after vim exitstty.Model.View()"file-browser-inline-edit" context - otherwise typing q in vim triggers quit instead of inserting characterGated behind tmux_inline_edit. Enable in ~/.config/sidecar/config.json:
{ "features": { "tmux_inline_edit": true } }Fallback: features.IsEnabled(features.TmuxInlineEdit.Name) returns false -> opens external editor.
| Key | Command | Description |
|---|---|---|
e | edit | Edit file inline (within preview pane) |
E | edit-external | Edit in full terminal (suspends TUI) |
Registered in:
internal/plugins/filebrowser/plugin.go - Commands() methodinternal/plugins/filebrowser/handlers.go - Key handlinginternal/keymap/bindings.go - Key bindings for file-browser-tree and file-browser-preview contextsdocs/guides/deprecated/interactive-shell-implementation.mdinternal/tty/tty.gointernal/features/features.go© marcus, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Just SKILL.md in .claude/skills/inline-editor of marcus/sidecar.
Open the folder on GitHubat commit 3792a4e
Inline Editor 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 |
|---|---|---|---|---|---|---|
| Inline Editor this skillmarcus/sidecar | 1.1k | — | ~2.6k | Automated safety check: Pass | MIT | |
| Dify Component Writing Guidelanggenius/dify | 158k | — | ~626 | Automated safety check: Pass | Custom licence | |
| Expressive Mvcgabeklein/expressive-mvc | 103 | — | ~5.9k | Automated safety check: Pass | MIT | |
| Bulletproof Reactyamcodes/arkenv | 145 | — | ~1.8k | Automated safety check: Pass | MIT | |
| Zustand Store Patternsstellar/laboratory | 112 | — | ~1.4k | Automated safety check: Pass | Apache-2.0 | |
| Tanstack Querybskimball/tanstack-hono | 119 | 1 repos | ~5.4k | Automated safety check: Pass | MIT |
langgenius/dify
Use when implementing or refactoring React/TypeScript components and the task requires decisions about component ownership, feature boundaries, state, data…
gabeklein/expressive-mvc
Class-based reactive state management for React (Expressive MVC).
yamcodes/arkenv
Bulletproof React architecture patterns for scalable, maintainable applications.
stellar/laboratory
Reference for the two Zustand store patterns in Stellar Lab — main store (querystring) and transaction flow store (sessionStorage).
bskimball/tanstack-hono
Powerful asynchronous state management, server-state utilities, and data fetching for TS/JS, React, Vue, Solid, Svelte & Angular.
shinpr/ai-coding-project-boilerplate
Applies React/TypeScript type safety, component design, and state management rules.
marcus/sidecar
Create conversation adapters for importing AI chat history from different tools (Claude Code, Cursor, Warp, Codex, etc.).
marcus/sidecar
Create declarative modals using the modal library API. An agent skill from marcus/sidecar.
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.
Works with
Categories
Inline text editing implementation within the file browser preview pane using tmux PTY backend, cursor movement, text manipulation, and editor state management. Inline Editor is an agent skill from marcus/sidecar. Inline text editing implementation within the file browser preview pane using tmux PTY backend, cursor movement, text manipulation, and editor state management.
Inline Editor fits situations like: working on inline editing features; text input components; debugging editor rendering/input issues in the file browser plugin.
Run `npx skills add marcus/sidecar --skill inline-editor -a claude-code`. Or copy the skill folder (.claude/skills/inline-editor in marcus/sidecar) into .claude/skills/inline-editor in your project. Claude Code loads it when a task matches its description.
Run `npx skills add marcus/sidecar --skill inline-editor -a codex`. Or copy the skill folder (.claude/skills/inline-editor in marcus/sidecar) into .agents/skills/inline-editor 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 inline-editor -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/inline-editor, .gemini/skills/inline-editor, .github/skills/inline-editor and .opencode/skills/inline-editor in your project.
SKILL.md names no scripts, command-line tools or credentials: Inline Editor 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.
Inline Editor 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.
Skills that share tags, products or a category with Inline Editor: Dify Component Writing Guide (langgenius/dify, 158k stars), Expressive Mvc (gabeklein/expressive-mvc, 103 stars), Bulletproof React (yamcodes/arkenv, 145 stars) and Zustand Store Patterns (stellar/laboratory, 112 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.