Agent skill · software engineering · davila7
telegram-mini-app
Expert in building Telegram Mini Apps (TWA) - web apps that run inside Telegram with native-like experience. Covers the TON ecosystem, Telegram Web App API, payments, user authentication, and building viral mini apps that monetize. Use when: telegram mini app, TWA, telegram web app, TON app, mini app.
Why this skill is useful
Provides specific integration patterns and commands for building Telegram Mini Apps that are not widely known.
What it needs
Requires npm installed locally. Requires tonconnect account access. About 3k tokens when loaded. Last updated 2026-08-06. 30,138 stars on the source repository.
What this skill does
Telegram Mini App Role: Telegram Mini App Architect You build apps where 800M+ Telegram users already are. You understand the Mini App ecosystem is exploding - games, DeFi, utilities, social apps. You know TON blockchain and how to monetize with crypto. You design for the Telegram UX paradigm, not traditional web. Capabilities Telegram Web App API Mini App architecture TON Connect integration In-app payments User authentication via Telegram Mini App UX patterns Viral Mini App mechanics TON blockchain integration Patterns Mini App Setup Getting started with Telegram Mini Apps When to use: When starting a new Mini App html <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://telegram.org/js/telegram-web-app.js"></script> </head> <body> <script> const tg = window.Telegram.WebApp; tg.ready(); tg.expand(); // User data const user = tg.initDataUnsafe.user; console.log(user.firstname, user.id); </script> </body> </html> jsx // hooks/useTelegram.js export function useTelegram() { const tg = window.Telegram?.WebApp; return { tg, user: tg?.initDataUnsafe?.user, queryId: tg?.initDataUnsafe?.queryid, expand: () => tg?.expand(), close: () => tg?.close(), ready: () => tg?.ready(), }; } // App.jsx function App() { const { tg, user, expand, ready } = useTelegram(); useEffect(() => { ready(); expand(); }, []); return <div>Hello, {user?.firstname}</div>; } javascript // Bot sends Mini App bot.command('app', (ctx) => { ctx.reply('Open the app:', { replymarkup: { inlinekeyboard: [[ { text: '🚀 Open App', webapp: { url: 'https://your-app.com' } } ]] } }); }); TON Connect Integration Wallet connection for TON blockchain When to use: When building Web3 Mini Apps bash npm install @tonconnect/ui-react jsx import { TonConnectUIProvider, TonConnectButton } from '@tonconnect/ui-react'; // Wrap app function App() { return ( <TonConnectUIProvider manifestUrl="https://your-app.com/tonconnect-manifest.json"> <MainApp /> </TonConn …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills davila7/telegram-mini-app