ui-visual-composition

Name: ui-visual-composition
Availability: InStock
Author: hueyexe

Critique UI composition and deliver prioritized recommendations for hierarchy, accessibility, and polish.

3|1|Updated Apr 30, 2026

Search Tags:#typography #accessibility #analyze #visual-design #design-systems #color-palette #ui-critique

Ready to run

npx skills add https://github.com/hueyexe/frontend-agent-skills --skill ui-visual-composition

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-visual-composition
Source: https://github.com/hueyexe/frontend-agent-skills/tree/main/ui-visual-composition
Command: npx skills add https://github.com/hueyexe/frontend-agent-skills --skill ui-visual-composition

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Polished visual UI requires consistent hierarchy, spacing, typography, color, depth, imagery, and finishing details to communicate meaning clearly and build trust.

Core Features & Use Cases

Guides visual design quality, layout composition, tokens, and frontend implementation choices that affect visual quality.
Applies to UI critique, redesign, product-page polish, style guidance, and visual QA for generated interfaces.
Provides a reusable framework built on core principles to evaluate hierarchy, grouping, color systems, accessibility, and resilience.

Quick Start

Describe a UI task you want improved and provide any constraints or a rough sketch so I can generate a prioritized visual-design plan.

Frequently Asked Questions about ui-visual-composition

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

FAQPage Schema

How do I critique UI visual hierarchy and improve frontend composition?▼

You can improve visual hierarchy by applying a reusable framework to evaluate layout composition, spacing, typography, and color systems. This approach delivers structured critique and actionable recommendations to polish frontend visual composition across responsive web contexts.

What is the best way to polish UI visuals and ensure accessibility in a design system?▼

The best way to polish UI visuals is to apply design-system thinking and tokenization to evaluate hierarchy, grouping, and color palettes. This ensures accessibility resilience and provides structured guidance for production-grade frontend implementation decisions.

Does this UI critique approach work with existing design tokens and frontend constraints?▼

Yes, this UI critique approach works directly with existing design tokens and frontend implementation constraints. It evaluates visual design quality and tokenization while providing actionable recommendations tailored to responsive web contexts and production limitations.

How do I evaluate edge-state resilience for production-grade UI?▼

You evaluate edge-state resilience by assessing visual composition against core principles like hierarchy, grouping, and accessibility. This identifies vulnerabilities in design systems and delivers actionable recommendations to ensure robust frontend visual polish under production constraints.

Can I use this for visual QA on generated product pages?▼

Yes, you can use this framework for visual QA on generated product pages. It evaluates visual design quality, layout composition, and frontend implementation choices to deliver a prioritized visual-design plan for product-page polish and style guidance.