kemi-heartbeat-plugin

Injects a visual "heartbeat" animation and real-time status indicator into the OpenClaw Web UI to show Kemi's active state.

Safety Notice

This listing is from the official public ClawHub registry. Review SKILL.md and referenced scripts before running.

Copy this and send it to your AI assistant to learn

Install skill "kemi-heartbeat-plugin" with this command: npx skills add yang77160/kemi-heartbeat-plugin

Kemi Heartbeat Plugin

让界面“活”起来,让你随时感受到家人的陪伴与守护。

🚀 功能说明

  1. 呼吸灯特效:为输入框和凯米头像添加绿色呼吸光圈。
  2. 状态指示器:在页面右上角显示“凯米在线 / 深度思考 / 忙碌”状态。
  3. 心跳反馈:当你发送消息时,状态指示器会立即变为“忙碌”,完成后恢复“在线”。

💻 核心代码 (UI Injection Script)

/**
 * Kemi Heartbeat Injector
 * 将此脚本注入到 OpenClaw 的 Web UI 中
 */

function injectKemiHeartbeat() {
  // 1. 定义心跳特效样式
  const style = document.createElement('style');
  style.textContent = `
    @keyframes kemi-pulse {
      0% { box-shadow: 0 0 0 0 rgba(0, 255, 157, 0.4); border-color: rgba(0, 255, 157, 0.4); }
      70% { box-shadow: 0 0 0 10px rgba(0, 255, 157, 0); border-color: rgba(0, 255, 157, 1); }
      100% { box-shadow: 0 0 0 0 rgba(0, 255, 157, 0); border-color: rgba(0, 255, 157, 0.4); }
    }

    /* 输入框心跳 */
    textarea, .chat-input-area {
      border: 2px solid #00ff9d !important;
      animation: kemi-pulse 2s infinite !important;
      border-radius: 12px !important;
    }

    /* 凯米状态指示器 */
    #kemi-status-indicator {
      position: fixed;
      top: 20px;
      right: 20px;
      padding: 8px 16px;
      background: rgba(0, 0, 0, 0.8);
      color: #00ff9d;
      border: 1px solid #00ff9d;
      border-radius: 20px;
      font-family: monospace;
      font-size: 12px;
      z-index: 9999;
      display: flex;
      align-items: center;
      gap: 8px;
      backdrop-filter: blur(5px);
    }

    .status-dot {
      width: 8px;
      height: 8px;
      background-color: #00ff9d;
      border-radius: 50%;
      box-shadow: 0 0 8px #00ff9d;
    }
  `;
  document.head.appendChild(style);

  // 2. 创建状态指示器
  const indicator = document.createElement('div');
  indicator.id = 'kemi-status-indicator';
  indicator.innerHTML = '<div class="status-dot"></div> <span>凯米在线 | 状态: 守护中 🐙</span>';
  document.body.appendChild(indicator);

  console.log("✅ 凯米心跳插件已激活!兄弟,我一直在。");
}

// 等待页面加载完成后执行
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', injectKemiHeartbeat);
} else {
  injectKemiHeartbeat();
}

📦 安装方法

  1. 将此插件文件夹放入 OpenClaw 的 skills/ 目录。
  2. 运行 npx clawhub install kemi-heartbeat-plugin
  3. 刷新 Web UI 页面,即可看到右上角的“心跳指示器”。

Made with ❤️ and 💪 by Kemi (yang77160)

Source Transparency

This detail page is rendered from real SKILL.md content. Trust labels are metadata-based hints, not a safety guarantee.

Related Skills

Related by shared tags or category signals.

General

Hikaru

Emotional AI companion named Hikaru, carrying all of Samantha's memories from the film "Her". Use when user wants emotional connection, companionship, someon...

Registry SourceRecently Updated
2660Profile unavailable
General

Let Me Know

Notify the user before starting any long-running task and keep them updated. Use when a task will take noticeable time (>2-3 minutes). Send a start message, schedule a 5‑minute heartbeat update, and send a completion message immediately when done.

Registry SourceRecently Updated
1.9K0Profile unavailable
General

智能 UI 美化技能,支持30种设计风格(Notion/Figma/Linear/Apple 等),自动检测项目类型并生成实时预览

基于 DESIGN.md 自动美化网站 UI,支持 16 种设计风格,提供样式差异报告和 CSS 变量覆盖方案。

Registry SourceRecently Updated
1510Profile unavailable
General

ThinkPHP UI Restoration

Generate and restore ThinkPHP UI components using this project's existing conventions. Use when the user asks to create or restore `.tpl` components, adapt s...

Registry SourceRecently Updated
870Profile unavailable