Requirements
- Target platform
- OpenClaw
- Install method
- Manual import
- Extraction
- Extract archive
- Prerequisites
- OpenClaw
- Primary doc
- SKILL.md
Tencent SkillHub ยท Developer Tools
Web Design
CSS implementation patterns for layout, typography, color, spacing, and responsive design. Complements ui-design (fundamentals) with code-focused examples.
skill openclawclawhub Free
CSS implementation patterns for layout, typography, color, spacing, and responsive design. Complements ui-design (fundamentals) with code-focused examples.
โฌ 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
Web Design Patterns
CSS implementation patterns for production-grade interfaces. For design fundamentals and decision-making, see ui-design. This skill focuses on code. See also: ui-design for typography/color/spacing theory, frontend-design for creative aesthetics.
OpenClaw / Moltbot / Clawbot
npx clawhub@latest install web-design
Layout Principles
Use CSS Grid for two-dimensional layouts and Flexbox for one-dimensional flow. Choose the right tool for each context. Layout NeedToolWhyPage-level structureCSS Grid (grid-template-areas)Named regions, explicit row/column controlNavigation barsFlexboxSingle-axis alignment, spacing with gapCard gridsGrid (auto-fill / auto-fit)Responsive without media queriesCenteringGrid (place-items: center)Shortest, most reliable centeringSidebar + contentGrid (grid-template-columns: 250px 1fr)Proportional sizing with fixed sidebarStacking overlapsGrid + grid-area: 1/1Layer elements without position: absolute
Spatial Composition
Go beyond predictable layouts. Intentional asymmetry, overlapping elements, and grid-breaking accents create visual interest. Use grid stacking (grid-area: 1/1) instead of position: absolute for overlapping elements. Choose generous negative space for luxury/editorial aesthetics, or controlled density for data-rich interfaces โ the choice must be intentional.
Typography
Typography carries 90% of a design's personality. Choose fonts that match the interface's purpose. ContextDisplay Font DirectionBody Font DirectionExample PairingEditorial / magazineHigh-contrast serifNeutral humanist sansPlayfair Display + Source Sans 3SaaS dashboardGeometric sansMatching weight sansDM Sans + DM Mono (data)Creative portfolioExpressive displayClean readable sansSyne + OutfitE-commerce luxuryThin modern serifElegant sansCormorant Garamond + JostDeveloper toolingMonospace displayMonospace bodyJetBrains Mono + IBM Plex Mono
Type Scale
Use a consistent ratio. A 1.25 (major third) scale works for most interfaces: text-xs 0.64rem, text-sm 0.8rem, text-base 1rem, text-lg 1.25rem, text-xl 1.563rem, text-2xl 1.953rem, text-3xl 2.441rem, text-4xl 3.052rem. Set body text to 1rem (16px minimum), line-height 1.5 for body, 1.1โ1.2 for headings. Limit line length to 60โ75ch.
Building a Palette
Every palette needs five functional roles: RolePurposeExample UsagePrimaryBrand identity, primary actionsButtons, links, active statesNeutralText, borders, backgroundsBody text, cards, dividersAccentSecondary actions, highlightsTags, badges, secondary buttonsSuccess / Warning / ErrorSemantic feedbackToasts, form validation, statusSurfaceLayered backgroundsCards on page, modals on overlay
Contrast and Depth
Create depth through surface layering, not just 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 */ } Use HSL or OKLCH for perceptually uniform color manipulation. Dominant color with sharp accents outperforms evenly-distributed palettes. Always verify WCAG contrast: 4.5:1 for normal text, 3:1 for large text.
Spacing
Consistent spacing creates rhythm. Use an 8px base unit (or 4px for dense UIs): TokenValueUse--space-10.25rem (4px)Inline icon gaps, tight padding--space-20.5rem (8px)Input padding, compact lists--space-30.75rem (12px)Button padding, card inner spacing--space-41rem (16px)Default element spacing--space-61.5rem (24px)Section padding, card gaps--space-82rem (32px)Section separation--space-123rem (48px)Major section breaks--space-164rem (64px)Page-level vertical rhythm Apply spacing consistently: use gap on Grid/Flexbox containers instead of margins on children. This eliminates margin-collapse bugs and simplifies responsive adjustments.
Visual Hierarchy
Guide the eye through deliberate contrast in size, weight, color, and space.
Hierarchy Techniques
TechniqueHowImpactSize contrastHero heading 3โ4x body sizeImmediate focal pointWeight contrastBold headings + regular bodyScannabilityColor contrastPrimary text vs muted secondaryInformation layeringSpatial groupingTight spacing within groups, wide betweenGestalt proximityElevationShadows / surface layersInteractive affordanceWhitespace isolationEmpty space around key elementEmphasis through absence
Practical Pattern โ Card Hierarchy
Layer hierarchy within cards: eyebrow (xs, uppercase, muted) โ title (xl, semibold) โ body (base, secondary color, 1.6 line-height) โ action (spaced apart with margin-top). Use surface color for separation and consistent padding from spacing tokens.
Breakpoint Strategy
BreakpointTargetApproach< 640pxMobileSingle column, stacked navigation, touch targets โฅ 44px640โ1024pxTabletTwo-column options, collapsible sidebars1024โ1440pxDesktopFull layout, hover interactions enabled> 1440pxWideMax-width container (1280px), prevent ultra-wide line lengths
Fluid Techniques
Prefer fluid sizing over rigid breakpoints where possible: /* Fluid typography โ scales between 640px and 1440px viewport */ h1 { font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); } /* Fluid spacing */ section { padding-block: clamp(2rem, 1rem + 4vw, 6rem); } /* Intrinsic grid โ no media queries needed */ .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--space-6); } Use container queries (@container) for component-level responsiveness when a component's layout should respond to its container, not the viewport.
Accessibility
Accessibility is not optional. Build it in from the start. RequirementImplementationStandardColor contrast4.5:1 normal text, 3:1 large text / UIWCAG 2.1 AAKeyboard navigationAll interactive elements focusable and operableWCAG 2.1.1Focus indicatorsVisible :focus-visible ring, 2px+ offsetWCAG 2.4.7Semantic HTMLUse <button>, <nav>, <main>, <article> etc.WCAG 1.3.1Alt textDescriptive for informational images, alt="" for decorativeWCAG 1.1.1Motion safetyRespect prefers-reduced-motionWCAG 2.3.3Touch targetsMinimum 44ร44px interactive areasWCAG 2.5.8ARIA when neededaria-label, aria-live, role only when native semantics insufficientWCAG 4.1.2 /* Robust focus indicator */ :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* Respect motion preferences */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }
Anatomy of a Well-Designed Component
Every UI component should have clear states, consistent spacing, and predictable behavior: StateVisual TreatmentExampleDefaultBase stylingButton at restHoverSubtle shift โ background, shadow, or scalebackground lightens 5-10%Active / PressedCompressed feel โ reduced shadow, slight insettransform: scale(0.98)FocusHigh-visibility ring, no outline removal:focus-visible ringDisabledReduced opacity, cursor: not-allowedopacity: 0.5LoadingSpinner or skeleton, disabled interactionInline spinner replacing label
Design Token Architecture
Structure tokens in three layers for maintainability: /* Layer 1: Primitive values */ --blue-500: oklch(0.55 0.2 250); --gray-100: oklch(0.95 0.005 250); --radius-md: 0.5rem; /* Layer 2: Semantic aliases */ --color-primary: var(--blue-500); --color-surface: var(--gray-100); --radius-button: var(--radius-md); /* Layer 3: Component-specific */ --btn-bg: var(--color-primary); --btn-radius: var(--radius-button); --btn-padding: var(--space-2) var(--space-4); This three-layer approach allows theme switching by remapping Layer 2 without touching components.
Motion and Animation
Use motion to communicate state changes, not to decorate. Focus on high-impact moments: InteractionDurationEasingPurposeButton hover150msease-outAcknowledge interactionModal open250msease-outDraw attentionModal close200msease-inQuick dismissalPage transition300msease-in-outMaintain spatial contextStagger reveal50โ80ms delay per itemease-outSequential content loadingMicro-feedback100msease-outToggle, checkbox, switch /* Staggered entrance animation */ .stagger-item { opacity: 0; translate: 0 1rem; animation: reveal 0.5s ease-out forwards; } .stagger-item:nth-child(1) { animation-delay: 0ms; } .stagger-item:nth-child(2) { animation-delay: 60ms; } .stagger-item:nth-child(3) { animation-delay: 120ms; } @keyframes reveal { to { opacity: 1; translate: 0 0; } }
Scroll-Driven Effects
Use native animation-timeline: scroll() (behind @supports) for parallax and reveal effects without JavaScript. Wrap in feature detection to gracefully degrade.
Design Quality Checklist
Before shipping, verify against these criteria: Typography: Intentional font pairing, consistent scale, readable line lengths Color: Cohesive palette, WCAG contrast met, semantic feedback colors defined Spacing: Consistent rhythm using spacing tokens, no ad-hoc pixel values Hierarchy: Clear visual flow โ eye path follows intended reading order Responsiveness: Tested at mobile, tablet, desktop; no horizontal overflow Accessibility: Keyboard navigable, focus visible, screen-reader tested, motion-safe States: All interactive elements have hover, active, focus, disabled, and loading states Personality: Design has a clear point-of-view โ not generic template aesthetic Performance: Images optimized, fonts subset, animations GPU-accelerated (transform, opacity) Dark mode: If supported, surfaces use layered lightness, not inverted colors
Category context
Code helpers, APIs, CLIs, browser automation, testing, and developer operations.
Source: Tencent SkillHub
Largest current source with strong distribution and engagement signals.
Package contents
Included in package
2 Docs
- SKILL.md
- README.md