frontend-ui-quality

Audit frontend components against 8pt grids and semantic color tokens.

Updated Apr 13, 2026
One-click install
npx skills add https://github.com/henrycashe26/my_skills --skill frontend-ui-quality
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-ui-quality
Source: https://github.com/henrycashe26/my_skills/tree/main/coding/frontend-ui-quality
Command: npx skills add https://github.com/henrycashe26/my_skills --skill frontend-ui-quality

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill eliminates inconsistent UI patterns, visual clutter, and accessibility gaps by enforcing a rigorous, system-based design approach for frontend applications.

Core Features & Use Cases

  • Design System Enforcement: Validates spacing, typography, and color usage against an 8pt grid and semantic token system.
  • Component Auditing: Reviews buttons, forms, and loading states against proven UX benchmarks like Linear and Vercel.
  • Use Case: When you are unsure if a new component design is polished or accessible, use this skill to perform a comprehensive audit of your layout, motion, and interaction patterns.

Quick Start

Use the frontend-ui-quality skill to review the current component design and suggest improvements based on the provided benchmarks.

Frequently Asked Questions about frontend-ui-quality

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

FAQPage Schema
How do I audit frontend UI components for visual consistency and accessibility?

You can audit frontend UI components by rigorously reviewing layout, typography, color, spacing, and motion patterns against established design tokens and industry-standard UX benchmarks to enforce visual consistency and accessibility.

What is an 8pt grid system for frontend design?

An 8pt grid system is a layout methodology that enforces visual consistency by standardizing component spacing and dimensions to multiples of eight, eliminating arbitrary spacing values and visual clutter in frontend applications.

Does this UI review approach work with Tailwind CSS and semantic color tokens?

Yes, this UI review approach works with Tailwind CSS and semantic color tokens by validating color usage and enforcing strict compliance with your established design token system during frontend component audits.

How do I check if my button and form components meet standard UX benchmarks?

To check if your buttons and forms meet standard UX benchmarks, review their loading states and interaction patterns against proven designs from platforms like Linear and Vercel to ensure optimal accessibility and visual polish.

When should I perform a systematic UI design quality review?

You should perform a systematic UI design quality review when you are unsure if a new component design is polished or accessible, using rigorous component auditing to eliminate inconsistent UI patterns and visual clutter.