What is the Component Aesthetic Checker?

It is a Claude Code Skill that analyzes React components to ensure they aren't using default styles and follow high-quality design system patterns.

Which frameworks does this skill support?

It is optimized for Tanstack Start (React) applications using the shadcn/ui component library and Tailwind CSS styling.

How does it detect 'AI-generated' aesthetics?

It flags overused defaults like the Inter font, standard purple gradients, and missing transitions that are common indicators of unpolished or generic AI-generated code.

What are considered critical issues by this skill?

Critical issues include using components without any UI prop customization, missing loading states for async actions, and using inconsistent spacing outside the Tailwind scale.

Can I use this with my own design tokens?

Yes, the skill is designed to validate that components are correctly referencing your specific brand tokens and maintaining consistency across your custom design system.

UI Aesthetic & Design Validator

Name: UI Aesthetic & Design Validator
Author: hirefrank

byhirefrank

•

デザインツール

Ensures shadcn/ui components meet high design standards by validating customization depth and flagging generic AI-generated styling patterns.

概要

The Component Aesthetic Checker is a specialized tool for Tanstack Start applications that prevents the 'generic' look often associated with default component libraries and AI-generated code. It analyzes React and TSX files to ensure shadcn/ui components are deeply customized via the ui prop and Tailwind utility classes, rather than relying on factory defaults. By flagging overused fonts, common color gradients, and missing micro-interactions, it guides developers toward creating polished, brand-consistent interfaces with professional-grade UX elements like proper loading states and consistent spacing scales.

主な機能

Validates consistent spacing and layout patterns using the Tailwind CSS scale
Enforces deep customization through the ui prop and consistent design tokens
Identifies and remediates overused 'AI aesthetics' like Inter fonts and purple gradients
Detects and flags default shadcn/ui prop usage to prevent generic styling
Ensures functional polish including loading states, hover effects, and focus-visible styles
2 GitHub stars

ユースケース

Refining and polishing AI-generated frontend code to meet professional production standards
Auditing a codebase to transition from default shadcn/ui styles to a custom brand identity
Enforcing design system consistency across a team of developers in a Tanstack Start project

概要

主な機能

Validates consistent spacing and layout patterns using the Tailwind CSS scale
Enforces deep customization through the ui prop and consistent design tokens
Identifies and remediates overused 'AI aesthetics' like Inter fonts and purple gradients
Detects and flags default shadcn/ui prop usage to prevent generic styling
Ensures functional polish including loading states, hover effects, and focus-visible styles
2 GitHub stars

ユースケース

Refining and polishing AI-generated frontend code to meet professional production standards
Auditing a codebase to transition from default shadcn/ui styles to a custom brand identity
Enforcing design system consistency across a team of developers in a Tanstack Start project