Does it work with Tailwind CSS?

Yes, it can identify Tailwind utility patterns and extract them as part of the design system analysis, including spacing and color scales.

How does it handle dark mode?

The analyzer detects dark mode variants and extracts specific color schemes for both light and dark themes to ensure visual consistency.

Can it check for accessibility compliance?

Absolutely, it audits components against WCAG AA/AAA standards, checking contrast ratios, semantic HTML structure, and interactive element sizing.

Which frameworks are supported?

It is specifically optimized for React and Next.js, but it can analyze standard CSS, CSS Modules, and Styled Components.

Frontend Design Analyzer

Name: Frontend Design Analyzer
Author: ils15

byils15

Design Tools

Analyzes React and Next.js components to extract design tokens, typography, color palettes, and accessibility insights.

About

The Frontend Analyzer is a specialized skill for Claude Code designed to deconstruct frontend applications into their core design elements. It performs deep inspections of React and Next.js components to extract comprehensive design systems, including typography scales, color palettes, spacing systems, and component hierarchies. By identifying accessibility gaps and performance bottlenecks, it helps developers maintain design consistency, ensure WCAG compliance, and streamline the transition from raw code to documented design tokens.

Key Features

Automated typography and font-loading strategy extraction
Detailed color palette detection with WCAG contrast auditing
Accessibility (A11y) compliance checking for interactive elements
0 GitHub stars
Spacing system and layout hierarchy analysis
Deep inspection of component props, state, and architecture

Use Cases

Checking frontend components for WCAG accessibility violations and contrast issues
Extracting CSS variables and design tokens from legacy React components for refactoring
Auditing an existing codebase to create or document a unified design system

About

Key Features

Automated typography and font-loading strategy extraction
Detailed color palette detection with WCAG contrast auditing
Accessibility (A11y) compliance checking for interactive elements
0 GitHub stars
Spacing system and layout hierarchy analysis
Deep inspection of component props, state, and architecture

Use Cases

Checking frontend components for WCAG accessibility violations and contrast issues
Extracting CSS variables and design tokens from legacy React components for refactoring
Auditing an existing codebase to create or document a unified design system