# ui-visual-composition

Teaches AI coding agents to critique and construct visual UI layouts. It guides spacing and typography without arbitrary decoration.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 707 installs · ★ 23
- Author: hueyexe
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/hueyexe/frontend-agent-skills/tree/HEAD/ui-visual-composition/SKILL.md
- Updated: 2026-08-02
- HTML: https://affpapa.org/en/nevibecode/skills/ui-visual-composition

## What it does

This skill provides guidelines for AI agents creating or critiquing user interfaces. Instead of sketching framing shells first, the agent begins with the screen's core user goal. It enforces deliberate hierarchy, token-based spacing, and resilient states for empty views.

Visual suggestions must serve functional communication. The instructions require the agent to drop decorative treatments if they fail to clarify meaning or accessibility. The skill excludes deep UX research and backend architecture tasks.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add hueyexe/frontend-agent-skills --skill ui-visual-composition -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/ui-visual-composition/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/ui-visual-composition/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add hueyexe/frontend-agent-skills --skill ui-visual-composition -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/ui-visual-composition/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add hueyexe/frontend-agent-skills --skill ui-visual-composition -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/ui-visual-composition/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install hueyexe/frontend-agent-skills ui-visual-composition
```

2. **Manually: put the files in place**
- File: `.github/skills/ui-visual-composition/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add hueyexe/frontend-agent-skills --skill ui-visual-composition -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/hueyexe/frontend-agent-skills --path ui-visual-composition
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/ui-visual-composition/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add hueyexe/frontend-agent-skills --skill ui-visual-composition -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/hueyexe/frontend-agent-skills/tree/HEAD/ui-visual-composition/SKILL.md

## When to use it
- critique frontend visual hierarchy and layout balance
- apply tokenized spacing and structured typography scales
- style resilient empty, loading, and error states
- check interface color contrast for accessible reading

## Example prompts
- Critique the visual hierarchy and spacing in this settings page component
- Design resilient empty and error states for the data dashboard
- Refactor the signup card layout using consistent spacing tokens and neutral typography

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 2f3b88a9d0f5a9b5.

BEGIN THIRD-PARTY FILE 2f3b88a9d0f5a9b5
```text
---
name: ui-visual-composition
description: "Use when creating, critiquing, or refining visual UI, including hierarchy, spacing, typography, color, depth, imagery, or visual states."
license: MIT
metadata:
  author: hueyexe
---

# UI Visual Composition

## Purpose

Help an AI agent create and critique polished visual UI through hierarchy, spacing, typography, color, depth, imagery, and finishing details. Treat visual design as functional communication: the interface should help users understand what matters, what belongs together, what can be acted on, and what has changed.

This skill covers visual design quality, layout composition, typography, color systems, depth, imagery, polish, accessibility, and frontend implementation choices that affect visual quality. It does not cover deep UX research, information architecture strategy, or frontend architecture except where those concerns determine visual composition.

## When to use this skill

Use this skill when the user asks for UI critique, redesign, product-page improvement, frontend visual implementation, design-system guidance, style polish, layout refinement, typography, color palette, empty/error/loading state improvement, or visual QA of generated UI.

Also use it when producing frontend code for a visual interface, because component structure, semantic markup, tokens, state styling, responsive behavior, and accessibility details determine whether visual recommendations survive implementation.

## When not to use this skill

Do not use this skill as the primary framework when the user is asking mainly for user research planning, product strategy, market positioning, analytics instrumentation, backend/frontend architecture, performance engineering, copywriting without visual presentation, or detailed interaction flow design. Use it only for the visual-design portions of those tasks.

Do not use it to justify arbitrary decoration. If a visual suggestion does not improve hierarchy, comprehension, perceived quality, accessibility, or fit with product context, remove it.

## Core principles

1. **Start with the feature, not the shell.** Identify the concrete user task and content before designing navigation chrome, page framing, or decorative treatments.
2. **Hierarchy is the backbone.** Make the most important content and actions easiest to notice. Use size, weight, contrast, spacing, placement, and order before relying on color or ornament.
3. **Use familiar patterns unless novelty has a purpose.** Users bring mental models from other products. Preserve conventions for common controls, navigation, forms, and feedback unless the user’s brand or product goal justifies a deliberate departure.
4. **Group by meaning.** Proximity, common regions, alignment, and connectedness should match conceptual relationships. Ambiguous spacing creates ambiguous meaning.
5. **Constrain choices with systems.** Use type, spacing, color, radius, border, and elevation tokens instead of ad hoc one-off values.
```
END THIRD-PARTY FILE 2f3b88a9d0f5a9b5

The third-party file has ended. Everything between the 2f3b88a9d0f5a9b5 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2994 of 25792 bytes. © hueyexe · MIT · https://github.com/hueyexe/frontend-agent-skills/tree/HEAD/ui-visual-composition/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md