MCP Server Builder
anthropics/skills
Guides the design and implementation of Model Context Protocol servers in TypeScript or Python, from tool naming and error messages to evaluation.
开发、修改、重构和评审本仓库的 MCP App UI，并在每次界面改动后生成与真实实现同步的可交互内联预览。用于涉及 src/mcp-apps、MCP App HTML/CSS、交互状态、响应式布局、视觉验收、商店/闪卡/时间线 App 界面，或用户要求先可视化再验收的任务。
Install MCP App UI Development
$ npx skills add yangtaihong59/siyuan-plugins-mcp-sisyphus --skill mcp-app-ui-development -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install yangtaihong59/siyuan-plugins-mcp-sisyphus mcp-app-ui-development --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/yangtaihong59/siyuan-plugins-mcp-sisyphus.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/mcp-app-ui-development .claude/skills/mcp-app-ui-development && 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 "mcp-app-ui-development" agent skill from https://github.com/yangtaihong59/siyuan-plugins-mcp-sisyphus/tree/main/.agents/skills/mcp-app-ui-development into .claude/skills/mcp-app-ui-development/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "mcp-app-ui-development", 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/yangtaihong59/siyuan-plugins-mcp-sisyphus/tree/main/.agents/skills/mcp-app-ui-developmentType 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 yangtaihong59/siyuan-plugins-mcp-sisyphus --skill mcp-app-ui-development -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install yangtaihong59/siyuan-plugins-mcp-sisyphus mcp-app-ui-development --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/yangtaihong59/siyuan-plugins-mcp-sisyphus.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/mcp-app-ui-development .agents/skills/mcp-app-ui-development && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "mcp-app-ui-development" agent skill from https://github.com/yangtaihong59/siyuan-plugins-mcp-sisyphus/tree/main/.agents/skills/mcp-app-ui-development into .agents/skills/mcp-app-ui-development/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "mcp-app-ui-development", 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 yangtaihong59/siyuan-plugins-mcp-sisyphus --skill mcp-app-ui-development -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install yangtaihong59/siyuan-plugins-mcp-sisyphus mcp-app-ui-development --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/yangtaihong59/siyuan-plugins-mcp-sisyphus.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/mcp-app-ui-development .cursor/skills/mcp-app-ui-development && 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 "mcp-app-ui-development" agent skill from https://github.com/yangtaihong59/siyuan-plugins-mcp-sisyphus/tree/main/.agents/skills/mcp-app-ui-development into .cursor/skills/mcp-app-ui-development/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "mcp-app-ui-development", 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/yangtaihong59/siyuan-plugins-mcp-sisyphus.git --path .agents/skills/mcp-app-ui-development--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 yangtaihong59/siyuan-plugins-mcp-sisyphus --skill mcp-app-ui-development -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install yangtaihong59/siyuan-plugins-mcp-sisyphus mcp-app-ui-development --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/yangtaihong59/siyuan-plugins-mcp-sisyphus.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/mcp-app-ui-development .gemini/skills/mcp-app-ui-development && 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 "mcp-app-ui-development" agent skill from https://github.com/yangtaihong59/siyuan-plugins-mcp-sisyphus/tree/main/.agents/skills/mcp-app-ui-development into .gemini/skills/mcp-app-ui-development/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "mcp-app-ui-development", 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 yangtaihong59/siyuan-plugins-mcp-sisyphus mcp-app-ui-developmentInstalls 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 yangtaihong59/siyuan-plugins-mcp-sisyphus --skill mcp-app-ui-development -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/yangtaihong59/siyuan-plugins-mcp-sisyphus.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/mcp-app-ui-development .github/skills/mcp-app-ui-development && 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 "mcp-app-ui-development" agent skill from https://github.com/yangtaihong59/siyuan-plugins-mcp-sisyphus/tree/main/.agents/skills/mcp-app-ui-development into .github/skills/mcp-app-ui-development/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "mcp-app-ui-development", 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 yangtaihong59/siyuan-plugins-mcp-sisyphus --skill mcp-app-ui-development -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install yangtaihong59/siyuan-plugins-mcp-sisyphus mcp-app-ui-development --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/yangtaihong59/siyuan-plugins-mcp-sisyphus.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/mcp-app-ui-development .opencode/skills/mcp-app-ui-development && 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 "mcp-app-ui-development" agent skill from https://github.com/yangtaihong59/siyuan-plugins-mcp-sisyphus/tree/main/.agents/skills/mcp-app-ui-development into .opencode/skills/mcp-app-ui-development/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "mcp-app-ui-development", 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
mcp-app-ui-development- GitHub stars
- 116
- Token cost
- ~504 tokens
- SKILL.md length
- 138 words
- Files
- 2
- Skills in repo
- 30
- Repo updated
- First seen
- Licence
- MIT
At a glance
开发、修改、重构和评审本仓库的 MCP App UI，并在每次界面改动后生成与真实实现同步的可交互内联预览。用于涉及 src/mcp-apps、MCP App HTML/CSS、交互状态、响应式布局、视觉验收、商店/闪卡/时间线 App 界面，或用户要求先可视化再验收的任务。
- Works in 5 steps: 读取真实实现 → 明确交互语义 → 修改真实 MCP App → …
- Tasks that involve MCP servers
- SKILL.md covers 交付契约, 工作流程 and 最终回复
- Calls pnpm
What it does
MCP App UI Development is an agent skill from yangtaihong59/siyuan-plugins-mcp-sisyphus. 开发、修改、重构和评审本仓库的 MCP App UI，并在每次界面改动后生成与真实实现同步的可交互内联预览。用于涉及 src/mcp-apps、MCP App HTML/CSS、交互状态、响应式布局、视觉验收、商店/闪卡/时间线 App 界面，或用户要求先可视化再验收的任务。
Its SKILL.md is about 500 tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files (for example `agents/openai.yaml`).
It sits in Agent Workflows, covering MCP servers. It works with Model Context Protocol. The repository describes itself as: 一个用于连接Agent与Siyuan的工具. The licence is MIT.
When your agent uses it
- Tasks that involve MCP servers
Example prompts
- “/mcp-app-ui-development”
Workflow steps
5 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit d2ad534. 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
Shell commands in SKILL.md call:
pnpm
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use pnpm, which can reach the network depending on how they are called.
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
MCP App UI Development loads about 504 tokens when it runs. Until then it costs about 40 tokens; SKILL.md has 138 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.
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 yangtaihong59/siyuan-plugins-mcp-sisyphus at commit d2ad534, republished under its MIT licence (© yangtaihong59). 138 words, ~504 tokens.
Download SKILL.mdSave it as
.claude/skills/mcp-app-ui-development/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.- name
- mcp-app-ui-development
- description
- 开发、修改、重构和评审本仓库的 MCP App UI，并在每次界面改动后生成与真实实现同步的可交互内联预览。用于涉及 src/mcp-apps、MCP App HTML/CSS、交互状态、响应式布局、视觉验收、商店/闪卡/时间线 App 界面，或用户要求先可视化再验收的任务。
MCP App UI 开发
交付契约
把“真实 UI 改动”和“对话内可交互预览”视为同一个交付物。修改界面后不得只描述结果，也不得要求用户打开 Claude Desktop 才能做常规视觉检查。
每次 UI 改动必须完成：
- 修改仓库中的真实 MCP App。
- 更新相关回归测试和文档。
- 生成与当前实现一致的可交互预览。
- 在同一轮最终回复中直接展示预览。
工作流程
1. 读取真实实现
先检查与任务相关的文件，不要另造一套平行 UI：
src/mcp-apps/index.ts：界面结构、状态和交互。src/mcp-apps/style.css：样式、动画和响应式布局。src/core/mcp-apps.ts：App resource 与工具元数据。tests/unit/core/mcp-app-*-source.test.ts：UI 源码契约。- 对应工具 handler：确认结构化响应与动作语义。
保留用户现有改动。先理解状态流，再调整视觉层。
2. 明确交互语义
在编码前确定：
- 谁执行动作、谁收到结果。
- 初始、加载、成功、失败和空状态分别显示什么。
- 主交互触发的服务端 action、余额或数据变化、动画终点。
- 连续操作时状态是覆盖、排队还是累积。
文案和动画必须与真实业务方向一致。例如“机器出货给用户”不能表现成“角色收到礼物”。
3. 修改真实 MCP App
- 保持 App 自包含，遵守 MCP App CSP；没有明确需要时不依赖外部资源。
- 优先使用语义化 HTML、CSS 和内联 SVG；代码原生视觉不要调用位图生成。
- 保持键盘可操作、
aria-live状态反馈和prefers-reduced-motion降级。 - 至少覆盖常规宽度与窄屏布局，避免文字、按钮、动画或弹层溢出。
- App 内部调用聚合工具时保持现有 action 模型，不为视觉需求拆工具。
4. 添加验证
针对改动补充最小而明确的契约测试，重点验证：
- 关键结构和状态反馈存在。
- 已移除的旧角色、旧文案或旧交互不会回归。
- 动画与购买/提交等主动作对应。
- 不会产生多余工具调用或重复 MCP App。
先运行针对性测试：
pnpm exec vitest run tests/unit/core/mcp-app-*-source.test.ts
pnpm build:mcp-app涉及服务端嵌入时再运行：
pnpm build:server根据风险决定是否运行 pnpm test。不要把构建产物当源文件编辑。
5. 生成可交互预览
必须完整读取并遵守当前环境的 visualize skill，然后执行以下要求：
- 在当前线程明确可写的 visualization 目录创建 HTML fragment；禁止硬编码历史会话路径。
- 预览必须镜像刚完成的真实 DOM、CSS、文案、数据和主要交互，不能展示尚未实现的概念稿。
- 使用真实形状的示例 payload。需要 Host 或 MCP 调用的行为，只在预览中做等价的本地状态模拟。
- 主按钮必须可点击，并展示余额变化、成功/失败反馈、连续操作和关键动画。
- 预览保持自包含，不使用
fetch、XHR 或 WebSocket。 - 使用 visualize skill 的
render.py包装检查 HTML，并确认没有字面量\"或\n。 - 至少检查约 736px 和 360px 两种宽度；发现溢出、遮挡或不可读时先修复真实 UI，再同步预览。
- 最终回复必须包含该轮预览的
visualize内容引用。
预览是验收面，但不替代真实代码、构建或测试。
最终回复
简洁说明已经实现的行为、用户可在预览中点击什么以及验证结果，然后直接展示预览。不要让用户为了判断布局、角色或动画是否合适而先重启 Claude Desktop。
只有涉及真实 MCP Host 集成、缓存或协议行为时，才把 Claude Desktop 作为最后一道集成验收。
© yangtaihong59, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 1 other file in .agents/skills/mcp-app-ui-development of yangtaihong59/siyuan-plugins-mcp-sisyphus.
- SKILL.md
- agents/openai.yaml
Open the folder on GitHubat commit d2ad534
Compare with similar skills
MCP App UI Development 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 |
|---|---|---|---|---|---|---|
| MCP App UI Development this skillyangtaihong59/siyuan-plugins-mcp-sisyphus | 116 | — | ~504 | Automated safety check: Pass | MIT | |
| MCP Server Builderanthropics/skills | 180k | 63 repos | ~2.3k | Automated safety check: Pass | Apache-2.0 | |
| MCP Server BuildershareAI-lab/learn-claude-code | 78k | 4 repos | ~1.2k | Automated safety check: Pass | MIT | |
| MCP Integration for Pluginsanthropics/claude-plugins-official | 38k | 11 repos | ~3.1k | Automated safety check: Pass | Apache-2.0 | |
| Crush Configurationcharmbracelet/crush | 29k | — | ~3.7k | Automated safety check: Pass | Custom licence | |
| Context Mode Output Sandboxmksglu/context-mode | 26k | — | ~4.1k | Automated safety check: Pass | Custom licence |
Similar skills
- Official
MCP Server Builder
shareAI-lab/learn-claude-code
Walks through building MCP servers in Python or TypeScript that expose tools, resources and prompts to Claude, with templates, registration and testing.
- Official
MCP Integration for Plugins
anthropics/claude-plugins-official
Explains how to bundle Model Context Protocol servers in a Claude Code plugin, covering config files, stdio, SSE, HTTP and WebSocket server types, and authentication.
Crush Configuration
charmbracelet/crush
Explains how to configure the Crush coding agent with crushrc or crush.json, covering providers, models, LSPs, MCP servers, hooks, permissions and config precedence.
Context Mode Output Sandbox
mksglu/context-mode
Routes large command, file, API and browser output through context-mode tools so only the needed result enters the agent's context, instead of dumping it via Bash.
Warp GUI to Agent CLI Migration
warpdotdev/warp
Migrates the compatible subset of settings and global file-based MCP servers from the Warp desktop app into Warp Agent CLI without exposing credentials or state.
More from yangtaihong59/siyuan-plugins-mcp-sisyphus
All 30 skills in this repoSiyuan Built Cjs Live Test
yangtaihong59/siyuan-plugins-mcp-sisyphus
使用仓库刚构建的 dist/mcp-server.cjs 与 cli/dist/cli.cjs，在真实思源实例的隔离测试笔记本中执行端到端验收。用于验证工具或 action 修改、严格安全写入、短哈希预检租约、幂等重放、状态变化拒绝、HTTP/stdio/CLI 一致性，以及用户要求“实际测试”“真实笔记本测试”“全部 action 测试”或“不要只跑 mock”时。
Claude Desktop MCP App
yangtaihong59/siyuan-plugins-mcp-sisyphus
Configure, repair, and verify MCP servers and MCP Apps in Claude Desktop on macOS.
Git Workflow Cn
yangtaihong59/siyuan-plugins-mcp-sisyphus
Chinese git workflow conventions including commit message generation and merge practices.
Siyuan MCP Browse Read
yangtaihong59/siyuan-plugins-mcp-sisyphus
MCP playbook for browsing and reading SiYuan notes. An agent skill from yangtaihong59/siyuan-plugins-mcp-sisyphus.
Siyuan MCP Create Edit
yangtaihong59/siyuan-plugins-mcp-sisyphus
MCP playbook for creating and editing SiYuan documents and blocks.
Siyuan MCP Sisyphus
yangtaihong59/siyuan-plugins-mcp-sisyphus
Top-level skill for operating SiYuan Note through the Sisyphus MCP server.
Related
Works with
Categories
Questions about MCP App UI Development
What does MCP App UI Development do?
开发、修改、重构和评审本仓库的 MCP App UI，并在每次界面改动后生成与真实实现同步的可交互内联预览。用于涉及 src/mcp-apps、MCP App HTML/CSS、交互状态、响应式布局、视觉验收、商店/闪卡/时间线 App 界面，或用户要求先可视化再验收的任务。. MCP App UI Development is an agent skill from yangtaihong59/siyuan-plugins-mcp-sisyphus.
When should I use MCP App UI Development?
MCP App UI Development fits situations like: tasks that involve MCP servers.
How do I install MCP App UI Development in Claude Code?
Run `npx skills add yangtaihong59/siyuan-plugins-mcp-sisyphus --skill mcp-app-ui-development -a claude-code`. Or copy the skill folder (.agents/skills/mcp-app-ui-development in yangtaihong59/siyuan-plugins-mcp-sisyphus) into .claude/skills/mcp-app-ui-development in your project. Claude Code loads it when a task matches its description.
How do I install MCP App UI Development in Codex?
Run `npx skills add yangtaihong59/siyuan-plugins-mcp-sisyphus --skill mcp-app-ui-development -a codex`. Or copy the skill folder (.agents/skills/mcp-app-ui-development in yangtaihong59/siyuan-plugins-mcp-sisyphus) into .agents/skills/mcp-app-ui-development in your project. Codex loads it when a task matches its description.
Can I use MCP App UI Development 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 yangtaihong59/siyuan-plugins-mcp-sisyphus --skill mcp-app-ui-development -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/mcp-app-ui-development, .gemini/skills/mcp-app-ui-development, .github/skills/mcp-app-ui-development and .opencode/skills/mcp-app-ui-development in your project.
What does MCP App UI Development need to run?
Going by SKILL.md and its folder, MCP App UI Development needs the command-line tools its instructions call (pnpm).
Does MCP App UI Development 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 MCP App UI Development 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 MCP App UI Development use?
MCP App UI Development 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 MCP App UI Development use?
About 504 tokens (SKILL.md is roughly 2k 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 MCP App UI Development?
Skills that share tags, products or a category with MCP App UI Development: MCP Server Builder (anthropics/skills, 180k stars), MCP Server Builder (shareAI-lab/learn-claude-code, 78k stars), MCP Integration for Plugins (anthropics/claude-plugins-official, 38k stars) and Crush Configuration (charmbracelet/crush, 29k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains MCP App UI Development?
yangtaihong59 (a GitHub user) maintains it in yangtaihong59/siyuan-plugins-mcp-sisyphus, which has 116 GitHub stars. The repository holds 30 skills in this directory. The repository was last updated on October 8, 2026.
Source: yangtaihong59/siyuan-plugins-mcp-sisyphus on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.