Are the patterns specific to certain industries?

Absolutely, it features tailored patterns for specialized sectors including Fintech, Healthcare, E-commerce, and SaaS applications.

What is 'vibe-coding' in UI development?

Vibe-coding refers to AI generating generic, often inconsistent or impractical interfaces based on vague prompts; this skill prevents it by providing structured, proven patterns.

Does this skill help with accessibility standards?

Yes, it includes specific guidance for WCAG compliance, high-contrast modes, and minimum touch target sizes to ensure inclusive design.

What components are included in the library?

The library covers layouts (heroes, navbars), UI components (buttons, forms, cards), and feedback systems like toast notifications and alert banners.

Design Patterns Library

Name: Design Patterns Library
Author: Claude-Code-Community-Ireland

byClaude-Code-Community-Ireland

•

Design Tools

Provides a curated library of proven UI patterns and sector-specific conventions to ensure Claude generates high-quality, production-ready frontend designs.

This skill equips Claude with a robust reference library of industry-standard design patterns, moving beyond generic "vibe-coded" interfaces to professional-grade UI. It includes structured guidance for layouts like hero sections and navigation, component-level patterns for buttons and forms, and specialized conventions for sectors like Fintech, Healthcare, and SaaS. By establishing clear guardrails and providing anti-pattern warnings, it helps developers maintain visual consistency and high UX standards across their web applications.

Key Features

01Accessibility-first guidance including WCAG contrast and touch target standards.

02Sector-specific design conventions for Fintech, Healthcare, E-commerce, and SaaS.

03Curated layout patterns for heroes, navigation, and dashboards.

04Standardized component templates for buttons, forms, and feedback elements.

05Comprehensive anti-pattern library to avoid common UI pitfalls and generic styling.

066 GitHub stars

Use Cases

01Scaffolding professional landing pages for SaaS or E-commerce projects.

02Ensuring consistent UI/UX across a large-scale frontend application development.

03Implementing industry-compliant interfaces for high-stakes sectors like Fintech or Health.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add claude-code-community-ireland/claude-code-resources design-patterns

For use in Claude.ai and ChatGPT

Download Skill