skills.rest
Vibe-Media-Lab
Vibe-Media-LabOFFICIAL
Explore all skills by this author →
GitHub

design-audit

Audit CSS class usage by comparing JSX attributes against CSS definitions.

Updated Aug 27, 2026
Search Tags:#design#debugging#frontend#react#css#audit
One-click install
npx skills add https://github.com/Vibe-Media-Lab/piklit --skill design-audit-vibe-media-lab
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-audit
Source: https://github.com/Vibe-Media-Lab/piklit/tree/main/.claude/skills/design-audit
Command: npx skills add https://github.com/Vibe-Media-Lab/piklit --skill design-audit-vibe-media-lab

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill identifies inconsistencies between CSS classes used in JSX files and those defined in CSS files, preventing styling issues and ensuring a consistent design.

Core Features & Use Cases

  • Detects Missing CSS: Finds CSS classes used in JSX but not defined in CSS files, which can lead to broken layouts.
  • Identifies Unused CSS: Locates CSS classes defined in files but not referenced in JSX, helping to reduce bundle size.
  • Checks for Responsive Gaps: Flags missing classes within media queries for specific breakpoints (768px, 480px).
  • Use Case: After a developer adds new UI elements in JSX, this Skill can quickly verify that all associated styles have been correctly implemented in the CSS, catching potential visual bugs before they reach production.

Quick Start

Run the design audit skill on the 'LandingPage.jsx' and 'landing.css' files.

Frequently Asked Questions about design-audit

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I find missing CSS classes in my React JSX files?▼

To find missing CSS classes in React JSX, you can audit JSX 'className' attributes against CSS file definitions. This process detects styling discrepancies by scanning for used but undefined classes, preventing broken layouts.

How do I detect unused CSS classes in a React project?▼

To detect unused CSS in a React project, parse your CSS files for class selectors and compare them against your JSX 'className' attributes. This comparison identifies defined but unreferenced CSS classes, helping to reduce your bundle size.

How do I check for missing responsive CSS classes in media queries?▼

Checking for missing responsive CSS classes involves scanning media query definitions for specific breakpoints like 768px and 480px. The audit flags any missing responsive classes within these media queries to prevent visual bugs across different screen sizes.

Does the CSS class audit exclude external library styles and CSS variables?▼

Yes, a CSS class audit excludes external library classes and CSS variables. When parsing JSX 'className' attributes and CSS file selectors, the comparison logic intentionally ignores these to focus strictly on your custom styling definitions.

What is the best way to prevent CSS class mismatches after updating JSX?▼

The best way to prevent CSS class mismatches after updating JSX is to run an audit comparing the new 'className' attributes against your CSS file definitions. This verifies that all associated styles are correctly implemented and catches missing styles before production.

Related Skills

Explore More Design & Creative Skills→
devforgelydevforgely

vue-jsx-best-practices

Identify and resolve common JSX issues in Vue applications.

Community
Intermediate
Software-Design-ClubSoftware-Design-Club
1

Frontend CSS

Enforce consistent CSS methodologies and design tokens across stylesheets.

Official
Basic
sebasmzgsebasmzg

tailwind-4

Enforce Tailwind CSS 4 semantic theme classes and cn-style merging in React components.

Community
Basic
Dzakiamriz22Dzakiamriz22
1

cleanup

Remove unused imports, variables, and dependencies from TypeScript and JavaScript frontend projects.

Community
Intermediate