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)

🎨 Color Palette Extraction

Primary, secondary, accent colors
Background and text colors
Semantic colors (success, error, warning, info)
Opacity/alpha values
Color space (RGB, HSL, hex, CSS variables)
Dark mode variants

📐 Layout & Spacing

Grid systems (CSS Grid, Flexbox)
Spacing scale (gaps, margins, padding)
Breakpoints and responsive behavior
Container queries and fluid sizing
Z-index hierarchy
Positioning strategies

🧩 Component Architecture

Component hierarchy and nesting
Reusable component patterns
Props and TypeScript interfaces
State management patterns
Custom hooks usage
Styled components vs CSS modules

2. Analysis Categories

Visual Inspection - Screenshots and visual differences
Code Inspection - Component code structure
Design System - Design token usage
Accessibility (A11y) - WCAG AA/AAA compliance
Performance - Font loading optimization

Analysis Output Structure

## 🎨 VISUAL ELEMENTS DETECTED

### Typography System
- Primary Font: [Font family, source, fallback]
- Heading Scale: H1-H6 sizes and weights
- Body Text: Default size, line-height, letter-spacing
- Monospace: Code/terminal fonts

### Color Palette
- Primary: #XXXXXX (RGB, HSL, CSS var)
- Semantic: Success, error, warning colors
- Dark Mode: Color scheme variants
- Contrast Ratios: WCAG AA/AAA compliance

### Layout System
- Grid: [Columns, gap, max-width]
- Breakpoints: [Mobile, tablet, desktop specs]
- Spacing Scale: [Base unit, multipliers]

Usage Examples

Example 1: Extract Design Tokens

Input: "Analise tipografia de ofertachina.com" Output: All fonts used, sizes, weights, loading strategy

Example 2: Color Palette Analysis

Input: "Extraia paleta de cores do ProductCard" Output: Exact colors, WCAG compliance, dark mode variants

Example 3: Component Deep Dive

Input: "Analise estrutura de ProductCard" Output: JSX structure, props, styling approach, accessibility

Example 4: Design System Audit

Input: "Audite design system compliance" Output: % compliance, violations, refactoring recommendations

Accessibility (WCAG)

Contrast ratios: Pass/Fail by element
Font sizes: Minimum sizes met
Interactive elements: Size compliance
Semantic HTML: Structure quality

Performance Metrics

Font file sizes and optimization
Image optimization status
CSS bundle size
Component render efficiency

Integrations

With the integrated browser

Automated visual analysis
Color & typography extraction
Accessibility testing

With Prompt Improver

Design tokens inform prompt creation
UI patterns documented in instructions

Tools & Technologies Reference

CSS Analysis: PostCSS, cssstats
Typography: Google Fonts API, Font loading APIs
Color: Chroma.js, ntc.js (color naming)
Accessibility: axe-core, WAVE
React Inspection: React DevTools, Storybook
Design Systems: Figma API, Design tokens parser

References

Changelog

v1.0 (2025-12-19): Initial release with typography, color, layout, component, and accessibility analysis

Appendix: Web UI Analysis

Detailed UX and accessibility analysis for web interfaces.

When to Use

Use this section when:

Evaluating a web interface for UX issues
Checking accessibility compliance (WCAG 2.1 AA/AAA)
Analyzing color contrast ratios
Reviewing typography and font hierarchy
Checking responsive design breakpoints
Measuring Core Web Vitals (LCP, FID, CLS)
Comparing against Material Design or Apple HIG standards

Analysis Framework

1. Accessibility (WCAG 2.1)

✅ Checklist:
- [ ] Color contrast ratio ≥ 4.5:1 (text), ≥ 3:1 (large text)
- [ ] Touch targets ≥ 44x44px
- [ ] Keyboard navigation works
- [ ] Screen reader labels present
- [ ] Focus states visible
- [ ] Alt text on images
- [ ] ARIA roles correct

2. Typography Hierarchy

Heading Scale (1.250 ratio):
- h1: 2.441rem (39px)
- h2: 1.953rem (31px)
- h3: 1.563rem (25px)
- h4: 1.25rem (20px)
- body: 1rem (16px)
- small: 0.8rem (13px)

3. Color Palette Analysis

Primary Colors:
- Main: #hex (contrast ratio)
- Light variant: #hex
- Dark variant: #hex

Semantic Colors:
- Success: #22c55e (green-500)
- Warning: #f59e0b (amber-500)
- Error: #ef4444 (red-500)
- Info: #3b82f6 (blue-500)

4. Layout & Spacing

8px Grid System:
- xs: 4px (0.25rem)
- sm: 8px (0.5rem)
- md: 16px (1rem)
- lg: 24px (1.5rem)
- xl: 32px (2rem)
- 2xl: 48px (3rem)

Breakpoints:
- mobile: 0-639px
- tablet: 640-1023px
- desktop: 1024-1279px
- wide: 1280px+

5. Core Web Vitals

Targets:
- LCP (Largest Contentful Paint): < 2.5s
- FID (First Input Delay): < 100ms
- CLS (Cumulative Layout Shift): < 0.1
- FCP (First Contentful Paint): < 1.8s
- TTFB (Time to First Byte): < 0.8s

Output Format

## UI Analysis Report

### Summary
- Overall Score: X/100
- Accessibility: ✅/⚠️/❌
- Performance: ✅/⚠️/❌
- Responsive: ✅/⚠️/❌

### Critical Issues
1. [Issue] - [Impact] - [Fix]

### Recommendations
1. [Improvement] - [Code example]

### Resources
- [Link to relevant docs]

Example Usage

@frontend Analyze the login page for accessibility issues
@frontend Check color contrast on the dashboard
@frontend Review typography hierarchy on landing page
@frontend Measure Core Web Vitals for homepage