Agent skill · design visual · eyadsibai
UI/UX Design
This skill should be used when the user asks about "UI design", "UX design", "user interface", "user experience", "wireframes", "mockups", "design patterns", "design system", "component design", "layout", or mentions UI/UX decisions.
Why this skill is useful
Provides specific UI/UX design patterns and principles that enhance the AI's ability to generate user-centered designs.
What it needs
About 2k tokens when loaded. Last updated 2026-01-15. 7 stars on the source repository.
What this skill does
UI/UX Design Guidance for user interface and user experience design decisions. Core Principles Visual Hierarchy Establish clear importance levels: 1. Size: Larger elements draw attention first 2. Color: Contrast guides the eye 3. Spacing: White space creates groupings 4. Position: Top-left reads first (in LTR languages) Consistency Use consistent spacing scale (4px, 8px, 16px, 24px, 32px, 48px) Maintain consistent component patterns Follow platform conventions (Material, iOS, Web) Feedback Every action needs feedback: Immediate: Button press states Progress: Loading indicators Completion: Success/error messages Layout Patterns Card Layout Use for: Collections, products, articles List Layout Use for: Settings, navigation, data tables Dashboard Layout Component Design Buttons Type Use Case ------ ---------- Primary Main action (1 per view) Secondary Alternative actions Tertiary/Ghost Low-emphasis actions Destructive Delete, remove actions Forms Label above input (not placeholder-only) Show validation inline Group related fields Mark optional fields, not required Provide helpful error messages Navigation Top nav: Global, persistent Side nav: Complex apps, many sections Bottom nav: Mobile, 3-5 items max Breadcrumbs: Deep hierarchies Responsive Design Breakpoints Adaptation Strategies Stack: Columns become rows on mobile Hide: Show/hide elements by importance Resize: Proportional scaling Reflow: Different layouts per breakpoint Color Usage Semantic Colors Color Meaning ------- --------- Blue Primary actions, links Green Success, positive Yellow/Orange Warning, attention Red Error, destructive Gray Neutral, disabled Contrast Requirements Text on background: 4.5:1 minimum (WCAG AA) Large text: 3:1 minimum Interactive elements: 3:1 minimum Typography Scale Line Height Headings: 1.2 - 1.3 Body text: 1.5 - 1.6 UI elements: 1.0 - 1.25 UX Patterns Empty States Show when no data: Friendly illustration Explain what goes here Provide action to add first item Loading States Skeleto …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills eyadsibai/ui-ux