skills.rest
shipiit
shipiitOFFICIAL
Explore all skills by this author →
WebsiteGitHub

rich-ui-patterns

Apply rich modern UI patterns to marketing and landing interfaces.

Updated May 6, 2026
Search Tags:#accessibility#glassmorphism#ui patterns#marketing design#hero sections#mesh gradients#gradient borders
One-click install
npx skills add https://github.com/shipiit/shipit-ui-design --skill rich-ui-patterns
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: rich-ui-patterns
Source: https://github.com/shipiit/shipit-ui-design/tree/main/skills/rich-ui-patterns
Command: npx skills add https://github.com/shipiit/shipit-ui-design --skill rich-ui-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It prevents hero and marketing sections from looking plain by defaulting to rich, modern visual patterns with clear hierarchy, depth, and brand feel.

Core Features & Use Cases

  • Rich pattern defaulting for marketing surfaces: Applies mockups, mesh gradients, layered surfaces, glassmorphism, gradient borders, tilt effects, spotlight cursor, and animated borders when the brief calls for modern/polished/hero/landing.
  • “Rich without overdoing it” governance: Enforces a three-pattern richness budget per screen to avoid clutter and demo-like output.
  • Production-ready UI guardrails: Requires tokenized design values, full interactive states, reduced-motion fallbacks, dark-mode parity, and image/alt accessibility for every emitted artifact.

Quick Start

Ask the AI to generate a modern hero and marketing section that includes a browser/device mockup, layered surfaces, and a CTA emphasis using gradient borders, while maintaining dark mode and reduced-motion fallbacks.

Frequently Asked Questions about rich-ui-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design modern hero sections that don't look like plain card-and-text layouts?▼

Modern hero sections need rich UI patterns like mesh gradients, layered surfaces, glassmorphism, and gradient borders to create visual depth and clear hierarchy. Applying a three-pattern richness budget prevents clutter while maintaining a polished brand feel.

What is the best way to add glassmorphism and mesh gradients to marketing landing pages?▼

Apply glassmorphism and mesh gradients to marketing landing pages by enforcing tokenized styling values and full interactive states. This ensures visual richness is production-ready rather than just a static demo aesthetic.

Do I need dark mode and reduced-motion fallbacks for interactive UI patterns like spotlight cursor and animated borders?▼

Yes, interactive UI patterns like spotlight cursor and animated borders require dark-mode parity and reduced-motion fallbacks. Respecting reduced-motion preferences ensures accessibility when applying tilt effects and animated visual elements.

Why does my marketing UI design look cluttered when using multiple modern visual patterns together?▼

Marketing UI looks cluttered when modern visual patterns are stacked without limits. Enforcing a three-pattern richness budget per screen prevents demo-like output and maintains clear visual hierarchy across hero and CTA areas.

Can I use gradient borders and tilt effects while maintaining accessibility for imagery in hero sections?▼

Yes, gradient borders and tilt effects can maintain accessibility by requiring image alt text and tokenized design values. Production-ready guardrails ensure decorative depth does not compromise screen reader compatibility.

Related Skills

Explore More Design & Creative Skills→
metedatametedata
3

crit-imagery-illustration

Generate and score 2-3 CSS-based HTML imagery specimens for product UI surfaces.

Community
Advanced
shipiitshipiit

code-presentation

Apply token-driven, accessibility-aware code-block presentation to UI documentation.

Official
Advanced
yashs33244yashs33244
1

brand-guidelines

Apply Anthropic brand colors and Poppins/Lora typography to user-created artifacts.

Community
Basic
patricio0312revpatricio0312rev
5

tailwind-gradient-builder

Create Tailwind CSS gradient utilities for backgrounds, text, borders, and UI elements.

Community
Advanced