skills.rest
hongmaple0820
hongmaple0820COMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/hongmaple0820/agent-academy --skill designing-layouts-hongmaple0820
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
Harmeet10000Harmeet10000
7

new-modular-project

Initialize Mojo or MAX projects with Pixi or UV environment scaffolding.

Community
Advanced
andronicsandronics
1

layout-builder

Generate production-ready CSS layouts with Flexbox and CSS Grid.

Community
Advanced
HuijiroHuijiro

impeccable-normalize

Audit and realign UI components to match design system tokens, spacing, and patterns.

Community
Advanced
Higashi-KotaHigashi-Kota

styling

Standardize CSS styling with design tokens and grid-first layouts.

Community
Basic