skills.rest
tokijh
tokijhCOMMUNITY
Explore all skills by this author →
GitHub

use-design-system/Border

Create CSS-variable-based border components with configurable variants and heights.

Updated Aug 23, 2026
Search Tags:#layout#design system#ui component#divider#border#separator
One-click install
npx skills add https://github.com/tokijh/minapp --skill use-design-system-border
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: use-design-system/Border
Source: https://github.com/tokijh/minapp/tree/main/.claude/skills/use-design-system/subskills/Border
Command: npx skills add https://github.com/tokijh/minapp --skill use-design-system-border

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a standardized way to add visual separators and spacing between different sections or components in a user interface, improving layout clarity and user experience.

Core Features & Use Cases

  • Multiple Variants: Offers three distinct styles for different separation needs: a full-width border, a bordered section with horizontal padding, and a colored block for larger spacing.
  • Customizable Height: Allows adjustment of the separator's thickness or block height for fine-grained control.
  • Use Case: Use variant="height16" to add a subtle gray space between a user profile section and a settings section in a web application.

Quick Start

Add a full-width separator with the border skill.

Frequently Asked Questions about use-design-system/Border

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

FAQPage Schema
How do I visually separate content sections in a UI design system?▼

To separate content sections in a UI design system, you can use a reusable Border component that creates visual dividers, supporting full-width borders, padded borders, and distinct block spacing variants.

What is the best way to add spacing between UI components?▼

The best way to add spacing between UI components is using a separator component with customizable height, allowing you to adjust the thickness or block height for precise visual control between sections like user profiles and settings.

Can I customize the thickness of a separator for layout clarity?▼

Yes, you can customize the separator thickness for layout clarity by adjusting the height property of the border component, which provides fine-grained control over the visual separation between different content elements.

Does the border component support theming for consistent UI styling?▼

Yes, the border component supports theming for consistent UI styling by utilizing CSS variables, ensuring your visual separators maintain design system consistency across different sections of your web application.

What variants are available for dividers in a web application layout?▼

Available variants for dividers in a web application layout include a full-width border, a bordered section with horizontal padding, and a colored block for larger spacing, each serving distinct separation needs.

Related Skills

Explore More Design & Creative Skills→
jc180105jc180105

UX Architect

Define reusable CSS architecture and UX foundations for frontend development.

Community
Advanced
juanelojgajuanelojga

arrange

Optimize web layout spacing, rhythm, and visual hierarchy using Flexbox and Grid.

Community
Intermediate
ArogyaReddyArogyaReddy

visual-design-foundations

Define typography, color, spacing, and iconography design tokens for web and mobile UI.

Community
Advanced
het8802het8802
3

tailwind-design-system

Implement Tailwind CSS v4 design systems with design tokens and responsive patterns.

Community
Advanced