Skip to content
Get packs

Nested Container Clean Agency

Guides the agent to build clean, premium agency web layouts using nested containers and restrained accents.

Source Download skill
Repository
MengTo/Skills
Stars
7,187
Licence
MIT
Files
4 files

What it does

This skill gives an AI agent a specific visual style for web pages: a light outer page frame with thin rails and corner markers, dark rounded feature blocks placed inside it, and smaller premium cards nested within those blocks. Once installed, when asked to design a landing page or pricing section, the agent follows these layering and spacing rules instead of producing a flat grid of cards. It is a set of design instructions rather than a tool that builds anything by itself.

Great for

  • Designers or front-end developers who want a consistent premium agency look for landing pages
  • Teams prototyping marketing sites or pricing pages who want a defined layout direction
  • Anyone asking an AI agent for a polished, editorial-style web layout

Skip it if

  • Dense data dashboards or admin tools, since the nested-shell style adds visual framing that would waste space (the skill targets marketing-style pages)
  • Projects with an existing strict brand or design system, which this style would override rather than follow

Try asking

  • “Design a pricing page for my software product using a clean agency style with a dark featured plan block”
  • “Create a services section with nested rounded cards inside a light editorial page shell”
  • “Redesign our homepage hero with a bordered outer container and an inset dark feature area”
Step-by-step guide: how to use Nested Container Clean AgencyInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 4 original files, the MIT licence and an attribution note.

    nested-container-clean-agency.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip nested-container-clean-agency.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip nested-container-clean-agency.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Name the sections you want (pricing, features, CTA) so the agent applies the nested-shell pattern where it matters
  • Specify your accent colour and brand fonts up front, since the skill asks for restrained accent use but does not define them
  • Review the generated HTML in a browser, as the agent may need several passes to get spacing right

What's inside

  • demo/index.html
  • demo/PROMPT.md
  • demo/source.json
  • SKILL.md

Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.