Menu
Analyze React components for design tokens and accessibility. Use for extracting typography, colors, and layout patterns.
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Baseado na classificação ocupacional SOC
| 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 |
Analisa e identifica tipografia, cores, layout, fontes e elementos de design system em componentes frontend.
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.
## 🎨 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]
Input: "Analise tipografia de ofertachina.com" Output: All fonts used, sizes, weights, loading strategy
Input: "Extraia paleta de cores do ProductCard" Output: Exact colors, WCAG compliance, dark mode variants
Input: "Analise estrutura de ProductCard" Output: JSX structure, props, styling approach, accessibility
Input: "Audite design system compliance" Output: % compliance, violations, refactoring recommendations
Detailed UX and accessibility analysis for web interfaces.
Use this section when:
✅ 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
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)
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)
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+
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
## 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]
@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
Tool-agnostic search — query construction, tool selection, source trust hierarchy.
Auto-continue through todos with idle detection and safety gates. Use for multi-step orchestration.
Level 2 — Pantheon-native context compression with priority scoring, semantic summarization, downstream-aware compression, budget allocation, and cross-references
Automated visual review pipeline — Playwright screenshots, self-analysis, fix loop, escalation. Used by Aphrodite for UI verification.
Multi-agent orchestration with model routing, category delegation, and sprint management. Use for coordinating Pantheon agents.
MCP security hardening — credential leakage prevention, input sanitization, and tool access control. Use for reviewing agent MCP configurations.