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 Playwright
- 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
1---2name: frontend-analyzer3description: Analyze React/Next.js components to extract typography, colors, layout, fonts, spacing systems, and design tokens. Identifies accessibility issues, responsive breakpoints, and component hierarchies.4---56# Frontend Analyzer78Analisa e identifica tipografia, cores, layout, fontes e elementos de design system em componentes frontend.910## Overview1112The 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.1314## Core Capabilities1516### 1. **Visual Element Analysis**1718#### 🔤 Typography Detection19- Font families (system fonts, Google Fonts, custom fonts)20- Font sizes and scaling systems (rem, px, %)21- Font weights (100-900)22- Line heights and letter spacing23- Text decorations and text transforms24- Font loading strategies (WOFF2, variable fonts)2526#### 🎨 Color Palette Extraction27- Primary, secondary, accent colors28- Background and text colors29- Semantic colors (success, error, warning, info)30- Opacity/alpha values31- Color space (RGB, HSL, hex, CSS variables)32- Dark mode variants3334#### 📐 Layout & Spacing35- Grid systems (CSS Grid, Flexbox)36- Spacing scale (gaps, margins, padding)37- Breakpoints and responsive behavior38- Container queries and fluid sizing39- Z-index hierarchy40- Positioning strategies4142#### 🧩 Component Architecture43- Component hierarchy and nesting44- Reusable component patterns45- Props and TypeScript interfaces46- State management patterns47- Custom hooks usage48- Styled components vs CSS modules4950### 2. **Analysis Categories**51521. **Visual Inspection** - Screenshots and visual differences532. **Code Inspection** - Component code structure543. **Design System** - Design token usage554. **Accessibility (A11y)** - WCAG AA/AAA compliance565. **Performance** - Font loading optimization5758## Analysis Output Structure5960```markdown61## 🎨 VISUAL ELEMENTS DETECTED6263### Typography System64- Primary Font: [Font family, source, fallback]65- Heading Scale: H1-H6 sizes and weights66- Body Text: Default size, line-height, letter-spacing67- Monospace: Code/terminal fonts6869### Color Palette70- Primary: #XXXXXX (RGB, HSL, CSS var)71- Semantic: Success, error, warning colors72- Dark Mode: Color scheme variants73- Contrast Ratios: WCAG AA/AAA compliance7475### Layout System76- Grid: [Columns, gap, max-width]77- Breakpoints: [Mobile, tablet, desktop specs]78- Spacing Scale: [Base unit, multipliers]79```8081## Usage Examples8283### Example 1: Extract Design Tokens84Input: "Analise tipografia de ofertachina.com"85Output: All fonts used, sizes, weights, loading strategy8687### Example 2: Color Palette Analysis88Input: "Extraia paleta de cores do ProductCard"89Output: Exact colors, WCAG compliance, dark mode variants9091### Example 3: Component Deep Dive92Input: "Analise estrutura de ProductCard"93Output: JSX structure, props, styling approach, accessibility9495### Example 4: Design System Audit96Input: "Audite design system compliance"97Output: % compliance, violations, refactoring recommendations9899## Accessibility (WCAG)100101- Contrast ratios: Pass/Fail by element102- Font sizes: Minimum sizes met103- Interactive elements: Size compliance104- Semantic HTML: Structure quality105106## Performance Metrics107108- Font file sizes and optimization109- Image optimization status110- CSS bundle size111- Component render efficiency112113## Integrations114115### With Playwright116- Automated visual analysis117- Color & typography extraction118- Accessibility testing119120### With Prompt Improver121- Design tokens inform prompt creation122- UI patterns documented in instructions123124## Tools & Technologies Reference125126- **CSS Analysis:** PostCSS, cssstats127- **Typography:** Google Fonts API, Font loading APIs128- **Color:** Chroma.js, ntc.js (color naming)129- **Accessibility:** axe-core, WAVE130- **React Inspection:** React DevTools, Storybook131- **Design Systems:** Figma API, Design tokens parser132133## References134135- [Google Fonts](https://fonts.google.com/)136- [Tailwind CSS Documentation](https://tailwindcss.com/docs)137- [WCAG Color Contrast Checker](https://webaim.org/resources/contrastchecker/)138- [CSS-Tricks](https://css-tricks.com/)139- [MDN Web Docs](https://developer.mozilla.org/)140- [Figma Design System](https://www.figma.com/design-systems/)141142## Changelog143144- **v1.0** (2025-12-19): Initial release with typography, color, layout, component, and accessibility analysis
diegosouzapw