designing-layouts

Create responsive web layouts using grid, flex, and container queries.

9|2|Updated Mar 12, 2026

Search Tags:#layout #css #responsive #grid #design-tokens #container-queries

Ready to run

npx skills add https://github.com/hongmaple0820/agent-academy --skill designing-layouts-hongmaple0820

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: designing-layouts
Source: https://github.com/hongmaple0820/agent-academy/tree/main/skills/design/designing-layouts
Command: npx skills add https://github.com/hongmaple0820/agent-academy --skill designing-layouts-hongmaple0820

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) and references (resource) and scripts (resource) components.

What problem does it solve?

Designing scalable, maintainable, and accessible layout systems for modern web apps is complex; this skill provides patterns, tokens, and examples to streamline the process.

Core Features & Use Cases

Grid and flexbox patterns for robust, responsive layouts across devices.
Container queries and spacing design tokens to maintain consistency and accessibility.
Real-world use cases include admin dashboards, multi-panel apps, documentation sites, and responsive shells.

Quick Start

Start by reviewing the provided patterns and scaffolding to implement a responsive admin layout in your project, then adapt the examples to your app structure.

Frequently Asked Questions about designing-layouts

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I build a responsive layout for a multi-panel admin dashboard?▼

Build a responsive admin layout by applying grid and flexbox patterns with mobile-first breakpoints. This approach ensures complex multi-panel web apps scale properly across devices using structured design tokens for consistent spacing.

What is the best way to use container queries for scalable web layouts?▼

Container queries allow components to respond to their parent container size rather than the viewport. Using container queries with spacing design tokens maintains visual consistency and accessibility across independent UI panels.

How do I manage spacing design tokens for consistent CSS layouts?▼

Manage spacing design tokens by defining structured metadata values that standardize padding and margins across the application. This enforces visual consistency and accessibility throughout responsive grid and flexbox patterns.

Can I use this metadata-driven workflow for scaffolding responsive shells?▼

Yes, you can use the provided scaffolding to implement responsive shells and layouts. The workflow enforces structure using YAML frontmatter, explicit assets, references, and scripts to streamline multi-panel app development.

When should I use CSS grid versus flexbox patterns for responsive web apps?▼

Use CSS grid for two-dimensional multi-panel dashboard layouts and flexbox for one-dimensional component alignment. Both patterns are provided to handle robust responsive behavior across admin dashboards and documentation sites.