tg-miniapp
Build Telegram Mini Apps without the pain. Includes solutions for safe areas, fullscreen mode, BackButton handlers, sharing with inline mode, position:fixed issues, and React gotchas. Use when building or debugging Telegram Mini Apps, or when encountering issues with WebApp API, safe areas, or sharing.
Why use this skill?
Master Telegram Mini App development with battle-tested solutions for safe areas, BackButton handlers, sharing flows, and React-specific UI issues.
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/zenith2828/tg-miniappWhat This Skill Does
The tg-miniapp skill acts as a comprehensive knowledge base and toolkit for developers building Telegram Mini Apps. It bypasses the common frustrations associated with the Telegram WebApp API by providing battle-tested solutions for layout, navigation, and interactive features. It includes specialized patterns for handling iOS/Android safe areas, fixing position:fixed issues caused by Telegram's container transforms, implementing reliable BackButton listeners via the official SDK, and managing complex sharing workflows with inline mode. The skill provides direct access to optimized React hooks and pre-built components that bridge the gap between web standards and Telegram's specific runtime environment.
Installation
To integrate this skill into your project, run the following command in your terminal:
clawhub install openclaw/skills/skills/zenith2828/tg-miniapp
Use Cases
- UI Consistency: Solving header overlap issues on iPhone notches by using the provided
useSafeAreaInsethook. - Navigation: Standardizing back navigation patterns that work consistently across different device platforms.
- Sharing: Implementing 'Share' buttons that trigger inline messages through the WebApp API without violating single-use message constraints.
- Debugging: Troubleshooting why modal windows or fixed headers disappear or behave unpredictably due to container CSS transforms.
- React Optimization: Avoiding the common '0' rendering bug that occurs when conditionally rendering counters or numeric values in React.
Example Prompts
- "I am having trouble with my header getting cut off by the dynamic island on iOS; how can I implement the safe area inset using this skill?"
- "My modal components are disappearing or not showing up when I use
position:fixed. Can you provide a code example for how to usecreatePortalto fix this in my Telegram Mini App?" - "Walk me through the steps to implement a sharing feature that uses the
prepared_message_idmethod to allow users to share content into a channel."
Tips & Limitations
- Always test the sharing flow on both iOS and Android, as they handle viewport changes and the BackButton listener differently.
- Remember that
prepared_message_idis strictly single-use; ensure your backend logic generates a fresh ID on every button press rather than trying to cache them. - Use the provided testing checklist from the documentation to ensure your app remains functional after Telegram updates its WebApp API.
- While the hooks are designed for React, the underlying logic can be adapted for Vue or Svelte by observing the same
window.Telegram.WebAppevents.
Metadata
Not sure this is the right skill?
Describe what you want to build — we'll match you to the best skill from 16,000+ options.
Find the right skillPaste this into your clawhub.json to enable this plugin.
{
"plugins": {
"official-zenith2828-tg-miniapp": {
"enabled": true,
"auto_update": true
}
}
}