Skip to main content Skills Marketplace Découvrez et explorez les compétences IA créées par la communauté.
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Afficher les détails du prompt Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.
npx skills add https://github.com/BEKO2210/Firstbrain --skill telegram-mini-appLa commande reste sur une seule ligne. Faites défiler horizontalement pour la vérifier avant de la copier.
Vous préférez une copie locale ? Téléchargez les fichiers actuellement disponibles dans SkillsMP.
Télécharger Zip Téléchargement... Métiers associés SOC
Basé sur la classification professionnelle SOC
name telegram-mini-app description Expert in building Telegram Mini Apps (TWA) - web apps that run type skill created 2026-02-27T00:00:00.000Z domain communication-content category social-media risk unknown source vibeship-spawner-skills (Apache 2.0) tags ["skill","communication-content","social-media","telegram","mini","app"]
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.
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.
Expertise
Telegram Web App API
TON blockchain
Mini App UX
TON Connect
Viral mechanics
Crypto payments
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
Mini App Setup
Basic Structure
<!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
expand
const
initDataUnsafe
user
console
log
first_name
id
</script >
</body >
</html >
React Setup
export function useTelegram (const tg = window .Telegram ?.WebApp ;
return {
tg,
user : tg?.initDataUnsafe ?.user ,
queryId : tg?.initDataUnsafe ?.query_id ,
expand : () => tg?.expand (),
close : () => tg?.close (),
ready : () => tg?.ready (),
};
}
function App (const { tg, user, expand, ready } = useTelegram ();
useEffect (() => {
ready ();
expand ();
}, []);
return <div > Hello, {user?.first_name}</div >
Bot Integration
bot.command ('app' , (ctx ) => {
ctx.reply ('Open the app:' , {
reply_markup : {
inline_keyboard : [[
{ text : '🚀 Open App' , web_app : { url : 'https://your-app.com' } }
]]
}
});
});
TON Connect Integration Wallet connection for TON blockchain
When to use : When building Web3 Mini Apps
TON Connect Integration
Setup npm install @tonconnect/ui-react
React Integration import { TonConnectUIProvider , TonConnectButton } from '@tonconnect/ui-react' ;
function App (return (
<TonConnectUIProvider manifestUrl ="https://your-app.com/tonconnect-manifest.json" >
<MainApp />
</TonConnectUIProvider > function WalletSection (return (
<TonConnectButton />
Manifest File {
"url" : "https://your-app.com" ,
"name" : "Your Mini App" ,
"iconUrl" : "https://your-app.com/icon.png"
}
Send TON Transaction import { useTonConnectUI } from '@tonconnect/ui-react' ;
function PaymentButton ({ amount, to } ) {
const [tonConnectUI] = useTonConnectUI ();
const handlePay = async (const transaction = {
validUntil : Math .floor (Date .now () / 1000 ) + 60 ,
messages : [{
address : to,
amount : (amount * 1e9 ).toString (),
}]
};
await tonConnectUI.sendTransaction (transaction);
};
return <button onClick ={handlePay} > Pay {amount} TON</button >
Mini App Monetization Making money from Mini Apps
When to use : When planning Mini App revenue
Mini App Monetization
Revenue Streams Model Example Potential TON payments Premium features High In-app purchases Virtual goods High Ads (Telegram Ads) Display ads Medium Referral Share to earn Medium NFT sales Digital collectibles High
Telegram Stars (New!)
bot.command ('premium' , (ctx ) => {
ctx.replyWithInvoice ({
title : 'Premium Access' ,
description : 'Unlock all features' ,
payload : 'premium' ,
provider_token : '' ,
currency : 'XTR' ,
prices : [{ label : 'Premium' , amount : 100 }],
});
});
Viral Mechanics
function ReferralShare (const { tg, user } = useTelegram ();
const referralLink = `https://t.me/your_bot?start=ref_${user.id} ` ;
const share = (openTelegramLink (
`https://t.me/share/url?url=${encodeURIComponent (referralLink)} &text=Check this out!`
);
};
return <button onClick ={share} > Invite Friends (+10 coins)</button >
Gamification for Retention
Daily rewards
Streak bonuses
Leaderboards
Achievement badges
Referral bonuses
Mini App UX Patterns UX specific to Telegram Mini Apps
When to use : When designing Mini App interfaces
Mini App UX
Platform Conventions Element Implementation Main Button tg.MainButton Back Button tg.BackButton Theme tg.themeParams Haptics tg.HapticFeedback
Main Button const tg = window .Telegram .WebApp ;
tg.MainButton .setText ('Continue' );
tg.MainButton .show ();
tg.MainButton .onClick (() => {
submitForm ();
});
tg.MainButton .showProgress ();
tg.MainButton .hideProgress ();
Theme Adaptation :root {
--tg-theme-bg-color : var (--tg-theme-bg-color, #ffffff );
--tg-theme-text-color : var (--tg-theme-text-color, #000000 );
--tg-theme-button-color : var (--tg-theme-button-color, #3390ec );
}
body {
background : var (--tg-theme-bg-color);
color : var (--tg-theme-text-color);
}
Haptic Feedback
tg.HapticFeedback .impactOccurred ('light' );
tg.HapticFeedback .notificationOccurred ('success' );
tg.HapticFeedback .selectionChanged ();
Sharp Edges
Not validating initData from Telegram Situation: Backend trusts user data without verification
Trusting client data blindly
No server-side validation
Using initDataUnsafe directly
Security audit failures
Why this breaks:
initData can be spoofed.
Security vulnerability.
Users can impersonate others.
Data tampering possible.
Validating initData
Why Validate
initData contains user info
Must verify it came from Telegram
Prevent spoofing/tampering
Node.js Validation import crypto from 'crypto' ;
function validateInitData (initData, botToken ) {
const params = new URLSearchParams (initData);
const hash = params.get ('hash' );
params.delete ('hash' );
const dataCheckString = Array .from (params.entries ())
.sort (([a], [b] ) => a.localeCompare (b))
.map (([k, v] ) => `${k} =${v} ` )
.join ('\n' );
const secretKey = crypto
.createHmac ('sha256' , 'WebAppData' )
.update (botToken)
.digest ();
const calculatedHash = crypto
.createHmac ('sha256' , secretKey)
.update (dataCheckString)
.digest ('hex' );
return calculatedHash === hash;
}
Using in API app.post ('/api/action' , (req, res ) => {
const { initData } = req.body ;
if (!validateInitData (initData, process.env .BOT_TOKEN )) {
return res.status (401 ).json ({ error : 'Invalid initData' });
}
const params = new URLSearchParams (initData);
const user = JSON .parse (params.get ('user' ));
});
TON Connect not working on mobile Situation: Wallet connection fails on mobile Telegram
Works on desktop, fails mobile
Wallet app doesn't open
Connection stuck
Users can't pay
Why this breaks:
Deep linking issues.
Wallet app not opening.
Return URL problems.
Different behavior iOS vs Android.
TON Connect Mobile Issues
Common Problems
Wallet doesn't open
Return to Mini App fails
Transaction confirmation lost
Fixes
const manifestUrl = 'https://your-domain.com/tonconnect-manifest.json' ;
const [tonConnectUI] = useTonConnectUI ();
useEffect (() => {
return tonConnectUI.onStatusChange ((wallet ) => {
if (wallet) {
console .log ('Connected:' , wallet.account .address );
}
});
}, []);
Testing
Test on real devices
Test with multiple wallets (Tonkeeper, OpenMask)
Test both iOS and Android
Use ngrok for local dev + mobile test
Fallback
Mini App feels slow and janky Situation: App lags, slow transitions, poor UX
Slow initial load
Laggy interactions
Users complaining about speed
High bounce rate
Why this breaks:
Too much JavaScript.
No code splitting.
Large bundle size.
No loading optimization.
Mini App Performance
Bundle Size
Target < 200KB gzipped
Use code splitting
Lazy load routes
Tree shake dependencies
Quick Wins
const HeavyChart = lazy (() => import ('./HeavyChart' ));
<img loading ="lazy" src ="..." />
Loading Strategy function App (const [ready, setReady] = useState (false );
useEffect (() => {
Promise .all ([
loadUserData (),
loadAppConfig (),
]).then (() => setReady (true ));
}, []);
if (!ready) return <Skeleton /> return <MainApp />
Vite Optimization
export default {
build : {
rollupOptions : {
output : {
manualChunks : {
vendor : ['react' , 'react-dom' ],
}
}
}
}
};
Custom buttons instead of MainButton Situation: App has custom submit buttons that feel non-native
Custom submit buttons
MainButton never used
Inconsistent UX
Users confused about actions
Why this breaks:
MainButton is expected UX.
Custom buttons feel foreign.
Inconsistent with Telegram.
Users don't know what to tap.
Using MainButton Properly
When to Use MainButton
Form submission
Primary actions
Continue/Next flows
Checkout/Payment
Implementation const tg = window .Telegram .WebApp ;
function showMainButton (text, onClick ) {
tg.MainButton .setText (text);
tg.MainButton .onClick (onClick);
tg.MainButton .show ();
}
function hideMainButton (MainButton .hide ();
tg.MainButton .offClick ();
}
function setMainButtonLoading (loading ) {
if (loading) {
tg.MainButton .showProgress ();
tg.MainButton .disable ();
} else {
tg.MainButton .hideProgress ();
tg.MainButton .enable ();
}
}
React Hook function useMainButton (text, onClick, visible = true ) {
const tg = window .Telegram ?.WebApp ;
useEffect (() => {
if (!tg) return ;
if (visible) {
tg.MainButton .setText (text);
tg.MainButton .onClick (onClick);
tg.MainButton .show ();
} else {
tg.MainButton .hide ();
}
return () => {
tg.MainButton .offClick (onClick);
};
}, [text, onClick, visible]);
}
Validation Checks
No initData Validation Message: Not validating initData - security vulnerability.
Fix action: Implement server-side initData validation with hash verification
Missing Telegram Web App Script Message: Telegram Web App script not included.
Not Calling tg.ready() Message: Not calling tg.ready() - Telegram may show loading state.
Fix action: Call window.Telegram.WebApp.ready() when app is ready
Not Using Telegram Theme Message: Not adapting to Telegram theme colors.
Fix action: Use CSS variables from tg.themeParams for colors
Missing Viewport Meta Tag Message: Missing viewport meta tag for mobile.
Collaboration
Delegation Triggers
bot|command|handler -> telegram-bot-builder (Bot integration)
TON|smart contract|blockchain -> blockchain-defi (TON blockchain features)
react|vue|frontend -> frontend (Frontend framework)
viral|referral|share -> viral-generator-builder (Viral mechanics)
game|gamification -> gamification-loops (Game mechanics)
Tap-to-Earn Game Skills: telegram-mini-app, gamification-loops, telegram-bot-builder
1. Design game mechanics
2. Build Mini App with tap mechanics
3. Add referral/viral features
4. Integrate TON payments
5. Bot for notifications/onboarding
6. Launch and grow
DeFi Mini App Skills: telegram-mini-app, blockchain-defi, frontend
1. Design DeFi feature (swap, stake, etc.)
2. Integrate TON Connect
3. Build transaction UI
4. Add wallet management
5. Implement security measures
6. Deploy and audit
Related Skills Works well with: telegram-bot-builder, frontend, blockchain-defi, viral-generator-builder
When to Use
User mentions or implies: telegram mini app
User mentions or implies: TWA
User mentions or implies: telegram web app
User mentions or implies: TON app
User mentions or implies: mini app
Connections
Domain: [[Kommunikation & Content]]Kategorie: [[Social Media]]Navigation: [[Skills Uebersicht]], [[Home]] 