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

0•

Design Tools

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

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

01Automated typography and font-loading strategy extraction

02Detailed color palette detection with WCAG contrast auditing

03Accessibility (A11y) compliance checking for interactive elements

040 GitHub stars

05Spacing system and layout hierarchy analysis

06Deep inspection of component props, state, and architecture

Use Cases

01Checking frontend components for WCAG accessibility violations and contrast issues

02Extracting CSS variables and design tokens from legacy React components for refactoring

03Auditing an existing codebase to create or document a unified design system

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ils15/copilot-global-config frontend-analyzer

For use in Claude.ai and ChatGPT

Download Skill