Skip to content
Get packs

Container Lines Layout Guides

Adds thin vertical container guide lines and corner squares to give web layouts a measured, structured look.

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

What it does

When installed, the agent knows a specific CSS technique for web pages: thin, faint vertical lines marking the edges of the main content column, plus tiny square markers at the corners of sections. These add a quiet, technical, blueprint-like structure to a page. The skill supplies ready-made CSS variables, classes and an HTML pattern the agent can reuse when you ask for this style.

Great for

  • Front-end designers building editorial or technical-looking landing pages
  • Developers who want a ready CSS pattern for visible grid or container guides
  • Anyone asking an agent to make a hero or product page feel more structured

Skip it if

  • Sites that need a bold, colourful or playful look, since the skill advises against bright accents (not useful for that style)
  • Production sites that have not been checked on mobile and dark mode, because the skill's own checklist says these need verification

Try asking

  • “Add container guide lines to my landing page so the content width is visible.”
  • “Put small corner squares on the hero section for a measured, technical feel.”
  • “Update the layout shell with the container-lines CSS and keep the same width across all sections.”
Step-by-step guide: how to use Container Lines Layout GuidesInstall, 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.

    container-lines.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

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

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip container-lines.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

  • Ask the agent to match the --container-max value to your existing content container so the lines align exactly.
  • Check the result on mobile and in dark mode, as the skill's quick checks recommend.
  • Use it at page or major-section level only; the skill warns against adding lines to every nested component.

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.