design-patterns

Reference UI design patterns, component templates, and sector-specific conventions.

10|5|Updated Jan 29, 2026
One-click install
npx skills add https://github.com/Claude-Code-Community-Ireland/claude-code-resources --skill design-patterns-claude-code-community-ireland
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-patterns
Source: https://github.com/Claude-Code-Community-Ireland/claude-code-resources/tree/main/plugins/vibeworks-library/skills/design-patterns
Command: npx skills add https://github.com/Claude-Code-Community-Ireland/claude-code-resources --skill design-patterns-claude-code-community-ireland

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a curated library of proven design patterns and component templates to help you generate high-quality, non-vibe-coded UI designs efficiently.

Core Features & Use Cases

  • Layout Patterns: Offers pre-defined structures for Hero Sections, Navigation, and Cards.
  • Component Patterns: Provides guidelines for Buttons, Forms, and Feedback elements.
  • Sector-Specific Guidance: Includes tailored patterns for Fintech, Healthcare, E-commerce, and SaaS.
  • Anti-Patterns: Highlights common design mistakes to avoid.
  • Use Case: When designing a new SaaS product's landing page, you can quickly reference the "Split Hero" or "Centered Hero" patterns to establish a strong visual foundation.

Quick Start

Reference the 'Hero Sections' section for layout ideas for a new product landing page.

Frequently Asked Questions about design-patterns

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

FAQPage Schema
What UI design patterns should I use for a SaaS landing page?

For a SaaS landing page, UI design patterns like Split Hero or Centered Hero sections provide strong visual foundations, while pre-defined navigation and card structures ensure consistent frontend layouts.

How do I structure frontend components like buttons and forms for web design?

To structure frontend components for web design, reference component patterns that provide guidelines for buttons, forms, and feedback elements to ensure consistent interaction design across your application.

Are there specific UI design conventions for fintech and healthcare applications?

Yes, there are specific UI design conventions for fintech, healthcare, e-commerce, and SaaS applications that offer tailored patterns to address sector-specific interface requirements and user expectations.

What are common UI anti-patterns to avoid in frontend development?

Common UI anti-patterns to avoid in frontend development include recognized design mistakes in layout structures and component configurations that degrade user experience and interface usability.

Can I use these web design patterns for e-commerce product pages?

Yes, you can use these web design patterns for e-commerce product pages because the reference library includes sector-specific guidance tailored to e-commerce conventions alongside general layout and component patterns.

Do I need a component library to implement these UI design patterns?

No, you do not need a component library to implement these UI design patterns since the reference provides structural templates and guidelines that can be applied directly within your existing frontend development workflow.