Borrowing it
Nothing to install: this file belongs to yangtaihong59/siyuan-plugins-mcp-sisyphus. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/yangtaihong59/siyuan-plugins-mcp-sisyphus/main/.agents/skills/mcp-app-ui-development/SKILL.mdgit clone --depth 1 https://github.com/yangtaihong59/siyuan-plugins-mcp-sisyphusWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/yangtaihong59/siyuan-plugins-mcp-sisyphus/mcp-app-ui-development)<a href="https://agentmods.dev/skills/yangtaihong59/siyuan-plugins-mcp-sisyphus/mcp-app-ui-development"><img src="https://agentmods.dev/badge/skills/yangtaihong59/siyuan-plugins-mcp-sisyphus/mcp-app-ui-development/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/yangtaihong59/siyuan-plugins-mcp-sisyphus/mcp-app-ui-development"><img src="https://agentmods.dev/badge/skills/yangtaihong59/siyuan-plugins-mcp-sisyphus/mcp-app-ui-development.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00098 | $0.01106 |
| Opus 5 | $0.00049 | $0.00553 |
| Sonnet 5 | $0.00020 | $0.00221 |
| Haiku 4.5 | $0.00010 | $0.00111 |
Grade A, and why
mcp-app-ui-development scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 13d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
What it actually says
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 作为最后一道集成验收。
What ships with it
1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 13d ago First seen · 96 lines · 98 tokens per session scan A 5c89d74bedbc
mcp-app-ui-development is a skill published in the GitHub repository yangtaihong59/siyuan-plugins-mcp-sisyphus (104 stars, last pushed 2d ago), licensed MIT. It adds 98 tokens to every session and 1,106 once invoked, about $0.0005 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
chakra-ui-builder
Build responsive, accessible UI components and layouts using Chakra UI v3, install or configure Chakra UI in new and existing projects, and design scalable themes using tokens, semantic tokens, recipes, and slot recipes. Use this skill whenever a user asks to build, create, or generate any UI component, page, form…
visual-ralph
Visual Ralph orchestration for frontend UI from generated references, static references, or live URL targets, using $ultragoal with built-in visual verdict and pixel-diff evidence until the implementation matches and leaves a reproducible design system.
frontend-ui-dark-ts
Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations. Use when creating dashboards, admin panels, or data-rich interfaces with a refined dark aesthetic.
reveal-hover-effect
Build cursor-following spotlight reveals that expose a second aligned image through a soft radial mask. Use for hover-to-color, before-and-after, x-ray, material, texture, product-detail, and illustrated hero effects where a desaturated or embossed base image should remain visible while another treatment follows an…
frontend-visual-qa
Audits already-rendered web, landing-page, HTML deck/slide, browser tool/game, dashboard/admin, design-system, and desktop UIs using real-browser or native-app journeys, inspected screenshots, DOM geometry, responsive or projection viewports, and a bundled Playwright sweep. Use after UI implementation to find…
prototype-web
A clickable, high-fidelity web product prototype with navigation, a hero section, feature cards, steps, social proof, and optional pricing. It is designed to resemble a finished landing page while remaining a prototype.