Nested Container Frames — Agent Skill by Meng To

From the author

Create a container-in-container layout system using nested frames. Use an outer centered container with visible vertical boundary lines and corner markers. Inside, place inner containers inset from the edges, each with its own background and rounded frame. Technique: outer container defines global bounds, inner containers use padding to create inset spacing, layered frames (border + background) to separate levels, and consistent spacing between outer frame and inner blocks.

— the description by Meng To

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

The Nested Container Frames skill provides a structured workflow for creating sophisticated UI layouts that utilize a container-in-container design. By establishing a global outer frame with specific boundary markers and layering inner containers with consistent padding and styling, this approach helps designers and developers organize content into distinct modules like hero sections, features, and CTAs without relying on heavy card-based aesthetics.

What it does

Defines a centered outer container to manage global page width.
Adds visual boundary lines and corner markers to frame the layout.
Implements inset inner containers using consistent padding.
Applies unique backgrounds, borders, and radii to each nested level.
Establishes a rhythmic spacing system for hierarchical content separation.

When to use it

When you need to create a layered page structure with clear visual boundaries.
When you want to organize content modules without using traditional heavy card components.
When a design requires a clean, inset container-in-container aesthetic.

Advantages

Creates a clean, professional visual hierarchy.
Provides consistent spacing and alignment across different content modules.
Reduces visual clutter compared to standard card-based designs.
Clearly defines global page bounds while maintaining modular flexibility.

Usage examples

“Apply the nested container frames layout to my landing page hero and feature sections.”: The agent will structure the page with a centered outer frame, add boundary markers, and place the hero and feature content into inset containers with distinct background and border styling.

Install

Download the skill as a ZIP:
https://autogineer.com/agent-skills/mengto/nested-container-frames/download

Unzip it into the cross-client skills folder of your project:

mkdir -p .agents/skills && unzip nested-container-frames.zip -d .agents/skills

Documentation by Meng To

Nested Container Frames Skill

Use When

A layout needs a container-in-container system with visible outer bounds, inset inner frames, and layered page structure.

Workflow

Define an outer centered container that controls the global page width.
Add visible vertical boundary lines and small corner markers to establish the frame.
Place inner containers inset from the outer edges using consistent padding.
Give each inner level its own background, border, radius, and spacing rhythm.
Use the frame hierarchy to separate hero, feature, proof, and CTA modules without adding heavy cards.

Guardrails

Do not nest cards inside cards until the layout feels boxed in.
Do not let frame lines overpower content readability.

Files

ATTRIBUTION.mdAdded by AutoGineer868 B
LICENSELicence file added by AutoGineer1.0 KiB
SKILL.md1.3 KiB
demo/PROMPT.md2.9 KiB
demo/assets/page-01-2f563338-39fa-47ea-9761-658d4f3f84db-1600w.jpg292.0 KiB
demo/assets/page-02-4f5668c5-fc4a-44e0-bc5e-a664189d3c31-1600w.jpg212.3 KiB
demo/assets/page-03-77415a2e-dcbc-4748-a29d-fced4821881a-1600w.jpg354.2 KiB
demo/assets/page-04-c92852bb-a510-405a-85ab-ffa0fde136a4-1600w.jpg209.1 KiB
demo/assets/source-preview.jpg72.1 KiB
demo/index.html21.4 KiB
demo/preview.jpg54.3 KiB
demo/source.json3.2 KiB

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Security

What our scanner noticed· Medium risk

Large base64-encoded blobs

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Frontend Design
AnthropicOfficial
A framework for creating distinctive, intentional UI designs that avoid common templated aesthetics.
Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
Apache-2.0GitHub stars of the source repository188.6k
Theme Factory
AnthropicOfficial
A toolkit for applying professional color and font themes to documents, presentations, and web artifacts.
Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
Apache-2.0GitHub stars of the source repository188.6k
Brand Guidelines
AnthropicOfficial
Applies Anthropic's official brand colors and typography to digital artifacts.
Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
Apache-2.0GitHub stars of the source repository188.6k
Impeccable
Paul Bakaus· Community
A comprehensive design system and UI refinement tool for auditing, polishing, and evolving digital interfaces.
Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
Apache-2.0Low riskHas scriptsGitHub stars of the source repository105.3k
Diagram Design
Cathryn Lavery· Community
Generate branded, editorial-style technical diagrams as self-contained HTML, SVG, or PNG files.
Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
MITLow riskHas scriptsGitHub stars of the source repository65.6k
UI UX Designer
Seth Hobson· Community
An expert UI/UX designer focused on systematic, accessible, and research-backed interface creation.
Design and creativeClaude Code
MITGitHub stars of the source repository42.3k