skills.rest
langgenius
langgeniusOFFICIAL
Explore all skills by this author →
Website𝕏@dify_aiGitHub

container-lines

Adds vertical container guide lines and corner squares to web layouts using CSS.

3|Updated Apr 20, 2026
Search Tags:#layout#frontend#css#web design#container#guide lines#corner squares
One-click install
npx skills add https://github.com/langgenius/due-date-hq-jwl --skill container-lines-langgenius
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: container-lines
Source: https://github.com/langgenius/due-date-hq-jwl/tree/main/.claude/skills/container-lines
Command: npx skills add https://github.com/langgenius/due-date-hq-jwl --skill container-lines-langgenius

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Web pages often feel visually loose and unstructured, lacking the subtle structural framing that gives editorial and product layouts a precise, measured feel. ## Core Features & Use Cases - Vertical Container Guides: Draws thin 1px lines at the left and right edges of the main content container using CSS pseudo-elements. - Corner Squares: Places small 4-8px squares at container or section corners for a technical, measured aesthetic. - Shared Design Tokens: Keeps container max-width, padding, and line colors consistent across sections via CSS custom properties. - Use Case: A designer building a landing page hero that feels too loose can apply the container-lines pattern to add quiet structural tension without changing the content layout. ## Quick Start Add vertical container guide lines with small corner squares to my landing page hero section using the container-lines CSS pattern.

Frequently Asked Questions about container-lines

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add vertical guide lines to a web page container?▼

Use ::before and ::after pseudo-elements on a layout shell, positioned absolutely at the left and right container edges with 1px width and low opacity. Calculate offsets with max(padding, (100vw - max-width) / 2) so lines align with the content container.

How to create corner square markers with CSS?▼

Place small absolutely positioned span elements inside a relatively positioned section, sized 4px to 8px, and offset each with translate(-50%, -50%) style transforms so they sit exactly on the corners.

Why do decorative guide lines block clicks on my page?▼

Absolutely positioned overlay elements intercept pointer events by default. Set pointer-events: none on the guide lines and corner squares so they never block clicks, hovers, or text selection.

Do container guide lines work on mobile layouts?▼

Yes, as long as the line position uses the same responsive padding token as the content container, such as clamp(20px, 4vw, 48px). This keeps enough space between the line and content on small screens.

When should I avoid using container guide lines?▼

Avoid adding lines to every nested component; keep them at page or major-section level only. Also avoid bright accent colors unless the entire visual system is technical or industrial in style.

Related Skills

Explore More Design & Creative Skills→
RzyfrontRzyfront
5

vendix-frontend-sticky-header

Implement sticky headers with positioning, z-index, and backdrop blur.

Community
Basic
KaiBoo404KaiBoo404

typeset

Audit and fix typography inconsistencies across responsive web interfaces.

Community
Intermediate
MengToMengTo
4.5k

framed-grid-layout

Generate framed web page grid layouts with 1px dividers and corner brackets.

Community
Basic
zinohomezinohome
1

tailwind-gradient-builder

Generate linear, radial, conic, and mesh CSS gradients with Tailwind CSS.

Community
Intermediate