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

•

Design Tools

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.

Key Features

01Validates consistent spacing and layout patterns using the Tailwind CSS scale

02Enforces deep customization through the ui prop and consistent design tokens

03Identifies and remediates overused 'AI aesthetics' like Inter fonts and purple gradients

04Detects and flags default shadcn/ui prop usage to prevent generic styling

05Ensures functional polish including loading states, hover effects, and focus-visible styles

062 GitHub stars

Use Cases

01Refining and polishing AI-generated frontend code to meet professional production standards

02Auditing a codebase to transition from default shadcn/ui styles to a custom brand identity

03Enforcing design system consistency across a team of developers in a Tanstack Start project

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add hirefrank/hirefrank-marketplace component-aesthetic-checker

For use in Claude.ai and ChatGPT

Key Features

01Validates consistent spacing and layout patterns using the Tailwind CSS scale

02Enforces deep customization through the ui prop and consistent design tokens

03Identifies and remediates overused 'AI aesthetics' like Inter fonts and purple gradients

04Detects and flags default shadcn/ui prop usage to prevent generic styling

05Ensures functional polish including loading states, hover effects, and focus-visible styles

062 GitHub stars

Use Cases

01Refining and polishing AI-generated frontend code to meet professional production standards

02Auditing a codebase to transition from default shadcn/ui styles to a custom brand identity

03Enforcing design system consistency across a team of developers in a Tanstack Start project