designing-layouts

SKILL.md

This skill provides comprehensive guidance for creating responsive layout systems using modern CSS techniques. It covers grid systems, flexbox patterns, container queries, spacing systems, and mobile-first design strategies to build flexible, accessible interfaces that adapt seamlessly across devices.

For structured, two-dimensional layouts, use CSS Grid with design tokens.

For complex grid layouts and advanced patterns, see references/layout-patterns.md.

グリッド システム、フレックスボックス パターン、サイドバー レイアウト、レスポンシブ ブレークポイントなどのレイアウト システムとレスポンシブ インターフェイスを設計します。アプリのレイアウトを構築するとき、レスポンシブ デザインを構築するとき、または複雑なページ構造を作成するときに使用します。 ソース: ancoleman/ai-design-components。

原文を見る