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,112 @@
+# Theme Tokens And Examples
+
+## Token Families
+
+### Surface
+
+| Token | Usage |
+|---|---|
+| `surface.background` | Main app background |
+| `surface.elevated` | Inputs, cards, panels, popovers |
+| `surface.muted` | Secondary backgrounds and sidebars |
+| `surface.foreground` | Primary text |
+| `surface.mutedForeground` | Secondary text and hints |
+| `surface.subtle` | Subtle dividers |
+
+### Interactive
+
+| Token | Usage |
+|---|---|
+| `interactive.border` | Default borders |
+| `interactive.hover` | Hover on clickable elements only |
+| `interactive.active` | Pressed interaction state |
+| `interactive.selection` | Active/selected items |
+| `interactive.selectionForeground` | Text on selection |
+| `interactive.focusRing` | Focus indicators |
+
+### Status
+
+Use status colors only for actual feedback.
+
+- `status.error`: errors and validation failures
+- `status.warning`: cautions
+- `status.success`: successful outcomes
+- `status.info`: informational feedback
+
+Each family may expose foreground, background, and border variants.
+
+### Primary
+
+- `primary.base`: primary CTA
+- `primary.hover`: primary hover
+- `primary.foreground`: content on primary
+
+Primary means “act”; selection means “currently active.” Do not use primary to mark ordinary selected tabs or rows.
+
+### Syntax
+
+Use `syntax.*` only for code display: code backgrounds/text, keywords, strings, and diff highlights. Never use syntax colors for ordinary UI chrome.
+
+## Usage
+
+Prefer semantic utility classes when available:
+
+```tsx
+<div className="bg-[var(--surface-elevated)] text-foreground" />
+<button className="hover:bg-interactive-hover" />
+```
+
+Use `useThemeSystem()` when a library/API requires actual color values:
+
+```tsx
+const { currentTheme } = useThemeSystem();
+
+<Chart color={currentTheme.colors.status.error} />
+```
+
+## Common Patterns
+
+### Input Area
+
+```tsx
+<div className="bg-[var(--surface-elevated)]">
+  <textarea className="bg-transparent" />
+  <div className="bg-transparent">...</div>
+</div>
+```
+
+Input footers stay transparent over the elevated input surface.
+
+### Active Item
+
+```tsx
+<button className={isActive
+  ? 'bg-interactive-selection text-interactive-selection-foreground'
+  : 'hover:bg-interactive-hover'
+} />
+```
+
+### Error Feedback
+
+```tsx
+<div className="bg-[var(--status-error-background)] text-[var(--status-error-foreground)]" />
+```
+
+### Neutral Card
+
+```tsx
+<section className="bg-[var(--surface-elevated)] text-foreground">
+  <p className="text-muted-foreground">...</p>
+</section>
+```
+
+## Wrong Patterns
+
+```tsx
+<div style={{ backgroundColor: '#F2F0E5' }} />
+<button className="bg-blue-500" />
+<div className="hover:bg-interactive-hover">Static content</div>
+<Tab className="bg-primary">Active</Tab>
+```
+
+Use theme tokens, apply hover only to interactive elements, and distinguish selection from primary actions.