MR
Mayur Rathi
@mayurrathi
⭐ 40.7k GitHub stars

Telegram Mini App

Telegram Mini App is an code AI skill with a core value of Expert in building Telegram Mini Apps (TWA) - web apps that run inside Telegram with native-like experience. It helps developers solve real-world problems in the code domain, boosting efficiency, automating repetitive tasks, and optimizing workflows.

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 build...

Last verified on: 2026-07-07

Quick Facts

Category code
Works With Claude
Source sickn33/antigravity-awesome-skills
Stars ⭐ 40.7k
Last Verified 2026-07-07
Risk Level High
mkdir -p ./skills/telegram-mini-app && curl -sfL https://raw.githubusercontent.com/sickn33/antigravity-awesome-skills/main/skills/telegram-mini-app/SKILL.md -o ./skills/telegram-mini-app/SKILL.md

Run in terminal / PowerShell. Requires curl (Unix) or PowerShell 5+ (Windows).

Skill Content

# 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


javascript 
## 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();

tg.expand();


// User data

const user = tg.initDataUnsafe.user;

console.log(user.first_name, user.id);

</script>

</body>

</html>

text 

### React Setup

// hooks/useTelegram.js

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(),

};

}


// App.jsx

function App() {

const { tg, user, expand, ready } = useTelegram();


useEffect(() => {

ready();

expand();

}, []);


return <div>Hello, {user?.first_name}</div>;

}

text 

### Bot Integration

// Bot sends Mini App

bot.command('app', (ctx) => {

ctx.reply('Open the app:', {

reply_markup: {

inline_keyboard: [[

{ text: '🚀 Open App', web_app: { url: 'https://your-app.com' } }

]]

}

});

});

text

TON Connect Integration


Wallet connection for TON blockchain


**When to use**: When building Web3 Mini Apps


python 
## TON Connect Integration

### Setup

npm install @tonconnect/ui-react

text 

### React Integration

import { TonConnectUIProvider, TonConnectButton } from '@tonconnect/ui-react';


// Wrap app

function App() {

return (

<TonConnectUIProvider manifestUrl="https://your-app.com/tonconnect-manifest.json">

<MainApp />

</TonConnectUIProvider>

);

}


// Use in components

function WalletSection() {

return (

<TonConnectButton />

);

}

text 

### Manifest File

{

"url": "https://your-app.com",

"name": "Your Mini App",

"iconUrl": "https://your-app.com/icon.png"

}

text 

### 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(), // TON to nanoton

}]

};


await tonConnectUI.sendTransaction(transaction);

};


return <button onClick={handlePay}>Pay {amount} TON</button>;

}

text

Mini App Monetization


Making money from Mini Apps


**When to use**: When planning Mini App revenue


javascript 
## 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!)

// In your bot

bot.command('premium', (ctx) => {

ctx.replyWithInvoice({

title: 'Premium Access',

description: 'Unlock all features',

payload: 'premium',

provider_token: '', // Empty for Stars

currency: 'XTR', // Telegram Stars

prices: [{ label: 'Premium', amount: 100 }], // 100 Stars

});

});

text

🎯 Best For

  • UI designers
  • Product designers
  • Claude users
  • Software engineers
  • Development teams

💡 Use Cases

  • Generating component mockups
  • Creating design system tokens
  • Code quality improvement
  • Best practice enforcement

📖 How to Use This Skill

  1. 1

    Install the Skill

    Copy the install command from the Terminal tab and run it. The SKILL.md file downloads to your local skills directory.

  2. 2

    Load into Your AI Assistant

    Open Claude and reference the skill. Paste the SKILL.md content or use the system prompt tab.

  3. 3

    Apply Telegram Mini App to Your Work

    Open your project in the AI assistant and ask it to apply the skill. Start with a small module to verify the output quality.

  4. 4

    Review and Refine

    Review AI suggestions before committing. Run tests, check for regressions, and iterate on the skill output.

❓ Frequently Asked Questions

Does this work with Figma?

Some design skills integrate with Figma plugins. Check the Works With section for supported tools.

Is Telegram Mini App compatible with Cursor and VS Code?

Yes — this skill works with any AI coding assistant including Cursor, VS Code with Copilot, and JetBrains IDEs.

Do I need specific dependencies for Telegram Mini App?

Check the install command and Works With section. Most code skills only require the AI assistant and your codebase.

How do I install Telegram Mini App?

Copy the install command from the Terminal tab and run it. The skill downloads to ./skills/telegram-mini-app/SKILL.md, ready to use.

Can I customize this skill for my team?

Absolutely. Edit the SKILL.md file to add team-specific instructions, examples, or workflows.

⚠️ Common Mistakes to Avoid

Skipping usability testing

AI-generated designs should be validated with real users before development.

Skipping validation

Always test AI-generated code changes, even for simple refactors.

Missing dependency updates

Check if the skill requires updated dependencies or new packages.

🔗 Related Skills

00-andruia-consultant 00-andruia-consultant007 00710-andruia-skill-smith 10-andruia-skill-smith20-andruia-niche-intelligence 20-andruia-niche-intelligence2slides-ppt-generator 2slides-ppt-generatoraccesslint-audit accesslint-audit