前端开发
josiahsiegel/cl…ketplace
Tailwind CSS advanced layout techniques including CSS Grid and Flexbox patterns. PROACTIVELY activate for: (1) building complex layouts with CSS Grid, (2) grid-template-areas via Tailwind v4 arbitrary values, (3) responsive grid (grid-cols-*, auto-fit, minmax), (4) Flexbox patterns (flex-1, flex-grow, gap), (5) sticky headers and footers, (6) holy grail layout, (7) masonry-style layouts, (8) container queries (@container) with Tailwind, (9) subgrid usage, (10) aspect-ratio utilities, (11) magazine-style multi-column layouts. Provides: Grid template recipes, container-query patterns, holy-grail templates, masonry alternatives, and aspect-ratio examples.
安装命令
npx skills add https://github.com/josiahsiegel/claude-plugin-marketplace --skill tailwindcss-advanced-layouts<!-- Holy Grail Layout -->
<div class="grid min-h-screen grid-rows-[auto_1fr_auto]">
<header class="bg-white shadow">Header</header>
<div class="grid grid-cols-[250px_1fr_300px]">
<aside class="bg-gray-50 p-4">Sidebar</aside>
<main class="p-6">Main Content</main>
<aside class="bg-gray-50 p-4">Right Sidebar</aside>
</div>
<footer class="bg-gray-800 text-white">Footer</footer>
</div>