AutoGineer
Generated banner for Nested Container Frames
Generated logo for Nested Container Frames

Nested Container Frames

Meng ToCommunityCreated by Meng To

  • Skill
  • Guidelines
  • Design and creative
  • MIT
  • Medium risk
Download ZIP

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

  1. Download the skill as a ZIP:

    https://autogineer.com/agent-skills/mengto/nested-container-frames/download

  2. 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

  1. Define an outer centered container that controls the global page width.

  2. Add visible vertical boundary lines and small corner markers to establish the frame.

  3. Place inner containers inset from the outer edges using consistent padding.

  4. Give each inner level its own background, border, radius, and spacing rhythm.

  5. 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

demo/PROMPT.md

Nested Container Frames Demo Prompts

Minimal prompt

Use $nested-container-frames to create a responsive standalone HTML design with the same visual confidence, hierarchy, and interaction finish as the included Neuform reference.

Recreate the demo

Use $nested-container-frames to recreate the design quality and behavior of Squish — Turn Your Ideas Into Stunning Visuals as a complete responsive HTML document. Treat the included demo/index.html as the visual and interaction reference, not as a loose mood board.

Product brief

  • Page concept: Squish — Turn Your Ideas Into Stunning Visuals.

  • Purpose: Squish Turn Background Effect is designed for delivering a visual treatment or immersive background effect. Key features include atmospheric visuals, motion depth, and flexible presentation layering. It is suitable for visual-first pages, motion studies, and atmospheric hero treatments.

  • Content anchors: Turn Your Ideas Into Stunning Visuals.

  • Useful subject tags: section, animated, webgl, threejs, dither, effect, billing, branding.

Skill direction

  • 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.

Fidelity target

  • Match the reference's composition, information density, type scale, spacing rhythm, surface treatment, color relationships, and motion restraint.

  • Preserve the strongest interaction and animated background behavior instead of replacing it with generic fades or decorative movement.

  • Keep the first screen art-directed, then carry the same design logic through every supporting section.

  • Make the result responsive from mobile to desktop, keyboard accessible, and stable when reduced motion is enabled.

  • Deliver a full index.html. Put page-owned images, video, models, and textures in demo/assets/. External runtime libraries may stay as pinned CDN dependencies when the source relies on them.

Reference snapshot

Remix prompt

Use $nested-container-frames and the included Neuform demo as the quality bar, but replace the brand, subject, copy, palette, and content. Preserve the underlying layout logic, signature visual treatment, interaction choreography, responsive behavior, and performance constraints so the remix still clearly demonstrates the skill.

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.

Attribution and licence

Created by
Meng To
Publisher
Meng To (Community)
Source
MengTo/Skills · agent-skills/web-design/nested-container-frames · commit 5ea1661
Licence
MIT License (redistribution allowed)
  • LICENSE (added by AutoGineer from LICENSE)
  • ATTRIBUTION.md (written by AutoGineer)
Synced

AutoGineer is not affiliated with or endorsed by Meng To or Meng To.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download nested-container-frames.zip