What types of layouts does this Claude Code skill support?

It supports a wide variety of patterns including sidebar-based admin dashboards, stacked marketing layouts, multi-column application shells, and full-width content structures.

How does it handle sticky headers and footers?

It provides standardized utility class patterns for sticky and fixed positioning, including backdrop-blur effects and z-index stacking order management.

Does it include mobile-responsive strategies?

Yes, it provides specific breakpoint strategies (lg, sm, etc.) for converting desktop sidebars into off-canvas mobile menus and handling responsive padding and grid columns.

Can I use this for complex CSS Grid layouts?

Absolutely. It includes patterns for 12-column asymmetric grids, auto-fit card grids, and layered grid positioning for overlapping elements.

Are the navigation components accessible?

The skill emphasizes accessibility by using semantic HTML tags and recommending Headless UI patterns for components like Dialogs, Tabs, and Disclosures.

Tailwind Layout Architect

Name: Tailwind Layout Architect
Author: peixotorms

bypeixotorms

0•

디자인 도구

Implements responsive application shells, navigation systems, and advanced grid structures using Tailwind CSS best practices.

The tailwind-layouts skill provides Claude with a comprehensive library of production-ready structural patterns for building modern web interfaces. It covers everything from complex dashboard shells and multi-column layouts to accessible navigation components like breadcrumbs, pagination, and tab systems. By leveraging specific utility class combinations and mobile-first responsive strategies, this skill ensures that generated frontend code is structurally sound, performant, and follows high-quality Tailwind CSS implementation standards for both desktop and mobile environments.

주요 기능

01Advanced CSS Grid and Flexbox configurations for asymmetric and auto-fitting layouts

020 GitHub stars

03Mobile-first responsive breakpoint logic and consistent spacing scales

04Sticky and fixed positioning strategies with standardized z-index management

05Accessible navigation patterns for breadcrumbs, pagination, and multi-level menus

06Responsive application shell skeletons including sidebar and stacked layouts

사용 사례

01Building complex SaaS admin dashboards with collapsible sidebars and off-canvas mobile menus

02Implementing data-heavy layouts using asymmetric grids and fixed-header tables

03Creating responsive marketing site structures with sticky headers and constrained content areas

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add peixotorms/odinlayer-skills tailwind-layouts

For use in Claude.ai and ChatGPT

Download Skill