| name | frontend-analyzer |
| description | Analyze React components for design tokens and accessibility. Use for extracting typography, colors, and layout patterns. |
| globs | ["**/*.tsx","**/*.jsx","**/components/**"] |
| alwaysApply | false |
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
