Guide · Agent skill
How to use the Container Lines Layout Guides agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The container-lines skill teaches an AI agent a specific CSS technique: thin, faint vertical lines that mark the edges of the main content column, plus small square markers at section corners. It is written for front-end designers and developers who want a quiet, technical, blueprint-like structure on a landing page, hero or product page. After this guide you will know what the skill does, how to install it, how to ask for it in plain language, and what to check before shipping the result.
Container Lines Layout GuidesMengTo/Skills · MIT Download the skill Quick start
- 1Download the ZIP. Get the container-lines ZIP from the skill's page on this directory.
- 2Unzip the folder. Extract the archive so you have a container-lines folder containing SKILL.md and the demo folder.
- 3Place the skill. Move the folder to ~/.claude/skills/ for personal use or to .claude/skills/ inside a project, or upload it under Settings → Capabilities → Skills in the Claude apps.
- 4Make a natural request. Ask for container lines, measured layout guides or corner squares, and name the page section you want them on.
- 5Review the output. Run the quick checks on alignment, corner placement, dark mode, mobile padding and click-through.
What the container-lines skill makes the agent do
Agent skills are folders of instructions that an AI agent can load when a task matches them. This one covers a single visual pattern: guide lines that reveal the width of the main content container. When you ask for this style, the agent draws a 1px line at the left and right edges of the content container at low opacity, and places mini squares at container or section corners.
The skill also supplies reusable building blocks: a set of base CSS variables (such as --container-max set to 1120px, --container-pad, --line-color and --corner-size), a class for the lines, classes for the corner squares, a minimal section wrapper, and an HTML pattern. The agent can reuse these when you ask for the style.
- Vertical lines at the left and right edges of the main content container
- Thin 1px lines with low opacity, placed behind content but above the page background
- Four small corner squares, usually 4px to 8px, on sections that need a measured feel
- Lines that do not block clicks, hovers or text selection
Install the container-lines skill
Download the ZIP from the skill's page on this directory and unzip it. The skill is a folder that contains SKILL.md, plus a demo folder with index.html, PROMPT.md and source.json. Place the unzipped container-lines folder in one of these locations, depending on how you use your agent:
For a personal setup, put it in ~/.claude/skills/. For a single project, put it in the project's .claude/skills/ folder. Alternatively, in the Claude apps, open Settings, go to Capabilities, and upload the skill under Skills.
- Personal: ~/.claude/skills/container-lines
- Project: .claude/skills/container-lines inside your project folder
- Claude apps: Settings → Capabilities → Skills, then upload the skill
Trigger the skill with natural requests
You do not need a special command. The skill's description lists the kinds of request it matches, so phrases like container lines, measured layout guides, vertical boundary lines, editorial grid markers or corner-square frame details should lead the agent to use it. The demo prompts in the package also show the pattern of naming the skill directly, for example by writing $container-lines in your request.
Be specific about the page. Name the section (hero, product page, landing page), the mood you want, and whether the page should look editorial or technical. The more context you give, the more the agent can match the skill's rules to your design.
- "Use container lines on this hero section so the content width is visible."
- "Add measured layout guides and corner squares to the product page."
- "Use $container-lines to build a responsive standalone HTML landing page."
Example: a structured landing page
Suppose you want a technical-looking landing page for a product. Ask the agent for a responsive standalone HTML page, mention the content sections, and ask for container lines and corner squares on the hero and feature section. The agent should apply the base tokens, put the container-lines class on the main layout shell, and wrap the feature section in corner-squares with four corner spans.
Keep the request to major sections. The skill advises against adding lines to every nested component, so ask for the guides at page or major-section level only.
<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>Check the result against the skill's checklist
The skill includes quick checks you can ask the agent to run. Lines should align exactly with the content container edges. Corner squares should sit on real container or section corners. The lines should stay subtle on both light and dark backgrounds, and mobile layouts should keep enough padding between the line and the content.
The skill's own rules say production sites need verification on mobile and in dark mode, so treat these as required checks before launch.
- Lines align with the content container edges
- Corner squares sit on real corners, not arbitrary positions
- Lines stay subtle on light and dark backgrounds
- Mobile keeps enough padding between line and content
- Guides do not intercept clicks, hovers or text selection
Safety notes: scripts and network access
According to the skill's listing, container-lines does not run scripts and does not use the network. It lists no required dependencies. The skill is a set of instructions and CSS patterns, so it does not need to fetch anything from the internet to work.
The skill is published under the MIT licence. Read the SKILL.md file yourself before installing any skill, as with any instructions an agent will follow.
What people use it for
- Adding a subtle content-width guide to a hero section on a landing page
- Giving a product page a measured, blueprint-like structure
- Building a responsive standalone HTML page with editorial grid markers
- Framing a feature section with four corner squares
Frequently asked questions
How do I install the container-lines skill?
Download the ZIP from the skill's page, unzip it, and place the container-lines folder in ~/.claude/skills/ for personal use or in a project's .claude/skills/ folder. In the Claude apps you can instead upload it under Settings → Capabilities → Skills.
Does container-lines need any requirements or dependencies?
The listing states that it requires nothing and lists no dependencies. It runs no scripts and does not use the network.
Is container-lines free to use?
The skill is published under the MIT licence, as stated on its listing. Check the licence file in the package for the full terms.
What is the difference between container lines and a normal CSS grid?
A CSS grid lays out content, while container lines are visual guides drawn on top of or behind the page to show where the content container edges sit. The skill draws thin 1px lines at the container edges and places small squares at corners, with pointer-events disabled so they never block interaction.
Why are my lines not aligned with my content?
The skill's rules require the lines and the content to share the same container max-width and padding. Ask the agent to use the shared --container-max and --container-pad variables for both the guide lines and the content wrapper, then check alignment again.
Is this skill suitable for a bright or playful website?
Not really. The skill advises against bright accent colours unless the whole visual system is technical or industrial, so it suits editorial or technical-looking pages better than bold, colourful ones.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use container-lines if you want a quiet, technical, structured look on a landing, hero or product page and want a ready CSS pattern for visible container guides. Pick something else if you need a bold, colourful or playful style, or if you cannot spend time checking mobile and dark mode before launch.
Download the skill