Skill: ivangdavila/ui (version 1.0.0)

--- name: UI description: Design clear, consistent, and visually polished user interfaces. metadata: {"clawdbot":{"emoji":"🎨","os":["linux","darwin","win32"]}} --- ## Visual Hierarchy - One focal point per screen—eye knows where to go first - Size, color, weight establish importance—primary action most prominent - Group related elements—proximity implies relationship - White space is not wasted space—breathing room aids scanning ## Typography - Maximum 2-3 font families—more creates visual noise - Clear size scale: title > heading > body > caption—distinct steps, not gradual - Line height 1.4-1.6 for body text—too tight or loose hurts readability - Line length 45-75 characters—prevents eye fatigue - Left-align body text—centered only for short headings ## Color Usage - Primary color for primary actions—one dominant brand color - Semantic colors consistent: red=error, green=success, yellow=warning - Don't rely on color alone—add icons, text, patterns for accessibility - Neutral palette for most UI—color for emphasis, not everywhere - Test color blindness scenarios—8% of men affected ## Spacing System - Use consistent scale: 4px, 8px, 16px, 24px, 32px, 48px - Apply same spacing for same relationships—all card padding equal - More space around groups than within—visual grouping through proximity - Generous padding on touch targets—44px minimum for mobile ## Alignment - Grid system for consistency—8px or 4px base grid - Align to invisible lines—elements share edges, not scattered - Left edge strongest for LTR—anchor content predictably - Optical alignment when needed—visual center differs from mathematical ## Component States - Default, hover, active, focus, disabled—all states designed - Focus state visible and clear—keyboard users need this - Disabled looks disabled—reduced opacity, no pointer cursor - Loading state replaces content—not just overlay - Error state in context—red border, inline message ## Icons - Consistent style throughout—don't mix outlined and filled - Recognizable at small sizes—simple shapes work better - Labels when meaning ambiguous—icon + text clearer than icon alone - Touch target larger than visual icon—44px tap area, 24px icon ## Imagery - Consistent aspect ratios—don't stretch or skew - Fallback for failed loads—placeholder, not broken image - Alt text for content images—decorative images alt="" - Compress appropriately—quality vs file size balance ## Responsive Design - Design for smallest screen first—enhance for larger - Breakpoints based on content—not arbitrary device widths - Touch targets larger on touch screens—hover states only on desktop - Consider landscape orientation—especially for tablets ## Dark Mode - Not just color inversion—redesign depth and emphasis - Reduce contrast slightly—pure white on black strains eyes - Shadows don't work same—use lighter surfaces for elevation - Test all states—errors, success, charts, images - Respect system preference—but allow override ## Motion and Animation - Duration 150-300ms for transitions—fast but perceptible - Ease-out for entering—starts fast, settles in - Ease-in for exiting—accelerates out of view - Consistent timing across similar interactions - Purpose: guide attention, show relationships, provide feedback ## Design Tokens - Define tokens for colors, spacing, typography—single source of truth - Semantic naming: `color-error` not `color-red` - Enables theming and dark mode—swap token values - Scales with product—change once, update everywhere ## Common Mistakes - Too many font sizes—stick to the scale - Inconsistent spacing—creates unpolished feel - Low contrast text—4.5:1 minimum for accessibility - Buttons that don't look clickable—affordance matters - Different styles for same component—cards should match cards


Security scan verdicts — ClawScan: clean | static analysis: clean | VirusTotal: clean | SkillSpector: clean (LOW)