skills.rest
flitzrrr
flitzrrrCOMMUNITY
Explore all skills by this author →
𝕏@flitzrrrGitHub

ui-patterns

Provide UI interaction patterns and implementation rules for web interfaces.

4|1|Updated Apr 4, 2026
Search Tags:#accessibility#components#responsive#design-system#landing-pages#ui-patterns#hero-sections
One-click install
npx skills add https://github.com/flitzrrr/frontend-design-skills --skill ui-patterns-flitzrrr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-patterns
Source: https://github.com/flitzrrr/frontend-design-skills/tree/main/skills-src/ui-patterns
Command: npx skills add https://github.com/flitzrrr/frontend-design-skills --skill ui-patterns-flitzrrr

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill removes uncertainty in interface design by providing battle-tested UI interaction patterns, explicit rules, and checklists so designers and product teams can build high-converting, accessible, and mobile-first pages without guessing or reinventing common elements.

Core Features & Use Cases

  • Proven hero section variants (statement, split, immersive) and rules for visible CTAs above the fold.
  • Navigation patterns including sticky headers, hamburger overlays, and mobile-first constraints with skip links.
  • Card, form, CTA, pricing, testimonial and footer rules that ensure consistency, accessibility, and conversion-focused layouts.
  • Use cases: SaaS landing pages, marketing sites, product pages, dashboards, and onboarding wizards that need concrete pattern implementations and responsive guidance.

Quick Start

Use the ui-patterns skill to generate a mobile-first hero, navigation, and card layout optimized for conversion and accessibility.

Frequently Asked Questions about ui-patterns

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

FAQPage Schema
What are the best UI patterns for designing high-converting SaaS landing pages?▼

Effective UI patterns for SaaS landing pages include statement, split, or immersive hero sections, sticky navigation with skip links, and structured pricing or testimonial cards designed to maximize conversions.

How do I ensure my web interface components meet accessibility and mobile-first constraints?▼

Enforce accessibility and mobile-first constraints by implementing skip links, marking active navigation items, applying one primary CTA per viewport, and using consistent responsive card and form component structures.

Can I use these UI interaction patterns for dashboards and onboarding wizards?▼

Yes, these UI interaction patterns apply to dashboards and onboarding wizards by providing concrete component implementations and responsive guidance for consistent and accessible layouts.

What are the rules for designing a conversion-focused hero section?▼

Conversion-focused hero section rules require using proven variants like statement, split, or immersive layouts and ensuring visible primary CTAs appear above the fold.

How do I structure forms and cards for consistent web interface design?▼

Structure forms and cards by applying explicit component rules that ensure consistent layouts, accessibility basics, and conversion-focused implementation across product pages and marketing sites.

What are the limitations of using standard UI patterns for custom web layouts?▼

Standard UI patterns prioritize battle-tested consistency and conversion rules, which may restrict highly custom or experimental interactive layouts requiring bespoke component structures.

Related Skills

Explore More Design & Creative Skills→
pingmepipingmepi

pm-stage-04-design-spec

Generate design specifications with traceability to PRD user stories.

Community
Advanced
webdriveriowebdriverio
11

Frontend Components

Enforce frontend component coding standards across web UI projects.

Official
Basic
nholder88nholder88
2

ui-ux-review

Evaluate frontend UI against design-system rules for consistency and accessibility.

Community
Advanced
Nimraakram22Nimraakram22

web-design-principles

Apply web design principles covering typography, layout, color, and conversion optimization.

Community
Intermediate