← All skills

Nested container frames

Create a container-in-container layout system using nested frames.

Layout and gridsMeng ToMIT

Install

npx degit MengTo/Skills/agent-skills/web-design/nested-container-frames .claude/skills/nested-container-frames

Run it in your project root, then ask your agent for what you want. More detail

What it does

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.

Straight from the skill's own SKILL.md. This is what your agent reads.