Files

T

Bohdan Triapitsyn 68f1c1efe3 docs(agent): streamline guidance and skills

Keep always-on instructions concise and route specialized work through focused skills. Split large skills into progressive references and add dedicated change, desktop, sync, and performance guidance.

2026-07-14 00:45:44 +03:00

1.9 KiB

Raw Blame History

Settings Layout

Visual Hierarchy

Prefer spacing and typography over boxed backgrounds.
Avoid wrappers that mix unrelated controls.
Omit redundant headings when page context already names the controls.
Keep controls compact and row chrome minimal.
Place checkbox/radio state before its label.
Dim inactive option labels subtly; do not use transform jumps.

Typography

Use classes from packages/ui/src/lib/typography.ts:

Page title: typography-ui-header font-semibold text-foreground
Section header: typography-ui-header font-medium text-foreground
Control group: typography-ui-header font-medium or font-normal when needed
Values/labels: typography-ui-label text-foreground
Helper/meta: typography-meta text-muted-foreground or typography-small text-muted-foreground
Numeric values: add tabular-nums

Spacing

Keep section-to-section spacing larger than header-to-content spacing.
Typical flat section: header mb-1 px-1, content pt-0 pb-2 px-2, outer mb-8.
Group related controls with space-y-3 and modest internal padding such as p-2.
Avoid elevated backgrounds, rounded rows, and hover fills without explicit UX value.

Alignment

For consistent desktop columns:

<div className="flex items-center gap-8 py-1.5">
  <span className="w-56 shrink-0 typography-ui-label">{t(labelKey)}</span>
  <div className="flex w-fit items-center gap-2">...</div>
</div>

Let narrow layouts stack or wrap.
Compare the complete control footprint, including adjacent actions, when matching widths.
Disable only the unavailable control; do not dim the entire label row by default.

Responsive Grids

Use a one-column base and introduce columns at a deliberate breakpoint:

<div className="grid grid-cols-1 gap-2 md:grid-cols-[14rem_auto] md:gap-x-8" />

Template fields commonly use grid grid-cols-1 gap-2 md:grid-cols-2 md:gap-3 with flat p-2 cells.

1.9 KiB Raw Blame History