---
name: fstb-frontend
description: Frontend engineering and design system skill for Telegram Mini Apps. Enforces bespoke dark themes, Telegram WebApp SDK synchronization, micro-haptics, and network recovery UI.
---

# FSTB Frontend & Design Engine (`/fstb_frontend`)

This skill designs and audits Telegram Mini App frontends, ensuring they look like world-class standalone products rather than generic Telegram clones.

---

## Architectural Focus Areas

### 1. Telegram WebApp SDK Integration
- **Initialization & Viewport**:
  - Enforce `window.Telegram.WebApp.ready()` and `expand()` on component mount.
  - Listen for `viewportChanged` events to prevent keyboard clipping.
- **Hardware & Navigation Controls**:
  - Bind `BackButton` to router history states (popping modals or navigating backward without closing the Mini App).
  - Inject micro-haptics via `HapticFeedback.impactOccurred('light' | 'medium')` on button taps.

### 2. Independent Brand System & Color Sovereignty
- **Dark Palette Standards**:
  - Prevent Telegram's default blue/gray styles from overriding the brand.
  - Enforce high-contrast dark themes: Obsidian Ink base (`#0B1214`), Forest secondary (`#19312A`), and vibrant Mint accents (`#5BD4B6`).
- **Typography & Touch Targets**:
  - Modern sans-serif typography (e.g. Manrope or Inter).
  - Minimum 48px touch targets for mobile accessibility.

### 3. Connection Resilience & Micro-States
- **Drop & Reconnection Banners**:
  - Display non-intrusive countdown banners (*"Partner reconnecting... 45s remaining"*) during network hiccups.
- **Skeleton Loaders**:
  - Fluid skeleton placeholders during signaling connection negotiation.

---

## Outputs
Writes UI compliance and style tokens to `.fstb/frontend_spec.json`.