Architects structured, visually compelling web layouts using modern CSS Grid, Flexbox, and advanced design hierarchy patterns.
The Layout and Composition skill provides Claude with a robust framework for building professional-grade web interfaces. It encompasses a wide range of CSS layout techniques, including 12-column grids, auto-fitting layouts, and the popular Bento grid style. Beyond simple positioning, the skill incorporates core design principles such as visual hierarchy, whitespace management, and reading pattern optimization (F and Z patterns). It is specifically designed to help developers move from basic structural HTML to sophisticated, production-ready layouts that maintain responsiveness through media queries and modern container queries.
주요 기능
01Visual hierarchy techniques based on size, contrast, and proximity
02Responsive design strategies including container queries and reflow patterns
03Modern Bento grid templates for feature showcases and dashboards
041 GitHub stars
05Standardized spacing scales and whitespace density guidelines
06Extensive library of CSS Grid and Flexbox implementation patterns
사용 사례
01Implementing modern, high-conversion feature grids and product galleries
02Designing data-heavy dashboards using 12-column grids and named grid areas
03Scaffolding responsive marketing landing pages with complex asymmetric layouts
