Border divider patterns
Skill Dragoon0x/everything-design-taste/skills/border-divider-patterns
Border usage, divider patterns, and visual separation techniques in UI design.From its SKILL.md
npx -y skills add Dragoon0x/everything-design-taste --skill border-divider-patternsAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 9 stars9 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
SKILL.md
1.3 KB, 254 tokens by cl100k_base, as published. Nobody here has run it
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).
What ships with it
Read from the repository
Just SKILL.md. No reference files, no scripts.