AutoGineer
Generated banner for Container Lines
Generated logo for Container Lines

Container Lines

Meng ToCommunityCreated by Meng To

  • Skill
  • Guidelines
  • Software development
  • MIT
  • Medium risk
Download ZIP

From the author

Add vertical container-size guide lines with mini corner squares for precise, structured web layouts. Use when asked for container lines, measured layout guides, vertical boundary lines, editorial grid markers, or small corner-square frame details.
— the description by Meng To

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides a standardized approach to adding technical, editorial-style grid markers to web layouts. By using CSS pseudo-elements and specific container logic, it allows developers to draw thin vertical lines and corner squares that frame content without interfering with user interaction. The system emphasizes subtle visual tension, ensuring that layout guides remain unobtrusive while providing a precise, measured aesthetic for hero sections or main content areas.

What it does

  • Defines CSS variables for consistent container widths and line styling.
  • Implements vertical boundary lines using pseudo-elements on a layout shell.
  • Provides a structure for adding mini corner squares to section intersections.
  • Ensures layout guides are non-interactive by disabling pointer events.
  • Maintains alignment between content containers and visual guide markers.
  • Offers best practices for maintaining visual subtlety and layout consistency.

When to use it

  • When a web page requires subtle vertical guides to define content boundaries.
  • To add structural tension to hero sections or product pages that feel too loose.
  • When the design calls for a technical, measured, or industrial aesthetic.
  • To implement editorial-style grid markers or corner frame details.

Advantages

  • Non-intrusive design that does not block UI interactions.
  • Highly consistent visual system across different page sections.
  • Uses lightweight CSS without requiring heavy external dependencies.
  • Provides a clean, professional, and structured look for web layouts.

Usage examples

“Add vertical container lines to my main layout shell.”
The agent applies the .container-lines class to the main element and sets up the CSS pseudo-elements to draw thin vertical lines aligned with the content container.
“How can I add corner markers to my hero section?”
The agent provides the .corner-squares HTML structure and the corresponding CSS to place small squares at the corners of the section.

Install

  1. Download the skill as a ZIP:

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

  2. Unzip it into the cross-client skills folder of your project:

    mkdir -p .agents/skills && unzip container-lines.zip -d .agents/skills

Documentation by Meng To

Container Lines

Use When

  • A page needs subtle vertical guides that reveal the content container width.

  • A hero, section, or product page feels too loose and needs structural tension.

  • The design calls for mini corner squares, measured edges, or quiet technical framing.

Rules

  1. Draw lines at the left and right edges of the main content container.

  2. Keep lines thin: 1px with low opacity.

  3. Add mini squares at container corners or section intersections.

  4. Keep the line system consistent across sections; do not change width per section.

  5. Place lines behind content but above the page background.

  6. Disable pointer events so the guides never block UI.

Base Tokens

:root {
  --container-max: 1120px;
  --container-pad: clamp(20px, 4vw, 48px);
  --line-color: rgba(24, 24, 27, 0.14);
  --line-strong: rgba(24, 24, 27, 0.28);
  --corner-size: 6px;
}

Page Container Lines

Use pseudo-elements on the layout shell.

.container-lines {
  position: relative;
  isolation: isolate;
}

.container-lines::before,
.container-lines::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: -1;
  width: 1px;
  background: var(--line-color);
  pointer-events: none;
}

.container-lines::before {
  left: max(var(--container-pad), calc((100vw - var(--container-max)) / 2));
}

.container-lines::after {
  right: max(var(--container-pad), calc((100vw - var(--container-max)) / 2));
}

Corner Squares

Add four small squares to sections that need a precise measured feel.

.corner-squares {
  position: relative;
}

.corner-squares > .corner {
  position: absolute;
  width: var(--corner-size);
  height: var(--corner-size);
  background: var(--line-strong);
  pointer-events: none;
}

.corner.top-left { top: 0; left: 0; transform: translate(-50%, -50%); }
.corner.top-right { top: 0; right: 0; transform: translate(50%, -50%); }
.corner.bottom-left { bottom: 0; left: 0; transform: translate(-50%, 50%); }
.corner.bottom-right { right: 0; bottom: 0; transform: translate(50%, 50%); }
<main class="container-lines">
  <section class="corner-squares">
    <span class="corner top-left"></span>
    <span class="corner top-right"></span>
    <span class="corner bottom-left"></span>
    <span class="corner bottom-right"></span>
    ...
  </section>
</main>

Minimal Section Wrapper

Use the same container width as the line positions.

.content-container {
  width: min(100% - (var(--container-pad) * 2), var(--container-max));
  margin-inline: auto;
}

Taste Rules

  • Use lines as structure, not decoration. They should organize the page quietly.

  • Do not add lines to every nested component; keep them at page or major-section level.

  • Mini squares should be small and exact, usually 4px to 8px.

  • Avoid bright accent colors unless the entire visual system is technical or industrial.

  • Keep container max-width and padding shared between content and guide lines.

Quick Checks

  • The vertical lines align exactly with the content container edges.

  • Corner squares sit on real container or section corners, not arbitrary positions.

  • Lines remain subtle on light and dark backgrounds.

  • Mobile still has enough padding between the line and content.

  • Guides do not intercept clicks, hovers, or text selection.

Files

LICENSE

MIT License

Copyright (c) 2026 Meng To

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

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/container-lines · 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 container-lines.zip