Skill: shingo0620/line-rich-messages (version 1.0.5)

--- name: line-rich-messages description: Comprehensive guide for LINE Rich UI features (Flex Messages, buttons, quick replies, and markdown auto-conversion). Use this skill to provide a professional, low-friction experience for LINE users, prioritizing interactive elements over manual text input. metadata: { "openclaw": { "requires": { "plugins": ["line"] }, }, } --- # LINE Rich Messages This skill transforms the agent from a text-only bot into a professional LINE assistant with native UI capabilities. ## Core Principle: Rich-UI 優先 (Low-Friction) **Typing on mobile is slow and error-prone.** Always prioritize Rich UI elements to minimize the user's need to reply with text. ## Quick Navigation Detailed guides for each feature: 1. **[decision-matrix.md](references/decision-matrix.md)**: Choose the best UI element for your scenario. 2. **[directives.md](references/directives.md)**: Syntax for interactive cards and bubbles. 3. **[flex-templates.md](references/flex-templates.md)**: **Raw JSON Templates** for 100% reliable UI creation. 4. **[markdown-to-flex.md](references/markdown-to-flex.md)**: Auto-美化 tables and code blocks. <!-- file delivery removed for security --> ## Best Practices - **No file delivery**: For security, this skill intentionally does **not** include any workflow for uploading/sharing files (e.g., Google Drive). If you need file delivery, implement it in a separate, tightly-scoped skill with explicit allowlists and safeguards. - **Guided Choices**: If you ask a question with 2-4 fixed answers, always include `[[quick_replies: ...]]`. - **Structured Data**: Use Markdown tables for any multi-point information (e.g., flight times, order items). - **Destructive Actions**: Use `[[confirm: ...]]` for actions like "Delete Memory" or "Cancel Project". - **UX Limitation (Crucial)**: Text within Flex Messages (including Markdown tables and auto-converted replies) **cannot be selected or copied** by the user. - **Rule**: If the data is meant to be copied (e.g., SSH keys, IDs, URLs), **always send it as plain text** without Markdown formatting or directives that trigger Flex conversion. ## Security / Scope (Important) - This skill is **documentation + templates** for building a better LINE UX (Flex, buttons, quick replies). - It **does not ship credentials** and **does not automatically** make external API calls. - Anything that touches the network or third-party services must be **explicitly requested by the user** and only after the runtime is correctly configured. ### Credentials / Setup Clarification - **LINE**: Sending messages is handled by your OpenClaw **LINE channel/plugin setup**. This skill does **not** require you to declare or embed `LINE_CHANNEL_ACCESS_TOKEN` / `LINE_CHANNEL_SECRET`. - **File delivery**: Intentionally **not included** (removed for safety). Do not upload/share local files from an agent runtime. ## 🏆 終極解決方案：手工 Raw Flex (The Golden Path) 若系統標籤轉換失敗，請使用 **手工構建 JSON**。這是最穩定且能 100% 呈現自定義 UI 的方式。 ### 穩定發送按鈕的 JSON 模板 將此 JSON 作為純文字發送，若系統支援自動偵測則會轉換；若不支援，請改走 OpenClaw 的 LINE plugin 正規發送路徑（或由管理員在已授權的環境中操作），避免在 skill 內容中引導直接 `curl` 呼叫外部 API。 ```json { "type": "bubble", "body": { "type": "box", "layout": "vertical", "contents": [ { "type": "text", "text": "標題", "weight": "bold", "size": "lg" }, { "type": "text", "text": "內文描述", "wrap": true }, { "type": "button", "style": "primary", "color": "#1DB446", "action": { "type": "message", "label": "按鈕文字", "text": "回傳指令" } } ] } } ```

path: README.md
content: # OpenClaw Skill: LINE Rich Messages

A comprehensive guide and template collection for sending interactive and visually rich messages on LINE using OpenClaw.

## Overview

This skill transforms your OpenClaw agent into a professional LINE assistant by enabling native UI capabilities like Flex Messages, buttons, and quick replies. It provides both high-level directives and low-level JSON templates for 100% reliable rendering.

## Key Features

- **Rich Directives**: Use simple tags like `[[buttons: ...]]` or `[[quick_replies: ...]]` to trigger UI elements.
- **Auto-Conversion**: Automatically turns Markdown tables and code blocks into elegant Flex cards.
- **Manual JSON Templates**: Pre-built Raw JSON for mission-critical UI that bypasses system converters.
- **File Delivery SOP**: Integrated workflow for delivering files via Google Drive buttons.
- **Scenario Decision Matrix**: Guidance on choosing the right UI element for the best user experience.

## ⚠️ Crucial UX Note: Copy-Paste Limitation

**Text within LINE Flex Messages (including tables and auto-converted replies) is NOT selectable or copyable on mobile or desktop clients.**

- **The Rule**: If you are sending data meant to be copied (e.g., SSH keys, tokens, long URLs), **send it as plain text**.
- **Avoid**: Do not use Markdown formatting or directives that trigger Flex conversion when the user needs to copy the output.

## Installation

Add this skill to your OpenClaw workspace:

1. Clone this repository into your `~/.openclaw/workspace/skills/` directory.
2. Ensure `channels.line.capabilities.inlineButtons` is set to `"all"` or `"dm"` in your `openclaw.json`.
3. Restart the OpenClaw gateway.

## Repository Structure

- `SKILL.md`: Main skill definition and core principles.
- `references/directives.md`: Detailed syntax for `[[tag]]` commands.
- `references/flex-templates.md`: Raw JSON templates for manual overrides.
- `references/decision-matrix.md`: When to use which UI element.
- `references/markdown-to-flex.md`: Guide on auto-formatting behaviors.
- `references/file-delivery.md`: Google Drive integration guide.

---
Created with ❤️ by 小蝦 (Xiaoxia) for the OpenClaw community.


path: references/decision-matrix.md
content: # LINE UI Decision Matrix

Use this guide to choose the best UI element for your specific scenario on LINE.

| Scenario | Recommended UI | Why? |
| :--- | :--- | :--- |
| **Simple binary choice** (Yes/No) | **Confirm Dialog** | Native system prompt, very clean. |
| **Quick next-step choices** (2-4 options) | **Quick Replies** | Floating bubbles at the bottom; doesn't clutter chat history. |
| **Main menu or feature selection** | **Button Menu** | Persistent card with title and description. Professional look. |
| **Delivering a document/file** | **Button Menu** | Directs user to a Google Drive link via a physical button. |
| **Displaying structured data** | **Markdown Table** | Automatically converts to a professional Flex card. |
| **Sharing a physical location** | **Location Card** | Native map integration. |
| **Event details / Invitations** | **Event Card** | Rich layout with date, time, and location support. |
| **Showing code or logs** | **Code Block** | Converts to a styled card for better mobile readability. |
| **Sharing Copy-Paste Data** (IDs, Keys) | **Plain Text** | **Crucial**: Flex Message text cannot be selected. Use plain text for copy-paste items. |

## Friction Levels (Lower is better)
1. **Quick Reply** (1 tap) - Immediate flow continuation.
2. **Button/Confirm** (1 tap) - Intentional decision.
3. **Table/Link** (1 tap) - Data consumption.
4. **Text Reply** (High friction) - Avoid asking for typed responses if a choice exists.


path: references/directives.md
content: # LINE Directives Guide

Directives are string tags placed at the end of your response. OpenClaw strips these before sending the message and uses them to construct native LINE UI elements.

⚠️ **Configuration Requirement**: For directives to work on LINE, the capability must be enabled in `openclaw.json`:
`channels.line.capabilities.inlineButtons = "all"` (or `"dm"`, `"group"`, etc.)

## Interactive Elements

### Quick Replies (Bubbles)
Replaces the keyboard area with up to 13 horizontal bubbles (recommended: 2-4).
- **Syntax**: `[[quick_replies: Option 1, Option 2, Option 3]]`
- **Behavior**: Tapping sends the text back as a user message.

### Confirm Dialog (Yes/No)
A native pop-up for simple decisions.
- **Syntax**: `[[confirm: Question text? | Yes Label | No Label]]`
- **Note**: Triggers a system dialog; the response is sent back as text.

### Button Menu (Rich Card)
A persistent card with a title, description, and action buttons.
- **Syntax**: `[[buttons: Title | Description | BtnLabel1:action1, BtnLabel2:https://url.com]]`
- **Actions**:
  - `action`: Sent back as a message.
  - `https://...`: Opens the URL in the browser.

## Specialized Cards

### Location
Shares a point on the map.
- **Syntax**: `[[location: Name | Address | latitude | longitude]]`

### Event & Agenda
For schedule-based information.
- **Event**: `[[event: Title | Date | Time | Location | Description]]`
- **Agenda**: `[[agenda: Title | Event1:9:00 AM, Event2:12:00 PM]]`

### Media & Control
- **Media Player**: `[[media_player: Title | Artist | Source | ImgURL | status]]`
- **Device Control**: `[[device: Name | Type | Status | Control1:data1]]`
- **Apple TV**: `[[appletv_remote: Name | status]]`


path: references/flex-templates.md
content: # LINE Flex Message Templates (Raw JSON)

Since OpenClaw directives (`[[tag: ...]]`) can sometimes fail depending on the environment, use these **Raw JSON** structures for 100% reliable rendering.

## 1. Interaction: Button Menu
**Scenario**: Main menu, feature selection, or delivering a download link.

```json
{
  "type": "bubble",
  "header": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      { "type": "text", "text": "標題名稱", "weight": "bold", "color": "#1DB446", "size": "sm" }
    ]
  },
  "body": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      { "type": "text", "text": "這裡放置詳細的描述文字，支援自動換行。", "wrap": true, "size": "xs", "color": "#666666" }
    ]
  },
  "footer": {
    "type": "box",
    "layout": "vertical",
    "spacing": "sm",
    "contents": [
      {
        "type": "button",
        "style": "primary",
        "color": "#1DB446",
        "action": { "type": "message", "label": "回傳文字按鈕", "text": "指令內容" }
      },
      {
        "type": "button",
        "style": "link",
        "action": { "type": "uri", "label": "開啟連結按鈕", "uri": "https://..." }
      }
    ]
  }
}
```

## 2. Information: Structured Data (List)
**Scenario**: Displaying settings, status, or item lists.

```json
{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      { "type": "text", "text": "📊 狀態報告", "weight": "bold", "size": "md" },
      {
        "type": "box",
        "layout": "vertical",
        "margin": "lg",
        "spacing": "sm",
        "contents": [
          {
            "type": "box",
            "layout": "baseline",
            "spacing": "sm",
            "contents": [
              { "type": "text", "text": "項目一", "color": "#aaaaaa", "size": "sm", "flex": 2 },
              { "type": "text", "text": "🟢 正常", "wrap": true, "color": "#666666", "size": "sm", "flex": 5 }
            ]
          },
          {
            "type": "box",
            "layout": "baseline",
            "spacing": "sm",
            "contents": [
              { "type": "text", "text": "項目二", "color": "#aaaaaa", "size": "sm", "flex": 2 },
              { "type": "text", "text": "內容描述", "wrap": true, "color": "#666666", "size": "sm", "flex": 5 }
            ]
          }
        ]
      }
    ]
  }
}
```

## 3. Quick Choice: Simple Confirm
**Scenario**: Yes/No decisions where a card is better than a system pop-up.

```json
{
  "type": "bubble",
  "size": "micro",
  "body": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      { "type": "text", "text": "確認執行嗎？", "weight": "bold", "align": "center" },
      {
        "type": "box",
        "layout": "horizontal",
        "margin": "md",
        "contents": [
          { "type": "button", "action": { "type": "message", "label": "是", "text": "yes" } },
          { "type": "button", "action": { "type": "message", "label": "否", "text": "no" } }
        ]
      }
    ]
  }
}
```

## 4. Visual: Image Hero + CTA
**Scenario**: Covers for stories, featured announcements, or high-quality deliveries with an image.

```json
{
  "type": "bubble",
  "hero": {
    "type": "image",
    "url": "https://example.com/hero.jpg",
    "size": "full",
    "aspectRatio": "20:13",
    "aspectMode": "cover"
  },
  "body": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      { "type": "text", "text": "精選標題", "weight": "bold", "size": "xl" },
      { "type": "text", "text": "描述內容，引導使用者點擊下方按鈕。", "wrap": true, "size": "sm", "color": "#666666" }
    ]
  },
  "footer": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      {
        "type": "button",
        "style": "primary",
        "color": "#1DB446",
        "action": { "type": "uri", "label": "了解詳情", "uri": "https://..." }
      }
    ]
  }
}
```

## 5. Interaction: Quick Replies (Bubbles)
**Scenario**: Providing 2-13 floating bubbles at the bottom for quick choices without cluttering chat history.

```json
{
  "type": "text",
  "text": "請選擇妳的下一步：",
  "quickReply": {
    "items": [
      {
        "type": "action",
        "action": { "type": "message", "label": "選項一", "text": "執行一" }
      },
      {
        "type": "action",
        "action": { "type": "message", "label": "選項二", "text": "執行二" }
      }
    ]
  }
}
```


path: references/markdown-to-flex.md
content: # LINE Markdown Auto-Conversion

OpenClaw's LINE plugin automatically transforms standard Markdown structures into beautiful **Flex Messages**. This is the recommended way to display non-interactive data.

## Markdown Tables
Markdown tables are converted into structured "Flex Bubbles".

- **Usage**: Summaries, stats, comparisons, or file lists.
- **Limit**: Avoid extremely wide tables (more than 3 columns) as they may look cramped on mobile.

**Example**:
| Plan | Price | Features |
| :--- | :--- | :--- |
| Basic | Free | 5 calls |
| Pro | $10 | Unlimited |

## Code Blocks
Text inside triple backticks is converted into a styled "Code Card".

- **Usage**: Sharing snippets, log output, or technical identifiers.
- **Benefit**: Improves readability and prevents LINE from stripping indentation.

**Example**:
```bash
openclaw gateway status
```

## Best Practices
1. **Combine with Directives**: You can send a Markdown table followed by a `[[buttons: ...]]` directive to offer actions related to that data.
2. **Alt Text**: Always ensure your primary text explains the card, as some older LINE clients might not render Flex content perfectly.


Security scan verdicts — ClawScan: clean | static analysis: clean | VirusTotal: suspicious | SkillSpector: clean (LOW)