skills.rest
eboody
eboodyCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-expert

Audit UI designs for visual hierarchy, spacing, typography, and design-system consistency.

Updated Jan 6, 2026
Search Tags:#design#ui#css#components#ux#visual
One-click install
npx skills add https://github.com/eboody/eran.codes --skill ui-expert
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-expert
Source: https://github.com/eboody/eran.codes/tree/main/archive/skills/ui-expert
Command: npx skills add https://github.com/eboody/eran.codes --skill ui-expert

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses inconsistencies and imperfections in user interfaces, ensuring a polished, professional, and user-friendly visual experience across all components and layouts.

Core Features & Use Cases

  • Visual Audits: Analyzes and identifies issues with spacing, typography, color contrast, and interactive states.
  • Design System Enforcement: Ensures adherence to design tokens and reusable component patterns.
  • Responsive Refinement: Optimizes layouts for various screen sizes and breakpoints.
  • Use Case: A product team has just implemented a new feature, but the UI elements don't quite match the existing design language. The ui-expert skill can be used to audit the new components, identify discrepancies, and suggest specific CSS and markup changes to align them with the established design system.

Quick Start

Use the ui-expert skill to audit the visual hierarchy and component states of the provided UI mockups.

Frequently Asked Questions about ui-expert

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

FAQPage Schema
How do I audit UI components for visual consistency and design system alignment?▼

Auditing UI components for visual consistency involves reviewing spacing, typography, color contrast, and interactive states against established design tokens. This process identifies discrepancies and suggests specific CSS changes to align components with the design system.

What is the best way to enforce design tokens when refining CSS layouts?▼

Enforcing design tokens when refining CSS layouts requires token-first styling, validating accessibility-facing UI qualities, and ensuring adherence to component standards. This approach maintains visual hierarchy and consistent spacing across responsive breakpoints.

How do I check responsive layout breakpoints and visual hierarchy in a UI design?▼

Checking responsive layout breakpoints and visual hierarchy involves analyzing component polish across screen sizes, validating interactive states, and ensuring accessibility-facing UI qualities meet established standards for spacing and contrast.

Can I use this UI review approach with existing CSS components and interaction scripts?▼

Yes, UI review works with existing CSS components and interaction scripts by enforcing token-first styling and validating component standards. It requires adherence to established CSS component patterns and interaction script helpers for proper integration.

Why does my user interface look inconsistent after implementing new features?▼

User interfaces look inconsistent after new features when UI elements don't match the established design language. A visual audit identifies discrepancies in spacing, typography, and color contrast, suggesting specific CSS changes to realign components.

Related Skills

Explore More Design & Creative Skills→
priyansh19priyansh19
1

design-guide

Establish and enforce CrewSpace UI design system standards across frontend components.

Community
Advanced
viktorbezdekviktorbezdek
10

frontend-design

Create accessible, responsive UI design systems with Tailwind CSS, Radix UI, and shadcn/ui.

Community
Advanced
Tasty-Maker-StudioTasty-Maker-Studio

component-patterns

Define React component structures, Ark UI wrappers, and TypeScript variant types.

Official
Intermediate
legotec73legotec73

design-review

Audit live websites for visual issues and apply atomic code fixes.

Community
Advanced