frontend-crafter

What problem does it solve?

This Skill helps you design and implement high-performance, mobile-first frontend interfaces for the Super Cartola Manager while keeping UX consistent and resilient through offline-capable caching.

Core Features & Use Cases

• Mobile-First Design System (Black & Orange): Defines reusable CSS variables, a three-font typography system (Inter, Russo One, JetBrains Mono), and consistent base components (cards and primary buttons) to prevent UI drift.
• SPA v3.0 Navigation + Loading States: Provides a fragment-based navigation architecture (HTML fragments without full document structure), debounced navigation, history integration, and required loading overlays for reloads/PTR.
• IndexedDB Cache-First Performance: Implements an offline-ready cache strategy with TTL per module (e.g., 1h for ranking, 30min for extrato) and background revalidation to keep the UI instant while updating data.
• Mobile Premium UI Components: Includes production-ready UI patterns such as premium header with avatar/badge, 4-column action grid, split-stat team status card, FAB with market timer, match card, and fixed bottom navigation using Material Icons.

Quick Start

Ask the skill to create a new mobile-first screen fragment and its module script using the SPA v3.0 navigation pattern and cache-first IndexedDB strategy for offline-friendly rendering.