Agent skill

Knowledge Interaction Surfaces Web Client

覆盖 Blade React Web 的启动恢复、Session/任务 Zustand 投影、SSE 重连、聊天输入、多项目导航、布局、预览、Browser 面板与终端。进入时机：修改 Web 消息流、Session 切换、草稿、错误恢复、Sidebar/Kanban、全屏预览、文件/Browser 活动或前端 API。

MITAuto-check passedProductivity & Automation

Install Knowledge Interaction Surfaces Web Client

skills CLI

$ npx skills add echoVic/blade-code --skill knowledge-interaction-surfaces-web-client -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install echoVic/blade-code knowledge-interaction-surfaces-web-client --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/echoVic/blade-code.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.trae/knowledges/interaction-surfaces/web-client .claude/skills/knowledge-interaction-surfaces-web-client && rm -rf skills-src

Use ~/.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/

Paste into Claude Code

Install the "knowledge-interaction-surfaces-web-client" agent skill from https://github.com/echoVic/blade-code/tree/main/.trae/knowledges/interaction-surfaces/web-client into .claude/skills/knowledge-interaction-surfaces-web-client/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "knowledge-interaction-surfaces-web-client", 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

$skill-installer install https://github.com/echoVic/blade-code/tree/main/.trae/knowledges/interaction-surfaces/web-client

Type 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.

skills CLI

$ npx skills add echoVic/blade-code --skill knowledge-interaction-surfaces-web-client -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install echoVic/blade-code knowledge-interaction-surfaces-web-client --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/echoVic/blade-code.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.trae/knowledges/interaction-surfaces/web-client .agents/skills/knowledge-interaction-surfaces-web-client && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "knowledge-interaction-surfaces-web-client" agent skill from https://github.com/echoVic/blade-code/tree/main/.trae/knowledges/interaction-surfaces/web-client into .agents/skills/knowledge-interaction-surfaces-web-client/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "knowledge-interaction-surfaces-web-client", 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.

skills CLI

$ npx skills add echoVic/blade-code --skill knowledge-interaction-surfaces-web-client -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install echoVic/blade-code knowledge-interaction-surfaces-web-client --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/echoVic/blade-code.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.trae/knowledges/interaction-surfaces/web-client .cursor/skills/knowledge-interaction-surfaces-web-client && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "knowledge-interaction-surfaces-web-client" agent skill from https://github.com/echoVic/blade-code/tree/main/.trae/knowledges/interaction-surfaces/web-client into .cursor/skills/knowledge-interaction-surfaces-web-client/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "knowledge-interaction-surfaces-web-client", 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

$ gemini skills install https://github.com/echoVic/blade-code.git --path .trae/knowledges/interaction-surfaces/web-client

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add echoVic/blade-code --skill knowledge-interaction-surfaces-web-client -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install echoVic/blade-code knowledge-interaction-surfaces-web-client --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/echoVic/blade-code.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.trae/knowledges/interaction-surfaces/web-client .gemini/skills/knowledge-interaction-surfaces-web-client && rm -rf skills-src

Use ~/.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/

Paste into Gemini CLI

Install the "knowledge-interaction-surfaces-web-client" agent skill from https://github.com/echoVic/blade-code/tree/main/.trae/knowledges/interaction-surfaces/web-client into .gemini/skills/knowledge-interaction-surfaces-web-client/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "knowledge-interaction-surfaces-web-client", 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.

GitHub CLI

$ gh skill install echoVic/blade-code knowledge-interaction-surfaces-web-client

Installs 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).

skills CLI

$ npx skills add echoVic/blade-code --skill knowledge-interaction-surfaces-web-client -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/echoVic/blade-code.git skills-src && mkdir -p .github/skills && cp -r skills-src/.trae/knowledges/interaction-surfaces/web-client .github/skills/knowledge-interaction-surfaces-web-client && rm -rf skills-src

Use ~/.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/

Paste into GitHub Copilot

Install the "knowledge-interaction-surfaces-web-client" agent skill from https://github.com/echoVic/blade-code/tree/main/.trae/knowledges/interaction-surfaces/web-client into .github/skills/knowledge-interaction-surfaces-web-client/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "knowledge-interaction-surfaces-web-client", 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.

skills CLI

$ npx skills add echoVic/blade-code --skill knowledge-interaction-surfaces-web-client -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install echoVic/blade-code knowledge-interaction-surfaces-web-client --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/echoVic/blade-code.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.trae/knowledges/interaction-surfaces/web-client .opencode/skills/knowledge-interaction-surfaces-web-client && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "knowledge-interaction-surfaces-web-client" agent skill from https://github.com/echoVic/blade-code/tree/main/.trae/knowledges/interaction-surfaces/web-client into .opencode/skills/knowledge-interaction-surfaces-web-client/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "knowledge-interaction-surfaces-web-client", 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.

Facts

Skill name: knowledge-interaction-surfaces-web-client
GitHub stars: 180
Token cost: ~2k tokens
SKILL.md length: 473 words
Files: 1
Skills in repo: 38
Repo updated: Sep 27, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Tasks that involve Task management
SKILL.md covers Module Structure, Gotchas, Architecture and Decisions, plus 2 more sections
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
Tasks that involve State management

What it does

Knowledge Interaction Surfaces Web Client is an agent skill from echoVic/blade-code. 覆盖 Blade React Web 的启动恢复、Session/任务 Zustand 投影、SSE 重连、聊天输入、多项目导航、布局、预览、Browser 面板与终端。进入时机：修改 Web 消息流、Session 切换、草稿、错误恢复、Sidebar/Kanban、全屏预览、文件/Browser 活动或前端 API。不包含：Hono 路由与服务端 run 所有权（见 ../hono-server-api-and-streaming/）、 Browser 自动化内核（见 ../../tool-and-automation-platform/browser-automation/）。关键词：useSessionStore, sessionService, EventSource, createEventDispatcher, ChatInput, Layout, FilePreview, BrowserPanel, SessionRef。

Its SKILL.md is about 2k 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 Productivity & Automation, covering Task management, State management and Browser automation. It works with Hono, React, Zustand and Git. The repository describes itself as: AI-powered CLI coding agent with 20+ built-in tools, MCP support, and multi-model providers. The licence is MIT.

When your agent uses it

Tasks that involve Task management
Tasks that involve State management
Tasks that involve Browser automation

Example prompts

“/knowledge-interaction-surfaces-web-client”

What it can do on your machine

Read from SKILL.md and the folder at commit 30f8684. It shows what the files ask for, not the result of running them.

Tool permissions
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.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Knowledge Interaction Surfaces Web Client loads about 2k tokens when it runs. Until then it costs about 118 tokens; SKILL.md has 473 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~118
When it runs · the whole SKILL.md, loaded when a task matches: ~2k

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.

Safety

Auto-check passed

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.

SKILL.md

The full file from echoVic/blade-code at commit 30f8684, republished under its MIT licence (© echoVic). 473 words, ~1,964 tokens.

Download SKILL.mdSave it as .claude/skills/knowledge-interaction-surfaces-web-client/SKILL.md (or your agent's skills folder).

name: knowledge-interaction-surfaces-web-client
description: 覆盖 Blade React Web 的启动恢复、Session/任务 Zustand 投影、SSE 重连、聊天输入、多项目导航、布局、预览、Browser 面板与终端。进入时机：修改 Web 消息流、Session 切换、草稿、错误恢复、Sidebar/Kanban、全屏预览、文件/Browser 活动或前端 API。不包含：Hono 路由与服务端 run 所有权（见 ../hono-server-api-and-streaming/）、 Browser 自动化内核（见 ../../tool-and-automation-platform/browser-automation/）。关键词：useSessionStore, sessionService, EventSource, createEventDispatcher, ChatInput, Layout, FilePreview, BrowserPanel, SessionRef。

Module Structure

Web Client 将 HTTP 快照、单 Session SSE 与全局任务 SSE 折叠为浏览器状态，并以复合 SessionRef 驱动聊天、看板、Sidebar、预览和终端；它不直接执行 Agent。

Directory Layout

packages/cli/web/src/App.tsx — URL/本地状态恢复、全局订阅和主视图选择
packages/cli/web/src/services/ — HTTP、Session SSE、全局 SSE 与 Browser API 客户端
packages/cli/web/src/store/session/ — Session、消息、流式事件、任务与 UI slices
packages/cli/web/src/components/chat/ — 对话时间线、输入、交互、Goal、Team 与状态
packages/cli/web/src/components/layout/ — Sidebar、导航、响应式壳层与资源入口
packages/cli/web/src/components/tasks/ and packages/cli/web/src/components/kanban/ — 任务创建、切换与多项目看板
packages/cli/web/src/components/preview/ — diff、文件、日志和 Browser 预览
packages/cli/web/src/components/terminal/ — WebSocket PTY 面板
packages/cli/web/src/lib/ — 草稿、Session 导航、身份、附件和快捷键辅助

Key Entry Points

App in packages/cli/web/src/App.tsx — 解析导航意图并选择临时任务、聊天或看板
sessionService.openEventSubscription() in packages/cli/web/src/services/sessionService.ts — 单 Session SSE 与 durable cursor
createSessionSlice() in packages/cli/web/src/store/session/slices/sessionSlice.ts — Session 导航、发送、恢复和任务动作
createEventDispatcher() in packages/cli/web/src/store/session/handlers/eventHandlers.ts — SSE 到 Store/Browser 活动的分发
Layout in packages/cli/web/src/components/layout/Layout.tsx — Sidebar、工作区、预览与终端组合
ChatInput in packages/cli/web/src/components/chat/ChatInput.tsx — Session 级输入、草稿和能力选择

Gotchas

Web 中 Session 身份必须始终是 {sessionId, projectPath}；历史上只比 session ID 会让跨项目同名 Session 的消息、错误、预览和任务状态串线 (packages/cli/web/src/store/session/sessionIdentity.ts, git:d20b6ed5)
selectSession() 必须先打开并缓冲新 SSE，再并行拉取消息/Goal/Session/Team 快照，最后原子提交身份并回放缓冲事件；先替换 Store 再订阅会产生 snapshot/live 空窗 (packages/cli/web/src/store/session/slices/sessionSlice.ts, git:121ea8fc)
新订阅准备失败时旧订阅必须继续存活；replaceEventSubscription() 只能在新连接 ready 后关闭旧连接 (packages/cli/web/src/store/session/slices/streamingSlice.ts, git:b3ffab60)
ChatView 不应在 React effect cleanup 中取消 Store 拥有的 SSE；StrictMode 会重放 effect，组件级 cleanup 曾导致激活后连接被意外关闭 (packages/cli/web/src/components/chat/ChatView.tsx, git:01505f04)
活动 run 的 SSE 不在线时 Composer 必须禁用 steering；HTTP 仍可接收请求不代表客户端能安全观察确认、终态或 follow-up (packages/cli/web/src/components/chat/ChatView.tsx)
所有终态事件和 tool.start 前必须排空 80ms delta 缓冲；否则 prose/reasoning 可能在工具卡或完成状态之后写入 (packages/cli/web/src/store/session/handlers/eventHandlers.ts, packages/cli/web/src/store/session/handlers/streamingBuffer.ts)
session.completed、session.error、idle status 与 abort 会触发权威消息重同步；只依赖 live delta 无法覆盖断线期间的 committed 结果或恢复生成的消息 (packages/cli/web/src/store/session/handlers/eventHandlers.ts, packages/cli/web/src/store/session/slices/sessionSlice.ts)
显式 URL 中的 Session 是权威意图：目标缺失或不可用时必须停在临时页面并保留导航错误，不能静默打开 localStorage 中另一个 Session (packages/cli/web/src/store/session/sessionNavigation.ts)
Composer 草稿按复合 SessionRef 分区；文本与 output schema 写入 sessionStorage，图片只在内存 Map 保存，浏览器刷新后不会恢复图片附件 (packages/cli/web/src/components/chat/ChatView.tsx, packages/cli/web/src/lib/composerDraft.ts)
发送成功后才清草稿；请求拒绝时 Store 删除 optimistic user message，而 ChatInput 保留输入供重试，不能在点击发送时先清空 (packages/cli/web/src/components/chat/ChatInput.tsx, packages/cli/web/src/store/session/slices/sessionSlice.ts)
模型、reasoning、service tier、verbosity 与 permission mode 在活动 run 中被冻结；Composer 可以显示选择器，但发送 steering 时不会携带这些切换，Server 也会拒绝并发切换 (packages/cli/web/src/components/chat/ChatInput.tsx, packages/cli/web/src/store/session/slices/sessionSlice.ts)
FilePreview 的请求必须同时校验 request generation 和当前 SessionRef；仅比较路径或 URL 会让 A→B→A 的旧响应覆盖新 A 状态 (packages/cli/web/src/components/preview/FilePreview.tsx)
worktree Task 交付后文件树浏览 source project，但 durable diff 仍从 Task Session artifact 读取；discard 后则明确隐藏所有旧消息 diff (packages/cli/web/src/components/preview/FilePreview.tsx)
Browser tab 使用 forceMount 保留 iframe/控制状态；切换到 Files/Logs 时不能卸载 Browser 会话 (packages/cli/web/src/components/preview/FilePreview.tsx)
全屏预览仍保留同一个 Chat Composer 和状态投影，只把工作区内容置于覆盖层后；不要为全屏模式创建第二套 ChatView/Input (packages/cli/web/src/components/layout/Layout.tsx, packages/cli/web/src/components/chat/ChatView.tsx, git:3b786d37)

Show full SKILL.md (215 more words)Show less

Architecture

启动时全局任务 SSE、Session catalog、设置、模型和工作区信息并行加载；没有显式目标时先进入临时 Session，避免阻塞首屏等待完整 catalog (packages/cli/web/src/App.tsx)
Store 由 Session、TaskList、Message、Streaming 和 UI slices 组成；Session slice 负责身份/命令，event dispatcher 负责事件归约，组件只读取投影 (packages/cli/web/src/store/session/index.ts)
Session SSE 使用 committed seq 维护内存游标并指数退避重连；connected 帧必须匹配精确 SessionRef 才算 ready，heartbeat 只更新活性 (packages/cli/web/src/services/sessionService.ts)
高频 content、thinking 和 subagent delta 按 channel 合并；工具边界会把内容从 before 切到 after，使同一个 assistant 时间线保持正文、工具、后续正文的顺序 (packages/cli/web/src/store/session/handlers/eventHandlers.ts)
全局任务流单独驱动 Sidebar/Kanban 和 unread attention，不依赖当前打开的 Session；单 Session 流只处理当前精确 ref (packages/cli/web/src/store/session/slices/taskListSlice.ts, packages/cli/web/src/store/session/handlers/eventHandlers.ts)
Preview 同时支持 message 内嵌 diff 与 durable Task artifact；有 durable artifact 预期时失败会显示错误而不会退回可能过期的 message diff (packages/cli/web/src/components/preview/FilePreview.tsx)
Agent Browser 活动只从不带 seq 的 live tool start/result 投影到 BrowserActivityStore，并自动打开 Browser tab；历史 committed 工具事件不能伪装成当前活动 (packages/cli/web/src/store/session/handlers/eventHandlers.ts, packages/cli/web/src/store/BrowserActivityStore.ts, git:ed9505d7)

Decisions

Web 使用共享 TypeBox API schema 的 Vite alias，而不复制请求/事件类型；Vite 还把巨大的 event handler 单独分 chunk 以控制首屏 bundle (packages/cli/web/vite.config.ts)
导航 URL 同时携带展示 project 与 Session execution workspace；worktree Session 两者不同时使用独立 workspace 参数，分享链接仍能精确恢复 (packages/cli/web/src/store/session/sessionNavigation.ts)
Web 权限模式由当前 Session metadata 驱动，新临时任务重置为 autoEdit，避免从刚访问的 YOLO Session 泄漏到下一任务 (packages/cli/web/src/store/session/slices/sessionSlice.ts, packages/cli/web/src/store/ConfigStore.ts)
输入能力控件按当前模型 catalog 动态显示，communication style 例外地是全局跨 Session 偏好；不要把它误做成 Composer 私有 override (packages/cli/web/src/components/chat/ChatInput.tsx, packages/cli/web/src/store/SettingsStore.ts)

Patterns

每次导航、fork、异步预览和 catalog 加载都持有 generation；结果返回时同时验证 generation 与精确 ref，迟到成功和迟到错误都静默丢弃 (packages/cli/web/src/store/session/slices/sessionSlice.ts, packages/cli/web/src/components/preview/FilePreview.tsx)
optimistic user message 仅覆盖提交等待窗口，服务端 message.created 会按身份替换；提交失败则移除 optimistic 项并设置带 SessionRef 的 errorContext (packages/cli/web/src/store/session/slices/sessionSlice.ts, packages/cli/web/src/store/session/slices/messageSlice.ts)
错误 UI 按 navigation、submission、execution、task_action 分类；另一个 Session 的 task action 错误不得出现在当前 ChatView (packages/cli/web/src/components/chat/ChatView.tsx)
响应式 Sidebar 与 Preview 在窄屏作为 focus-contained modal，并把所有背景区域设为 inert；关闭后恢复触发按钮焦点 (packages/cli/web/src/components/layout/Layout.tsx, packages/cli/web/src/components/preview/FilePreview.tsx)
本地持久化均 fail open：导航、草稿、Sidebar 模式和 Preview 宽度在 storage 被禁用时仍保留内存行为 (packages/cli/web/src/lib/composerDraft.ts, packages/cli/web/src/store/session/sessionNavigation.ts, packages/cli/web/src/store/AppStore.ts)

Dependencies

Web 使用 React 19、Zustand、Vite、Radix primitives、Monaco 与 xterm；运行时 API 路径由 Vite dev proxy 或 BladeServer 同源静态托管提供 (packages/cli/web/package.json, packages/cli/web/vite.config.ts)

Files

Just SKILL.md in .trae/knowledges/interaction-surfaces/web-client of echoVic/blade-code.

Open the folder on GitHubat commit 30f8684

Compare with similar skills

Knowledge Interaction Surfaces Web Client 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.

Knowledge Interaction Surfaces Web Client compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Knowledge Interaction Surfaces Web Client this skillechoVic/blade-code	180	—	~2k	Automated safety check: Pass	MIT	10 days ago
Agents SDKhodgef/apiker	127	3 repos	~3k	Automated safety check: Pass	MIT	1 mo ago
Zustand Store Patternsstellar/laboratory	112	—	~1.4k	Automated safety check: Pass	Apache-2.0	3 days ago
Tanstack Querybskimball/tanstack-hono	119	1 repos	~5.4k	Automated safety check: Pass	MIT	26 days ago
React Native Mmkvmargelo/react-native-skills	175	—	~2.1k	Automated safety check: Pass	MIT	1 mo ago
Refactoratilladeniz/Kubeli	387	—	~7.7k	Automated safety check: Warn	MIT	yesterday

Similar skills

Agents SDK
hodgef/apiker
Build AI agents on Cloudflare Workers using the Agents SDK. An agent skill from hodgef/apiker.
127 GitHub starsUsed in 3 repos~3k tokens
Backend & APIsAuto-check passed
Zustand Store Patterns
stellar/laboratory
Reference for the two Zustand store patterns in Stellar Lab — main store (querystring) and transaction flow store (sessionStorage).
112 GitHub stars~1.4k tokensUpdated 3 days ago
Frontend & DesignAuto-check passed
Tanstack Query
bskimball/tanstack-hono
Powerful asynchronous state management, server-state utilities, and data fetching for TS/JS, React, Vue, Solid, Svelte & Angular.
119 GitHub starsUsed in 1 repo~5.4k tokens
Frontend & DesignAuto-check passed
React Native Mmkv
margelo/react-native-skills
Fast synchronous key-value storage for React Native via react-native-mmkv (Nitro-backed).
175 GitHub stars~2.1k tokensUpdated 1 mo ago
MobileAuto-check passed
Refactor
atilladeniz/Kubeli
Refactors code following Ousterhout's design principles. An agent skill from atilladeniz/Kubeli.
387 GitHub stars~7.7k tokensUpdated yesterday
DevelopmentAuto-check: warnings
React Flow Node TS
microsoft/skills
Official
Create React Flow node components with TypeScript types, handles, and Zustand integration.
3.1k GitHub starsUsed in 6 repos~502 tokens
Frontend & DesignAuto-check passed

More from echoVic/blade-code

All 38 skills in this repo

Base64 Parser
echoVic/blade-code
Base64 编解码工具，支持编码/解码文本、JSON、二进制文件，自动检测格式，支持批量处理. An agent skill from echoVic/blade-code.
180 GitHub stars~545 tokensUpdated 10 days ago
Auto-check: notes
Code Review
echoVic/blade-code
Review frontend code for best practices, bugs, and improvements.
180 GitHub stars~377 tokensUpdated 10 days ago
Auto-check: notes
GitHub Explorer
echoVic/blade-code
Explore and summarize popular GitHub projects. An agent skill from echoVic/blade-code.
180 GitHub stars~434 tokensUpdated 10 days ago
Auto-check passed
Knowledge Extension Ecosystem Lsp Code Intelligence
echoVic/blade-code
覆盖 Session 级 LSP 配置快照、stdio 进程、文档同步、语义查询、诊断回注、崩溃恢复和子 Session 继承。进入条件：新增语言服务器、修改 LSP 工具、排查诊断缺失/重复、处理 worktree 或 ACP 差异、修复进程泄漏或 transport 代际问题。不包含：VS Code 扩展桥接（见…
180 GitHub stars~1.9k tokensUpdated 10 days ago
Auto-check passed
Knowledge Extension Ecosystem Skills And Custom Commands
echoVic/blade-code
覆盖 SkillRegistry、SKILL.md 延迟加载、自定义命令 Markdown 解析、来源覆盖、插件命名空间、Session 快照和模型/用户调用入口。进入条件：新增 Skill 或命令字段、调整发现优先级、调试 /command 或 Skill 工具、修改 Prompt 元数据或消费者集成。不包含：插件安装生命周期（见…
180 GitHub stars~2.1k tokensUpdated 10 days ago
Auto-check passed
Knowledge Integration And Workflow Tool Adapters
echoVic/blade-code
Covers 领域能力如何包装成内置工具、getBuiltinTools 的 Session 依赖注入、ToolSearch 延迟激活，以及 Goal/Task/Team/Plan/Skill/LSP/MCP/Web/Config/Worktree 适配边界。
180 GitHub stars~2.1k tokensUpdated 10 days ago
Auto-check passed

Works with

Questions about Knowledge Interaction Surfaces Web Client

What does Knowledge Interaction Surfaces Web Client do?

覆盖 Blade React Web 的启动恢复、Session/任务 Zustand 投影、SSE 重连、聊天输入、多项目导航、布局、预览、Browser 面板与终端。进入时机：修改 Web 消息流、Session 切换、草稿、错误恢复、Sidebar/Kanban、全屏预览、文件/Browser 活动或前端 API。. Knowledge Interaction Surfaces Web Client is an agent skill from echoVic/blade-code.

When should I use Knowledge Interaction Surfaces Web Client?

Knowledge Interaction Surfaces Web Client fits situations like: tasks that involve Task management; tasks that involve State management; tasks that involve Browser automation.

How do I install Knowledge Interaction Surfaces Web Client in Claude Code?

Run `npx skills add echoVic/blade-code --skill knowledge-interaction-surfaces-web-client -a claude-code`. Or copy the skill folder (.trae/knowledges/interaction-surfaces/web-client in echoVic/blade-code) into .claude/skills/knowledge-interaction-surfaces-web-client in your project. Claude Code loads it when a task matches its description.

How do I install Knowledge Interaction Surfaces Web Client in Codex?

Run `npx skills add echoVic/blade-code --skill knowledge-interaction-surfaces-web-client -a codex`. Or copy the skill folder (.trae/knowledges/interaction-surfaces/web-client in echoVic/blade-code) into .agents/skills/knowledge-interaction-surfaces-web-client in your project. Codex loads it when a task matches its description.

Can I use Knowledge Interaction Surfaces Web Client in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add echoVic/blade-code --skill knowledge-interaction-surfaces-web-client -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/knowledge-interaction-surfaces-web-client, .gemini/skills/knowledge-interaction-surfaces-web-client, .github/skills/knowledge-interaction-surfaces-web-client and .opencode/skills/knowledge-interaction-surfaces-web-client in your project.

What does Knowledge Interaction Surfaces Web Client need to run?

SKILL.md names no scripts, command-line tools or credentials: Knowledge Interaction Surfaces Web Client is instructions for the agent only.

Does Knowledge Interaction Surfaces Web Client access the network?

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.

Is Knowledge Interaction Surfaces Web Client safe to install?

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.

What licence does Knowledge Interaction Surfaces Web Client use?

Knowledge Interaction Surfaces Web Client is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Knowledge Interaction Surfaces Web Client use?

About 2k tokens (SKILL.md is roughly 7.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Knowledge Interaction Surfaces Web Client?

Skills that share tags, products or a category with Knowledge Interaction Surfaces Web Client: Agents SDK (hodgef/apiker, 127 stars), Zustand Store Patterns (stellar/laboratory, 112 stars), Tanstack Query (bskimball/tanstack-hono, 119 stars) and React Native Mmkv (margelo/react-native-skills, 175 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Knowledge Interaction Surfaces Web Client?

echoVic (a GitHub user) maintains it in echoVic/blade-code, which has 180 GitHub stars. The repository holds 38 skills in this directory. The repository was last updated on September 27, 2026.

Source: echoVic/blade-code on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Knowledge Interaction Surfaces Web Client

Facts

At a glance

What it does

When your agent uses it

Example prompts

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Module Structure

Directory Layout

Key Entry Points

Gotchas

Architecture

Decisions

Patterns

Dependencies

Files

Compare with similar skills

Similar skills

More from echoVic/blade-code

Related

Questions about Knowledge Interaction Surfaces Web Client