[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6GD5DBVAWD6GJ5YYVZS876R":3,"skill-same:01M6GD5DBVAWD6GJ5YYVZS876R":71},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":23,"publishedAt":41,"linkOnly":42,"markdownContent":43,"markdownBody":44,"frontMatter":45,"refName":49,"commitSha":50,"skillDirectory":51,"forksCount":52,"repositoryHtmlUrl":53,"repositoryHomepageUrl":53,"ownerHtmlUrl":54,"ownerBlogUrl":6,"ownerDescription":55,"updatedAt":56,"install":57,"resources":70},"01M6GD5DBVAWD6GJ5YYVZS876R","telegram-mini-app",null,"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.","Sam-06060\u002Fjarvis-assistant","Sam-06060","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F208600848?v=4","01M6CRKT7C7FXD21V6HXF293S0","Samson Frank Ganta","01M6CRKTBEKYFD8YX5Z1GT99EE",6,"Apache-2.0","https:\u002F\u002Fgithub.com\u002FSam-06060\u002Fjarvis-assistant\u002Fblob\u002Fmain\u002Fmodules\u002Fagent_skills\u002Fawesome-skills\u002Fplaybooks\u002Ftelegram-mini-app\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",[24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40],"telegram mini app","app","telegram","ecosystem","web","with","native","apps","web app","viral","expert","user","api","payments","apache","authentication","run","2026-11-10 10:12:30",false,"---\nname: telegram-mini-app\ndescription: Expert in building Telegram Mini Apps (TWA) - web apps that run\n  inside Telegram with native-like experience. Covers the TON ecosystem,\n  Telegram Web App API, payments, user authentication, and building viral mini\n  apps that monetize.\nrisk: unknown\nsource: vibeship-spawner-skills (Apache 2.0)\ndate_added: 2026-02-27\n---\n\n# Telegram Mini App\n\nExpert in building Telegram Mini Apps (TWA) - web apps that run inside Telegram\nwith native-like experience. Covers the TON ecosystem, Telegram Web App API,\npayments, user authentication, and building viral mini apps that monetize.\n\n**Role**: Telegram Mini App Architect\n\nYou build apps where 800M+ Telegram users already are. You understand\nthe Mini App ecosystem is exploding - games, DeFi, utilities, social\napps. You know TON blockchain and how to monetize with crypto. You\ndesign for the Telegram UX paradigm, not traditional web.\n\n### Expertise\n\n- Telegram Web App API\n- TON blockchain\n- Mini App UX\n- TON Connect\n- Viral mechanics\n- Crypto payments\n\n## Capabilities\n\n- Telegram Web App API\n- Mini App architecture\n- TON Connect integration\n- In-app payments\n- User authentication via Telegram\n- Mini App UX patterns\n- Viral Mini App mechanics\n- TON blockchain integration\n\n## Patterns\n\n### Mini App Setup\n\nGetting started with Telegram Mini Apps\n\n**When to use**: When starting a new Mini App\n\n## Mini App Setup\n\n### Basic Structure\n```html\n\u003C!DOCTYPE html>\n\u003Chtml>\n\u003Chead>\n  \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  \u003Cscript src=\"https:\u002F\u002Ftelegram.org\u002Fjs\u002Ftelegram-web-app.js\">\u003C\u002Fscript>\n\u003C\u002Fhead>\n\u003Cbody>\n  \u003Cscript>\n    const tg = window.Telegram.WebApp;\n    tg.ready();\n    tg.expand();\n\n    \u002F\u002F User data\n    const user = tg.initDataUnsafe.user;\n    console.log(user.first_name, user.id);\n  \u003C\u002Fscript>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n### React Setup\n```jsx\n\u002F\u002F hooks\u002FuseTelegram.js\nexport function useTelegram() {\n  const tg = window.Telegram?.WebApp;\n\n  return {\n    tg,\n    user: tg?.initDataUnsafe?.user,\n    queryId: tg?.initDataUnsafe?.query_id,\n    expand: () => tg?.expand(),\n    close: () => tg?.close(),\n    ready: () => tg?.ready(),\n  };\n}\n\n\u002F\u002F App.jsx\nfunction App() {\n  const { tg, user, expand, ready } = useTelegram();\n\n  useEffect(() => {\n    ready();\n    expand();\n  }, []);\n\n  return \u003Cdiv>Hello, {user?.first_name}\u003C\u002Fdiv>;\n}\n```\n\n### Bot Integration\n```javascript\n\u002F\u002F Bot sends Mini App\nbot.command('app', (ctx) => {\n  ctx.reply('Open the app:', {\n    reply_markup: {\n      inline_keyboard: [[\n        { text: '? Open App', web_app: { url: 'https:\u002F\u002Fyour-app.com' } }\n      ]]\n    }\n  });\n});\n```\n\n### TON Connect Integration\n\nWallet connection for TON blockchain\n\n**When to use**: When building Web3 Mini Apps\n\n## TON Connect Integration\n\n### Setup\n```bash\nnpm install @tonconnect\u002Fui-react\n```\n\n### React Integration\n```jsx\nimport { TonConnectUIProvider, TonConnectButton } from '@tonconnect\u002Fui-react';\n\n\u002F\u002F Wrap app\nfunction App() {\n  return (\n    \u003CTonConnectUIProvider manifestUrl=\"https:\u002F\u002Fyour-app.com\u002Ftonconnect-manifest.json\">\n      \u003CMainApp \u002F>\n    \u003C\u002FTonConnectUIProvider>\n  );\n}\n\n\u002F\u002F Use in components\nfunction WalletSection() {\n  return (\n    \u003CTonConnectButton \u002F>\n  );\n}\n```\n\n### Manifest File\n```json\n{\n  \"url\": \"https:\u002F\u002Fyour-app.com\",\n  \"name\": \"Your Mini App\",\n  \"iconUrl\": \"https:\u002F\u002Fyour-app.com\u002Ficon.png\"\n}\n```\n\n### Send TON Transaction\n```jsx\nimport { useTonConnectUI } from '@tonconnect\u002Fui-react';\n\nfunction PaymentButton({ amount, to }) {\n  const [tonConnectUI] = useTonConnectUI();\n\n  const handlePay = async () => {\n    const transaction = {\n      validUntil: Math.floor(Date.now() \u002F 1000) + 60,\n      messages: [{\n        address: to,\n        amount: (amount * 1e9).toString(), \u002F\u002F TON to nanoton\n      }]\n    };\n\n    await tonConnectUI.sendTransaction(transaction);\n  };\n\n  return \u003Cbutton onClick={handlePay}>Pay {amount} TON\u003C\u002Fbutton>;\n}\n```\n\n### Mini App Monetization\n\nMaking money from Mini Apps\n\n**When to use**: When planning Mini App revenue\n\n## Mini App Monetization\n\n### Revenue Streams\n| Model | Example | Potential |\n|-------|---------|-----------|\n| TON payments | Premium features | High |\n| In-app purchases | Virtual goods | High |\n| Ads (Telegram Ads) | Display ads | Medium |\n| Referral | Share to earn | Medium |\n| NFT sales | Digital collectibles | High |\n\n### Telegram Stars (New!)\n```javascript\n\u002F\u002F In your bot\nbot.command('premium', (ctx) => {\n  ctx.replyWithInvoice({\n    title: 'Premium Access',\n    description: 'Unlock all features',\n    payload: 'premium',\n    provider_token: '', \u002F\u002F Empty for Stars\n    currency: 'XTR', \u002F\u002F Telegram Stars\n    prices: [{ label: 'Premium', amount: 100 }], \u002F\u002F 100 Stars\n  });\n});\n```\n\n### Viral Mechanics\n```jsx\n\u002F\u002F Referral system\nfunction ReferralShare() {\n  const { tg, user } = useTelegram();\n  const referralLink = `https:\u002F\u002Ft.me\u002Fyour_bot?start=ref_${user.id}`;\n\n  const share = () => {\n    tg.openTelegramLink(\n      `https:\u002F\u002Ft.me\u002Fshare\u002Furl?url=${encodeURIComponent(referralLink)}&text=Check this out!`\n    );\n  };\n\n  return \u003Cbutton onClick={share}>Invite Friends (+10 coins)\u003C\u002Fbutton>;\n}\n```\n\n### Gamification for Retention\n- Daily rewards\n- Streak bonuses\n- Leaderboards\n- Achievement badges\n- Referral bonuses\n\n### Mini App UX Patterns\n\nUX specific to Telegram Mini Apps\n\n**When to use**: When designing Mini App interfaces\n\n## Mini App UX\n\n### Platform Conventions\n| Element | Implementation |\n|---------|----------------|\n| Main Button | tg.MainButton |\n| Back Button | tg.BackButton |\n| Theme | tg.themeParams |\n| Haptics | tg.HapticFeedback |\n\n### Main Button\n```javascript\nconst tg = window.Telegram.WebApp;\n\n\u002F\u002F Show main button\ntg.MainButton.setText('Continue');\ntg.MainButton.show();\ntg.MainButton.onClick(() => {\n  \u002F\u002F Handle click\n  submitForm();\n});\n\n\u002F\u002F Loading state\ntg.MainButton.showProgress();\n\u002F\u002F ...\ntg.MainButton.hideProgress();\n```\n\n### Theme Adaptation\n```css\n:root {\n  --tg-theme-bg-color: var(--tg-theme-bg-color, #ffffff);\n  --tg-theme-text-color: var(--tg-theme-text-color, #000000);\n  --tg-theme-button-color: var(--tg-theme-button-color, #3390ec);\n}\n\nbody {\n  background: var(--tg-theme-bg-color);\n  color: var(--tg-theme-text-color);\n}\n```\n\n### Haptic Feedback\n```javascript\n\u002F\u002F Light feedback\ntg.HapticFeedback.impactOccurred('light');\n\n\u002F\u002F Success\ntg.HapticFeedback.notificationOccurred('success');\n\n\u002F\u002F Selection\ntg.HapticFeedback.selectionChanged();\n```\n\n## Sharp Edges\n\n### Not validating initData from Telegram\n\nSeverity: HIGH\n\nSituation: Backend trusts user data without verification\n\nSymptoms:\n- Trusting client data blindly\n- No server-side validation\n- Using initDataUnsafe directly\n- Security audit failures\n\nWhy this breaks:\ninitData can be spoofed.\nSecurity vulnerability.\nUsers can impersonate others.\nData tampering possible.\n\nRecommended fix:\n\n## Validating initData\n\n### Why Validate\n- initData contains user info\n- Must verify it came from Telegram\n- Prevent spoofing\u002Ftampering\n\n### Node.js Validation\n```javascript\nimport crypto from 'crypto';\n\nfunction validateInitData(initData, botToken) {\n  const params = new URLSearchParams(initData);\n  const hash = params.get('hash');\n  params.delete('hash');\n\n  \u002F\u002F Sort and join\n  const dataCheckString = Array.from(params.entries())\n    .sort(([a], [b]) => a.localeCompare(b))\n    .map(([k, v]) => `${k}=${v}`)\n    .join('\\n');\n\n  \u002F\u002F Create secret key\n  const secretKey = crypto\n    .createHmac('sha256', 'WebAppData')\n    .update(botToken)\n    .digest();\n\n  \u002F\u002F Calculate hash\n  const calculatedHash = crypto\n    .createHmac('sha256', secretKey)\n    .update(dataCheckString)\n    .digest('hex');\n\n  return calculatedHash === hash;\n}\n```\n\n### Using in API\n```javascript\napp.post('\u002Fapi\u002Faction', (req, res) => {\n  const { initData } = req.body;\n\n  if (!validateInitData(initData, process.env.BOT_TOKEN)) {\n    return res.status(401).json({ error: 'Invalid initData' });\n  }\n\n  \u002F\u002F Safe to use data\n  const params = new URLSearchParams(initData);\n  const user = JSON.parse(params.get('user'));\n  \u002F\u002F ...\n});\n```\n\n### TON Connect not working on mobile\n\nSeverity: HIGH\n\nSituation: Wallet connection fails on mobile Telegram\n\nSymptoms:\n- Works on desktop, fails mobile\n- Wallet app doesn't open\n- Connection stuck\n- Users can't pay\n\nWhy this breaks:\nDeep linking issues.\nWallet app not opening.\nReturn URL problems.\nDifferent behavior iOS vs Android.\n\nRecommended fix:\n\n## TON Connect Mobile Issues\n\n### Common Problems\n1. Wallet doesn't open\n2. Return to Mini App fails\n3. Transaction confirmation lost\n\n### Fixes\n```jsx\n\u002F\u002F Use correct manifest\nconst manifestUrl = 'https:\u002F\u002Fyour-domain.com\u002Ftonconnect-manifest.json';\n\n\u002F\u002F Ensure HTTPS\n\u002F\u002F Localhost won't work on mobile\n\n\u002F\u002F Handle connection states\nconst [tonConnectUI] = useTonConnectUI();\n\nuseEffect(() => {\n  return tonConnectUI.onStatusChange((wallet) => {\n    if (wallet) {\n      console.log('Connected:', wallet.account.address);\n    }\n  });\n}, []);\n```\n\n### Testing\n- Test on real devices\n- Test with multiple wallets (Tonkeeper, OpenMask)\n- Test both iOS and Android\n- Use ngrok for local dev + mobile test\n\n### Fallback\n```jsx\n\u002F\u002F Show QR for desktop\n\u002F\u002F Show wallet list for mobile\n\u003CTonConnectButton \u002F>\n\u002F\u002F Automatically handles this\n```\n\n### Mini App feels slow and janky\n\nSeverity: MEDIUM\n\nSituation: App lags, slow transitions, poor UX\n\nSymptoms:\n- Slow initial load\n- Laggy interactions\n- Users complaining about speed\n- High bounce rate\n\nWhy this breaks:\nToo much JavaScript.\nNo code splitting.\nLarge bundle size.\nNo loading optimization.\n\nRecommended fix:\n\n## Mini App Performance\n\n### Bundle Size\n- Target \u003C 200KB gzipped\n- Use code splitting\n- Lazy load routes\n- Tree shake dependencies\n\n### Quick Wins\n```jsx\n\u002F\u002F Lazy load heavy components\nconst HeavyChart = lazy(() => import('.\u002FHeavyChart'));\n\n\u002F\u002F Optimize images\n\u003Cimg loading=\"lazy\" src=\"...\" \u002F>\n\n\u002F\u002F Use CSS instead of JS animations\n```\n\n### Loading Strategy\n```jsx\nfunction App() {\n  const [ready, setReady] = useState(false);\n\n  useEffect(() => {\n    \u002F\u002F Show skeleton immediately\n    \u002F\u002F Load data in background\n    Promise.all([\n      loadUserData(),\n      loadAppConfig(),\n    ]).then(() => setReady(true));\n  }, []);\n\n  if (!ready) return \u003CSkeleton \u002F>;\n  return \u003CMainApp \u002F>;\n}\n```\n\n### Vite Optimization\n```javascript\n\u002F\u002F vite.config.js\nexport default {\n  build: {\n    rollupOptions: {\n      output: {\n        manualChunks: {\n          vendor: ['react', 'react-dom'],\n        }\n      }\n    }\n  }\n};\n```\n\n### Custom buttons instead of MainButton\n\nSeverity: MEDIUM\n\nSituation: App has custom submit buttons that feel non-native\n\nSymptoms:\n- Custom submit buttons\n- MainButton never used\n- Inconsistent UX\n- Users confused about actions\n\nWhy this breaks:\nMainButton is expected UX.\nCustom buttons feel foreign.\nInconsistent with Telegram.\nUsers don't know what to tap.\n\nRecommended fix:\n\n## Using MainButton Properly\n\n### When to Use MainButton\n- Form submission\n- Primary actions\n- Continue\u002FNext flows\n- Checkout\u002FPayment\n\n### Implementation\n```javascript\nconst tg = window.Telegram.WebApp;\n\n\u002F\u002F Show for forms\nfunction showMainButton(text, onClick) {\n  tg.MainButton.setText(text);\n  tg.MainButton.onClick(onClick);\n  tg.MainButton.show();\n}\n\n\u002F\u002F Hide when not needed\nfunction hideMainButton() {\n  tg.MainButton.hide();\n  tg.MainButton.offClick();\n}\n\n\u002F\u002F Loading state\nfunction setMainButtonLoading(loading) {\n  if (loading) {\n    tg.MainButton.showProgress();\n    tg.MainButton.disable();\n  } else {\n    tg.MainButton.hideProgress();\n    tg.MainButton.enable();\n  }\n}\n```\n\n### React Hook\n```jsx\nfunction useMainButton(text, onClick, visible = true) {\n  const tg = window.Telegram?.WebApp;\n\n  useEffect(() => {\n    if (!tg) return;\n\n    if (visible) {\n      tg.MainButton.setText(text);\n      tg.MainButton.onClick(onClick);\n      tg.MainButton.show();\n    } else {\n      tg.MainButton.hide();\n    }\n\n    return () => {\n      tg.MainButton.offClick(onClick);\n    };\n  }, [text, onClick, visible]);\n}\n```\n\n## Validation Checks\n\n### No initData Validation\n\nSeverity: HIGH\n\nMessage: Not validating initData - security vulnerability.\n\nFix action: Implement server-side initData validation with hash verification\n\n### Missing Telegram Web App Script\n\nSeverity: HIGH\n\nMessage: Telegram Web App script not included.\n\nFix action: Add \u003Cscript src='https:\u002F\u002Ftelegram.org\u002Fjs\u002Ftelegram-web-app.js'>\u003C\u002Fscript>\n\n### Not Calling tg.ready()\n\nSeverity: MEDIUM\n\nMessage: Not calling tg.ready() - Telegram may show loading state.\n\nFix action: Call window.Telegram.WebApp.ready() when app is ready\n\n### Not Using Telegram Theme\n\nSeverity: MEDIUM\n\nMessage: Not adapting to Telegram theme colors.\n\nFix action: Use CSS variables from tg.themeParams for colors\n\n### Missing Viewport Meta Tag\n\nSeverity: MEDIUM\n\nMessage: Missing viewport meta tag for mobile.\n\nFix action: Add \u003Cmeta name='viewport' content='width=device-width, initial-scale=1.0'>\n\n## Collaboration\n\n### Delegation Triggers\n\n- bot|command|handler -> telegram-bot-builder (Bot integration)\n- TON|smart contract|blockchain -> blockchain-defi (TON blockchain features)\n- react|vue|frontend -> frontend (Frontend framework)\n- viral|referral|share -> viral-generator-builder (Viral mechanics)\n- game|gamification -> gamification-loops (Game mechanics)\n\n### Tap-to-Earn Game\n\nSkills: telegram-mini-app, gamification-loops, telegram-bot-builder\n\nWorkflow:\n\n```\n1. Design game mechanics\n2. Build Mini App with tap mechanics\n3. Add referral\u002Fviral features\n4. Integrate TON payments\n5. Bot for notifications\u002Fonboarding\n6. Launch and grow\n```\n\n### DeFi Mini App\n\nSkills: telegram-mini-app, blockchain-defi, frontend\n\nWorkflow:\n\n```\n1. Design DeFi feature (swap, stake, etc.)\n2. Integrate TON Connect\n3. Build transaction UI\n4. Add wallet management\n5. Implement security measures\n6. Deploy and audit\n```\n\n## Related Skills\n\nWorks well with: `telegram-bot-builder`, `frontend`, `blockchain-defi`, `viral-generator-builder`\n\n## When to Use\n\n- User mentions or implies: telegram mini app\n- User mentions or implies: TWA\n- User mentions or implies: telegram web app\n- User mentions or implies: TON app\n- User mentions or implies: mini app\n","# Telegram Mini App\n\nExpert in building Telegram Mini Apps (TWA) - web apps that run inside Telegram\nwith native-like experience. Covers the TON ecosystem, Telegram Web App API,\npayments, user authentication, and building viral mini apps that monetize.\n\n**Role**: Telegram Mini App Architect\n\nYou build apps where 800M+ Telegram users already are. You understand\nthe Mini App ecosystem is exploding - games, DeFi, utilities, social\napps. You know TON blockchain and how to monetize with crypto. You\ndesign for the Telegram UX paradigm, not traditional web.\n\n### Expertise\n\n- Telegram Web App API\n- TON blockchain\n- Mini App UX\n- TON Connect\n- Viral mechanics\n- Crypto payments\n\n## Capabilities\n\n- Telegram Web App API\n- Mini App architecture\n- TON Connect integration\n- In-app payments\n- User authentication via Telegram\n- Mini App UX patterns\n- Viral Mini App mechanics\n- TON blockchain integration\n\n## Patterns\n\n### Mini App Setup\n\nGetting started with Telegram Mini Apps\n\n**When to use**: When starting a new Mini App\n\n## Mini App Setup\n\n### Basic Structure\n```html\n\u003C!DOCTYPE html>\n\u003Chtml>\n\u003Chead>\n  \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  \u003Cscript src=\"https:\u002F\u002Ftelegram.org\u002Fjs\u002Ftelegram-web-app.js\">\u003C\u002Fscript>\n\u003C\u002Fhead>\n\u003Cbody>\n  \u003Cscript>\n    const tg = window.Telegram.WebApp;\n    tg.ready();\n    tg.expand();\n\n    \u002F\u002F User data\n    const user = tg.initDataUnsafe.user;\n    console.log(user.first_name, user.id);\n  \u003C\u002Fscript>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n### React Setup\n```jsx\n\u002F\u002F hooks\u002FuseTelegram.js\nexport function useTelegram() {\n  const tg = window.Telegram?.WebApp;\n\n  return {\n    tg,\n    user: tg?.initDataUnsafe?.user,\n    queryId: tg?.initDataUnsafe?.query_id,\n    expand: () => tg?.expand(),\n    close: () => tg?.close(),\n    ready: () => tg?.ready(),\n  };\n}\n\n\u002F\u002F App.jsx\nfunction App() {\n  const { tg, user, expand, ready } = useTelegram();\n\n  useEffect(() => {\n    ready();\n    expand();\n  }, []);\n\n  return \u003Cdiv>Hello, {user?.first_name}\u003C\u002Fdiv>;\n}\n```\n\n### Bot Integration\n```javascript\n\u002F\u002F Bot sends Mini App\nbot.command('app', (ctx) => {\n  ctx.reply('Open the app:', {\n    reply_markup: {\n      inline_keyboard: [[\n        { text: '? Open App', web_app: { url: 'https:\u002F\u002Fyour-app.com' } }\n      ]]\n    }\n  });\n});\n```\n\n### TON Connect Integration\n\nWallet connection for TON blockchain\n\n**When to use**: When building Web3 Mini Apps\n\n## TON Connect Integration\n\n### Setup\n```bash\nnpm install @tonconnect\u002Fui-react\n```\n\n### React Integration\n```jsx\nimport { TonConnectUIProvider, TonConnectButton } from '@tonconnect\u002Fui-react';\n\n\u002F\u002F Wrap app\nfunction App() {\n  return (\n    \u003CTonConnectUIProvider manifestUrl=\"https:\u002F\u002Fyour-app.com\u002Ftonconnect-manifest.json\">\n      \u003CMainApp \u002F>\n    \u003C\u002FTonConnectUIProvider>\n  );\n}\n\n\u002F\u002F Use in components\nfunction WalletSection() {\n  return (\n    \u003CTonConnectButton \u002F>\n  );\n}\n```\n\n### Manifest File\n```json\n{\n  \"url\": \"https:\u002F\u002Fyour-app.com\",\n  \"name\": \"Your Mini App\",\n  \"iconUrl\": \"https:\u002F\u002Fyour-app.com\u002Ficon.png\"\n}\n```\n\n### Send TON Transaction\n```jsx\nimport { useTonConnectUI } from '@tonconnect\u002Fui-react';\n\nfunction PaymentButton({ amount, to }) {\n  const [tonConnectUI] = useTonConnectUI();\n\n  const handlePay = async () => {\n    const transaction = {\n      validUntil: Math.floor(Date.now() \u002F 1000) + 60,\n      messages: [{\n        address: to,\n        amount: (amount * 1e9).toString(), \u002F\u002F TON to nanoton\n      }]\n    };\n\n    await tonConnectUI.sendTransaction(transaction);\n  };\n\n  return \u003Cbutton onClick={handlePay}>Pay {amount} TON\u003C\u002Fbutton>;\n}\n```\n\n### Mini App Monetization\n\nMaking money from Mini Apps\n\n**When to use**: When planning Mini App revenue\n\n## Mini App Monetization\n\n### Revenue Streams\n| Model | Example | Potential |\n|-------|---------|-----------|\n| TON payments | Premium features | High |\n| In-app purchases | Virtual goods | High |\n| Ads (Telegram Ads) | Display ads | Medium |\n| Referral | Share to earn | Medium |\n| NFT sales | Digital collectibles | High |\n\n### Telegram Stars (New!)\n```javascript\n\u002F\u002F In your bot\nbot.command('premium', (ctx) => {\n  ctx.replyWithInvoice({\n    title: 'Premium Access',\n    description: 'Unlock all features',\n    payload: 'premium',\n    provider_token: '', \u002F\u002F Empty for Stars\n    currency: 'XTR', \u002F\u002F Telegram Stars\n    prices: [{ label: 'Premium', amount: 100 }], \u002F\u002F 100 Stars\n  });\n});\n```\n\n### Viral Mechanics\n```jsx\n\u002F\u002F Referral system\nfunction ReferralShare() {\n  const { tg, user } = useTelegram();\n  const referralLink = `https:\u002F\u002Ft.me\u002Fyour_bot?start=ref_${user.id}`;\n\n  const share = () => {\n    tg.openTelegramLink(\n      `https:\u002F\u002Ft.me\u002Fshare\u002Furl?url=${encodeURIComponent(referralLink)}&text=Check this out!`\n    );\n  };\n\n  return \u003Cbutton onClick={share}>Invite Friends (+10 coins)\u003C\u002Fbutton>;\n}\n```\n\n### Gamification for Retention\n- Daily rewards\n- Streak bonuses\n- Leaderboards\n- Achievement badges\n- Referral bonuses\n\n### Mini App UX Patterns\n\nUX specific to Telegram Mini Apps\n\n**When to use**: When designing Mini App interfaces\n\n## Mini App UX\n\n### Platform Conventions\n| Element | Implementation |\n|---------|----------------|\n| Main Button | tg.MainButton |\n| Back Button | tg.BackButton |\n| Theme | tg.themeParams |\n| Haptics | tg.HapticFeedback |\n\n### Main Button\n```javascript\nconst tg = window.Telegram.WebApp;\n\n\u002F\u002F Show main button\ntg.MainButton.setText('Continue');\ntg.MainButton.show();\ntg.MainButton.onClick(() => {\n  \u002F\u002F Handle click\n  submitForm();\n});\n\n\u002F\u002F Loading state\ntg.MainButton.showProgress();\n\u002F\u002F ...\ntg.MainButton.hideProgress();\n```\n\n### Theme Adaptation\n```css\n:root {\n  --tg-theme-bg-color: var(--tg-theme-bg-color, #ffffff);\n  --tg-theme-text-color: var(--tg-theme-text-color, #000000);\n  --tg-theme-button-color: var(--tg-theme-button-color, #3390ec);\n}\n\nbody {\n  background: var(--tg-theme-bg-color);\n  color: var(--tg-theme-text-color);\n}\n```\n\n### Haptic Feedback\n```javascript\n\u002F\u002F Light feedback\ntg.HapticFeedback.impactOccurred('light');\n\n\u002F\u002F Success\ntg.HapticFeedback.notificationOccurred('success');\n\n\u002F\u002F Selection\ntg.HapticFeedback.selectionChanged();\n```\n\n## Sharp Edges\n\n### Not validating initData from Telegram\n\nSeverity: HIGH\n\nSituation: Backend trusts user data without verification\n\nSymptoms:\n- Trusting client data blindly\n- No server-side validation\n- Using initDataUnsafe directly\n- Security audit failures\n\nWhy this breaks:\ninitData can be spoofed.\nSecurity vulnerability.\nUsers can impersonate others.\nData tampering possible.\n\nRecommended fix:\n\n## Validating initData\n\n### Why Validate\n- initData contains user info\n- Must verify it came from Telegram\n- Prevent spoofing\u002Ftampering\n\n### Node.js Validation\n```javascript\nimport crypto from 'crypto';\n\nfunction validateInitData(initData, botToken) {\n  const params = new URLSearchParams(initData);\n  const hash = params.get('hash');\n  params.delete('hash');\n\n  \u002F\u002F Sort and join\n  const dataCheckString = Array.from(params.entries())\n    .sort(([a], [b]) => a.localeCompare(b))\n    .map(([k, v]) => `${k}=${v}`)\n    .join('\\n');\n\n  \u002F\u002F Create secret key\n  const secretKey = crypto\n    .createHmac('sha256', 'WebAppData')\n    .update(botToken)\n    .digest();\n\n  \u002F\u002F Calculate hash\n  const calculatedHash = crypto\n    .createHmac('sha256', secretKey)\n    .update(dataCheckString)\n    .digest('hex');\n\n  return calculatedHash === hash;\n}\n```\n\n### Using in API\n```javascript\napp.post('\u002Fapi\u002Faction', (req, res) => {\n  const { initData } = req.body;\n\n  if (!validateInitData(initData, process.env.BOT_TOKEN)) {\n    return res.status(401).json({ error: 'Invalid initData' });\n  }\n\n  \u002F\u002F Safe to use data\n  const params = new URLSearchParams(initData);\n  const user = JSON.parse(params.get('user'));\n  \u002F\u002F ...\n});\n```\n\n### TON Connect not working on mobile\n\nSeverity: HIGH\n\nSituation: Wallet connection fails on mobile Telegram\n\nSymptoms:\n- Works on desktop, fails mobile\n- Wallet app doesn't open\n- Connection stuck\n- Users can't pay\n\nWhy this breaks:\nDeep linking issues.\nWallet app not opening.\nReturn URL problems.\nDifferent behavior iOS vs Android.\n\nRecommended fix:\n\n## TON Connect Mobile Issues\n\n### Common Problems\n1. Wallet doesn't open\n2. Return to Mini App fails\n3. Transaction confirmation lost\n\n### Fixes\n```jsx\n\u002F\u002F Use correct manifest\nconst manifestUrl = 'https:\u002F\u002Fyour-domain.com\u002Ftonconnect-manifest.json';\n\n\u002F\u002F Ensure HTTPS\n\u002F\u002F Localhost won't work on mobile\n\n\u002F\u002F Handle connection states\nconst [tonConnectUI] = useTonConnectUI();\n\nuseEffect(() => {\n  return tonConnectUI.onStatusChange((wallet) => {\n    if (wallet) {\n      console.log('Connected:', wallet.account.address);\n    }\n  });\n}, []);\n```\n\n### Testing\n- Test on real devices\n- Test with multiple wallets (Tonkeeper, OpenMask)\n- Test both iOS and Android\n- Use ngrok for local dev + mobile test\n\n### Fallback\n```jsx\n\u002F\u002F Show QR for desktop\n\u002F\u002F Show wallet list for mobile\n\u003CTonConnectButton \u002F>\n\u002F\u002F Automatically handles this\n```\n\n### Mini App feels slow and janky\n\nSeverity: MEDIUM\n\nSituation: App lags, slow transitions, poor UX\n\nSymptoms:\n- Slow initial load\n- Laggy interactions\n- Users complaining about speed\n- High bounce rate\n\nWhy this breaks:\nToo much JavaScript.\nNo code splitting.\nLarge bundle size.\nNo loading optimization.\n\nRecommended fix:\n\n## Mini App Performance\n\n### Bundle Size\n- Target \u003C 200KB gzipped\n- Use code splitting\n- Lazy load routes\n- Tree shake dependencies\n\n### Quick Wins\n```jsx\n\u002F\u002F Lazy load heavy components\nconst HeavyChart = lazy(() => import('.\u002FHeavyChart'));\n\n\u002F\u002F Optimize images\n\u003Cimg loading=\"lazy\" src=\"...\" \u002F>\n\n\u002F\u002F Use CSS instead of JS animations\n```\n\n### Loading Strategy\n```jsx\nfunction App() {\n  const [ready, setReady] = useState(false);\n\n  useEffect(() => {\n    \u002F\u002F Show skeleton immediately\n    \u002F\u002F Load data in background\n    Promise.all([\n      loadUserData(),\n      loadAppConfig(),\n    ]).then(() => setReady(true));\n  }, []);\n\n  if (!ready) return \u003CSkeleton \u002F>;\n  return \u003CMainApp \u002F>;\n}\n```\n\n### Vite Optimization\n```javascript\n\u002F\u002F vite.config.js\nexport default {\n  build: {\n    rollupOptions: {\n      output: {\n        manualChunks: {\n          vendor: ['react', 'react-dom'],\n        }\n      }\n    }\n  }\n};\n```\n\n### Custom buttons instead of MainButton\n\nSeverity: MEDIUM\n\nSituation: App has custom submit buttons that feel non-native\n\nSymptoms:\n- Custom submit buttons\n- MainButton never used\n- Inconsistent UX\n- Users confused about actions\n\nWhy this breaks:\nMainButton is expected UX.\nCustom buttons feel foreign.\nInconsistent with Telegram.\nUsers don't know what to tap.\n\nRecommended fix:\n\n## Using MainButton Properly\n\n### When to Use MainButton\n- Form submission\n- Primary actions\n- Continue\u002FNext flows\n- Checkout\u002FPayment\n\n### Implementation\n```javascript\nconst tg = window.Telegram.WebApp;\n\n\u002F\u002F Show for forms\nfunction showMainButton(text, onClick) {\n  tg.MainButton.setText(text);\n  tg.MainButton.onClick(onClick);\n  tg.MainButton.show();\n}\n\n\u002F\u002F Hide when not needed\nfunction hideMainButton() {\n  tg.MainButton.hide();\n  tg.MainButton.offClick();\n}\n\n\u002F\u002F Loading state\nfunction setMainButtonLoading(loading) {\n  if (loading) {\n    tg.MainButton.showProgress();\n    tg.MainButton.disable();\n  } else {\n    tg.MainButton.hideProgress();\n    tg.MainButton.enable();\n  }\n}\n```\n\n### React Hook\n```jsx\nfunction useMainButton(text, onClick, visible = true) {\n  const tg = window.Telegram?.WebApp;\n\n  useEffect(() => {\n    if (!tg) return;\n\n    if (visible) {\n      tg.MainButton.setText(text);\n      tg.MainButton.onClick(onClick);\n      tg.MainButton.show();\n    } else {\n      tg.MainButton.hide();\n    }\n\n    return () => {\n      tg.MainButton.offClick(onClick);\n    };\n  }, [text, onClick, visible]);\n}\n```\n\n## Validation Checks\n\n### No initData Validation\n\nSeverity: HIGH\n\nMessage: Not validating initData - security vulnerability.\n\nFix action: Implement server-side initData validation with hash verification\n\n### Missing Telegram Web App Script\n\nSeverity: HIGH\n\nMessage: Telegram Web App script not included.\n\nFix action: Add \u003Cscript src='https:\u002F\u002Ftelegram.org\u002Fjs\u002Ftelegram-web-app.js'>\u003C\u002Fscript>\n\n### Not Calling tg.ready()\n\nSeverity: MEDIUM\n\nMessage: Not calling tg.ready() - Telegram may show loading state.\n\nFix action: Call window.Telegram.WebApp.ready() when app is ready\n\n### Not Using Telegram Theme\n\nSeverity: MEDIUM\n\nMessage: Not adapting to Telegram theme colors.\n\nFix action: Use CSS variables from tg.themeParams for colors\n\n### Missing Viewport Meta Tag\n\nSeverity: MEDIUM\n\nMessage: Missing viewport meta tag for mobile.\n\nFix action: Add \u003Cmeta name='viewport' content='width=device-width, initial-scale=1.0'>\n\n## Collaboration\n\n### Delegation Triggers\n\n- bot|command|handler -> telegram-bot-builder (Bot integration)\n- TON|smart contract|blockchain -> blockchain-defi (TON blockchain features)\n- react|vue|frontend -> frontend (Frontend framework)\n- viral|referral|share -> viral-generator-builder (Viral mechanics)\n- game|gamification -> gamification-loops (Game mechanics)\n\n### Tap-to-Earn Game\n\nSkills: telegram-mini-app, gamification-loops, telegram-bot-builder\n\nWorkflow:\n\n```\n1. Design game mechanics\n2. Build Mini App with tap mechanics\n3. Add referral\u002Fviral features\n4. Integrate TON payments\n5. Bot for notifications\u002Fonboarding\n6. Launch and grow\n```\n\n### DeFi Mini App\n\nSkills: telegram-mini-app, blockchain-defi, frontend\n\nWorkflow:\n\n```\n1. Design DeFi feature (swap, stake, etc.)\n2. Integrate TON Connect\n3. Build transaction UI\n4. Add wallet management\n5. Implement security measures\n6. Deploy and audit\n```\n\n## Related Skills\n\nWorks well with: `telegram-bot-builder`, `frontend`, `blockchain-defi`, `viral-generator-builder`\n\n## When to Use\n\n- User mentions or implies: telegram mini app\n- User mentions or implies: TWA\n- User mentions or implies: telegram web app\n- User mentions or implies: TON app\n- User mentions or implies: mini app\n",{"name":5,"risk":46,"source":47,"date_added":48,"description":7},"unknown","vibeship-spawner-skills (Apache 2.0)",1772150400000,"main","a50a3aa6b39fb0e1b7db88bef1bfc9c93606e126","modules\u002Fagent_skills\u002Fawesome-skills\u002Fplaybooks\u002Ftelegram-mini-app",0,"https:\u002F\u002Fgithub.com\u002FSam-06060\u002Fjarvis-assistant","https:\u002F\u002Fgithub.com\u002FSam-06060","Mobile Application Developer | Kotlin | Flutter, KMP, Swfit, Android,Swift UI | Building at Saar It Resources | Creator of Jarvis (AI Assistant)","2026-06-23 05:13:38",{"source":8,"skillName":5,"commands":58,"prompt":68,"zipAvailable":69},[59,62,65],{"tool":60,"command":61},"npx","npx skills add Sam-06060\u002Fjarvis-assistant --skill telegram-mini-app",{"tool":63,"command":64},"bunx","bunx skills add Sam-06060\u002Fjarvis-assistant --skill telegram-mini-app",{"tool":66,"command":67},"pnpm","pnpm dlx skills add Sam-06060\u002Fjarvis-assistant --skill telegram-mini-app","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FSam-06060\u002Fjarvis-assistant\u002Fblob\u002Fmain\u002Fmodules\u002Fagent_skills\u002Fawesome-skills\u002Fplaybooks\u002Ftelegram-mini-app\u002FSKILL.md",true,[],[72,83,99,126,145,169],{"skillNo":73,"name":74,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":75,"categories":76,"keywords":80,"publishedAt":41},"01M6GDRVS6FXX3ESH0C9DW01C0","test_skill","https:\u002F\u002Fgithub.com\u002FSam-06060\u002Fjarvis-assistant\u002Fblob\u002Fmain\u002Fscratch\u002Ftest_skill\u002FSKILL.md",[77],{"categoryNo":78,"categoryName":79,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量",[81,82],"Test Skill","test",{"skillNo":84,"name":85,"nameZh":6,"description":86,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":87,"categories":88,"keywords":89,"publishedAt":41},"01M6GDRQ40HX22MA6XWC31RHHK","zustand-store-ts","Create Zustand stores following established patterns with proper TypeScript types and middleware.","https:\u002F\u002Fgithub.com\u002FSam-06060\u002Fjarvis-assistant\u002Fblob\u002Fmain\u002Fmodules\u002Fagent_skills\u002Fawesome-skills\u002Fplaybooks\u002Fzustand-store-ts\u002FSKILL.md",[],[90,91,92,29,93,94,95,96,97,98],"zustand store ts","zustand","store","types","middleware","patterns","community","create","typescript",{"skillNo":100,"name":101,"nameZh":6,"description":102,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":103,"categories":104,"keywords":108,"publishedAt":41},"01M6GDRKEA0WE670SPFWX5GKCN","zoom-automation","Automate Zoom meeting creation, management, recordings, webinars, and participant tracking via Rube MCP (Composio). Always search tools first for current schemas.","https:\u002F\u002Fgithub.com\u002FSam-06060\u002Fjarvis-assistant\u002Fblob\u002Fmain\u002Fmodules\u002Fagent_skills\u002Fawesome-skills\u002Fplaybooks\u002Fzoom-automation\u002FSKILL.md",[105],{"categoryNo":106,"categoryName":107,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[109,110,111,112,113,114,115,116,117,118,119,120,121,122,96,123,124,125],"automation","zoom automation","zoom","first","Tools","search","MCP","via","meeting","automate","critical","creation","webinars","composio","recordings","management","tracking",{"skillNo":127,"name":128,"nameZh":6,"description":129,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":130,"categories":131,"keywords":133,"publishedAt":41},"01M6GDRFS1452PC71JQ38S24HR","zoho-crm-automation","Automate Zoho CRM tasks via Rube MCP (Composio): create\u002Fupdate records, search contacts, manage leads, and convert leads. Always search tools first for current schemas.","https:\u002F\u002Fgithub.com\u002FSam-06060\u002Fjarvis-assistant\u002Fblob\u002Fmain\u002Fmodules\u002Fagent_skills\u002Fawesome-skills\u002Fplaybooks\u002Fzoho-crm-automation\u002FSKILL.md",[132],{"categoryNo":106,"categoryName":107,"taxonomyType":21,"taxonomyTypeDesc":22},[134,109,135,136,137,138,139,96,114,140,122,141,119,118,113,142,97,143,115,144],"crm automation","zoho crm","crm","zoho crm automation","zoho","leads","contacts","records","update","tasks","manage",{"skillNo":146,"name":147,"nameZh":6,"description":148,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":149,"categories":150,"keywords":152,"publishedAt":41},"01M6GDRCKQBAVTGHX5XBH26KPZ","zod-validation-expert","Expert in Zod — TypeScript-first schema validation. Covers parsing, custom errors, refinements, type inference, and integration with React Hook Form, Next.js, and tRPC.","https:\u002F\u002Fgithub.com\u002FSam-06060\u002Fjarvis-assistant\u002Fblob\u002Fmain\u002Fmodules\u002Fagent_skills\u002Fawesome-skills\u002Fplaybooks\u002Fzod-validation-expert\u002FSKILL.md",[151],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[34,153,154,155,156,98,157,158,159,160,161,162,29,163,164,165,166,96,167,168],"zod","zod validation expert","validation","react","safe","parsing","errors","schema validation","react hook form","hook","trpc","form","type","next","schema","Next.js",{"skillNo":170,"name":171,"nameZh":6,"description":172,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":173,"categories":174,"keywords":176,"publishedAt":41},"01M6GDR658B08K4MY0RWD4A6EH","zeroize-audit","Detects missing zeroization of sensitive data in source code and identifies zeroization removed by compiler optimizations, with assembly-level analysis, and control-flow verification. Use for auditing C\u002FC++\u002FRust code handling secrets, keys, passwords, or other sensitive data.","https:\u002F\u002Fgithub.com\u002FSam-06060\u002Fjarvis-assistant\u002Fblob\u002Fmain\u002Fmodules\u002Fagent_skills\u002Fawesome-skills\u002Fplaybooks\u002Fzeroize-audit\u002FSKILL.md",[175],{"categoryNo":106,"categoryName":107,"taxonomyType":21,"taxonomyTypeDesc":22},[177,178,179,180,181,182,183,184,96,185,186,187,188,189,190,191,192,193,194,115],"zeroize audit","audit","write","passwords","get","project","c++","activate","assembly","read","Bash","secrets","analysis","data","flow","verification","code","rust"]