CSS Layout Development Skill

Purpose

This skill provides prescriptive guidance for writing modern CSS layouts using intrinsic design principles, container queries, and fluid responsive techniques. When implementing CSS layouts, always consult this document first.

Core Decision Framework

When Starting Any Layout Task

1. Identify the layout type needed:

   • Stack: Vertical flow with consistent spacing
   • Cluster: Horizontal items that wrap
   • Sidebar: One intrinsic width column, one flexible
   • Grid: Multiple columns that adapt to space
   • Frame: Aspect ratio enforcement

2. Determine responsiveness strategy: