# Ui Composition

> Use when building layouts, choosing colours, setting typography, establishing visual hierarchy, designing responsive behaviour, or making any visual design decision — ensures every visual choice serves both aesthetics and accessibility

- **Type:** Skill
- **Install:** `agentstack add skill-daeryundf2-prog-lazyantigravity-ui-composition`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [daeryundf2-prog](https://agentstack.voostack.com/s/daeryundf2-prog)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [daeryundf2-prog](https://github.com/daeryundf2-prog)
- **Source:** https://github.com/daeryundf2-prog/LAZYANTIGRAVITY/tree/main/skill-aliases/frontend/references/designpowers/vendor/skills/ui-composition

## Install

```sh
agentstack add skill-daeryundf2-prog-lazyantigravity-ui-composition
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# UI Composition

Visual design is where intent becomes tangible. Every colour, every spacing decision, every typographic choice either includes or excludes people. This skill ensures visual decisions are principled, systematic, and inclusive.

## When to Use

- Designing screen layouts or page structures
- Choosing or refining colour palettes
- Setting typography systems
- Establishing spacing and grid systems
- Designing for responsive breakpoints
- Creating or modifying visual hierarchy
- Designing dark mode or high contrast variants

## Process

### Step 1: Reference the Foundation

Before making visual decisions, confirm you have:
- Design brief or strategy (from earlier phases)
- Personas (especially ability spectrum considerations)
- Existing design system (invoke `design-system-alignment` if one exists)

### Step 2: Layout and Structure

**Grid system:**
- Define columns, gutters, and margins
- Ensure the grid adapts across breakpoints (mobile, tablet, desktop)
- Test that content reflows sensibly when zoomed to 200%

**Visual hierarchy:**
- Establish a clear reading order that works both visually and in the DOM
- Ensure the hierarchy communicates through structure, not colour alone
- Verify that removing all colour still leaves a readable, navigable page

**Spacing system:**
- Use a consistent spacing scale (e.g., 4px base)
- Ensure touch targets are at least 44x44px
- Provide adequate spacing between interactive elements to prevent accidental activation

### Step 3: Colour

**Palette construction:**
- Define primary, secondary, neutral, and semantic colours (success, warning, error, info)
- Every colour pairing must meet WCAG AA contrast ratios minimum (4.5:1 for text, 3:1 for large text and UI components)
- Target WCAG AAA (7:1) where feasible

**Colour independence:**
- Never convey information through colour alone
- Always pair colour with text labels, icons, or patterns
- Test with simulated colour blindness (protanopia, deuteranopia, tritanopia)

**Dark mode / high contrast:**
- If applicable, design dark mode as a first-class experience, not an afterthought
- Ensure all contrast ratios hold in both modes
- Respect `prefers-color-scheme` and `prefers-contrast` media queries

### Step 4: Typography

**Type scale:**
- Define a modular scale with clear hierarchy (heading levels, body, caption, label)
- Base body size: minimum 16px (1rem)
- Line height: 1.5 for body text, 1.2-1.3 for headings

**Readability:**
- Line length: 45-75 characters for body text
- Paragraph spacing: at least 1.5x the font size
- Avoid justified text (ragged right is more readable for most people)
- Ensure text can be resized to 200% without loss of content or functionality

**Font selection:**
- Prioritise legibility over personality
- Ensure the chosen font has distinct characters for I, l, 1 and O, 0
- Provide fallback fonts in the same classification

### Step 5: Responsive Design

Design for these breakpoints (adjust to project needs):
- **Mobile** (320-480px): single column, stacked layout, thumb-reachable interactions
- **Tablet** (481-1024px): flexible layout, touch and pointer support
- **Desktop** (1025px+): multi-column, keyboard and pointer optimised

At every breakpoint:
- Content priority remains correct
- Touch targets remain adequate
- Text remains readable without horizontal scrolling
- No information is hidden that was visible at other breakpoints (unless intentionally progressive)

### Step 6: Document Decisions

For each visual decision, document:
- **What:** the decision made
- **Why:** how it serves the design principles and personas
- **Accessibility:** how it meets inclusive design requirements

## Integration

- **Called by:** `writing-design-plans` (as part of plan execution)
- **Pairs with:** `design-system-alignment` (for consistency), `cognitive-accessibility` (for visual load), `adaptive-interfaces` (for user preferences)
- **Reviewed by:** `designpowers-critique`

## Quick Reference: Accessibility Minimums

| Element | Requirement |
|---------|------------|
| Text contrast | 4.5:1 (AA) or 7:1 (AAA) |
| Large text contrast | 3:1 minimum |
| UI component contrast | 3:1 against adjacent colours |
| Touch target | 44x44px minimum |
| Focus indicator | Visible, 3:1 contrast against adjacent |
| Text resize | Content usable at 200% zoom |
| Colour alone | Never the sole indicator of state or meaning |

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [daeryundf2-prog](https://github.com/daeryundf2-prog)
- **Source:** [daeryundf2-prog/LAZYANTIGRAVITY](https://github.com/daeryundf2-prog/LAZYANTIGRAVITY)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-daeryundf2-prog-lazyantigravity-ui-composition
- Seller: https://agentstack.voostack.com/s/daeryundf2-prog
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.