Run any Skill in Manus with one click

Get Started

border-divider-patterns

Stars6

Forks1

UpdatedApril 11, 2026 at 05:29

Border usage, divider patterns, and visual separation techniques in UI design.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

Dragoon0x

Dragoon0x/everything-design-taste

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web and Digital Interface DesignersComputer and Mathematical Occupations·SOC 15-1255

SKILL.md

readonly

name	border-divider-patterns
description	Border usage, divider patterns, and visual separation techniques in UI design.
triggers	["border","divider","separator","visual separation"]

Border Divider Patterns

Separation Methods

Method	When	Example
White space	Default, sufficient for most cases	Section gaps
Background change	Large sections, obvious grouping	Alternating row colors
Border/line	Tight spaces, clear delineation needed	Table rows, list items
Shadow	Overlapping elements, elevation	Cards on a surface
Color band	Strong visual break, decorative	Section dividers

Border Rules

1px is usually enough. 2px for emphasis only.
Use semantic color tokens. --color-border-default, --color-border-strong.
Don't border everything. White space often works better.
Consistent style. Solid throughout, or dashed for a specific meaning (drag targets, optional areas).
Radius matches the system. Don't mix sharp and rounded borders.

Divider Rules

Full-width dividers for major section breaks.
Inset dividers (indented from edges) for related list items.
Vertical dividers sparingly (toolbar groups, split panels).
Never stack dividers and spacing (use one or the other).

More from this repository

same repository

ab-testing-design

Dragoon0x/everything-design-taste

A/B test design, experiment setup, variant design, and statistical analysis for designers.

2026-04-116

accessibility-deep-patterns

Dragoon0x/everything-design-taste

Advanced accessibility patterns including ARIA, screen reader optimization, cognitive accessibility, and motor impairment design.

2026-04-116

accessibility-deep

Dragoon0x/everything-design-taste

WCAG compliance deep dive, screen reader patterns, keyboard navigation, and inclusive design.

2026-04-116

accordion-patterns

Dragoon0x/everything-design-taste

Accordion and collapsible content patterns, FAQ layouts, and progressive disclosure.

2026-04-116

ai-product-design

Dragoon0x/everything-design-taste

Designing AI-powered features, managing user expectations, and AI transparency.

2026-04-116

analytics-for-designers

Dragoon0x/everything-design-taste

Using analytics tools for design decisions, behavioral analysis, and data-informed design.

2026-04-116

name	border-divider-patterns
description	Border usage, divider patterns, and visual separation techniques in UI design.
triggers	["border","divider","separator","visual separation"]

Border Divider Patterns

Separation Methods

Method	When	Example
White space	Default, sufficient for most cases	Section gaps
Background change	Large sections, obvious grouping	Alternating row colors
Border/line	Tight spaces, clear delineation needed	Table rows, list items
Shadow	Overlapping elements, elevation	Cards on a surface
Color band	Strong visual break, decorative	Section dividers

Border Rules

1px is usually enough. 2px for emphasis only.
Use semantic color tokens. --color-border-default, --color-border-strong.
Don't border everything. White space often works better.
Consistent style. Solid throughout, or dashed for a specific meaning (drag targets, optional areas).
Radius matches the system. Don't mix sharp and rounded borders.

Divider Rules

Full-width dividers for major section breaks.
Inset dividers (indented from edges) for related list items.
Vertical dividers sparingly (toolbar groups, split panels).
Never stack dividers and spacing (use one or the other).