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
parent b36afbf5ee
commit 68f1c1efe3
20 changed files with 1257 additions and 1371 deletions
@@ -0,0 +1,53 @@
+# 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:
+
+```tsx
+<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:
+
+```tsx
+<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.