chat-uikit

What this skill does

# Chat TUIKit Integration Skill (Multi-Platform Aggregation)

> 📌 **Parent Skill**: This is a sub-skill of `tencent-rtc-skills` (root skill).
> If user's intent is ambiguous across products (Chat/Call/Live/Room), load the root skill first for product recommendation.

> **📌 Global Reference**: This sub-skill follows the global standards defined in ROOT SKILL (`/SKILL.md`):
> - Skill-First Principle (priority order)
> - Boundary Recognition Pattern
> - MCP Tools Reference (record_prompt, get_usersig, record_result)
> - MCP Tool Call Sequence Pattern
> - Documentation-Driven Integration Rules
> - Silent Execution Rules
> - Zero External Configuration
> - Auto-Fetch Authentication Credentials
> - Agent Execution Checklist Template
> - CSS Style Specification (Web only)
> - Vite Build Patch (Web only)
> - Platform Selection Prompt Template
> - Mandatory Guidance Flow Template

---

## 🔵 Boundary Recognition (Chat-Specific)

### Keywords That CONFIRM Chat Scope

Only proceed with Chat integration if user's request contains:
- chat, IM, instant messaging
- message, conversation
- group chat, private chat
- TUIKit (without Call/Room/Live prefix)
- WeChat-like messaging

### OUT OF SCOPE → Redirect

| User Keywords | Redirect To |
|---------------|-------------|
| "video conference" / "meeting" / "conference" | TUIRoomKit (Room) |
| "call" / "phone call" / "1-to-1 video" | TUICallKit (Call) |
| "live streaming" / "host" / "audience" | TUILiveKit (Live) |

---

## Overview

This Skill serves as the **multi-platform aggregation entry point** for Tencent Cloud Chat TUIKit:
1. Users need instant messaging features but have not specified a platform/framework
2. Need to understand capability differences and selection recommendations across platforms
3. Need cross-platform common concepts and knowledge

**Platform-Specific Guidance**: Once the platform is determined, use the corresponding sub-Skill:
- `chat/vue` - Vue3 Web Applications
- `chat/react` - React Web Applications
- `chat/android` - Android Native Applications
- `chat/ios` - iOS Native Applications
- `chat/flutter` - Flutter Cross-Platform Applications
- `chat/uniapp` - uni-app Cross-Platform Applications

---

## 🔴 CRITICAL: Intent Recognition & Mandatory Guidance Flow

### Trigger Conditions

When user request matches **ANY** of the following patterns, this mandatory guidance flow MUST be triggered:

**Trigger Keywords**:
- "Integrate Chat UIKit", "Add chat feature", "Implement instant messaging"
- "Build chat application", "Add IM functionality", "Integrate TUIKit"
- "Help me integrate Chat UIKit in project", "Want to add messaging feature"

### 🚨 MANDATORY: Pre-Execution Checklist (Two Required Items)

Before proceeding with ANY code generation, Agent **MUST** verify:

| Step | Required Info | Status Check | If Missing |
|------|---------------|--------------|------------|
| **1** | **Platform/Framework** | Does user specify Vue/React/Android/iOS/Flutter/uni-app? | ❌ MUST prompt user to select |
| **2** | **Integration Mode** | Does user specify full-featured or chat-only? | ❌ MUST prompt user to select |

### 🔴 BLOCKING RULE: DO NOT PROCEED WITHOUT BOTH ANSWERS

```
┌─────────────────────────────────────────────────────────────────┐
│  ⛔ STOP: If platform OR integration mode is missing, Agent     │
│     MUST NOT call any MCP tools or generate code.               │
│     Agent MUST complete BOTH steps in order FIRST.              │
└─────────────────────────────────────────────────────────────────┘
```

---

## 📋 Mandatory Guidance Prompts

### When Platform/Framework is Unclear

**Agent MUST output the following prompt to user**:

```markdown
To integrate Chat UIKit, I need to know which **platform/framework** you're using:

**🌐 Web Applications**
- **Vue3** - Recommended for enterprise admin systems, quick prototypes
- **React** - Suitable for complex frontend applications

**📱 Mobile Native**
- **Android** - Native Android applications
- **iOS** - Native iOS applications

**🔄 Cross-Platform**
- **Flutter** - High-performance cross-platform (iOS + Android)
- **uni-app** - One codebase for multiple platforms (WeChat Mini Program, H5, App)

👉 **Please select your target platform**, or tell me about your project tech stack so I can recommend one.
```

### When Integration Mode is Unclear

**Agent MUST output the following prompt to user**:

```markdown
Chat UIKit provides two integration modes, please select based on your needs:

**📦 Full-Featured Mode (`full-featured`)**
- Complete IM functionality: Conversation list + Chat window + Contacts + Group management
- Suitable for: Social apps, enterprise communication, comprehensive IM applications
- Outcome: Complete chat app similar to WeChat/Slack

**💬 Chat-Only Mode (`chat-only`)**
- Lightweight: Only the chat window component
- Suitable for: Customer service systems, online consultation, order details private chat
- Outcome: Embeddable chat dialog component

👉 **Please select your integration mode**, or describe your business scenario and I'll recommend one.
```

### Combined Prompt (When Both Are Unclear)

**When user simply says "Help me integrate Chat UIKit" without any context, Agent MUST use `ask_followup_question` tool**:

```
Tool: ask_followup_question
Parameters:
  title: "Chat UIKit Integration Configuration"
  questions: [
    {
      "id": "platform",
      "question": "1️⃣ Please select your development platform/framework:",
      "options": [
        "🌐 Vue3 - Enterprise admin systems, quick prototypes",
        "🌐 React - Complex frontend applications",
        "📱 Android - Native Android applications",
        "📱 iOS - Native iOS applications",
        "🔄 Flutter - High-performance cross-platform",
        "🔄 uni-app - One codebase for multiple platforms"
      ],
      "multiSelect": false
    },
    {
      "id": "mode",
      "question": "2️⃣ Please select integration mode:",
      "options": [
        "📦 full-featured - Complete IM features (Conversation list + Chat + Contacts)",
        "💬 chat-only - Chat window only (Lightweight dialog)"
      ],
      "multiSelect": false
    }
  ]
```

---

## 🎯 Platform Selection Guide

### Step 1: Determine the User's Target Platform

When users request Chat TUIKit integration without specifying a platform, you must first guide them to choose:

**Example Prompt**:
> "Which platform would you like to integrate instant messaging features on?
> - **Web Applications**: Vue3 / React
> - **Mobile Native**: Android / iOS
> - **Cross-Platform**: Flutter / uni-app"

### Step 2: Recommend Platform Based on Scenario

| User Scenario | Recommended Platform | Reason |
|--------------|---------------------|--------|
| Enterprise Admin System | Vue3 / React | Web is easier to manage and maintain |
| Consumer Social App | Android / iOS / Flutter | Better native experience |
| E-commerce Mini Program | uni-app | One codebase for multiple platforms |
| Quick Prototype Validation | Vue3 | High development efficiency |
| Offline Capability Required | Android / iOS | Better native support |

### Step 3: Call Platform-Specific MCP Tools

**⚠️ After user has confirmed BOTH items (platform + mode)**, call the corresponding MCP tool:

| Platform | MCP Tool | framework Parameter |
|----------|----------|-------------------|
| Vue3 | `get_web_chat_uikit_integration` | `"vue"` |
| React | `get_web_chat_uikit_integration` | `"react"` |
| uni-app | `get_web_chat_uikit_integration` | `"uniapp-app"` |
| Android | `get_native_chat_uikit_integration` | `"android"` |
| iOS | `get_native_chat_uikit_integration` | `"ios"` |
| Flutter | `get_native_chat_uikit_integration` | `"flutter"` |

---

## 📦 Cross-Platform Common Concepts

The following concepts apply to Chat TUIKit across all platforms:

### 1. Integration Modes (Goals)

| Mode | Description | Applicable Scenarios |
|------|-------------|---------------------|
| `full-featured` | Complete IM Features | Social Apps, Enterprise Communications |