How does it handle Telegram-specific features?

It includes specialized hooks for the Telegram SDK, covering authentication, Main Button control, and native popup interactions.

What is the primary purpose of this skill?

It provides a standardized architecture and set of best practices for building Telegram Mini Apps using the React 18 and Vite ecosystem.

Can I use this for standard web applications?

While specifically optimized for the Telegram Mini App environment, the directory structure and React patterns are applicable to any modern Vite project.

Does it support TypeScript?

Yes, it is built with TypeScript at its core, offering type-safe request/response patterns, component props, and global state definitions.

Which state management library is recommended?

The skill utilizes Zustand for global state management because it is lightweight, performant, and easy to integrate with React.

React Vite Mini App Architecture

Name: React Vite Mini App Architecture
Author: AndVl1

byAndVl1

•

Mobile Development

Architects production-ready Telegram Mini Apps using React 18, Vite, and standardized frontend patterns.

This skill provides a comprehensive framework for developing high-performance Telegram Mini Apps (TMAs) using React 18 and Vite. It enforces a scalable directory structure and provides type-safe component patterns, including Compound and Memoized components. It features specialized hooks for Telegram SDK integration, data fetching, and UI state management. By leveraging Zustand for global state and standardized service layers, it helps developers build maintainable, mobile-optimized frontends with robust TypeScript support and optimistic UI updates.

주요 기능

01Custom Telegram-specific hooks for authentication and UI interaction

02Optimistic UI updates and data fetching patterns

03Type-safe React 18 component patterns (Compound, Memo, Page)

041 GitHub stars

05Standardized Telegram Mini App directory architecture

06Global state management implementation using Zustand

사용 사례

01Scaffolding a new Telegram Mini App frontend with Vite and TypeScript

02Managing global app state and Telegram SDK lifecycle events

03Implementing complex UI components with Telegram-specific design systems

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add andvl1/claude-plugin react-vite

For use in Claude.ai and ChatGPT

Download Skill