Skills
.Work. You
Rest

frontend-analyzer

Community

Analyze frontend components for design tokens.

Design & Creative#typography#accessibility#frontend#react#analyze#design-tokens#color-palette
Authorils15
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill helps teams quickly understand frontend codebases by extracting typography details, color palettes, spacing systems, and design tokens from React/Next.js components, enabling faster design reviews and accessibility audits.

Core Features & Use Cases

  • Visual Inspection: Typography detection, color palette extraction, and layout/spacing analysis.
  • Code Structure Insight: Component hierarchy, reusable patterns, props, and state management.
  • Design System Audit: Token usage, typography scales, color roles, and accessibility signals.
  • Accessibility & Performance: WCAG considerations, contrast checks, and load strategies.

Quick Start

Analyze a React/Next.js project to extract typography, color tokens, and layout metrics from your component tree.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: frontend-analyzer
Download link: https://github.com/ils15/mythic-agents/archive/main.zip#frontend-analyzer

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.