A comprehensive toolkit for building and debugging Telegram Mini Apps, resolving common safe area, layout, and API integration challenges.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install tg-miniapp
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install tg-miniapp using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is tg-miniapp?
The tg-miniapp skill is a technical resource designed for developers building within the Telegram ecosystem. It provides battle-tested solutions for the unique constraints of the Telegram WebApp environment, such as container transforms that break traditional CSS positioning and platform-specific UI behaviors. By integrating this Openclaw Skills package, developers can bypass months of trial and error when dealing with safe areas, hardware back buttons, and complex inline sharing flows.
This skill focuses on delivering high-performance, native-feeling experiences. It bridges the gap between standard web development and the specialized Telegram Mini App API, offering optimized React hooks and pre-built components that ensure consistent performance across both iOS and Android platforms.
tg-miniapp Use Cases
- Managing dynamic safe area insets in fullscreen mode.
- Fixing broken position:fixed elements using React portals.
- Handling hardware and software BackButton events reliably.
- Implementing secure inline sharing with prepared message IDs.
- Troubleshooting React-specific rendering bugs in mobile webview environments.
How tg-miniapp Works
- Initialize the development environment using the Telegram Apps SDK.
- Implement reactive hooks to handle async values for safe area insets and context-dependent UI.
- Wrap UI components in portals to escape Telegram's container transform limitations.
- Configure the backend to generate single-use prepared inline message IDs for sharing functionality.
- Follow the multi-platform testing checklist to ensure compatibility across chat types and operating systems.
tg-miniapp Setup
To start using this Openclaw Skills resource, ensure you have the required SDK installed in your project:
npm install @telegram-apps/sdk
Configure your application by referencing the provided knowledge base and components:
- Import hooks from
references/hooks.tsfor safe area management. - Utilize the layout components found in
references/components.tsx. - Consult
references/KNOWLEDGE.mdfor specific troubleshooting steps.
tg-miniapp Data Schema & Taxonomy
The skill utilizes a structured approach to manage development resources and best practices:
| File | Category | Description |
|---|---|---|
| KNOWLEDGE.md | Documentation | Comprehensive database of known issues and technical solutions. |
| hooks.ts | Logic | React hooks for safe areas, fullscreen status, and SDK event handling. |
| components.tsx | UI | Reusable components including SafeAreaHeader and DebugOverlay. |
| Testing Checklist | QA | A step-by-step verification guide for iOS, Android, and chat-specific flows. |
tg-miniapp Advanced Features
- Reactive safe area management for dynamic fullscreen transitions.
- Integration with @BotFather for advanced inline mode configuration.
- Specialized portal-based rendering for modals and fixed headers.
- Efficient single-use token handling for static and dynamic content sharing.
- Debugging overlays designed for mobile-first environment inspection.
SKILL.md
Loading
Related Openclaw Skills
Workspace Analyzer
A diagnostic utility that scans OpenClaw workspaces to identify maintenance needs, file bloat, and organizational issues for AI agents.
Skill Install Guardian
A security and due diligence layer that performs deep content scanning and malicious pattern detection before installing external skills.
Skill Creator
A comprehensive development pipeline for designing, testing, and publishing high-performance AI agent skills with built-in best practices.
Remotion Video Generator
An AI-driven video production workflow that generates professional motion graphics programmatically using React and Remotion.
Rocket.Chat
A comprehensive integration for managing Rocket.Chat messaging, channel operations, and user administrative tasks through a RESTful API.
Progress Reporter
An automated reporting system that generates detailed progress updates for AI agents every 10 minutes during task execution.
Featured*
