From vibeworks-library
Reference library of proven UI design patterns, component templates, and sector-specific conventions for high-quality design generation.
How this skill is triggered — by the user, by Claude, or both
Slash command
/vibeworks-library:skills/design-patternsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
This skill provides a curated library of proven design patterns that generate high-quality, non-vibe-coded UI.
This skill provides a curated library of proven design patterns that generate high-quality, non-vibe-coded UI.
Pattern 1: Split Hero Best for: SaaS, product landing pages
┌─────────────────────────────────────────────┐
│ [Content] [Media] │
│ Headline Image/Video/ │
│ Subhead Illustration │
│ CTA Buttons │
└─────────────────────────────────────────────┘
Pattern 2: Centered Hero Best for: Announcements, events, minimal designs
┌─────────────────────────────────────────────┐
│ [Eyebrow Badge] │
│ Headline │
│ Subhead │
│ [CTA] [Secondary] │
│ [Social Proof] │
└─────────────────────────────────────────────┘
Pattern 3: Product Showcase Best for: E-commerce, physical products
┌─────────────────────────────────────────────┐
│ [Product Image - Large, High Quality] │
│ ───────────────────────────────────────── │
│ Product Name Price │
│ Brief Description [Add to Cart] │
│ [Feature Icons] │
└─────────────────────────────────────────────┘
Top Navigation (Desktop)
┌─────────────────────────────────────────────┐
│ [Logo] Nav Items... [CTA] [Account] │
└─────────────────────────────────────────────┘
Sidebar Navigation (Dashboard)
┌─────────────────────────────────────────────┐
│ [Logo] │ Page Content │
│ ─────────────── │ │
│ Nav Item 1 │ │
│ Nav Item 2 │ │
│ Nav Item 3 │ │
│ │ │
│ [Collapsed User] │ │
└─────────────────────────────────────────────┘
Content Card
┌─────────────────┐
│ [Image] │
│ Category │
│ Title │
│ Description... │
│ [Meta] [Action] │
└─────────────────┘
Feature Card
┌─────────────────┐
│ [Icon] │
│ Feature Name │
│ Description │
│ that explains │
│ the benefit. │
└─────────────────┘
Pricing Card
┌─────────────────┐
│ Plan Name │
│ $XX/mo │
│ Description │
│ ─────────────── │
│ ✓ Feature 1 │
│ ✓ Feature 2 │
│ ✓ Feature 3 │
│ [CTA Button] │
└─────────────────┘
Primary Button
Secondary Button
Ghost Button
Input Field
<div class="form-group">
<label for="input">Label</label>
<input type="text" id="input" placeholder="Placeholder">
<span class="hint">Helper text</span>
</div>
Styling:
Toast Notification
┌────────────────────────────┐
│ [Icon] Message text [X] │
└────────────────────────────┘
Position: Top-right or bottom-center Duration: 3-5 seconds
Alert Banner
┌──────────────────────────────────────────┐
│ [Icon] Alert message with more details. │
│ [Action Link] [X] │
└──────────────────────────────────────────┘
Trust Indicators:
Data Display:
Color Guidance:
Accessibility Priority:
Information Hierarchy:
Color Guidance:
Product Display:
Trust & Conversion:
Urgency (use sparingly):
Onboarding:
Dashboard:
Pricing Page:
npx claudepluginhub Claude-Code-Community-Ireland/claude-code-resources --plugin vibeworks-libraryGenerates reusable UI patterns like card sections, grids, lists, forms, and chart wrappers from StyleSeed Toss primitives for consistent layouts across pages.
Use when building ANY user interface - web app, game, CLI, dashboard, landing page, or component - ensures all UI output references documented UX patterns instead of generating from assumptions, preventing the amateur look of AI-generated UI
Provides prioritized UI/UX guidelines for web and mobile apps covering accessibility, touch interactions, performance, responsive layouts, typography, color palettes, animations, style selection, and charts. Use for designing components, pages, or reviewing UX issues.