Agent skill

Cometchat Flutter V6 Placement

by cometchat in cometchat/cometchat-skills

Where CometChat chat lives in a Flutter app and how to wire each shape — a tab-based app, a chat tab inside an existing app, a full-screen route, a modal / bottom-sheet chat, or an embedded panel.

MITAuto-check passedMobile

Install Cometchat Flutter V6 Placement

skills CLI
$ npx skills add cometchat/cometchat-skills --skill cometchat-flutter-v6-placement -a claude-code

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

GitHub CLI
$ gh skill install cometchat/cometchat-skills cometchat-flutter-v6-placement --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/cometchat/cometchat-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/cometchat-flutter-v6-placement .claude/skills/cometchat-flutter-v6-placement && 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
cometchat-flutter-v6-placement
GitHub stars
129
Token cost
~2k tokens
SKILL.md length
633 words
Files
1
Skills in repo
97
Repo updated
First seen
Licence
MIT

At a glance

Where CometChat chat lives in a Flutter app and how to wire each shape — a tab-based app, a chat tab inside an existing app, a full-screen route, a modal / bottom-sheet chat, or an embedded panel.

  • Works in 4 steps: Bounded height — every kit list needs… → Scaffold + SafeArea,… → Round-trip — everything you push must… → …
  • Tasks that involve Cross-platform mobile apps
  • SKILL.md covers Companion skills (read first), Use this skill when, Prerequisites & install and The one invariant every…, plus 4 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Cometchat Flutter V6 Placement is an agent skill from cometchat/cometchat-skills. Where CometChat chat lives in a Flutter app and how to wire each shape — a tab-based app, a chat tab inside an existing app, a full-screen route, a modal / bottom-sheet chat, or an embedded panel. Triggers: 'add a chat tab', 'full screen chat page flutter', 'chat bottom sheet', 'embed chat in my screen', 'build a full chat app in flutter'.

Its SKILL.md is about 2k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts. Compatibility notes: Flutter =3.38.9; cometchatchatuikit ^6 (6.1.x, verified 6.1.0)

It sits in Mobile, covering Cross-platform mobile apps. It works with Flutter and CometChat. The repository describes itself as: Add CometChat chat & messaging and voice & video calls to any React, Next.js, React Native, Angular, Android, iOS, or Flutter project through your AI coding agent. Works with… The licence is MIT.

When your agent uses it

  • Tasks that involve Cross-platform mobile apps

Example prompts

  • “add a chat tab”
  • “full screen chat page flutter”
  • “chat bottom sheet”
  • “/cometchat-flutter-v6-placement”

Requirements

  • Compatibility (from SKILL.md): Flutter >=3.38.9; cometchat_chat_uikit ^6 (6.1.x, verified 6.1.0)

Workflow steps

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

  1. Bounded height — every kit list needs Expanded/Flexible or a fixed height. Unbounded ⇒ exception or a zero-height list.
  2. Scaffold + SafeArea, resizeToAvoidBottomInset left at true.
  3. Round-trip — everything you push must pop back to the state that opened it.
  4. One init/login gate at the root, not per screen (core's lifecycle.md).

What it can do on your machine

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

    No scripts in the folder and no shell commands in SKILL.md (its code samples are dart).

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

  • Network

    No URLs in SKILL.md.

    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.

  • Compatibility

    Flutter >=3.38.9; cometchat_chat_uikit ^6 (6.1.x, verified 6.1.0)

    From compatibility in the SKILL.md frontmatter.

Context cost

Cometchat Flutter V6 Placement loads about 2k tokens when it runs. Until then it costs about 93 tokens; SKILL.md has 633 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~93
When it runs · the whole SKILL.md, loaded when a task matches
~2k

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); files beside SKILL.md are not scanned.

SKILL.md

The full file from cometchat/cometchat-skills at commit 911b108, republished under its MIT licence (© cometchat). 633 words, ~1,970 tokens.

Download SKILL.mdSave it as .claude/skills/cometchat-flutter-v6-placement/SKILL.md (or your agent's skills folder).
name
cometchat-flutter-v6-placement
description
Where CometChat chat lives in a Flutter app and how to wire each shape — a tab-based app, a chat tab inside an existing app, a full-screen route, a modal / bottom-sheet chat, or an embedded panel. Triggers: 'add a chat tab', 'full screen chat page flutter', 'chat bottom sheet', 'embed chat in my screen', 'build a full chat app in flutter'.
compatibility
Flutter >=3.38.9; cometchat_chat_uikit ^6 (6.1.x, verified 6.1.0)
license
MIT
metadata.author
CometChat
metadata.version
1.0.0
metadata.tags
cometchat flutter placement layout navigation tabs bottom-sheet v6

Ground truth: every widget below is in catalogs/flutter-v6.json. The recipes follow the official guides (flutter-tab-based-chat · multi-tab-chat-ui-guide · flutter-conversation · flutter-one-to-one-chat) via ../cometchat-flutter-v6-core/references/docs-map.md. Sizing follows the ONE mobile standard in ../cometchat-flutter-v6-core/references/layout.md — change sizing rules THERE, not here.

Companion skills (read first)

  • cometchat-flutter-v6-core — install, credentials, init→login→render, the golden-path screens. This skill ASSUMES it.
  • cometchat-flutter-v6-components — the widget catalog these compose.

Use this skill when

Deciding or wiring WHERE chat lives — either (a) growing the core surface into the full tab-based app, or (b) a scoped-down placement: a chat tab in an existing app, a modal/bottom sheet, or an embedded panel. A plain unscoped "add chat" is NOT this skill — that is the core surface in -core.

Prerequisites & install

Covered by core. No new package.

The one invariant every placement shares

Mobile shows one screen at a time, so placement is a NAVIGATION problem, not a column problem:

  1. Bounded height — every kit list needs Expanded/Flexible or a fixed height. Unbounded ⇒ exception or a zero-height list.
  2. Scaffold + SafeArea, resizeToAvoidBottomInset left at true.
  3. Round-trip — everything you push must pop back to the state that opened it.
  4. One init/login gate at the root, not per screen (core's lifecycle.md).

Placement patterns (BAKED)

A. Tab-based app (the GROW target — the full app). Bottom tabs: Chats (CometChatConversations) · Users (CometChatUsers) · Groups (CometChatGroups) · Calls (CometChatCallLogs), each pushing the message screen. Incoming calls need NO widget from you — once calling is enabled the kit's CallEventService presents the incoming-call overlay itself from any tab; you only set navigatorKey: CallNavigationContext.navigatorKey on your MaterialApp (see -calls). Do NOT mount CometChatIncomingCall at the root yourself — that plus the kit's own overlay = a double incoming screen. Build from flutter-tab-based-chat. Note hideAppbar: true on the list widgets when your own Scaffold already supplies one, or you get two headers.

dart
// Tab-based placement: four list components + group details + global search
// Users tab
CometChatUsers(
  hideAppbar: true,
  onItemTap: (user) => Navigator.push(context, MaterialPageRoute(builder: (_) => MessageScreen(user: user))),
)
// Groups tab
CometChatGroups(
  hideAppbar: true,
  onItemTap: (group) => Navigator.push(context, MaterialPageRoute(builder: (_) => MessageScreen(group: group))),
)
// Group details: members + kick/ban/scope built in
CometChatGroupMembers(group: group, hideAppbar: true)
// Global search from conversations list (onSearchTap -> push this screen). Result callbacks are
// onConversationClicked/onMessageClicked — verified against kit 6.1.0 and the live search page
// (DOCS-BACKLOG F3 corrected upstream).
CometChatSearch(
  onConversationClicked: (conv) { Navigator.pop(context); openChat(conv); },
  onMessageClicked: (msg) { Navigator.pop(context); openChat(msg); },
  onBack: () => Navigator.pop(context),
)
dart
import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
import 'package:flutter/material.dart';

class ChatsTab extends StatelessWidget {
  const ChatsTab({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Chats')),
      body: SafeArea(
        child: CometChatConversations(
          hideAppbar: true,                       // the Scaffold already has one
          onItemTap: (conversation) {
            final entity = conversation.conversationWith;
            Navigator.push(context, MaterialPageRoute(
              builder: (_) => MessageScreen(
                user: entity is User ? entity : null,
                group: entity is Group ? entity : null,
              ),
            ));
          },
        ),
      ),
    );
  }
}

The Calls tab (CometChatCallLogs) comes from the calls barrel — that screen imports both barrels (-calls). Incoming-call presentation is handled by the kit itself; you don't mount an incoming widget at the root.

B. Chat tab inside an existing app. Same as (A) but only the Chats tab: drop CometChatConversations into your existing tab scaffold. Keep the init/login gate at YOUR app root so chat is ready before the tab is first shown.

C. Full-screen route. Navigator.pushNamed('/chat') → a Scaffold holding the core surface. The simplest placement; nothing extra.

D. Modal / bottom-sheet chat. A sheet has no intrinsic height — give it one explicitly, or the list throws.

dart
import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
import 'package:flutter/material.dart';

void openChatSheet(BuildContext context, User user) {
  showModalBottomSheet(
    context: context,
    isScrollControlled: true,                     // REQUIRED: lets it exceed half-height
    builder: (_) => SizedBox(
      height: MediaQuery.of(context).size.height * 0.9,   // bounded — the kit fills it
      child: SafeArea(
        child: Column(
          children: [
            CometChatMessageHeader(user: user),
            Expanded(child: CometChatMessageList(user: user)),
            CometChatMessageComposer(user: user),
          ],
        ),
      ),
    ),
  );
}

isScrollControlled: true + an explicit height are both required; without them the sheet caps at ~half screen and the composer fights the keyboard.

E. Embedded panel (chat inside a bigger screen). Give the region a fixed height or a sized flex cell — never let it sit inside an unbounded SingleChildScrollView/Column. If the host page scrolls, the chat needs its own SizedBox(height: …).

Show full SKILL.md (176 more words)Show less

Choosing

The askPlacement
"add chat" (unscoped)NOT here — core surface (-core)
"build the full chat app"A — tab-based
"add a chat tab"B
"a chat screen/page"C
"popup / floating / sheet chat"D
"chat inside my dashboard screen"E

Common pitfalls (BAKED)

  • Over-delivering the tab app for a plain "add chat" — that is the core surface, not this.
  • A list with no bounded height — the most common Flutter failure (layout.md).
  • A bottom sheet without isScrollControlled + an explicit height.
  • Two headers — your Scaffold AppBar plus the widget's own; set hideAppbar: true.
  • Mounting CometChatIncomingCall yourself — unnecessary and causes a double incoming-call screen. The kit presents the overlay automatically once calling is enabled; you only set CallNavigationContext.navigatorKey on your MaterialApp (-calls).
  • A pushed screen with no way back (navigation-round-trip).
  • Re-running init/login per screen instead of gating once at the root.

Verify it works

Each placement renders full-size with no unbounded-height exception; item tap pushes and back pops; the composer stays above the keyboard; on the tab app an incoming call surfaces from every tab. Growing beyond this ⇒ -calls / -features.

© cometchat, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in skills/cometchat-flutter-v6-placement of cometchat/cometchat-skills.

Open the folder on GitHubat commit 911b108

Compare with similar skills

Cometchat Flutter V6 Placement 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.

Cometchat Flutter V6 Placement compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Cometchat Flutter V6 Placement this skillcometchat/cometchat-skills129—~2kAutomated safety check: PassMIT
Add Flutter Docusaurus Localematthiasn/lotti1.2k—~1.2kAutomated safety check: PassGPL-3.0
Tm Launcher DesignFar-Se/tabame371—~3.1kAutomated safety check: PassMIT
Mobile App UI Designceorkm/mobile-app-ui-design400—~2kAutomated safety check: PassNone
Marionette Flutter Drive Appleancodepl/marionette_mcp473—~11kAutomated safety check: PassApache-2.0
Flutter ScreenshotJustLookAtNow/pt_mate503—~511Automated safety check: PassMIT

Similar skills

  • Add, complete, or audit a locale across a Flutter application's ARB catalogs and a localized Docusaurus manual, including generated localization code, locale selectors, native platform declarations…

    1.2k GitHub stars~1.2k tokensUpdated today
    MobileAuto-check passed
  • Tm Launcher Design

    Far-Se/tabame

    Create or revise Tabame's Flutter launcher designs: frames, search bars, result rows, palettes, typography, and action dialogs.

    371 GitHub stars~3.1k tokensUpdated yesterday
    MobileAuto-check passed
  • Mobile App UI Design

    ceorkm/mobile-app-ui-design

    Design high-quality mobile app UI/UX screens, flows, and components.

    400 GitHub stars~2k tokensUpdated 3 mo ago
    MobileAuto-check passed
  • Marionette Flutter Drive App

    leancodepl/marionette_mcp

    Set up and drive a running Flutter app (debug or profile) with Marionette — an AI agent's hands and eyes for the app.

    473 GitHub stars~11k tokensUpdated yesterday
    MobileAuto-check passed
  • Flutter Screenshot

    JustLookAtNow/pt_mate

    Capture and show two Flutter UI screenshots for this project: one landscape/large-screen preview and one portrait/mobile preview, without using Flutter Web.

    503 GitHub stars~511 tokensUpdated 2 days ago
    MobileAuto-check passed
  • Flutter Init

    bear2u/my-skills

    A skill your agent uses when user wants to create a new Flutter project (Todo/Habit/Note/Expense/Custom domain) with Clean Architecture, Riverpod 3.0, Drift, and modern Flutter stack

    933 GitHub stars~2.5k tokensUpdated 3 mo ago
    MobileAuto-check passed

More from cometchat/cometchat-skills

All 97 skills in this repo
  • CometChat Android Calls SDK v5

    cometchat/cometchat-skills

    Adds voice and video calling to an Android app in Kotlin with the headless CometChat Calls SDK v5, covering meeting-style rooms, 1:1 ringing calls, call logs and recording.

    129 GitHub stars~5.2k tokensUpdated 2 days ago
    Auto-check passed
  • CometChat Android v5 Headless SDK

    cometchat/cometchat-skills

    Builds chat on Android with your own UI against the headless CometChat Chat SDK v5, covering install, Jetifier conflicts, credentials and init-before-login ordering.

    129 GitHub stars~4k tokensUpdated 2 days ago
    Auto-check passed
  • CometChat Angular Component Picker

    cometchat/cometchat-skills

    Picks and customizes CometChat's Angular UI Kit components by their verified component list, exact input and output event names, and the surfaces that have no kit component at all.

    129 GitHub stars~2.6k tokensUpdated 2 days ago
    Auto-check passed
  • CometChat Angular Features

    cometchat/cometchat-skills

    Enables or builds CometChat features such as polls, reactions, smart replies and pinned messages in an Angular app, first classifying how much client code each one needs.

    129 GitHub stars~2.6k tokensUpdated 2 days ago
    Auto-check passed
  • CometChat Angular Chat Placement

    cometchat/cometchat-skills

    Decides where CometChat chat UI goes in an Angular app: a dedicated route, a dashboard panel, a support widget or the full multi-pane app, with thread and search panels.

    129 GitHub stars~2.2k tokensUpdated 2 days ago
    Auto-check passed
  • Cometchat iOS V5 SDK

    cometchat/cometchat-skills

    Add voice & video calling to any iOS app FROM SCRATCH with the headless CometChat Calls SDK v5 (CometChatCallsSDK, via Swift Package Manager) — no UI Kit.

    129 GitHub stars~5.2k tokensUpdated 2 days ago
    Auto-check passed

Categories

Questions about Cometchat Flutter V6 Placement

What does Cometchat Flutter V6 Placement do?

Where CometChat chat lives in a Flutter app and how to wire each shape — a tab-based app, a chat tab inside an existing app, a full-screen route, a modal / bottom-sheet chat, or an embedded panel. Cometchat Flutter V6 Placement is an agent skill from cometchat/cometchat-skills. Where CometChat chat lives in a Flutter app and how to wire each shape — a tab-based app, a chat tab inside an existing app, a full-screen route, a modal / bottom-sheet chat, or an embedded panel.

When should I use Cometchat Flutter V6 Placement?

Cometchat Flutter V6 Placement fits situations like: tasks that involve Cross-platform mobile apps.

How do I install Cometchat Flutter V6 Placement in Claude Code?

Run `npx skills add cometchat/cometchat-skills --skill cometchat-flutter-v6-placement -a claude-code`. Or copy the skill folder (skills/cometchat-flutter-v6-placement in cometchat/cometchat-skills) into .claude/skills/cometchat-flutter-v6-placement in your project. Claude Code loads it when a task matches its description.

How do I install Cometchat Flutter V6 Placement in Codex?

Run `npx skills add cometchat/cometchat-skills --skill cometchat-flutter-v6-placement -a codex`. Or copy the skill folder (skills/cometchat-flutter-v6-placement in cometchat/cometchat-skills) into .agents/skills/cometchat-flutter-v6-placement in your project. Codex loads it when a task matches its description.

Can I use Cometchat Flutter V6 Placement 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 cometchat/cometchat-skills --skill cometchat-flutter-v6-placement -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/cometchat-flutter-v6-placement, .gemini/skills/cometchat-flutter-v6-placement, .github/skills/cometchat-flutter-v6-placement and .opencode/skills/cometchat-flutter-v6-placement in your project.

What does Cometchat Flutter V6 Placement need to run?

SKILL.md names no scripts, command-line tools or credentials: Cometchat Flutter V6 Placement is instructions for the agent only. Compatibility (from SKILL.md): Flutter >=3.38.9; cometchat_chat_uikit ^6 (6.1.x, verified 6.1.0).

Does Cometchat Flutter V6 Placement access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Cometchat Flutter V6 Placement 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. Review the folder before installing.

What licence does Cometchat Flutter V6 Placement use?

Cometchat Flutter V6 Placement is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Cometchat Flutter V6 Placement use?

About 2k tokens (SKILL.md is roughly 7.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Cometchat Flutter V6 Placement?

Skills that share tags, products or a category with Cometchat Flutter V6 Placement: Add Flutter Docusaurus Locale (matthiasn/lotti, 1.2k stars), Tm Launcher Design (Far-Se/tabame, 371 stars), Mobile App UI Design (ceorkm/mobile-app-ui-design, 400 stars) and Marionette Flutter Drive App (leancodepl/marionette_mcp, 473 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Cometchat Flutter V6 Placement?

cometchat (a GitHub organization) maintains it in cometchat/cometchat-skills, which has 129 GitHub stars. The repository holds 97 skills in this directory. The repository was last updated on October 5, 2026.

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