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
التثبيت
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
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
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
