tg-miniappBuild 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.
Install via ClawdBot CLI:
clawdbot install Zenith2828/tg-miniappBattle-tested solutions for common Telegram Mini App issues.
// Use reactive hook - values are async and context-dependent
const safeArea = useSafeAreaInset(); // from references/hooks.ts
<div style={{ paddingTop: safeArea.top }}>Header</div>Telegram applies transform to container. Use createPortal:
import { createPortal } from 'react-dom';
createPortal(<Modal />, document.body);Use @telegram-apps/sdk, not raw WebApp:
import { onBackButtonClick, showBackButton } from '@telegram-apps/sdk';
onBackButtonClick(handleBack);/setinline → select botsavePreparedInlineMessage → returns prepared_message_idWebApp.shareMessage(prepared_message_id)Note: prepared_message_id is single-use — prepare fresh for each share tap.
For static content, consider caching images on R2/CDN and preparing per-tap.
// WRONG: renders literal "0"
{count && <span>{count}</span>}
// CORRECT
{count > 0 && <span>{count}</span>}Before shipping, test:
Generated Mar 1, 2026
Build a shopping interface within Telegram for browsing products, adding to cart, and checkout. Use safe area hooks for fullscreen product galleries and sharing components to enable users to share items via inline mode with friends. Address position:fixed issues for sticky headers during scrolling.
Create a mini app for managing social media posts, analytics, and scheduling. Implement BackButton handlers for navigation between screens and use sharing features to preview and distribute content directly from the app. Test on iOS and Android to ensure consistent rendering.
Develop a health and fitness tracker with workout logs and progress charts. Utilize fullscreen mode for immersive video tutorials and safe area adjustments to avoid UI overlaps on different devices. Incorporate React hooks to handle state without rendering issues like '0' displays.
Design an interactive quiz app with multiple-choice questions and score tracking. Use createPortal for modals displaying results or hints, and implement sharing to allow users to challenge others via inline messages. Ensure smooth back navigation with proper SDK integration.
Build a mini app for browsing and purchasing event tickets with seat selection and payment processing. Apply safe area insets for header layouts and test sharing flows to distribute ticket details across chat types. Debug position:fixed for sticky action buttons during checkout.
Offer premium features like advanced analytics or ad-free experiences through monthly or annual subscriptions. Integrate payment gateways within the mini app and use sharing to drive referrals. Revenue is generated from recurring user payments.
Sell digital goods such as virtual items, extra content, or boosts directly within the mini app. Utilize Telegram's WebApp API for seamless transactions and sharing to promote purchases via inline mode. Revenue comes from one-time sales and microtransactions.
Monetize by displaying targeted ads or partnering with brands for sponsored content within the mini app. Implement safe area hooks to optimize ad placement and use sharing features to increase user engagement. Revenue is earned through ad impressions and sponsorship deals.
💬 Integration Tip
Always test on both iOS and Android devices to catch platform-specific issues, and use the provided hooks and components from references to streamline development and avoid common pitfalls.
Automatically update Clawdbot and all installed skills once daily. Runs via cron, checks for updates, applies them, and messages the user with a summary of what changed.
Full desktop computer use for headless Linux servers. Xvfb + XFCE virtual desktop with xdotool automation. 17 actions (click, type, scroll, screenshot, drag,...
Essential Docker commands and workflows for container management, image operations, and debugging.
Tool discovery and shell one-liner reference for sysadmin, DevOps, and security tasks. AUTO-CONSULT this skill when the user is: troubleshooting network issues, debugging processes, analyzing logs, working with SSL/TLS, managing DNS, testing HTTP endpoints, auditing security, working with containers, writing shell scripts, or asks 'what tool should I use for X'. Source: github.com/trimstray/the-book-of-secret-knowledge
Deploy applications and manage projects with complete CLI reference. Commands for deployments, projects, domains, environment variables, and live documentation access.
Monitor topics of interest and proactively alert when important developments occur. Use when user wants automated monitoring of specific subjects (e.g., product releases, price changes, news topics, technology updates). Supports scheduled web searches, AI-powered importance scoring, smart alerts vs weekly digests, and memory-aware contextual summaries.