// Creates responsive portfolio galleries, project showcases, and image grid layouts. Use when building portfolio pages, creating image galleries, or designing project showcase sections. Handles lazy loading and responsive image optimization.
| name | portfolio-layouts |
| description | Creates responsive portfolio galleries, project showcases, and image grid layouts. Use when building portfolio pages, creating image galleries, or designing project showcase sections. Handles lazy loading and responsive image optimization. |
| allowed-tools | Read, Glob, Grep |
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))loading="lazy"<div class="portfolio-card">
<div class="image-wrapper">
<img src="thumb.jpg" loading="lazy" alt="Project name">
</div>
<div class="card-content">
<h3>Project Title</h3>
<p>Description</p>
<a href="#">Learn More</a>
</div>
</div>
Guides proper usage of Bootstrap 4.5.2 components (navbar, cards, buttons, modals, forms). Use when styling navigation, creating card layouts, building forms, or customizing Bootstrap components. Includes override patterns for custom styling.
Provides guidance on HTML/CSS best practices for responsive web design, Bootstrap integration, accessibility, and performance optimization. Use when building web pages, styling components, or improving web design quality.