code-ai-installer 2.5.0 → 4.0.0

package/domains/development/.agents/skills/golden-canon-grid/SKILL.md

@@ -1,11 +1,38 @@
 ---
 name: golden-canon-grid
 description: Классические пропорциональные системы для UI-лейаутов — Golden Canon (Van de Graaf), Villard de Honnecourt, Golden Ratio (φ), Rule of Thirds, модульные сетки. CSS-реализация через Grid/custom properties. Активируй при проектировании лейаутов попапов, лендингов, страниц дашборда, модальных окон, или при вопросах «как расположить элементы гармонично».
+type: discretionary
+domain: development
+owners:
+  - ux_ui_designer
+gates:
+  - UX
+tech: []
+topic:
+  - ux
+  - design-systems
+triggers:
+  - пропорции UI
+  - golden ratio
+  - Van de Graaf
+  - rule of thirds
+  - модульная сетка
+  - гармоничный лейаут
+  - сетка попапа
+related:
+  - ux-spec
+  - ui-inventory
+  - styling-css-stack
+  - a11y-baseline
+  - design-systems
+budget_lines: 300
+schema_version: 1
 ---
 
+
 # Skill: Golden Canon Grid
 
-Система пропорциональных сеток для создания визуально гармоничных UI-лейаутов, основанная на классической типографике и математике красоты.
+Система пропорциональных сеток для визуально гармоничных UI-лейаутов.
 
 **Разделы:**
 1. [Теория и история](#1-теория)
@@ -13,7 +40,7 @@ description: Классические пропорциональные сист
 3. [Системы пропорций](#3-системы)
 4. [CSS-реализация](#4-css)
 5. [Применение к UI-компонентам](#5-применение)
-6. [Decision Matrix — когда что применять](#6-decision-matrix)
+6. [Decision Matrix](#6-decision-matrix)
 7. [Anti-patterns](#7-anti-patterns)
 8. [Checklist](#8-checklist)
 
@@ -21,24 +48,10 @@ description: Классические пропорциональные сист
 
 ## 1. Теория и история
 
-### Golden Canon (Van de Graaf Canon)
-Метод деления страницы на гармоничные зоны, открытый заново Яном Чихольдом (Jan Tschichold) в работах средневековых типографов. Конструкция создаёт текстовый блок, площадь которого = ½ площади страницы, с пропорциями полей:
-
-```
-inner : top : outer : bottom = 1 : 1.5 : 2 : 3
-```
-
-### Villard de Honnecourt (XIII век)
-Геометрическая конструкция через диагонали — деление страницы на 9 равных частей (сетка 3×3) с дополнительными диагоналями, создающими точки оптического фокуса на пересечениях.
-
-### Golden Ratio (φ = 1.618…)
-Математическая пропорция, встречающаяся в природе. Прямоугольник с соотношением сторон 1 : 1.618 воспринимается как наиболее «приятный». Fibonacci последовательность (1, 1, 2, 3, 5, 8, 13, 21…) — дискретное приближение.
-
-### Rule of Thirds
-Упрощённая версия: деление на сетку 3×3. Ключевые элементы размещаются на пересечениях линий (4 «power points»). Наиболее применимо к композиции single-screen views.
-
-### Модульные сетки (Josef Müller-Brockmann)
-Систематический подход: страница делится на модули одинакового размера, разделённые gutters. Любой элемент занимает один или несколько модулей. Популярно в Swiss Style / International Typographic Style.
+- **Golden Canon (Van de Graaf)** — деление страницы на гармоничные зоны, переоткрытое Яном Чихольдом из средневековых типографов. Текстовый блок = ½ площади страницы, поля `inner : top : outer : bottom = 1 : 1.5 : 2 : 3`.
+- **Villard de Honnecourt (XIII в.)** — деление страницы диагоналями на сетку 3×3 с power points на пересечениях.
+- **Golden Ratio (φ = 1.618…)** — пропорция, встречающаяся в природе. Прямоугольник 1:1.618 воспринимается «приятным». Fibonacci (1, 1, 2, 3, 5, 8, 13…) — дискретное приближение.
+- **Rule of Thirds** — упрощённая 3×3 сетка; ключевые элементы на 4 power points (пересечения линий).
 
 ---
 
@@ -48,323 +61,136 @@ inner : top : outer : bottom = 1 : 1.5 : 2 : 3
 
 | Система | Соотношение | CSS-значение | Использование |
 |---------|-------------|-------------|---------------|
-| **Golden Ratio** | 1 : 1.618 | `61.8% / 38.2%` | Колонки main/aside, hero section |
+| **Golden Ratio** | 1 : 1.618 | `61.8% / 38.2%` | Main/aside, hero |
 | **Golden Ratio (обратный)** | 0.618 : 1 | `38.2% / 61.8%` | Sidebar/content |
-| **Rule of Thirds** | 1 : 1 : 1 | `33.3% × 3` | Три равных секции, grid cards |
-| **Van de Graaf margins** | 1 : 1.5 : 2 : 3 | `calc()` от viewport | Page margins (вложенные) |
-| **Fibonacci spacing** | 1, 1, 2, 3, 5, 8, 13 | `4, 4, 8, 12, 20, 32, 52px` | Spacing scale, padding |
-| **√2 (ISO 216 / A4)** | 1 : 1.414 | `58.6% / 41.4%` | Портретные карточки, модалки |
-| **Musical Scale (Augmented Fourth)** | 1 : 1.414 | — | Typography, альтернатива φ |
+| **Rule of Thirds** | 1 : 1 : 1 | `33.3% × 3` | Grid cards, секции |
+| **Van de Graaf margins** | 1 : 1.5 : 2 : 3 | `calc()` от viewport | Page margins |
+| **Fibonacci spacing** | 1, 1, 2, 3, 5, 8, 13 | `4, 4, 8, 12, 20, 32, 52px` | Spacing scale |
+| **√2 (ISO 216 / A4)** | 1 : 1.414 | `58.6% / 41.4%` | Портретные карточки |
 
-### Fibonacci Spacing Scale (base 4px)
+### Fibonacci spacing (base 4px, округление к 4px grid)
 
-```
---space-1:  4px;    /* fib(1) × 4 */
---space-2:  4px;    /* fib(2) × 4 */
---space-3:  8px;    /* fib(3) × 4 */
---space-5:  12px;   /* fib(4) × 4 — округлено */
---space-8:  20px;   /* fib(5) × 4 */
---space-13: 32px;   /* fib(6) × 4 — округлено */
---space-21: 52px;   /* fib(7) × 4 — округлено */
---space-34: 84px;   /* fib(8) × 4 — округлено */
-```
-
-> **Округление к 4px grid:** Все значения округляются до ближайшего числа, кратного 4, для pixel-perfect рендеринга.
+`--space-1: 4px`, `--space-3: 8px`, `--space-5: 12px`, `--space-8: 20px`, `--space-13: 32px`, `--space-21: 52px`, `--space-34: 84px`.
 
 ---
 
 ## 3. Системы пропорций
 
-### 3.1 Golden Canon для Web-страниц
+### 3.1 Golden Canon для страниц
+Контентный блок = 50% площади контейнера, пропорции совпадают с пропорциями контейнера, поля `inner : top : outer : bottom = 1 : 1.5 : 2 : 3` (нижнее поле больше — учёт оптического центра).
 
-```
-┌──────────────────────────────────────────────┐
-│                 top margin (1.5x)             │
-│  ┌────────────────────────────────────────┐   │
-│  │                                        │   │
-│  │          TEXT / CONTENT BLOCK           │   │
-│  │                                        │   │
-│  │      Площадь = ½ площади страницы      │   │
-│  │                                        │   │
-│  │      Пропорции = пропорции страницы    │   │
-│  │                                        │   │
-│  └────────────────────────────────────────┘   │
-│                 bottom margin (3x)            │
-└──────────────────────────────────────────────┘
- inner(1x)                           outer(2x)
-```
+### 3.2 Villard Diagram
+Сетка 3×3 + диагонали. **4 power points** = пересечения диагоналей внутренних квадрантов. Размещай CTA / заголовки / ключевые визуалы на power points.
 
-**Правило:** Текстовый/контентный блок занимает ровно 50% площади viewport/container, и его пропорции совпадают с пропорциями контейнера.
-
-### 3.2 Villard Diagram для UI
-
-```
-┌───────────┬───────────┬───────────┐
-│           │           │           │
-│     ╲     │     │     │     ╱     │
-│       ╲   │     │     │   ╱       │
-├─────────╲─┼─────┼─────┼─╱─────────┤
-│           ╲     │     ╱           │
-│           │ ╲   │   ╱ │           │
-│           │   ╲ │ ╱   │           │
-├───────────┼─────╳─────┼───────────┤
-│           │   ╱ │ ╲   │           │
-│           │ ╱   │   ╲ │           │
-│           ╱     │     ╲           │
-├─────────╱─┼─────┼─────┼─╲─────────┤
-│       ╱   │     │     │   ╲       │
-│     ╱     │     │     │     ╲     │
-│           │           │           │
-└───────────┴───────────┴───────────┘
-
-4 Power Points = пересечения диагоналей (●)
-→ Размещай CTA, заголовки, ключевые визуалы
-```
-
-### 3.3 Golden Spiral для визуальной иерархии
-
-```
-┌─────────────────────┬─────────────┐
-│                     │             │
-│                     │      B      │
-│                     │             │
-│         A           ├──────┬──────┤
-│                     │      │  D   │
-│    (Primary CTA)    │  C   ├───┬──┤
-│                     │      │ E │F │
-└─────────────────────┴──────┴───┴──┘
-
-A:B:C:D:E:F = φ⁰:φ¹:φ²:φ³:φ⁴:φ⁵
-Приоритет контента: A > B > C > D > E > F
-```
+### 3.3 Golden Spiral
+Каскад φ-прямоугольников: A:B:C:D:E:F = φ⁰:φ¹:φ²:φ³:φ⁴:φ⁵. Используй для визуальной иерархии — самый крупный блок (A) = primary CTA, далее по убыванию.
 
 ---
 
 ## 4. CSS-реализация
 
-### 4.1 Design Tokens (custom properties)
+### 4.1 Tokens (custom properties — единый источник)
 
 ```css
 :root {
-  /* === Golden Canon Tokens === */
-
   /* Golden Ratio */
   --phi: 1.618;
   --phi-inverse: 0.618;
-  --phi-major: 61.8%;      /* φ / (1 + φ) × 100 */
-  --phi-minor: 38.2%;      /* 1 / (1 + φ) × 100 */
+  --phi-major: 61.8%;
+  --phi-minor: 38.2%;
 
   /* Rule of Thirds */
   --third: 33.333%;
 
-  /* Van de Graaf margin ratios (base = inner margin) */
+  /* Van de Graaf margin ratios (base = inner) */
   --canon-base: 2.5vw;
-  --canon-inner: var(--canon-base);                    /* 1x */
-  --canon-top: calc(var(--canon-base) * 1.5);          /* 1.5x */
-  --canon-outer: calc(var(--canon-base) * 2);          /* 2x */
-  --canon-bottom: calc(var(--canon-base) * 3);         /* 3x */
-
-  /* Fibonacci spacing scale (base 4px, rounded to 4px grid) */
-  --fib-1: 4px;
-  --fib-2: 4px;
-  --fib-3: 8px;
-  --fib-5: 12px;
-  --fib-8: 20px;
-  --fib-13: 32px;
-  --fib-21: 52px;
-  --fib-34: 84px;
-
-  /* √2 for portrait proportions */
+  --canon-inner: var(--canon-base);              /* 1x */
+  --canon-top: calc(var(--canon-base) * 1.5);    /* 1.5x */
+  --canon-outer: calc(var(--canon-base) * 2);    /* 2x */
+  --canon-bottom: calc(var(--canon-base) * 3);   /* 3x */
+
+  /* Fibonacci spacing (4px grid) */
+  --fib-1: 4px;  --fib-3: 8px;  --fib-5: 12px;
+  --fib-8: 20px; --fib-13: 32px; --fib-21: 52px; --fib-34: 84px;
+
+  /* √2 */
   --sqrt2: 1.414;
   --sqrt2-major: 58.6%;
   --sqrt2-minor: 41.4%;
 }
 ```
 
-### 4.2 Golden Layout — Main + Sidebar
+### 4.2 Common patterns
 
 ```css
-/* Golden-ratio two-column layout */
+/* Golden two-column (main + sidebar) */
 .layout-golden {
   display: grid;
   grid-template-columns: var(--phi-major) var(--phi-minor);
   gap: var(--fib-8);
 }
 
-/* Reversed: sidebar left, content right */
-.layout-golden--reversed {
-  grid-template-columns: var(--phi-minor) var(--phi-major);
-}
-```
-
-### 4.3 Van de Graaf Page Margins
-
-```css
-/* Full-page canon margins */
+/* Van de Graaf page margins */
 .page-canon {
-  padding:
-    var(--canon-top)      /* top: 1.5x */
-    var(--canon-outer)    /* right: 2x */
-    var(--canon-bottom)   /* bottom: 3x */
-    var(--canon-inner);   /* left: 1x */
+  padding: var(--canon-top) var(--canon-outer) var(--canon-bottom) var(--canon-inner);
 }
-```
-
-### 4.4 Rule of Thirds Grid
 
-```css
+/* Rule of Thirds grid */
 .grid-thirds {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: repeat(3, 1fr);
+  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
   gap: var(--fib-5);
 }
 
-/* Power point placement (top-left intersection) */
-.grid-thirds__focal {
-  grid-column: 1 / 2;
-  grid-row: 1 / 2;
-}
-```
-
-### 4.5 Golden Modal / Popup
-
-```css
-/* Modal with golden proportions */
+/* Golden modal (landscape φ-rectangle) */
 .modal-golden {
   width: min(520px, 90vw);
-  aspect-ratio: 1.618 / 1;    /* landscape golden rectangle */
-
-  /* Canon margins inside */
-  padding:
-    var(--fib-13)   /* top */
-    var(--fib-21)   /* right */
-    var(--fib-21)   /* bottom */
-    var(--fib-13);  /* left */
+  aspect-ratio: 1.618 / 1;
+  padding: var(--fib-13) var(--fib-21);
 }
 
-/* Content split inside modal: 61.8% visual / 38.2% CTA zone */
-.modal-golden__body {
-  display: grid;
-  grid-template-rows: var(--phi-major) var(--phi-minor);
-}
-```
-
-### 4.6 Golden Typography Scale
-
-```css
+/* Typography scale by φ */
 :root {
-  /* Type scale based on φ — each step = previous × 1.618 */
-  --font-xs:    0.625rem;   /* ~10px */
-  --font-sm:    0.75rem;    /* ~12px */
-  --font-base:  1rem;       /* ~16px (anchor) */
-  --font-lg:    1.25rem;    /* ~20px */
-  --font-xl:    1.618rem;   /* base × φ */
-  --font-2xl:   2.618rem;   /* xl × φ */
-  --font-3xl:   4.236rem;   /* 2xl × φ */
-
-  /* Responsive variant with clamp */
-  --font-hero:  clamp(2rem, 1.5rem + 2.5vw, var(--font-3xl));
+  --font-base: 1rem;       /* 16px anchor */
+  --font-lg:   1.25rem;
+  --font-xl:   1.618rem;   /* base × φ */
+  --font-2xl:  2.618rem;   /* xl × φ */
+  --font-3xl:  4.236rem;   /* 2xl × φ */
 }
 ```
 
-### 4.7 Responsive Breakpoints (φ-based)
+### 4.3 Responsive Breakpoints (φ-based)
 
-```css
-/* Golden breakpoints: each = previous × φ */
-/* 320 → 518 → 838 → 1355 → 2192 */
-@media (min-width: 320px)  { /* Mobile */ }
-@media (min-width: 518px)  { /* Large mobile / small tablet */ }
-@media (min-width: 838px)  { /* Tablet */ }
-@media (min-width: 1355px) { /* Desktop */ }
-```
+`320 → 518 → 838 → 1355 → 2192` (каждый = предыдущий × φ).
 
 ---
 
 ## 5. Применение к UI-компонентам
 
-### 5.1 Admin Panel / Dashboard (Controls + Content)
-
-| Элемент | Пропорция | CSS |
-|---------|-----------|-----|
-| Controls/sidebar | 38.2% (φ-minor) | `grid-template-columns: var(--phi-minor) var(--phi-major)` |
-| Main content area | 61.8% (φ-major) | — (автоматически) |
-| Internal padding | Van de Graaf 1:1.5:2:3 | `padding: var(--canon-top) var(--canon-outer) var(--canon-bottom) var(--canon-inner)` |
-
-### 5.2 Modal / Popup / Dialog
-
-| Элемент | Пропорция | Паттерн |
-|---------|-----------|---------|
-| Container | `aspect-ratio: 1.618` | Golden rectangle |
-| Content / action zone | 61.8% / 38.2% | Вертикальный golden split |
-| Hero image zone | Rule of Thirds | Изображение в top 2/3 |
-| CTA button placement | Power point | Нижняя правая 1/3 × 1/3 |
-| Internal spacing | Fibonacci scale | `gap: var(--fib-8)` / `padding: var(--fib-13)` |
-
-### 5.3 Card Grid
-
-```css
-/* Card grid with golden gaps */
-.card-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-  gap: var(--fib-13);
-  padding: var(--fib-21);
-}
-
-/* Portrait card with A4 proportions */
-.card {
-  aspect-ratio: 1 / var(--sqrt2);  /* ≈ 1:1.414 */
-}
-
-/* Landscape card with golden proportions */
-.card--landscape {
-  aspect-ratio: var(--phi) / 1;    /* ≈ 1.618:1 */
-}
-```
-
-### 5.4 Hero Section / Landing
-
-```
-┌──────────────────────────────────────────┐
-│  ┌────────── 61.8% ──────────┬─ 38.2% ─┐│
-│  │                           │          ││
-│  │  Heading + Body text      │  Hero    ││
-│  │  (primary content)        │  Image   ││
-│  │                           │          ││
-│  │  [CTA Button]             │          ││
-│  │  ↑ at power point (2/3)   │          ││
-│  └───────────────────────────┴──────────┘│
-└──────────────────────────────────────────┘
-```
-
-### 5.5 Form Layout
+Краткая сводка — выбор системы по типу компонента:
+
+| Компонент | Пропорция | CSS-pattern |
+|-----------|-----------|-------------|
+| Admin panel (sidebar + content) | φ-minor 38.2% / φ-major 61.8% | `grid-template-columns: var(--phi-minor) var(--phi-major)` |
+| Modal / Popup / Dialog | Golden rectangle 1.618:1; внутри vertical split 61.8/38.2 | `aspect-ratio: 1.618 / 1` |
+| Card grid | Rule of Thirds (3 col) | `repeat(auto-fill, minmax(240px, 1fr))` |
+| Portrait card | √2 (1:1.414, A4) | `aspect-ratio: 1 / var(--sqrt2)` |
+| Landscape card | φ (1.618:1) | `aspect-ratio: var(--phi) / 1` |
+| Hero / landing | Golden split 61.8/38.2 + CTA на power point | см. §4.2 + §3.2 |
+| Form field (label / input) | φ-minor / φ-major | `grid-template-columns: var(--phi-minor) var(--phi-major)` |
+| Sidebar (collapsible) | width = 38.2vw; collapsed = `--fib-21` (52px) | `width: calc(100vw * 0.382)` |
+| Page margins | Van de Graaf 1:1.5:2:3 | `padding: ... --canon-*` |
+| Typography scale | φ-множитель | см. §4.2 |
+| Spacing | Fibonacci (4px base) | `--fib-*` |
 
 ```css
-/* Form with golden label/input ratio */
-.form-field--golden {
+/* Hero pattern: 61.8% контент + 38.2% визуал, CTA на 2/3 высоты */
+.hero {
   display: grid;
-  grid-template-columns: var(--phi-minor) var(--phi-major);
-  /* Label: 38.2%, Input: 61.8% */
-  align-items: baseline;
-  gap: var(--fib-5);
-}
-```
-
-### 5.6 Navigation / Sidebar
-
-```css
-/* Collapsible sidebar with golden width */
-.sidebar {
-  width: calc(100vw * 0.382);  /* φ-minor от viewport */
-  min-width: 240px;
-  max-width: 400px;
-}
-
-/* Collapsed: inverse fibonacci */
-.sidebar--collapsed {
-  width: var(--fib-21);  /* 52px — иконки */
+  grid-template-columns: var(--phi-major) var(--phi-minor);
+  gap: var(--fib-21);
 }
+.hero__cta { margin-top: 66.6%; }   /* power point по rule of thirds */
 ```
 
 ---
@@ -380,9 +206,9 @@ A:B:C:D:E:F = φ⁰:φ¹:φ²:φ³:φ⁴:φ⁵
 | **Spacing** | Fibonacci (4px base) | Нелинейная, но предсказуемая прогрессия |
 | **Page margins** | Van de Graaf | Оптический центр выше геометрического |
 | **Hero / landing** | Golden Spiral + power points | Направляет взгляд к CTA |
-| **Portrait card** | √2 (A4 ratio) | Привычные, «бумажные» пропорции |
-| **Admin / dashboard** | φ-minor sidebar (30-38%) | Контролы компактно, контент максимально |
-| **Full-width content** | Skip. Use 8px grid | Не применять φ к каждому элементу |
+| **Portrait card** | √2 (A4 ratio) | Привычные «бумажные» пропорции |
+| **Admin / dashboard** | φ-minor sidebar (30–38%) | Контролы компактно, контент максимально |
+| **Full-width content** | Skip φ. 8px grid | Не применять φ к каждому элементу |
 | **Dense data tables** | Modular grid (Müller-Brockmann) | Ячейки одинаковой ширины, чёткий ритм |
 | **Marketing / promo** | Golden Spiral + Rule of Thirds | Максимальный визуальный impact |
 
@@ -392,32 +218,30 @@ A:B:C:D:E:F = φ⁰:φ¹:φ²:φ³:φ⁴:φ⁵
 
 | ❌ Anti-pattern | ✅ Решение |
 |----------------|-----------|
-| **φ-фанатизм** — применять golden ratio к КАЖДОМУ элементу | Использовать φ только для **крупных структурных** решений (колонки, секции, margins). Мелкие элементы — обычный 4/8px grid |
-| **Pixel-perfect φ** — 61.803398875% | Округлять до `61.8%` / `38.2%`. Браузер всё равно округляет субпиксели |
-| **Игнорирование контента** — пропорции важнее текста | Пропорции **подчиняются** контенту. Если текст не помещается в φ-зону — расширяй |
-| **Фиксированный aspect-ratio на responsive** — без fallback | Использовать `aspect-ratio` только на контролируемых контейнерах (modal, card). На full-width — `min-height` |
-| **Одна система на всё** — только golden ratio | Комбинировать: φ для структуры, Rule of Thirds для фокусных точек, Fibonacci для spacing |
-| **Перегруженная сетка** — 12 линий + диагонали + golden spiral | На экране одновременно — максимум одна система. Layering систем = визуальный хаос |
-| **Забыть про оптический центр** — геометрический центр = оптический | Оптический центр **выше** геометрического на ~5%. Van de Graaf учитывает это через `bottom margin > top margin` |
-| **Навязать φ мобильному** — golden layout на 320px | На mobile (<518px) — single column. φ-split только от tablet (838px+) |
+| **φ-фанатизм** — применять golden ratio к КАЖДОМУ элементу | φ только для крупных структурных решений (колонки, секции, margins). Мелкие — 4/8px grid |
+| **Pixel-perfect φ** — 61.803398875% | Округлять до `61.8%` / `38.2%` |
+| **Игнорирование контента** — пропорции важнее текста | Пропорции подчиняются контенту. Не помещается в φ-зону — расширяй |
+| **Фиксированный aspect-ratio на responsive** без fallback | `aspect-ratio` только на контролируемых контейнерах (modal, card). Full-width → `min-height` |
+| **Одна система на всё** | Комбинировать: φ для структуры, Rule of Thirds для фокусных точек, Fibonacci для spacing |
+| **Перегруженная сетка** — 12 линий + диагонали + spiral | Максимум одна система на экране. Layering = визуальный хаос |
+| **Геометрический центр = оптический** | Оптический выше геометрического на ~5%. Van de Graaf учитывает через `bottom > top` |
+| **φ на мобильном** — golden layout на 320px | Mobile (<518px) — single column. φ-split от tablet (838px+) |
 
 ---
 
 ## 8. Checklist
 
-Перед финализацией лейаута:
-
 | # | Проверка | Применимо? | Статус |
 |---|----------|:----------:|:------:|
-| GC-01 | Основной layout (2-col) использует φ-split или thirds | При наличии sidebar/aside | ☐ |
-| GC-02 | Spacing scale основан на Fibonacci или consistent 4/8px | Всегда | ☐ |
-| GC-03 | CTA / primary action размещён в power point (Rule of Thirds) | Landing, hero, popup | ☐ |
-| GC-04 | Typography scale гармонична (φ-множитель или musical scale) | Всегда | ☐ |
-| GC-05 | Modal/popup aspect-ratio близок к golden rectangle | Popup, modal, dialog | ☐ |
-| GC-06 | Page margins соблюдают Van de Graaf (bottom > top > outer > inner) | Full-page layouts | ☐ |
-| GC-07 | Оптический центр учтён (верхний padding < нижнего) | Cards, modals, popup | ☐ |
-| GC-08 | Не применён φ-фанатизм (мелкие элементы = обычный grid) | Self-check | ☐ |
-| GC-09 | Responsive: пропорции адаптируются или отключаются на mobile | Mobile breakpoint | ☐ |
+| GC-01 | Основной layout (2-col) использует φ-split или thirds | Sidebar/aside | ☐ |
+| GC-02 | Spacing scale = Fibonacci или consistent 4/8px | Всегда | ☐ |
+| GC-03 | CTA на power point (Rule of Thirds) | Landing, hero, popup | ☐ |
+| GC-04 | Typography scale гармонична (φ или musical) | Всегда | ☐ |
+| GC-05 | Modal aspect-ratio близок к golden rectangle | Popup, modal, dialog | ☐ |
+| GC-06 | Page margins по Van de Graaf (bottom > top > outer > inner) | Full-page | ☐ |
+| GC-07 | Оптический центр учтён (top padding < bottom) | Cards, modals | ☐ |
+| GC-08 | Нет φ-фанатизма (мелкие элементы = обычный grid) | Self-check | ☐ |
+| GC-09 | Responsive: пропорции адаптируются / отключаются на mobile | Mobile | ☐ |
 | GC-10 | Контент не обрезан ради пропорций | Self-check | ☐ |
 
 ---
@@ -427,14 +251,14 @@ A:B:C:D:E:F = φ⁰:φ¹:φ²:φ³:φ⁴:φ⁵
 | Артефакт | Формат | Использование |
 |---------|--------|---------------|
 | Golden Canon tokens | CSS custom properties | Вставить в design system / global CSS |
-| Layout decision | Запись в UX Spec (UI Direction → Layout grid) | Обоснование выбора системы пропорций |
-| Spacing scale | Fibonacci tokens | Заменить/дополнить текущий spacing scale |
+| Layout decision | Запись в UX Spec (UI Direction → Layout grid) | Обоснование выбора системы |
+| Spacing scale | Fibonacci tokens | Заменить/дополнить spacing scale |
 
 ---
 
 ## См. также
-- `$ux-spec` — UX Spec (UI Direction → Layout grid)
-- `$ui-inventory` — UI Inventory (component sizing)
+- `$ux-spec` — UI Direction → Layout grid
+- `$ui-inventory` — Component sizing
 - `$styling-css-stack` — CSS practices (custom properties, spacing)
-- `$a11y-baseline` — Accessibility (touch targets, reflow)
-- `$design-systems` — Design system integration (tokens)
+- `$a11y-baseline` — touch targets, reflow
+- `$design-systems` — DS integration (tokens)

package/domains/development/.agents/skills/golden-canon-grid/agents/kimi.yaml

@@ -1,14 +1,14 @@
-name: "golden-canon-grid"
-display_name: "Golden Canon Grid"
-description: "Классические пропорциональные системы для UI-лейаутов — Golden Canon (Van de Graaf), Villard de Honnecourt, Golden Ratio (φ), Rule of Thirds, модульные сетки. CSS-реализация через Grid/custom properties. Активируй при проектировании лейаутов попапов, лендингов, страниц дашборда, модальных окон, или при вопросах «как расположить элементы гармонично»."
-default_prompt: "Используй $golden-canon-grid, когда задача относится к навыку \"Golden Canon Grid\"."
-triggers:
-  - "golden-canon-grid"
-  - "golden canon grid"
-  - "Классические пропорциональные системы для UI-лейаутов — Golden Canon (Van de Graaf), Villard de Honnecourt, Golden Ratio (φ), Rule of Thirds, модульные сетки"
-capabilities:
-  - "golden"
-  - "canon"
-  - "grid"
-tools: []
-implicit_invocation: true
+name: "golden-canon-grid"
+display_name: "Golden Canon Grid"
+description: "Классические пропорциональные системы для UI-лейаутов — Golden Canon (Van de Graaf), Villard de Honnecourt, Golden Ratio (φ), Rule of Thirds, модульные сетки. CSS-реализация через Grid/custom properties. Активируй при проектировании лейаутов попапов, лендингов, страниц дашборда, модальных окон, или при вопросах «как расположить элементы гармонично»."
+default_prompt: "Используй $golden-canon-grid, когда задача относится к навыку \"Golden Canon Grid\"."
+triggers:
+  - "golden-canon-grid"
+  - "golden canon grid"
+  - "Классические пропорциональные системы для UI-лейаутов — Golden Canon (Van de Graaf), Villard de Honnecourt, Golden Ratio (φ), Rule of Thirds, модульные сетки"
+capabilities:
+  - "golden"
+  - "canon"
+  - "grid"
+tools: []
+implicit_invocation: true