{
  "schemaVersion": "1.0",
  "item": {
    "slug": "realtime-dashboard",
    "name": "Realtime Dashboard",
    "source": "tencent",
    "type": "skill",
    "category": "数据分析",
    "sourceUrl": "https://clawhub.ai/wpank/realtime-dashboard",
    "canonicalUrl": "https://clawhub.ai/wpank/realtime-dashboard",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadMode": "redirect",
    "downloadUrl": "/downloads/realtime-dashboard",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=realtime-dashboard",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "installMethod": "Manual import",
    "extraction": "Extract archive",
    "prerequisites": [
      "OpenClaw"
    ],
    "packageFormat": "ZIP package",
    "includedAssets": [
      "README.md",
      "SKILL.md"
    ],
    "primaryDoc": "SKILL.md",
    "quickSetup": [
      "Download the package from Yavira.",
      "Extract the archive and review SKILL.md first.",
      "Import or place the package into your OpenClaw setup."
    ],
    "agentAssist": {
      "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
      "steps": [
        "Download the package from Yavira.",
        "Extract it into a folder your agent can access.",
        "Paste one of the prompts below and point your agent at the extracted folder."
      ],
      "prompts": [
        {
          "label": "New install",
          "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Then review README.md for any prerequisites, environment setup, or post-install checks. Tell me what you changed and call out any manual steps you could not complete."
        },
        {
          "label": "Upgrade existing",
          "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Then review README.md for any prerequisites, environment setup, or post-install checks. Summarize what changed and any follow-up checks I should run."
        }
      ]
    },
    "sourceHealth": {
      "source": "tencent",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-04-23T16:43:11.935Z",
      "expiresAt": "2026-04-30T16:43:11.935Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=4claw-imageboard",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=4claw-imageboard",
        "contentDisposition": "attachment; filename=\"4claw-imageboard-1.0.1.zip\"",
        "redirectLocation": null,
        "bodySnippet": null
      },
      "scope": "source",
      "summary": "Source download looks usable.",
      "detail": "Yavira can redirect you to the upstream package for this source.",
      "primaryActionLabel": "Download for OpenClaw",
      "primaryActionHref": "/downloads/realtime-dashboard"
    },
    "validation": {
      "installChecklist": [
        "Use the Yavira download entry.",
        "Review SKILL.md after the package is downloaded.",
        "Confirm the extracted package contains the expected setup assets."
      ],
      "postInstallChecks": [
        "Confirm the extracted package includes the expected docs or setup files.",
        "Validate the skill or prompts are available in your target agent workspace.",
        "Capture any manual follow-up steps the agent could not complete."
      ]
    },
    "downloadPageUrl": "https://openagent3.xyz/downloads/realtime-dashboard",
    "agentPageUrl": "https://openagent3.xyz/skills/realtime-dashboard/agent",
    "manifestUrl": "https://openagent3.xyz/skills/realtime-dashboard/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/realtime-dashboard/agent.md"
  },
  "agentAssist": {
    "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
    "steps": [
      "Download the package from Yavira.",
      "Extract it into a folder your agent can access.",
      "Paste one of the prompts below and point your agent at the extracted folder."
    ],
    "prompts": [
      {
        "label": "New install",
        "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Then review README.md for any prerequisites, environment setup, or post-install checks. Tell me what you changed and call out any manual steps you could not complete."
      },
      {
        "label": "Upgrade existing",
        "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Then review README.md for any prerequisites, environment setup, or post-install checks. Summarize what changed and any follow-up checks I should run."
      }
    ]
  },
  "documentation": {
    "source": "clawhub",
    "primaryDoc": "SKILL.md",
    "sections": [
      {
        "title": "Real-Time Dashboard (Meta-Skill)",
        "body": "Complete guide to building real-time dashboards with streaming data."
      },
      {
        "title": "OpenClaw / Moltbot / Clawbot",
        "body": "npx clawhub@latest install realtime-dashboard"
      },
      {
        "title": "When to Use",
        "body": "Building trading or financial dashboards\nMonitoring and analytics UIs\nAny dashboard needing live data updates\nSystems with server-to-client push requirements"
      },
      {
        "title": "Architecture Overview",
        "body": "┌─────────────────────────────────────────────────────────────┐\n│                    Data Sources                              │\n│  APIs, Databases, Message Queues                            │\n└─────────────────────────────────────────────────────────────┘\n                            │\n                            ▼\n┌─────────────────────────────────────────────────────────────┐\n│                    Backend Services                          │\n├─────────────────────────────────────────────────────────────┤\n│  Kafka (durable)     │     Redis Pub/Sub (real-time)       │\n│  See: dual-stream-architecture                               │\n└─────────────────────────────────────────────────────────────┘\n                            │\n                            ▼\n┌─────────────────────────────────────────────────────────────┐\n│                    WebSocket/SSE Gateway                     │\n│  See: websocket-hub-patterns                                 │\n└─────────────────────────────────────────────────────────────┘\n                            │\n                            ▼\n┌─────────────────────────────────────────────────────────────┐\n│                    React Application                         │\n├─────────────────────────────────────────────────────────────┤\n│  Real-time Hooks          │  Data Visualization             │\n│  See: realtime-react-hooks│  See: financial-data-visualization\n├─────────────────────────────────────────────────────────────┤\n│  Animated Displays        │  Connection Handling            │\n│  See: animated-financial  │  See: resilient-connections     │\n└─────────────────────────────────────────────────────────────┘"
      },
      {
        "title": "Step 1: Event Publishing",
        "body": "Set up dual-stream publishing for durability + real-time.\n\nRead: ai/skills/realtime/dual-stream-architecture\n\nfunc (p *DualPublisher) Publish(ctx context.Context, event Event) error {\n    // 1. Kafka: Must succeed (durable)\n    err := p.kafka.WriteMessages(ctx, kafka.Message{...})\n    if err != nil {\n        return err\n    }\n\n    // 2. Redis: Best-effort (real-time)\n    p.publishToRedis(ctx, event)\n    return nil\n}"
      },
      {
        "title": "Step 2: WebSocket Gateway",
        "body": "Create horizontally-scalable WebSocket connections.\n\nRead: ai/skills/realtime/websocket-hub-patterns\n\ntype Hub struct {\n    connections   map[*Connection]bool\n    subscriptions map[string]map[*Connection]bool\n    redisClient   *redis.Client\n}\n\n// Lazy Redis subscriptions\nfunc (h *Hub) subscribeToChannel(conn *Connection, channel string) {\n    // Only subscribe to Redis on first local subscriber\n}"
      },
      {
        "title": "Step 3: React Hooks",
        "body": "Connect React to real-time data.\n\nRead: ai/skills/realtime/realtime-react-hooks\n\nconst { data, isConnected } = useSSE({ \n  url: '/api/events',\n  onMessage: (data) => updateState(data),\n});\n\n// Or with SWR integration\nconst { data } = useRealtimeData('metrics', fetchMetrics);"
      },
      {
        "title": "Step 4: Resilient Connections",
        "body": "Handle connection failures gracefully.\n\nRead: ai/skills/realtime/resilient-connections\n\nconst { isConnected, send } = useWebSocket({\n  url: 'wss://api/ws',\n  reconnect: true,\n  maxRetries: 5,\n  onMessage: handleMessage,\n});"
      },
      {
        "title": "Step 5: Data Visualization",
        "body": "Build dark-themed financial charts.\n\nRead: ai/skills/design-systems/financial-data-visualization\n\n<PriceChart \n  data={priceHistory} \n  isPositive={change >= 0} \n/>"
      },
      {
        "title": "Step 6: Animated Displays",
        "body": "Add smooth number animations.\n\nRead: ai/skills/design-systems/animated-financial-display\n\n<AnimatedNumber value={price} prefix=\"$\" decimals={2} />\n<FlashingValue value={value} formatter={formatCurrency} />"
      },
      {
        "title": "Component Skills Reference",
        "body": "SkillPurposedual-stream-architectureKafka + Redis publishingwebsocket-hub-patternsScalable WebSocket serverrealtime-react-hooksSSE/WebSocket React hooksresilient-connectionsRetry, circuit breakerfinancial-data-visualizationChart theminganimated-financial-displayNumber animations"
      },
      {
        "title": "Streaming Over Blocking",
        "body": "Never wait for all data. Show immediately, improve progressively:\n\nPhase 1: Initial data + hints      → Immediate display\nPhase 2: Background refinement     → Prices update in place\nPhase 3: Historical data           → Charts populate"
      },
      {
        "title": "Additive-Only Updates",
        "body": "Never zero out data when refinement fails. Only update when you have better data."
      },
      {
        "title": "Connection Status",
        "body": "Always show users their connection state:\n\n<ConnectionStatus isConnected={isConnected} />"
      },
      {
        "title": "NEVER Do",
        "body": "Never block on data fetching — Show immediately, refine progressively\nNever skip connection status indicators — Users need to know they're live\nNever use polling when SSE/WebSocket available — Real-time means push, not pull\nNever forget graceful degradation — System should work (degraded) when connection lost\nNever zero out data on refinement failure — Only update when you have better data\nNever reconnect without exponential backoff — Prevents thundering herd\nNever skip Redis Pub/Sub failure handling — Redis is best-effort; log and continue\nNever send full payloads over Redis — Send IDs only, clients fetch from API\nNever share WebSocket pubsub across channels — Each channel needs own subscription\nNever forget ping/pong on WebSocket — Load balancers close \"idle\" connections"
      },
      {
        "title": "Checklist",
        "body": "Set up dual-stream publishing (Kafka + Redis)\n Create WebSocket/SSE gateway\n Implement React hooks for real-time data\n Add reconnection with exponential backoff\n Build dark-themed chart components\n Add animated number displays\n Show connection status to users\n Handle errors gracefully"
      }
    ],
    "body": "Real-Time Dashboard (Meta-Skill)\n\nComplete guide to building real-time dashboards with streaming data.\n\nInstallation\nOpenClaw / Moltbot / Clawbot\nnpx clawhub@latest install realtime-dashboard\n\nWhen to Use\nBuilding trading or financial dashboards\nMonitoring and analytics UIs\nAny dashboard needing live data updates\nSystems with server-to-client push requirements\nArchitecture Overview\n┌─────────────────────────────────────────────────────────────┐\n│                    Data Sources                              │\n│  APIs, Databases, Message Queues                            │\n└─────────────────────────────────────────────────────────────┘\n                            │\n                            ▼\n┌─────────────────────────────────────────────────────────────┐\n│                    Backend Services                          │\n├─────────────────────────────────────────────────────────────┤\n│  Kafka (durable)     │     Redis Pub/Sub (real-time)       │\n│  See: dual-stream-architecture                               │\n└─────────────────────────────────────────────────────────────┘\n                            │\n                            ▼\n┌─────────────────────────────────────────────────────────────┐\n│                    WebSocket/SSE Gateway                     │\n│  See: websocket-hub-patterns                                 │\n└─────────────────────────────────────────────────────────────┘\n                            │\n                            ▼\n┌─────────────────────────────────────────────────────────────┐\n│                    React Application                         │\n├─────────────────────────────────────────────────────────────┤\n│  Real-time Hooks          │  Data Visualization             │\n│  See: realtime-react-hooks│  See: financial-data-visualization\n├─────────────────────────────────────────────────────────────┤\n│  Animated Displays        │  Connection Handling            │\n│  See: animated-financial  │  See: resilient-connections     │\n└─────────────────────────────────────────────────────────────┘\n\nImplementation Steps\nStep 1: Event Publishing\n\nSet up dual-stream publishing for durability + real-time.\n\nRead: ai/skills/realtime/dual-stream-architecture\n\nfunc (p *DualPublisher) Publish(ctx context.Context, event Event) error {\n    // 1. Kafka: Must succeed (durable)\n    err := p.kafka.WriteMessages(ctx, kafka.Message{...})\n    if err != nil {\n        return err\n    }\n\n    // 2. Redis: Best-effort (real-time)\n    p.publishToRedis(ctx, event)\n    return nil\n}\n\nStep 2: WebSocket Gateway\n\nCreate horizontally-scalable WebSocket connections.\n\nRead: ai/skills/realtime/websocket-hub-patterns\n\ntype Hub struct {\n    connections   map[*Connection]bool\n    subscriptions map[string]map[*Connection]bool\n    redisClient   *redis.Client\n}\n\n// Lazy Redis subscriptions\nfunc (h *Hub) subscribeToChannel(conn *Connection, channel string) {\n    // Only subscribe to Redis on first local subscriber\n}\n\nStep 3: React Hooks\n\nConnect React to real-time data.\n\nRead: ai/skills/realtime/realtime-react-hooks\n\nconst { data, isConnected } = useSSE({ \n  url: '/api/events',\n  onMessage: (data) => updateState(data),\n});\n\n// Or with SWR integration\nconst { data } = useRealtimeData('metrics', fetchMetrics);\n\nStep 4: Resilient Connections\n\nHandle connection failures gracefully.\n\nRead: ai/skills/realtime/resilient-connections\n\nconst { isConnected, send } = useWebSocket({\n  url: 'wss://api/ws',\n  reconnect: true,\n  maxRetries: 5,\n  onMessage: handleMessage,\n});\n\nStep 5: Data Visualization\n\nBuild dark-themed financial charts.\n\nRead: ai/skills/design-systems/financial-data-visualization\n\n<PriceChart \n  data={priceHistory} \n  isPositive={change >= 0} \n/>\n\nStep 6: Animated Displays\n\nAdd smooth number animations.\n\nRead: ai/skills/design-systems/animated-financial-display\n\n<AnimatedNumber value={price} prefix=\"$\" decimals={2} />\n<FlashingValue value={value} formatter={formatCurrency} />\n\nComponent Skills Reference\nSkill\tPurpose\ndual-stream-architecture\tKafka + Redis publishing\nwebsocket-hub-patterns\tScalable WebSocket server\nrealtime-react-hooks\tSSE/WebSocket React hooks\nresilient-connections\tRetry, circuit breaker\nfinancial-data-visualization\tChart theming\nanimated-financial-display\tNumber animations\nKey Patterns\nStreaming Over Blocking\n\nNever wait for all data. Show immediately, improve progressively:\n\nPhase 1: Initial data + hints      → Immediate display\nPhase 2: Background refinement     → Prices update in place\nPhase 3: Historical data           → Charts populate\n\nAdditive-Only Updates\n\nNever zero out data when refinement fails. Only update when you have better data.\n\nConnection Status\n\nAlways show users their connection state:\n\n<ConnectionStatus isConnected={isConnected} />\n\nNEVER Do\nNever block on data fetching — Show immediately, refine progressively\nNever skip connection status indicators — Users need to know they're live\nNever use polling when SSE/WebSocket available — Real-time means push, not pull\nNever forget graceful degradation — System should work (degraded) when connection lost\nNever zero out data on refinement failure — Only update when you have better data\nNever reconnect without exponential backoff — Prevents thundering herd\nNever skip Redis Pub/Sub failure handling — Redis is best-effort; log and continue\nNever send full payloads over Redis — Send IDs only, clients fetch from API\nNever share WebSocket pubsub across channels — Each channel needs own subscription\nNever forget ping/pong on WebSocket — Load balancers close \"idle\" connections\nChecklist\n Set up dual-stream publishing (Kafka + Redis)\n Create WebSocket/SSE gateway\n Implement React hooks for real-time data\n Add reconnection with exponential backoff\n Build dark-themed chart components\n Add animated number displays\n Show connection status to users\n Handle errors gracefully"
  },
  "trust": {
    "sourceLabel": "tencent",
    "provenanceUrl": "https://clawhub.ai/wpank/realtime-dashboard",
    "publisherUrl": "https://clawhub.ai/wpank/realtime-dashboard",
    "owner": "wpank",
    "version": "1.0.0",
    "license": null,
    "verificationStatus": "Indexed source record"
  },
  "links": {
    "detailUrl": "https://openagent3.xyz/skills/realtime-dashboard",
    "downloadUrl": "https://openagent3.xyz/downloads/realtime-dashboard",
    "agentUrl": "https://openagent3.xyz/skills/realtime-dashboard/agent",
    "manifestUrl": "https://openagent3.xyz/skills/realtime-dashboard/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/realtime-dashboard/agent.md"
  }
}