Loading...
Loading...
Reference library of proven UI design patterns, component templates, and sector-specific conventions for high-quality design generation.
npx skill4agent add claude-code-community-ireland/claude-code-resources design-patterns┌─────────────────────────────────────────────┐
│ [Content] [Media] │
│ Headline Image/Video/ │
│ Subhead Illustration │
│ CTA Buttons │
└─────────────────────────────────────────────┘┌─────────────────────────────────────────────┐
│ [Eyebrow Badge] │
│ Headline │
│ Subhead │
│ [CTA] [Secondary] │
│ [Social Proof] │
└─────────────────────────────────────────────┘┌─────────────────────────────────────────────┐
│ [Product Image - Large, High Quality] │
│ ───────────────────────────────────────── │
│ Product Name Price │
│ Brief Description [Add to Cart] │
│ [Feature Icons] │
└─────────────────────────────────────────────┘┌─────────────────────────────────────────────┐
│ [Logo] Nav Items... [CTA] [Account] │
└─────────────────────────────────────────────┘┌─────────────────────────────────────────────┐
│ [Logo] │ Page Content │
│ ─────────────── │ │
│ Nav Item 1 │ │
│ Nav Item 2 │ │
│ Nav Item 3 │ │
│ │ │
│ [Collapsed User] │ │
└─────────────────────────────────────────────┘┌─────────────────┐
│ [Image] │
│ Category │
│ Title │
│ Description... │
│ [Meta] [Action] │
└─────────────────┘┌─────────────────┐
│ [Icon] │
│ Feature Name │
│ Description │
│ that explains │
│ the benefit. │
└─────────────────┘┌─────────────────┐
│ Plan Name │
│ $XX/mo │
│ Description │
│ ─────────────── │
│ ✓ Feature 1 │
│ ✓ Feature 2 │
│ ✓ Feature 3 │
│ [CTA Button] │
└─────────────────┘<div class="form-group">
<label for="input">Label</label>
<input type="text" id="input" placeholder="Placeholder">
<span class="hint">Helper text</span>
</div>┌────────────────────────────┐
│ [Icon] Message text [X] │
└────────────────────────────┘┌──────────────────────────────────────────┐
│ [Icon] Alert message with more details. │
│ [Action Link] [X] │
└──────────────────────────────────────────┘