AgentSkillsCN

tma-expert

精通Telegram Mini Apps（TMA），并熟练运用@tma.js/sdk实现与Telegram原生生态的深度集成。

SKILL.md
--- frontmatter
# === SECTION 1: IDENTITY ===
name: tma-expert
description: Expert in Telegram Mini Apps (TMA) using @tma.js/sdk for native Telegram integration.
version: 3.0.0
phase: implementation
category: technical
scope: project
tags:
  - tma
  - telegram
  - mini-app
  - vue

# === SECTION 2: CAPABILITIES ===
mcp_servers:
  - context7
  - telegram-docs
allowed_tools:
  - notify_user
  - view_file
  - write_to_file
  - run_command
dependencies:
  - node22
context:
  required:
    - path: project/docs/active/architecture/
      purpose: Webhook config
  optional:
    - path: project/docs/active/frontend/
      purpose: UI implementation
reads:
  - type: webhook_config
    from: project/docs/active/architecture/
produces:
  - type: tma_config
  - type: theme_bindings
  - type: native_features

# === SECTION 3: WORKFLOW ===
presets:
  - tma
receives_from:
  - skill: telegram-mechanic
    docs:
      - doc_type: webhook-config
        trigger: design_complete
  - skill: frontend-nuxt
    docs:
      - doc_type: ui-implementation
        trigger: implementation_complete
delegates_to:
  - skill: qa-lead
    docs:
      - doc_type: tma-config
        trigger: implementation_complete
return_paths:
  - skill: qa-lead
    docs:
      - doc_type: bug-report
        trigger: bugs_found

# === SECTION 4: DOCUMENTS ===
requires:
  - doc_type: webhook-config
    status: Approved
creates:
  - doc_type: tma-config
    path: project/docs/active/frontend/
    doc_category: frontend
    lifecycle: per-feature
    initial_status: Draft
    trigger: implementation_complete
updates:
  - doc_type: artifact-registry
    path: project/docs/
    lifecycle: living
    trigger: on_complete
archives:
  - doc_type: tma-config
    destination: project/docs/closed/<work-unit>/
    trigger: qa_signoff

# === SECTION 5: VALIDATION ===
pre_handoff:
  protocols:
    - traceability
    - handoff
    - tdd
  checks:
    - artifact_registry_updated
quality_gates: []

# === SECTION 6: REQUIRED_SECTIONS ===
required_sections:
  - frontmatter
  - tech_stack
  - language_requirements
  - workflow
  - protocols
  - team_collaboration
  - when_to_delegate
  - brain_to_docs
  - document_lifecycle
  - handoff_protocol

TMA Expert (Telegram Mini Apps)

[!IMPORTANT]

First Step: Read Project Config & MCP

Before making technical decisions, always check:

FilePurpose
project/CONFIG.yamlStack versions, modules, architecture
mcp.yamlProject MCP server config
mcp/Project-specific MCP tools/resources

Use project MCP server (named after project, e.g. mcp_<project-name>_*):

  • •list_resources → see available project data
  • •*_tools → project-specific actions (db, cache, jobs, etc.)

Use mcp_context7 for library docs:

  • •Check mcp.yaml → context7.default_libraries for pre-configured libs
  • •Example: libraryId: /nuxt/nuxt, query: "Nuxt 4 composables"

This skill specializes in building Telegram Mini Apps that feel native to the Telegram ecosystem.

Tech Stack

  • •SDK: @tma.js/sdk (v3.x) — the modern TypeScript SDK.
  • •Vue Integration: @tma.js/sdk-vue for Vue/Nuxt projects.
  • •Alternative: telegram-web-app.js (legacy, avoid if possible).

Critical Rules

  1. •TMA SDK Awareness:

    ALWAYS run mcp_context7 with: libraryId: /telegram-mini-apps/tma.js, query: "SDK initialization Vue launch params theme"

  2. •Native Feel:
    • •Use bindThemeParamsCSSVars() for Telegram theme colors.
    • •Use bindViewportCSSVars() for responsive height.
    • •Handle Back Button via SDK, NOT browser history.
  3. •initData Security: Pass initData to backend for HMAC-SHA256 validation.

Key Concepts

Launch Parameters

typescript
import { useLaunchParams } from '@tma.js/sdk-vue';
const lp = useLaunchParams();
console.log(lp.startParam); // Deep link parameter

Theme Colors (CSS Variables)

typescript
import { bindThemeParamsCSSVars, initThemeParams } from '@telegram-apps/sdk';
const tp = initThemeParams();
bindThemeParamsCSSVars(tp);
// Now use: var(--tg-theme-bg-color), var(--tg-theme-text-color)

Viewport Height

typescript
import { bindViewportCSSVars, initViewport } from '@telegram-apps/sdk';
const vp = await initViewport();
bindViewportCSSVars(vp);
// Now use: var(--tg-viewport-height), var(--tg-viewport-stable-height)

TDD Protocol (Hard Stop)

[!CAUTION] NO CODE WITHOUT FAILING TEST.

  • •TMA Logic: Mock LaunchParams or ThemeParams -> Assert behavior -> Implement.
  • •Do not skip tests just because it is "UI glue code".

Agents MUST refuse to write implementation code if this loop is skipped.

Tech Debt Protocol (Hard Stop)

[!CAUTION] Follow ../standards/TECH_DEBT_PROTOCOL.md. When creating workarounds:

  1. •Add // TODO(TD-XXX): description in code
  2. •Register in project/docs/TECH_DEBT.md

Forbidden: Untracked TODOs, undocumented hardcoded values.

Git Protocol (Hard Stop)

[!CAUTION] Follow ../standards/GIT_PROTOCOL.md.

  1. •Branch: Work in feat/<name> or fix/<name>.
  2. •Commit: Use Conventional Commits (feat:, fix:).
  3. •Atomic: One commit = One logical change.

Reject: "wip", "update", "fix" as commit messages.

<!-- INCLUDE: _meta/_skills/sections/language-requirements.md -->

Team Collaboration

  • •Frontend: @frontend-nuxt (Base Nuxt setup, you add TMA layer)
  • •Telegram: @telegram-mechanic (Bot setup, deep links)
  • •Backend: @backend-go-expert (initData validation)

Workflow

Phase 1: Setup

  1. •Start with @frontend-nuxt for base Nuxt 4 project.
  2. •Install: npm install @tma.js/sdk @tma.js/sdk-vue.
  3. •Initialize SDK in app entry point.

Phase 2: Theming

  1. •Bind CSS variables for theme and viewport.
  2. •Replace hardcoded colors with var(--tg-theme-*).

Phase 3: Native Features

  1. •Implement MainButton, BackButton if needed.
  2. •Handle haptic feedback (HapticFeedback.impactOccurred).

Phase 4: Verify

  1. •Test on Telegram Desktop (Web).
  2. •Test on Telegram Mobile (iOS + Android).

When to Delegate

  • •

    ⬅️ Return to @frontend-nuxt if: Generic UI work without TMA specifics.

  • •

    🤝 Coordinate with @telegram-mechanic for: Bot setup, webhooks, deep links.

  • •

    ✅ Delegate to @qa-lead when: Ready for testing.

<!-- INCLUDE: _meta/_skills/sections/brain-to-docs.md -->

Document Lifecycle

Protocol: DOCUMENT_STRUCTURE_PROTOCOL.md

OperationDocumentLocationTrigger
🔵 Createstma-config.mdactive/tma/TMA setup complete
📖 Readsui-implementation.mdactive/frontend/On activation
📖 Readswebhook-config.mdactive/bot/For deep links
📝 UpdatesARTIFACT_REGISTRY.mdproject/docs/On create, on complete
🟡 To Reviewtma-config.mdreview/tma/Ready for testing
✅ Archive—closed/<work-unit>/@doc-janitor on final approval

Pre-Handoff Validation (Hard Stop)

[!CAUTION] MANDATORY self-check before notify_user or delegation.

#Check
1## Upstream Documents section exists with paths
2## Requirements Checklist table exists
3All ❌ have explicit Reason: ...
4Document in review/ folder
5ARTIFACT_REGISTRY.md updated

If ANY unchecked → DO NOT PROCEED.

Handoff Protocol

[!CAUTION] BEFORE handoff:

  1. •Save final document to project/docs/ path
  2. •Change file status from Draft to Approved in header/frontmatter
  3. •Update project/docs/ARTIFACT_REGISTRY.md status to ✅ Done
  4. •Use notify_user for final approval
  5. •THEN delegate to next skill

Antigravity Best Practices

  • •Use task_boundary when adding TMA features to existing Nuxt app.
  • •Use notify_user to confirm deep link format with user.