Live Preview
Content above
Content below
OR
Content after labeled divider
Divider Component Generation Skill
Skill này hướng dẫn bạn (AI Agent) tạo component Divider / Separator — đường phân cách trực quan giữa các nhóm nội dung.
1. Mục tiêu (Objective)
Tạo component Divider đơn giản nhưng linh hoạt: hỗ trợ ngang/dọc, có thể chứa text/icon ở giữa, tích hợp 100% Design Tokens.
2. AI Context & Intent (Ngữ cảnh cho AI)
Khi nào dùng Divider?
- Phân tách nội dung trong cùng 1 section/card
- Giữa các section trên page
- Trong menu/list tách nhóm items
- Với text: "hoặc", "OR", section label
Phân biệt với component khác
| Tình huống | Component đúng | Lý do |
|---|---|---|
| Phân tách visual đơn giản | Divider | Đường kẻ nhẹ |
| Khoảng cách không có đường | Spacing (margin/padding) | Không cần visual separator |
| Phân tách section lớn | Section heading + Divider | Heading mang semantic |
| Phân tách card với background | Background color change | Không cần đường kẻ |
Decision Tree cho AI
text
Cần phân tách nội dung?
├─ Cần đường kẻ visual → Divider
│ ├─ Ngang → orientation="horizontal"
│ ├─ Dọc (trong toolbar, inline) → orientation="vertical"
│ └─ Có text ở giữa ("OR") → Divider with label
├─ Chỉ cần khoảng cách → Spacing tokens (margin/padding)
└─ Phân tách section lớn → Heading + optional Divider3. Ngữ nghĩa & Phân loại (Semantics)
3.1. Horizontal Divider (Mặc định)
- Full width, height 1px,
base.bordercolor. - Tương đồng:
Divider(Material 3),Separator(iOS).
3.2. Vertical Divider
- Full height, width 1px — dùng trong toolbar, inline layout.
3.3. Divider with Label
- Đường kẻ bị ngắt giữa bởi text:
──── OR ──── - Label align:
left,center(default),right.
3.4. Slot Map (Figma ↔ Code)
📎 Source:
slot-manifest.json→divider· Layer: item
| Figma Slot | data-slot |
CSS Class | Required | Accepts |
|---|---|---|---|---|
| Root | divider |
.divider |
✅ | — |
| Label | divider-label |
— | ❌ | text, icon |
4. Token Mapping
📦 Token values: Xem
ATOMIC-MAPPING.md— single source of truth cho tất cả actual token values.
| Token | Type | Value | Mô tả |
|---|---|---|---|
line-width |
number | {border-width.1} |
Line thickness (1px) |
margin-y |
number | {spacing.4} |
Vertical margin for horizontal divider |
margin-x |
number | {spacing.3} |
Horizontal margin for vertical divider |
label-padding |
number | {spacing.3} |
Spacing between label and line |
label-font-size |
number | {font.size.xs} |
|
label-font-weight |
number | {font.weight.medium} |
|
color.line |
color | {base.border} |
Default line color |
color.line-subtle |
color | {base.muted} |
Subtle variant line |
color.label |
color | {base.muted-foreground} |
|
transition |
string | {duration.fast-2} {easing.standard} |
Default interaction transition |
radius |
number | {comp.radius} |
Corner radius — inherits from density tier |
5. Props & API
typescript
interface DividerProps {
/** Orientation */
orientation?: 'horizontal' | 'vertical';
/** Label text hiển thị giữa divider */
label?: string;
/** Label position */
labelPosition?: 'left' | 'center' | 'right';
/** Visual variant */
variant?: 'default' | 'subtle';
/** Custom spacing (override margin) */
spacing?: 'none' | 'sm' | 'md' | 'lg';
}6. Accessibility (a11y)
- Role: Dùng
<hr>cho decorative divider, hoặcrole="separator". - Vertical: Thêm
aria-orientation="vertical". - Label: Nếu divider mang semantic (section separator), dùng
aria-label. - Decorative: Nếu purely visual, thêm
aria-hidden="true".
7. Best Practices & Rules
- Semantic HTML: Ưu tiên
<hr>cho horizontal divider. - Không lạm dụng: Nếu layout đã rõ ràng qua spacing, không cần thêm divider.
- Không Hardcode: Mọi giá trị từ Token.
8. Example Usage
jsx
{/* Basic horizontal */}
<Divider />
{/* With label */}
<Divider label="HOẶC" />
{/* Vertical in toolbar */}
<div style={{ display: 'flex', alignItems: 'center' }}>
<Button>Copy</Button>
<Divider orientation="vertical" />
<Button>Paste</Button>
</div>
{/* Subtle variant */}
<Divider variant="subtle" spacing="lg" />