Requirements
- Target platform
- OpenClaw
- Install method
- Manual import
- Extraction
- Extract archive
- Prerequisites
- OpenClaw
- Primary doc
- SKILL.md
Tencent SkillHub ยท Content Creation
UI Design
Comprehensive UI design skill covering fundamentals, patterns, and anti-patterns. Layout, typography, color, spacing, accessibility, motion, and component design. Use when building any web interface, reviewing design quality, or creating distinctive UIs.
skill openclawclawhub Free
Comprehensive UI design skill covering fundamentals, patterns, and anti-patterns. Layout, typography, color, spacing, accessibility, motion, and component design. Use when building any web interface, reviewing design quality, or creating distinctive UIs.
โฌ 0 downloads โ
0 stars Unverified but indexed
Install for OpenClaw
Quick setup
- Download the package from Yavira.
- Extract the archive and review SKILL.md first.
- Import or place the package into your OpenClaw setup.
Package facts
- Download mode
- Yavira redirect
- Package format
- ZIP package
- Source platform
- Tencent SkillHub
- What's included
- README.md, SKILL.md
Validation
- Use the Yavira download entry.
- Review SKILL.md after the package is downloaded.
- Confirm the extracted package contains the expected setup assets.
Install with your agent
Agent handoff
Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.
- Download the package from Yavira.
- Extract it into a folder your agent can access.
- Paste one of the prompts below and point your agent at the extracted folder.
New install
I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Then review README.md for any prerequisites, environment setup, or post-install checks. Tell me what you changed and call out any manual steps you could not complete.
Upgrade existing
I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Then review README.md for any prerequisites, environment setup, or post-install checks. Summarize what changed and any follow-up checks I should run.
Trust & source
Release facts
- Source
- Tencent SkillHub
- Verification
- Indexed source record
- Version
- 1.0.0
Provenance
- Publisher
- wpank
- Source page
- View original listing
- Canonical URL
- Open canonical page
Documentation
UI Design Fundamentals
The definitive guide for building production-grade web interfaces. Covers the full stack of design decisions from layout to motion.
WHEN To Use
Designing new UI components or pages Building landing pages, dashboards, or applications Reviewing code for design quality Creating distinctive interfaces that avoid generic aesthetics Implementing accessibility requirements
KEYWORDS
ui design, web design, layout, typography, color palette, spacing, visual hierarchy, responsive design, accessibility, motion design, component design, design tokens, frontend, css, tailwind
The 80/20 of Design Quality
FactorImpactTime InvestmentTypography40%Choose 1-2 fonts wellSpacing25%Use consistent scaleColor20%Limit palette, ensure contrastEverything else15%Shadows, borders, motion Focus on typography and spacing first. They're 65% of perceived quality.
Commit to a Direction
Mediocrity is forgettable. Pick an extreme: DirectionCharacteristicsUse WhenBrutally MinimalStark, essential, nothing extraDeveloper tools, productivityLuxury/RefinedPremium, subtle eleganceHigh-end products, fashionPlayfulFun, bright, approachableConsumer apps, gamesEditorialType-forward, grid-basedContent sites, magazinesIndustrialFunction-forward, robustB2B, enterprise
Grid vs Flexbox Decision
Layout NeedToolWhyPage-level structureCSS Grid (grid-template-areas)Named regions, explicit controlNavigation barsFlexboxSingle-axis, gap spacingCard gridsGrid (auto-fill/auto-fit)Responsive without media queriesCenteringGrid (place-items: center)Shortest, most reliableSidebar + contentGrid (250px 1fr)Fixed + fluidStacking/overlapsGrid + grid-area: 1/1No position: absolute needed
Container Strategy
/* Standard content width */ .container { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: clamp(1rem, 5vw, 3rem); } /* Full-bleed with contained content */ .full-bleed { width: 100vw; margin-left: calc(50% - 50vw); }
Common Layout Mistakes
MistakeProblemFixMixing container widthsInconsistent alignmentUse single max-w-* valueContent behind fixed navbarHidden contentAdd pt-[navbar-height]No mobile paddingEdge-to-edge textAdd px-4 minimumCentered everythingWeak hierarchyLeft-align body text
Typography
Typography carries 90% of a design's personality.
Font Pairing by Context
ContextDisplay FontBody FontExampleEditorialHigh-contrast serifNeutral humanistPlayfair + Source SansSaaSGeometric sansMatching sansDM Sans + DM MonoLuxuryThin modern serifElegant sansCormorant + JostDeveloperMonospace displayMonospace bodyJetBrains Mono + IBM PlexPlayfulRounded/quirkyClean readableNunito + Outfit
Type Scale (1.25 ratio)
--text-xs: 0.64rem; /* 10px - captions */ --text-sm: 0.8rem; /* 13px - secondary */ --text-base: 1rem; /* 16px - body */ --text-lg: 1.25rem; /* 20px - lead */ --text-xl: 1.563rem; /* 25px - h4 */ --text-2xl: 1.953rem; /* 31px - h3 */ --text-3xl: 2.441rem; /* 39px - h2 */ --text-4xl: 3.052rem; /* 49px - h1 */
Typography Rules
RuleValueWhyMinimum body size16pxBelow is hard to readBody line-height1.5-1.75Improves readabilityHeading line-height1.1-1.2Tighter for large textLine length60-75 charactersOptimal readingParagraph spacing1.5emClear separation
Typography Mistakes
MistakeProblemFixSystem fonts onlyGeneric lookUse Google Fonts or variable fontsToo many fontsVisual chaosMax 2 familiesWeak weight contrastPoor hierarchyBold headings (600+), regular bodyLong linesHard to readAdd max-w-prose (65ch)
Building a Palette
Every palette needs five functional roles: RolePurposeUsagePrimaryBrand identityButtons, links, active statesNeutralText, backgroundsBody text, cards, dividersAccentSecondary actionsTags, badges, highlightsSemanticFeedbackSuccess/warning/error statesSurfaceLayered backgroundsCards, modals, overlays
Surface Layering (Dark Mode)
Create depth through lightness, not shadows: :root { --surface-0: hsl(220 15% 8%); /* page background */ --surface-1: hsl(220 15% 12%); /* card */ --surface-2: hsl(220 15% 16%); /* raised element */ --surface-3: hsl(220 15% 20%); /* popover/modal */ }
Contrast Requirements (WCAG)
Text SizeMinimum RatioEnhanced (AAA)Normal text (<18px)4.5:17:1Large text (โฅ18px bold, โฅ24px)3:14.5:1UI components3:1โ
Color Mistakes
MistakeProblemFixPurple gradient on white"AI aesthetic" clichรฉUse intentional brand colorsLow contrast textAccessibility failTest with contrast checkerColor-only indicatorsColorblind users excludedAdd icons/textToo many colorsVisual noise3-5 colors maximumLight gray text on whiteUnreadableslate-600 minimum
8px Base Unit Scale
--space-1: 0.25rem; /* 4px - tight gaps */ --space-2: 0.5rem; /* 8px - input padding */ --space-3: 0.75rem; /* 12px - button padding */ --space-4: 1rem; /* 16px - default spacing */ --space-6: 1.5rem; /* 24px - section padding */ --space-8: 2rem; /* 32px - section gaps */ --space-12: 3rem; /* 48px - major breaks */ --space-16: 4rem; /* 64px - page rhythm */
Spacing Rules
RuleImplementationUse gap not marginsdisplay: flex; gap: var(--space-4)Consistent paddingSame values on all cards/sectionsMore space between groupsLess space within groups (Gestalt)No arbitrary valuesOnly use scale tokens
Spacing Mistakes
MistakeProblemFixArbitrary pixel valuesInconsistent rhythmUse spacing scale onlyMargin on childrenMargin collapse bugsUse gap on parentEqual spacing everywhereNo visual groupingMore between, less withinTight mobile paddingCramped feelingMinimum p-4 on mobile
Visual Hierarchy
Guide the eye through deliberate contrast.
Hierarchy Techniques
TechniqueHowImpactSizeHero 3-4x bodyImmediate focal pointWeightBold headings, regular bodyScannabilityColorPrimary vs mutedInformation layersSpaceIsolation creates emphasisDraws attentionPositionTop-left anchors readingNatural flow
Card Hierarchy Pattern
Eyebrow โ xs, uppercase, muted color Title โ xl, semibold, primary color Body โ base, secondary color, 1.6 line-height Action โ spaced apart, mt-4 minimum
Breakpoint Strategy
BreakpointTargetKey Changes< 640pxMobileSingle column, stacked nav, 44px touch targets640-1024pxTabletTwo columns, collapsible sidebars1024-1440pxDesktopFull layout, hover enabled> 1440pxWideMax-width container, prevent ultra-wide lines
Fluid Techniques
/* Fluid typography */ h1 { font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); } /* Fluid spacing */ section { padding-block: clamp(2rem, 1rem + 4vw, 6rem); } /* Intrinsic grid */ .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--space-6); }
Responsive Mistakes
MistakeProblemFixNo viewport metaBroken mobileAdd width=device-widthFixed widthsOverflow on mobileUse max-w-* and %Tiny touch targetsFrustrating tapsMinimum 44x44pxHidden horizontal scrollBroken layoutTest at 375px width
Accessibility
Accessibility is not optional.
Critical Requirements
RequirementImplementationStandardColor contrast4.5:1 normal, 3:1 largeWCAG 2.1 AAKeyboard navigationTab order matches visualWCAG 2.1.1Focus indicatorsVisible :focus-visible ringWCAG 2.4.7Semantic HTML<button>, <nav>, <main>WCAG 1.3.1Alt textDescriptive for imagesWCAG 1.1.1Motion safetyprefers-reduced-motionWCAG 2.3.3Touch targets44ร44px minimumWCAG 2.5.8
Focus Styles
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* Remove default only if custom exists */ :focus:not(:focus-visible) { outline: none; }
Motion Safety
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }
Motion & Animation
Use motion to communicate, not decorate.
Timing Guidelines
InteractionDurationEasingButton hover150msease-outModal open250msease-outModal close200msease-inPage transition300msease-in-outStagger delay50-80ms per itemโMicro-feedback100msease-out
Staggered Entrance
.item { opacity: 0; translate: 0 1rem; animation: reveal 0.5s ease-out forwards; } .item:nth-child(1) { animation-delay: 0ms; } .item:nth-child(2) { animation-delay: 60ms; } .item:nth-child(3) { animation-delay: 120ms; } @keyframes reveal { to { opacity: 1; translate: 0 0; } }
Motion Mistakes
MistakeProblemFixAnimating width/heightPerformance hitUse transform only> 500ms durationFeels sluggish150-300ms for mostMotion everywhereOverwhelmingFocus on entrances/exitsNo reduced-motionAccessibility failAlways check preference
Component States
Every interactive element needs clear states. StateVisual TreatmentDefaultBase stylingHoverSubtle background/shadow shiftActive/PressedSlight inset, reduced shadowFocusHigh-visibility ringDisabled50% opacity, not-allowed cursorLoadingSpinner or skeleton
Button Example
.btn { transition: all 150ms ease-out; } .btn:hover { background: var(--color-primary-600); } .btn:active { transform: scale(0.98); } .btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .btn:disabled { opacity: 0.5; cursor: not-allowed; }
Design Tokens Architecture
Structure tokens in three layers: /* Layer 1: Primitives */ --blue-500: oklch(0.55 0.2 250); --gray-100: oklch(0.95 0.005 250); --radius-md: 0.5rem; /* Layer 2: Semantic */ --color-primary: var(--blue-500); --color-surface: var(--gray-100); --radius-button: var(--radius-md); /* Layer 3: Component */ --btn-bg: var(--color-primary); --btn-radius: var(--radius-button); --btn-padding: var(--space-2) var(--space-4); This allows theme switching by remapping Layer 2 only.
Typography
Intentional font pairing (not system defaults) Consistent type scale Line length โค 75 characters 16px minimum body text
Color
Cohesive palette (3-5 colors) WCAG contrast met (4.5:1 normal, 3:1 large) Semantic colors defined Dark mode tested (if applicable)
Spacing
Consistent rhythm using scale No arbitrary pixel values Proper mobile padding
Hierarchy
Clear visual flow Primary action obvious Information layered by importance
Responsive
Mobile tested (375px) No horizontal overflow Touch targets โฅ 44px
Accessibility
Keyboard navigable Focus visible Screen reader tested Motion-safe
States
Hover on all interactive elements Focus-visible on all focusable Loading states for async Error states for forms
Performance
Images optimized (WebP, srcset) Fonts subset Animations use transform/opacity
NEVER Do
NEVER skip contrast checking โ Test every text/background combination NEVER use color alone โ Always pair with icons/text for meaning NEVER remove focus outlines โ Unless replacing with visible alternative NEVER use arbitrary spacing โ Stick to the scale NEVER animate layout properties โ Only transform and opacity NEVER ignore reduced-motion โ Always check the preference NEVER center everything โ Left-align body text NEVER use tiny touch targets โ 44px minimum NEVER use low-contrast text โ slate-600 minimum on white NEVER use generic system fonts โ Choose intentional typography
Related Skills
ui-ux-pro-max โ Searchable design databases with CLI frontend-design โ Creative aesthetics, avoiding "AI slop" theme-factory โ Applying themes to artifacts design-system-patterns โ Token architecture and theming
Category context
Writing, remixing, publishing, visual generation, and marketing content production.
Source: Tencent SkillHub
Largest current source with strong distribution and engagement signals.
Package contents
Included in package
2 Docs
- SKILL.md
- README.md