What problem does it solve?
Designing premium agency-style landing pages often results in flat, generic card-grid layouts with weak visual hierarchy. This Skill provides a complete design-system direction built on nested containers so every page has clear outer-to-inner structure, depth, and editorial polish.
Core Features & Use Cases
- Nested container hierarchy: Defines an outer editorial shell with vertical rails and corner markers, inset dark rounded feature blocks, and premium inner cards with gradient borders.
- Full design-system scope: Covers page shell, section framing, pricing blocks, call-to-action areas, typography, spacing rhythm, and restrained accent color usage.
- Tuning guidance: Provides explicit knobs for nesting depth, contrast balance, corner radius, accent strength, and container density, plus an anti-pattern list to avoid flat or overdecorated results.
- Use Case: Recreate or remix a reference landing page such as the included Squish demo, producing a responsive standalone HTML page with masked text reveals, calm fade-ins, and a WebGL animated background.
Quick Start
Use the nested-container-clean-agency skill to build a responsive agency landing page with an outer framed shell, an inset dark feature section, and rounded premium cards.
