Frontend Analyzer

Analisa e identifica tipografia, cores, layout, fontes e elementos de design system em componentes frontend.

Overview

The Frontend Analyzer skill provides deep inspection of frontend code, design elements, and visual properties. It extracts typography, color palettes, spacing systems, component hierarchies, and accessibility attributes from React/Next.js applications.

Core Capabilities

1. Visual Element Analysis

🔤 Typography Detection

• Font families (system fonts, Google Fonts, custom fonts)
• Font sizes and scaling systems (rem, px, %)
• Font weights (100-900)
• Line heights and letter spacing
• Text decorations and text transforms
• Font loading strategies (WOFF2, variable fonts)