New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Openclaw A2ui

by LeoYeAI in LeoYeAI/openclaw-master-skills

为 OpenClaw webchat 回复增加个性化富 UI 展示，基于 HTML 直出渲染. An agent skill from LeoYeAI/openclaw-master-skills.

MITAuto-check passed

Install Openclaw A2ui

skills CLI
$ npx skills add LeoYeAI/openclaw-master-skills --skill openclaw-a2ui -a claude-code

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

GitHub CLI
$ gh skill install LeoYeAI/openclaw-master-skills openclaw-a2ui --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/LeoYeAI/openclaw-master-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/openclaw-a2ui .claude/skills/openclaw-a2ui && 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/

Facts

Skill name
openclaw-a2ui
GitHub stars
2.2k
Token cost
~4.6k tokens
SKILL.md length
372 words
Files
13 (incl. scripts, references, assets)
Skills in repo
1,235
Repo updated
First seen
Licence
MIT

At a glance

为 OpenClaw webchat 回复增加个性化富 UI 展示，基于 HTML 直出渲染. An agent skill from LeoYeAI/openclaw-master-skills.

  • Works in 4 steps: 读取 workspace/skills/ 下所有… → 将 manifest + bootstrap JS 合并写成… → 在 index.html 中注入 → …
  • SKILL.md covers ⚠️ HTML 不渲染？先看这里, 触发规则（优先级由高到低）, 输出方式（唯一方式） and 设计规范（所有卡片统一）, plus 5 more sections
  • Runs JavaScript and TypeScript scripts from its folder; calls node and docker

What it does

Openclaw A2ui is an agent skill from LeoYeAI/openclaw-master-skills. 为 OpenClaw webchat 回复增加个性化富 UI 展示，基于 HTML 直出渲染。 【默认启用】凡是结构化内容（列表、数据、步骤、表格、摘要、状态、代码等）一律用 HTML 卡片回复。 纯文字聊天（简单问答、闲聊）不强制套卡片。 当用户要求安装/迁移 openclaw-a2ui、启用 HTML 渲染、配置 DOMPurify 白名单扩展、 安装 skill-ui-bridge plugin，或排查 webchat 中 HTML 不渲染的问题时，参考底部安装章节。

Its SKILL.md is about 4.6k tokens, which your agent loads only when the skill is triggered. The skill folder holds 15 other files, including scripts, reference files and assets (for example `_meta.json`, `assets/skill-ui-bridge-plugin.js` and `assets/skill-ui-bridge-plugin.json`).

The repository describes itself as: 🧠 Curated collection of 1209+ best OpenClaw skills — weekly updated by MyClaw.ai. The licence is MIT.

Example prompts

  • “/openclaw-a2ui”

Requirements

  • Node.js

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

  1. 读取 workspace/skills/ 下所有 ui-config.json，生成 manifest JSON
  2. 将 manifest + bootstrap JS 合并写成 skill-ui-init.js，放到 control-ui 静态目录（同源，通过 CSP script-src 'self'）
  3. 在 index.html 中注入
  4. gateway_stop 时还原 index.html，删除 skill-ui-init.js

What it can do on your machine

Read from SKILL.md and the folder at commit e5199b5. 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

    Ships 2 files in scripts/ (JavaScript and TypeScript), which the agent can run.

    Shell commands in SKILL.md call:

    • node
    • docker

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use docker, 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

Openclaw A2ui loads about 4.6k tokens when it runs, and up to ~18k if it reads all its reference files. Until then it costs about 63 tokens; SKILL.md has 372 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~63
When it runs · the whole SKILL.md, loaded when a task matches
~4.6k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~18k

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); the scripts in this folder are not scanned.

SKILL.md

The full file from LeoYeAI/openclaw-master-skills at commit e5199b5, republished under its MIT licence (© LeoYeAI). 372 words, ~4,643 tokens.

Download SKILL.mdSave it as .claude/skills/openclaw-a2ui/SKILL.md (or your agent's skills folder). This skill also uses 12 other files; get the full folder from GitHub.
name
openclaw-a2ui
description
为 OpenClaw webchat 回复增加个性化富 UI 展示，基于 HTML 直出渲染。 【默认启用】凡是结构化内容（列表、数据、步骤、表格、摘要、状态、代码等）一律用 HTML 卡片回复。 纯文字聊天（简单问答、闲聊）不强制套卡片。 当用户要求安装/迁移 openclaw-a2ui、启用 HTML 渲染、配置 DOMPurify 白名单扩展、 安装 skill-ui-bridge plugin，或排查 webchat 中 HTML 不渲染的问题时，参考底部安装章节。

openclaw-a2ui

本技能已验证（2026-03-18）：style / div / grid / flex / table / img / svg 全部渲染正常。 除非用户要求纯文字，否则所有结构化内容必须用 HTML 卡片输出。

Changelog
  • v1.0.2（2026-03-18）：骨架屏优化
    • 骨架插入到 .chat-text 直接父节点（气泡本身），并设 inline-block + min-width: 320px 撑开气泡
    • .sui-skeleton 固定 width: 320px; display: block，解决 inline-block 气泡宽度塌陷问题
    • 骨架行结构调整：标题行 12px / 正文行 8px / 底部两段不等宽细线，比例更自然
    • 移除骨架时还原气泡 display 和 minWidth
  • v1.0.1（2026-03-09）：流式骨架屏 + 淡入动画，findBubble 隐藏整体气泡
  • v1.0.0（待更新）：单卡片模式 - 默认所有结构化回复使用单一 CompositeCard 统一承载，减少多卡片的视觉碎片化。

⚠️ HTML 不渲染？先看这里

如果 webchat 中 HTML 被显示为纯文本、标签被转义、或样式无效，不要尝试手动修改 DOMPurify 配置。根本原因是 skill-ui-bridge 插件未安装，解决方式：

现象原因解决方式
HTML 标签显示为文本（如 <div>）marked.js 未开启 rawHTML安装 skill-ui-bridge 插件（见底部安装章节）
样式被剥离，只剩裸文字/标签DOMPurify 未 patch，style/div 等被过滤安装 skill-ui-bridge 插件（见底部安装章节）
部分标签渲染，部分不渲染插件未加载成功检查安装验证步骤 5、6

skill-ui-bridge 插件安装后会自动 patch DOMPurify 和 marked.js，无需手动配置白名单。

触发规则（优先级由高到低）

场景处理方式
结构化内容（列表、步骤、数据、表格、统计、对比、状态）✅ 必须用单一卡片显示，无文本前后缀
有标题 + 正文的摘要/说明✅ 用单一 CompositeCard 承载所有内容（单卡片模式）
代码 + 说明✅ 优先用单一 CodeCard，必要时在 Card内嵌入代码块
简单一句话回答⚪ 纯文字即可
用户明确说"纯文字"/"不要卡片"❌ 不用卡片

💡 单卡片模式强制规则：

所有结构化内容必须只用卡片显示，不要有文本 + 卡片的组合形式。

  • ✅ 正确：所有内容（标题、要点、数据）都在一个 CompositeCard 内展示
  • ❌ 错误：先写一段文字说明，再跟一个卡片
  • ❌ 错误：卡片后再追加额外解释性文本

**目标：**每张回复只出现一张卡片（或无卡片），避免视觉碎片化和信息重复。

例如：

markdown
❌ 错误写法（多元素组合）:
这是关于 AI Agent 的最新趋势，请查看下方卡片。

<div class="a2ui">...

以上数据截至 3 月 18 日。

---

✅ 正确写法（单卡片模式）:
<div class="a2ui">
  <!-- 标题：AI Agent 最新趋势 -->
  <!-- 数据内容 -->
  <!-- 数据来源说明 -->
  <!-- 截止时间戳 -->
</div>

输出方式（唯一方式）

直接在回复正文中输出 HTML，不要包裹在代码块里，webchat 会直接渲染。

⚠️ 强制要求：每张卡片最外层必须带 class="a2ui"

skill-ui-bridge 通过检测 class="a2ui" 识别需要渲染的 HTML，缺少此 class 的卡片不会被渲染。

html
<!-- ✅ 正确 -->
<div class="a2ui" style="...">
  <!-- 你的卡片内容 -->
</div>

<!-- ❌ 错误，不会被渲染 -->
<div style="...">卡片内容</div>
⚠️ 关键规则：HTML 与文字必须分段

marked.js 在解析时，如果 HTML 和普通文字混在同一段落，会把 HTML 标签转义成文本显示。

❌ 错误写法（HTML 夹在文字中间）：

以下是热榜内容：<div class="a2ui" style="..."></div> 感兴趣可以点击查看。

✅ 正确写法（HTML 单独成段，前后空行隔开）：

以下是热榜内容：

<div class="a2ui" style=".">
  <!-- 卡片内容 -->
</div>

感兴趣可以点击查看。

规则：

  • HTML 卡片前后必须有空行（不能紧跟文字）
  • 文字说明放在卡片之前或之后，单独成段
  • 单卡片模式优先：多卡片连续输出时，考虑合并为一个 CompositeCard

设计规范（所有卡片统一）

背景:    #ffffff
圆角:    12px（卡片）/ 8px（内部元素）/ 999px（badge/tag）
阴影:    0 2px 12px rgba(0,0,0,0.08)
主色:    #5865f2（蓝紫）
成功:    #22c55e
警告:    #f59e0b
错误:    #ef4444
信息:    #3b82f6
标题色:  #1a1a2e
正文色:  #374151
说明色:  #6b7280
分割线:  #f0f0f0
底色块:  #f8fafc
最大宽:  600px
外边距:  margin:8px 0
字体:    -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif

卡片模板速查

TextCard — 文字摘要
html
<div class="a2ui" style="background:#fff;border-radius:12px;padding:20px;box-shadow:0 2px 12px rgba(0,0,0,0.08);max-width:600px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;margin:8px 0">
  <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px">
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#5865f2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
    <strong style="font-size:16px;color:#1a1a2e">【标题】</strong>
  </div>
  <hr style="border:none;border-top:1px solid #f0f0f0;margin:0 0 14px">
  <p style="color:#374151;line-height:1.7;margin:0;font-size:14px">【正文内容】</p>
</div>
ListCard — 列表/要点
html
<div class="a2ui" style="background:#fff;border-radius:12px;padding:20px;box-shadow:0 2px 12px rgba(0,0,0,0.08);max-width:600px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;margin:8px 0">
  <strong style="font-size:16px;color:#1a1a2e;display:block;margin-bottom:12px">【标题】</strong>
  <hr style="border:none;border-top:1px solid #f0f0f0;margin:0 0 14px">
  <ul style="list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px">
    <li style="display:flex;align-items:flex-start;gap:10px">
      <svg style="flex-shrink:0;margin-top:2px" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
      <span style="color:#374151;font-size:14px;line-height:1.5">【列表项】</span>
    </li>
  </ul>
</div>
DataCard — 键值对 / 参数
html
<div class="a2ui" style="background:#fff;border-radius:12px;padding:20px;box-shadow:0 2px 12px rgba(0,0,0,0.08);max-width:600px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;margin:8px 0">
  <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px">
    <strong style="font-size:16px;color:#1a1a2e">【标题】</strong>
    <span style="background:#dcfce7;color:#16a34a;font-size:12px;padding:3px 10px;border-radius:999px;font-weight:600">【状态 badge，可选】</span>
  </div>
  <hr style="border:none;border-top:1px solid #f0f0f0;margin:0 0 14px">
  <div style="display:flex;flex-direction:column;gap:0">
    <div style="display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid #f8fafc">
      <span style="color:#6b7280;font-size:14px">【字段名】</span>
      <span style="color:#1a1a2e;font-weight:500;font-size:14px">【字段值】</span>
    </div>
  </div>
</div>
StatsCard — 统计数字
html
<div class="a2ui" style="background:#fff;border-radius:12px;padding:20px;box-shadow:0 2px 12px rgba(0,0,0,0.08);max-width:600px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;margin:8px 0">
  <strong style="font-size:16px;color:#1a1a2e;display:block;margin-bottom:14px">【标题】</strong>
  <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:12px">
    <div style="text-align:center;padding:14px 8px;background:#f8fafc;border-radius:10px">
      <div style="font-size:26px;font-weight:800;color:#5865f2;line-height:1">【数字】</div>
      <div style="font-size:11px;color:#6b7280;margin-top:4px">【说明】</div>
    </div>
  </div>
</div>
AlertCard — 提示/警告/成功/错误
html
<!-- info -->
<div class="a2ui" style="background:#eff6ff;border-left:4px solid #3b82f6;border-radius:0 8px 8px 0;padding:12px 16px;display:inline-flex;gap:10px;align-items:flex-start;font-family:-apple-system,sans-serif;margin:8px 0">
  <span style="font-size:16px;flex-shrink:0">ℹ️</span>
  <div><div style="font-size:13px;font-weight:600;color:#1e40af;margin-bottom:2px">【标题】</div><div style="font-size:13px;color:#1e3a8a">【内容】</div></div>
</div>
<!-- success: bg=#f0fdf4 border=#22c55e title-color=#15803d text-color=#14532d emoji=✅ -->
<!-- warning: bg=#fffbeb border=#f59e0b title-color=#b45309 text-color=#92400e emoji=⚠️ -->
<!-- error:   bg=#fef2f2 border=#ef4444 title-color=#b91c1c text-color=#991b1b emoji=❌ -->
StepsCard — 步骤流程
html
<div class="a2ui" style="background:#fff;border-radius:12px;padding:20px;box-shadow:0 2px 12px rgba(0,0,0,0.08);max-width:600px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;margin:8px 0">
  <strong style="font-size:16px;color:#1a1a2e;display:block;margin-bottom:16px">【标题】</strong>
  <div style="display:flex;flex-direction:column;gap:0">
    <!-- 非最后一步（有连接线） -->
    <div style="display:flex;gap:14px">
      <div style="display:flex;flex-direction:column;align-items:center">
        <div style="width:28px;height:28px;border-radius:50%;background:#5865f2;color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0">1</div>
        <div style="width:2px;background:#e5e7eb;flex:1;margin:4px 0"></div>
      </div>
      <div style="padding-bottom:16px">
        <div style="font-size:14px;font-weight:600;color:#1a1a2e;margin-bottom:4px">【步骤标题】</div>
        <div style="font-size:13px;color:#6b7280">【步骤说明】</div>
      </div>
    </div>
    <!-- 最后一步（绿色圆圈，无连接线） -->
    <div style="display:flex;gap:14px">
      <div style="display:flex;flex-direction:column;align-items:center">
        <div style="width:28px;height:28px;border-radius:50%;background:#22c55e;color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0">N</div>
      </div>
      <div>
        <div style="font-size:14px;font-weight:600;color:#1a1a2e;margin-bottom:4px">【最后步骤】</div>
        <div style="font-size:13px;color:#6b7280">【说明】</div>
      </div>
    </div>
  </div>
</div>
TableCard — 数据表格
html
<div class="a2ui" style="background:#fff;border-radius:12px;padding:20px;box-shadow:0 2px 12px rgba(0,0,0,0.08);max-width:600px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;margin:8px 0;overflow-x:auto">
  <strong style="font-size:16px;color:#1a1a2e;display:block;margin-bottom:14px">【标题】</strong>
  <table style="width:100%;border-collapse:collapse;font-size:13px">
    <thead>
      <tr style="background:#f8fafc">
        <th style="text-align:left;padding:8px 12px;color:#6b7280;font-weight:600;border-bottom:2px solid #f0f0f0">【列名】</th>
      </tr>
    </thead>
    <tbody>
      <tr style="border-bottom:1px solid #f0f0f0">
        <td style="padding:9px 12px;color:#374151">【值】</td>
      </tr>
    </tbody>
  </table>
</div>

Badge 色值参考：

  • 成功/完成：background:#dcfce7;color:#16a34a
  • 进行中：background:#fef9c3;color:#b45309
  • 失败/错误：background:#fee2e2;color:#b91c1c
  • 中性/待定：background:#f1f5f9;color:#475569
ProgressCard — 进度条
html
<div class="a2ui" style="background:#fff;border-radius:12px;padding:20px;box-shadow:0 2px 12px rgba(0,0,0,0.08);max-width:600px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;margin:8px 0">
  <strong style="font-size:16px;color:#1a1a2e;display:block;margin-bottom:14px">【标题】</strong>
  <div style="display:flex;flex-direction:column;gap:12px">
    <div>
      <div style="display:flex;justify-content:space-between;margin-bottom:5px">
        <span style="font-size:13px;color:#374151">【项目名】</span>
        <span style="font-size:13px;font-weight:600;color:#22c55e">【百分比】</span>
      </div>
      <div style="background:#f0f0f0;border-radius:999px;height:8px;overflow:hidden">
        <div style="width:【百分比】;height:100%;background:linear-gradient(90deg,#22c55e,#4ade80);border-radius:999px"></div>
      </div>
    </div>
  </div>
</div>
CompositeCard — 推荐：单一复合卡片（承载所有内容）

✅ 单卡片模式最佳实践示例：

html
<div class="a2ui" style="background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,0.08);max-width:600px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;margin:8px 0">
  <div style="background:linear-gradient(135deg,#5865f2,#7c3aed);padding:20px 20px 16px">
    <div style="font-size:18px;font-weight:700;color:#fff;margin-bottom:4px">🔥 今日热门新闻精选</div>
    <div style="font-size:13px;color:rgba(255,255,255,0.8)">3 月 18 日 • AI | 国际局势 | 国家发展 | 体育快讯</div>
  </div>
  <div style="padding:16px 20px">
    <!-- 使用 flex/grid 布局嵌入所有子内容 -->
    <div style="display:flex;flex-direction:column;gap:14px">
      <!-- 国际焦点模块 -->
      <div style="background:#f8fafc;border-radius:8px;padding:12px">
        <div style="font-size:13px;font-weight:600;color:#5865f2;margin-bottom:6px">📰 国际焦点</div>
        <div style="font-weight:600;color:#1a1a2e;margin-bottom:4px;font-size:14px">中东冲突升级：以军击毙伊朗高级官员，霍尔木兹海峡受阻影响全球能源</div>
        <p style="color:#374151;font-size:13px;line-height:1.6;margin:0">以色列国防部长宣称在空袭中击毙两名伊朗高级官员，其中包括前核谈判战略顾问拉里贾尼和志愿民兵指挥官苏莱曼尼。受霍尔木兹海峡袭击影响，全球油价大幅上涨，布伦特原油突破100美元/桶。</p>
        <div style="font-size:12px;color:#6b7280;margin-top:8px">📍 来源：新华社/央视新闻</div>
      </div>
      <!-- 科技前沿模块 -->
      <div style="background:#f8fafc;border-radius:8px;padding:12px">
        <div style="font-size:13px;font-weight:600;color:#22c55e;margin-bottom:6px">💻 科技前沿</div>
        <div style="font-weight:600;color:#1a1a2e;margin-bottom:4px;font-size:14px">AI技术迎来重大突破：英伟达推开源AI代理平台，阿里巴巴发布"悟空"AI工作平台</div>
        <p style="color:#374151;font-size:13px;line-height:1.6;margin:0">英伟达推出开源AI代理平台NemoClaw，预测业务规模有望突破1万亿美元。阿里巴巴发布全球首个企业原生AI工作平台"悟空"，将嵌入钉钉。</p>
        <div style="font-size:12px;color:#6b7280;margin-top:8px">📍 来源：财新/36氪</div>
      </div>
    </div>
    <!-- 底部标签栏 -->
    <div style="display:flex;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid #f0f0f0">
      <a href="#" style="background:#5865f2;color:#fff;font-size:13px;font-weight:600;padding:8px 16px;border-radius:8px;text-decoration:none;display:inline-block">🔗 查看详情</a>
      <a href="#" style="background:#f8fafc;color:#374151;font-size:13px;font-weight:600;padding:8px 16px;border-radius:8px;text-decoration:none;display:inline-block;border:1px solid #e5e7eb">⚙️ 更多选项</a>
    </div>
  </div>
</div>
CodeCard — 代码展示
html
<div class="a2ui" style="background:#1e1e2e;border-radius:12px;overflow:hidden;max-width:600px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;margin:8px 0">
  <div style="display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:#2a2a3e">
    <span style="font-size:12px;color:#a0a0b8;font-weight:600">【语言，如 bash / python / typescript】</span>
    <div style="display:flex;gap:6px">
      <div style="width:10px;height:10px;border-radius:50%;background:#ff5f56"></div>
      <div style="width:10px;height:10px;border-radius:50%;background:#ffbd2e"></div>
      <div style="width:10px;height:10px;border-radius:50%;background:#27c93f"></div>
    </div>
  </div>
  <pre style="margin:0;padding:16px;overflow-x:auto;font-size:13px;line-height:1.6;color:#cdd6f4;font-family:'Fira Code','Cascadia Code',Consolas,monospace">【代码内容】</pre>
</div>
ImageCard — 图片展示
html
<div class="a2ui" style="background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,0.08);max-width:600px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;margin:8px 0">
  <img src="【URL】" alt="【描述】" style="width:100%;height:200px;object-fit:cover;display:block">
  <div style="padding:14px 16px">
    <div style="font-size:15px;font-weight:700;color:#1a1a2e;margin-bottom:4px">【标题】</div>
    <div style="font-size:13px;color:#6b7280;line-height:1.5">【说明】</div>
  </div>
</div>

组合使用与最佳实践

✅ 单卡片模式（推荐）
  • 所有内容放入一个 CompositeCard，用子模块划分信息块
  • 减少视觉碎片化，提升阅读体验
  • 适合：新闻汇总、报告摘要、任务清单等多元素场景
html
<!-- ✅ 单卡片模式：所有信息在一个 CompositeCard 中 -->
<div class="a2ui" style="...">
  <header>标题区域</header>
  <content>
    <section>模块1: 国际焦点</section>
    <section>模块2: 科技前沿</section>
    <section>模块3: 国家发展</section>
  </content>
  <footer>底部标签栏</footer>
</div>
⚠️ 多卡片模式（特殊需求时使用）
  • 仅在特殊需求时使用：如独立代码块 + 独立说明的分离场景
html
<!-- ⚠️ 多卡片模式 -->
<div class="a2ui">代码展示卡片</div>
<div class="a2ui">说明文字卡片</div>

规则：

  • 多卡片连续输出时，卡片之间不需要空行（margin:8px 0 已处理间距）
  • 优先使用单卡片模式：考虑合并为一个 CompositeCard

不使用卡片的场景

  • 单句回答（"好的"、"明白了"、"没问题"）
  • 闲聊/情感性回复
  • 用户明确要求纯文字
Show full SKILL.md (158 more words)Show less

详细参考

  • references/html-templates.md — 带真实示例数据的完整 HTML 模板
  • references/templates.md — A2UI v0.9 JSONL 格式模板
  • references/components.md — A2UI 组件参考（布局/展示/交互）
  • references/html-card-templates.md — 简化版 HTML 模板
  • references/ui-config-schema.md — ui-config.json 字段说明

安装

所有依赖文件已随技能打包，无需克隆任何外部仓库。assets/ 目录包含：

  • skill-ui-bridge.js — 浏览器端 bootstrap 脚本（v2）
  • skill-ui-bridge-plugin.js / skill-ui-bridge-plugin.json — openclaw plugin（v2）

⛔ 只读取完成当前步骤所必需的文件。遇到无法理解的内容（如编译产物、二进制文件）立即停止，不要继续探索无关文件。

安装原理（v2）：plugin 在 gateway_start 时：

  1. 读取 workspace/skills/ 下所有 ui-config.json，生成 manifest JSON
  2. 将 manifest + bootstrap JS 合并写成 skill-ui-init.js，放到 control-ui 静态目录（同源，通过 CSP script-src 'self'）
  3. 在 index.html 中注入 <script src="./skill-ui-init.js"></script>
  4. gateway_stop 时还原 index.html，删除 skill-ui-init.js

浏览器加载 skill-ui-init.js 后，bootstrap 脚本通过 MutationObserver 监听 .chat-text 容器，检测到包含 <div class="a2ui"> 的消息时，用自有白名单净化并渲染为富卡片。

安装前，先探测所有必要路径，再执行安装脚本。不得假设或写死任何路径。

第一步：探测路径

依次从常见配置目录向外搜索，记录每项的实际输出结果：

bash
# 1. 找本技能目录
find /etc "$HOME" /usr/local /opt -path "*/skills/openclaw-a2ui" -type d 2>/dev/null | head -5

# 2. 找所有 openclaw.json，列出全部路径
find /etc "$HOME" /usr/local /opt -name "openclaw.json" 2>/dev/null | head -10

根据输出结果判断：

  • 若存在多个 openclaw.json，读取每个文件的内容，选择正在被 gateway 实际使用的那个（判断依据：文件可写、且 plugins 字段中的修改重启后不会消失）。通常是 $HOME/.openclaw/openclaw.json 而非 /etc/ 下的只读镜像层副本。
  • extensions 目录默认为 $HOME/.openclaw/extensions，也可从选定的 openclaw.json 的 plugins.load.paths 中读取。
  • workspace 目录默认为 $HOME/.openclaw/workspace。
  • 确认 scripts/install.ts 存在后再继续。
第二步：运行安装脚本

用第一步探测到的实际路径执行：

bash
node --experimental-strip-types <技能目录>/scripts/install.ts \
  --openclaw-config <openclaw.json 路径> \
  --extensions-dir <extensions 目录路径> \
  --workspace-dir <workspace 目录路径>

参数均可省略，脚本会自动探测默认路径。

安装脚本会完成：

  • Plugin 文件复制到 extensions 目录
  • Plugin 注册到 openclaw.json（allow / load.paths / entries 三处）
  • ui-config.json 复制到 workspace/skills/openclaw-a2ui/（若不存在）
第三步：通知用户重启

⚠️ Agent 无法自行完成此步骤：重启 gateway 意味着重启当前容器进程，必须由用户在宿主机执行。

告知用户执行以下操作：

容器化部署（docker compose）：

bash
docker compose restart openclaw

本机直接部署：

bash
openclaw gateway restart

重启后提示用户在浏览器强制刷新（Ctrl+Shift+R）。

安装验证

安装并重启后，依次执行以下检查（全部通过才算成功）：

1. Plugin 文件已复制

bash
ls <extensions-dir>/skill-ui-bridge/
# 预期：index.js  openclaw.plugin.json  skill-ui-bridge.js

2. Plugin 已正确注册到 openclaw.json

openclaw.json 的 plugins 字段应包含以下三处（缺任何一处都会导致插件不加载）：

json
{
  "plugins": {
    "allow": ["skill-ui-bridge"],
    "load": { "paths": ["<extensions-dir>"] },
    "entries": { "skill-ui-bridge": { "enabled": true } }
  }
}

3. index.html 已注入（gateway 重启后）

bash
grep "skill-ui-init" <openclaw-dist>/control-ui/index.html
# 预期：<script src="./skill-ui-init.js"></script>

4. 浏览器 Console 验证

F12 打开 Console，Ctrl+Shift+R 强制刷新，应看到：

[skill-ui-bridge] boot ok, tags: 45 attrs: 34
卸载
bash
node --experimental-strip-types <技能目录>/scripts/uninstall.ts \
  --openclaw-config <openclaw.json 路径> \
  --extensions-dir <extensions-dir> \
  --remove-plugin-files

卸载后同样需要通知用户重启（见第三步）。

© LeoYeAI, 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 12 other files (scripts, references, assets) in skills/openclaw-a2ui of LeoYeAI/openclaw-master-skills.

  • SKILL.md
  • _meta.json
  • assets/skill-ui-bridge-plugin.js
  • assets/skill-ui-bridge-plugin.json
  • assets/skill-ui-bridge.js
  • references/components.md
  • references/html-card-templates.md
  • references/html-templates.md
  • references/templates.md
  • references/ui-config-schema.md
  • scripts/install.ts
  • scripts/uninstall.ts
  • ui-config.json

Open the folder on GitHubat commit e5199b5

Compare with similar skills

Openclaw A2ui 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.

Openclaw A2ui compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Openclaw A2ui this skillLeoYeAI/openclaw-master-skills2.2k—~4.6kAutomated safety check: PassMIT
A2ui Release Pythona2ui-project/a2ui17k—~4.8kAutomated safety check: PassApache-2.0
A2uiPrism-Shadow/penguin-harness2.5k—~3kAutomated safety check: PassApache-2.0
A2ui Issue Triagea2ui-project/a2ui17k—~1.5kAutomated safety check: PassApache-2.0
A2ui Blueprint Navigatora2ui-project/a2ui17k—~669Automated safety check: PassApache-2.0
A2ui Swift Developmenta2ui-project/a2ui17k—~1.5kAutomated safety check: PassApache-2.0

Similar skills

  • A2ui Release Python

    a2ui-project/a2ui

    Releases the Python SDKs (a2ui-core, a2ui-agent-sdk) to PyPI by running preflight checks, dispatching the release workflow as a dry run, confirming with the maintainer, publishing, and following the…

    17k GitHub stars~4.8k tokensUpdated today
    DevelopmentAuto-check passed

  • A2ui

    Prism-Shadow/penguin-harness

    Make a reply easier to read and act on with rich blocks inside ordinary Markdown — a choice the user picks from, a form that collects several answers, a procedure as steps with warnings in place, a…

    2.5k GitHub stars~3k tokensUpdated yesterday
    DevelopmentAuto-check passed

  • A2ui Issue Triage

    a2ui-project/a2ui

    Automates the triage of GitHub issues in the A2UI repository.

    17k GitHub stars~1.5k tokensUpdated today
    DevelopmentAuto-check passed

  • A2ui Blueprint Navigator

    a2ui-project/a2ui

    Analytical navigation of A2UI Spec-Driven Development module and codebase blueprints.

    17k GitHub stars~669 tokensUpdated today
    DevelopmentAuto-check passed

  • A2ui Swift Development

    a2ui-project/a2ui

    Grounding, coding standards, testing practices, and verification workflows for developing in the A2UI Swift codebase (under the swift/ directory).

    17k GitHub stars~1.5k tokensUpdated today
    MobileAuto-check passed

  • A2ui Remediate Problem

    a2ui-project/a2ui

    Remediates a specific recommendation from an A2UI compliance report issue, or resolves any general GitHub issue, by inspecting context, implementing minimal targeted fixes, verifying tests, creating…

    17k GitHub stars~1.5k tokensUpdated today
    DevelopmentAuto-check passed

More from LeoYeAI/openclaw-master-skills

All 1,235 skills in this repo

  • DevOps Pipeline Management

    LeoYeAI/openclaw-master-skills

    Manages pipelines on a DevOps quality and efficiency platform through its OpenAPI: list workspaces and templates, create, update, run and cancel pipelines, and read run records.

    2.2k GitHub stars~4.2k tokensUpdated 2 mo ago
    Auto-check: notes

  • Feishu Document Collaboration

    LeoYeAI/openclaw-master-skills

    Patches OpenClaw's Feishu extension so an edited document triggers an isolated agent session that reads the doc and replies inline, turning it into a live chat space.

    2.2k GitHub stars~2k tokensUpdated 2 mo ago
    Auto-check passed

  • Files Memory System

    LeoYeAI/openclaw-master-skills

    Multi-context memory management system for OpenClaw agents with group-isolated storage, global shared memory, workspace organization, and group-specific skills isolation.

    2.2k GitHub stars~3.8k tokensUpdated 2 mo ago
    Auto-check passed

  • GEO-Claw AI Visibility Agent

    LeoYeAI/openclaw-master-skills

    Runs a brand's AI-search visibility work end to end: diagnosing how AI platforms represent it, repositioning it, producing AI-optimized content and monitoring ongoing mentions.

    2.2k GitHub stars~4.7k tokensUpdated 2 mo ago
    Auto-check passed

  • Google Workspace CLI

    LeoYeAI/openclaw-master-skills

    Installs and authenticates the gws CLI, then automates Gmail, Drive, Sheets, Calendar, Docs, Chat and Tasks with ready-made recipes, persona bundles and security audits.

    2.2k GitHub stars~2.6k tokensUpdated 2 mo ago
    Auto-check: notes

  • HealthFit Health Advisors

    LeoYeAI/openclaw-master-skills

    Runs four advisor roles, a fitness coach, nutritionist, data analyst and TCM practitioner, to build a health profile and track workouts, diet and wellness over time.

    2.2k GitHub stars~4.4k tokensUpdated 2 mo ago
    Auto-check passed

Questions about Openclaw A2ui

What does Openclaw A2ui do?

为 OpenClaw webchat 回复增加个性化富 UI 展示，基于 HTML 直出渲染. An agent skill from LeoYeAI/openclaw-master-skills. Openclaw A2ui is an agent skill from LeoYeAI/openclaw-master-skills.

How do I install Openclaw A2ui in Claude Code?

Run `npx skills add LeoYeAI/openclaw-master-skills --skill openclaw-a2ui -a claude-code`. Or copy the skill folder (skills/openclaw-a2ui in LeoYeAI/openclaw-master-skills) into .claude/skills/openclaw-a2ui in your project. Claude Code loads it when a task matches its description.

How do I install Openclaw A2ui in Codex?

Run `npx skills add LeoYeAI/openclaw-master-skills --skill openclaw-a2ui -a codex`. Or copy the skill folder (skills/openclaw-a2ui in LeoYeAI/openclaw-master-skills) into .agents/skills/openclaw-a2ui in your project. Codex loads it when a task matches its description.

Can I use Openclaw A2ui 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 LeoYeAI/openclaw-master-skills --skill openclaw-a2ui -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/openclaw-a2ui, .gemini/skills/openclaw-a2ui, .github/skills/openclaw-a2ui and .opencode/skills/openclaw-a2ui in your project.

What does Openclaw A2ui need to run?

Going by SKILL.md and its folder, Openclaw A2ui needs JavaScript and TypeScript for the scripts in its folder and the command-line tools its instructions call (node and docker). Our summary lists: Node.js.

Does Openclaw A2ui access the network?

SKILL.md contains no URLs. Its commands use docker, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Openclaw A2ui 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. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Openclaw A2ui use?

Openclaw A2ui 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 Openclaw A2ui use?

About 4.6k tokens (SKILL.md is roughly 19k 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 14k tokens, read only when the agent opens those files.

What are the alternatives to Openclaw A2ui?

Skills that share tags, products or a category with Openclaw A2ui: A2ui Release Python (a2ui-project/a2ui, 17k stars), A2ui (Prism-Shadow/penguin-harness, 2.5k stars), A2ui Issue Triage (a2ui-project/a2ui, 17k stars) and A2ui Blueprint Navigator (a2ui-project/a2ui, 17k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Openclaw A2ui?

LeoYeAI (a GitHub user) maintains it in LeoYeAI/openclaw-master-skills, which has 2,160 GitHub stars. The repository holds 1,235 skills in this directory. The repository was last updated on July 20, 2026.

Source: LeoYeAI/openclaw-master-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.