About nested-container-frames
A design skill for building page layouts from nested containers with visible outer bounds and inset inner frames. It helps designers structure hero, feature, proof, and CTA areas while keeping frames readable and avoiding excessive card nesting.
Key features
- 01Centered outer page container
- 02Visible boundary lines and corner markers
- 03Inset inner frames with consistent padding
- 04Distinct styling for each container level
- 05Frame hierarchy for page modules
Use cases
- 01Structuring a hero and supporting page sections
- 02Separating content modules without heavy cards
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/nested-container-framesin Claude Code to confirm it loaded.
Bundled files
References and scripts installed along with SKILL.md.
demo/index.htmlPROMPT.mdsource.jsonDetails
From the project READMENested 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.
Comments
Markdown supported