code-ai-installer 3.0.0 → 4.0.0

package/domains/development/.agents/skills/react-15-3-wix-iframe/SKILL.md

@@ -1,355 +1,170 @@
 ---
 name: react-15-3-wix-iframe
-description: Legacy-разработка для Wix iFrame приложений на React 15.3: класс-компоненты, lifecycle методы, PropTypes/defaultProps, паттерны без hooks. Коммуникация с Wix через iFrame SDK (postMessage, Wix.addEventListener, resizeWindow). Используй этот скилл ВСЕГДА когда упоминается Wix iFrame, Wix iFrame SDK, или когда кодовая база явно использует React 15.3. Не применять вместе с react-beast-practices — они несовместимы.
+description: "Legacy-разработка для Wix iFrame приложений на React 15.3: класс-компоненты, lifecycle методы, PropTypes/defaultProps, паттерны без hooks. Коммуникация с Wix через iFrame SDK (postMessage, Wix.addEventListener, resizeWindow). Используй этот скилл ВСЕГДА когда упоминается Wix iFrame, Wix iFrame SDK, или когда кодовая база явно использует React 15.3. Не применять вместе с react-beast-practices — они несовместимы."
+type: discretionary
+domain: development
+owners:
+  - architect
+  - senior_full_stack
+gates:
+  - ARCH
+  - DEV
+tech:
+  - react
+  - wix
+topic:
+  - architecture
+  - general
+triggers:
+  - React 15.3
+  - class component
+  - Wix iFrame
+  - lifecycle методы
+  - PropTypes
+  - Wix postMessage
+  - legacy React
+related:
+  - react-15-3-wix-iframe-reference
+  - wix-iframe-sdk
+  - wix-self-hosted-embedded-script
+  - wix-self-hosted-embedded-script-reference
+  - security-baseline-dev
+  - threat-model-baseline
+  - architecture-doc-reference
+budget_lines: 300
+schema_version: 1
 ---
 
+
 # Skill: React 15.3 + Wix iFrame
 
 > ⚠️ Этот скилл — отдельный мир. Hooks, Suspense, React.memo, фрагменты `<>` — всего этого нет.
 > Всегда проверяй: React 15.3 или современный React?
 
+Все полные JSX-шаблоны (UserProfile lifecycle, WixWidget, withLoadingState, ref callback, callback prop) → `$react-15-3-wix-iframe-reference`.
+
 **Разделы:**
-1. [Класс-компоненты: паттерны и lifecycle](#1-класс-компоненты)
-2. [PropTypes и defaultProps](#2-proptypes-и-defaultprops)
-3. [setState: безопасные паттерны](#3-setstate)
-4. [Wix iFrame SDK: коммуникация](#4-wix-iframe-sdk)
-5. [Обработка ошибок и загрузки](#5-ошибки-и-загрузка)
-6. [DO/DON'T: что нельзя в React 15.3](#6-чего-нельзя)
+1. [Класс-компоненты: принципы](#1-классы)
+2. [PropTypes: правило](#2-proptypes)
+3. [setState: 3 принципа](#3-setstate)
+4. [Wix iFrame SDK: события и методы](#4-wix-sdk)
+5. [Ошибки и загрузка: принципы](#5-ошибки)
+6. [Чего нельзя в React 15.3](#6-нельзя)
+7. [Output Template](#7-output)
+8. [DoD](#8-dod)
 
 ---
 
 ## 1. Класс-компоненты
 
-### ✅ DO: полный lifecycle с защитой от анмаунта
-```jsx
-class UserProfile extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      loading: true,
-      user: null,
-      error: null,
-    };
-    // ✅ Биндинг в конструкторе — один раз, не в render
-    this.handleRefresh = this.handleRefresh.bind(this);
-  }
-
-  componentDidMount() {
-    this._isMounted = true; // ✅ флаг защиты от утечки
-    this.loadUser();
-  }
-
-  componentDidUpdate(prevProps) {
-    // ✅ Сравнивай пропсы вручную, аналог useEffect([userId])
-    if (prevProps.userId !== this.props.userId) {
-      this.loadUser();
-    }
-  }
-
-  componentWillUnmount() {
-    this._isMounted = false; // ✅ предотвращаем setState после анмаунта
-  }
-
-  loadUser() {
-    this.setState({ loading: true, error: null });
-
-    fetchUser(this.props.userId)
-      .then(user => {
-        if (!this._isMounted) return; // ✅ проверка перед setState
-        this.setState({ loading: false, user });
-      })
-      .catch(err => {
-        if (!this._isMounted) return;
-        this.setState({ loading: false, error: err.message });
-      });
-  }
-
-  handleRefresh() {
-    this.loadUser();
-  }
-
-  render() {
-    const { loading, user, error } = this.state;
-
-    if (loading) return React.createElement("div", null, "Loading…");
-    if (error) return React.createElement(
-      "div", { role: "alert" },
-      error,
-      React.createElement("button", { onClick: this.handleRefresh }, "Retry")
-    );
-
-    return React.createElement(
-      "div", { className: "profile" },
-      React.createElement("h1", null, user.name),
-      React.createElement("p", null, user.email)
-    );
-  }
-}
-```
+### Принципы
 
-### ✅ DO: shouldComponentUpdate для оптимизации
-```jsx
-// Аналог React.memo — предотвращает лишние рендеры
-shouldComponentUpdate(nextProps, nextState) {
-  return (
-    nextProps.userId !== this.props.userId ||
-    nextState.user   !== this.state.user   ||
-    nextState.loading !== this.state.loading
-  );
-}
-```
+- Bind методов в конструкторе один раз (не в render)
+- `_isMounted` флаг для защиты от setState после анмаунта
+- В `componentDidUpdate` вручную сравнивай пропсы (аналог `useEffect([dep])`)
+- `PureComponent` для shallow-compare; `shouldComponentUpdate` для кастомной оптимизации
+
+### isMounted guard (минимум)
 
-### ✅ DO: PureComponent для простых случаев
 ```jsx
-// ✅ PureComponent делает shallow compare автоматически
-class UserCard extends React.PureComponent {
-  render() {
-    return React.createElement("div", null, this.props.name);
-  }
-}
+componentDidMount()    { this._isMounted = true; }
+componentWillUnmount() { this._isMounted = false; }
+
+// перед каждым setState из async:
+if (!this._isMounted) return;
+this.setState({ ... });
 ```
 
+Полный UserProfile lifecycle + PureComponent + shouldComponentUpdate → `$react-15-3-wix-iframe-reference` §1.
+
 ---
 
-## 2. PropTypes и defaultProps
+## 2. PropTypes
+
+### Правило
+
+PropTypes + defaultProps **обязательны** для shared-компонентов: документация + runtime-предупреждения в development. Без них ошибки пропсов всплывают в неочевидных местах.
 
-### ✅ DO: явные типы и дефолты для всех пропсов
 ```jsx
-// ✅ PropTypes — документация + runtime-предупреждения в development
-UserProfile.propTypes = {
-  userId:   React.PropTypes.string.isRequired,
-  onUpdate: React.PropTypes.func,
-  theme:    React.PropTypes.oneOf(["light", "dark"]),
-  config:   React.PropTypes.shape({
-    showAvatar: React.PropTypes.bool,
-    maxItems:   React.PropTypes.number,
-  }),
+MyComponent.propTypes = {
+  userId: React.PropTypes.string.isRequired,
+  // ...
 };
-
-UserProfile.defaultProps = {
-  onUpdate: function() {}, // ✅ no-op вместо проверки if(onUpdate)
-  theme: "light",
-  config: {
-    showAvatar: true,
-    maxItems: 10,
-  },
+MyComponent.defaultProps = {
+  theme: "light", // no-op вместо if(prop) проверок
 };
 ```
 
-### ❌ DON'T: пропускать PropTypes для shared-компонентов
-```jsx
-// Плохо: без PropTypes неясно что принимает компонент,
-// ошибки пропсов всплывают в неочевидных местах.
-```
+Полный пример с PropTypes.shape, oneOf, isRequired → `$react-15-3-wix-iframe-reference` §2.
 
 ---
 
 ## 3. setState
 
-### ✅ DO: функциональный setState когда новое состояние зависит от текущего
-```jsx
-// ✅ Безопасно: React может батчить обновления, функция всегда получает актуальный state
-this.setState(function(prevState) {
-  return { count: prevState.count + 1 };
-});
+### Три принципа
 
-// ❌ Небезопасно: this.state.count может быть устаревшим в батче
-this.setState({ count: this.state.count + 1 });
-```
+1. **Функциональный** `setState(prev => ...)` когда новое состояние зависит от текущего (React батчит, `this.state` может быть устаревшим).
+2. **Callback** вторым аргументом `setState(patch, callback)` когда нужно действие ПОСЛЕ обновления (e.g. вызвать prop callback с новым значением).
+3. **Reset state** в `componentDidUpdate` при смене ключевого пропса (форма с разными formId, профиль с разными userId).
 
-### ✅ DO: callback второй аргумент когда нужно действие после обновления
 ```jsx
-// ✅ callback вызывается ПОСЛЕ того как state обновлён и компонент перерисован
-this.setState({ step: 2 }, function() {
-  // this.state.step === 2 гарантировано
-  this.props.onStepChange(this.state.step);
-});
-```
+// ✅ функциональный
+this.setState(prev => ({ count: prev.count + 1 }));
 
-### ✅ DO: сбрасывать состояние при смене ключевого пропса
-```jsx
-componentDidUpdate(prevProps) {
-  if (prevProps.formId !== this.props.formId) {
-    // ✅ Сброс формы при переходе к другой записи
-    this.setState({
-      values: this.getInitialValues(),
-      errors: {},
-      dirty: false,
-    });
-  }
-}
+// ❌ небезопасно в батче
+this.setState({ count: this.state.count + 1 });
 ```
 
+3 полных паттерна с примерами → `$react-15-3-wix-iframe-reference` §3.
+
 ---
 
 ## 4. Wix iFrame SDK
 
-### ✅ DO: инициализация и базовая коммуникация
-```jsx
-// ✅ Wix SDK доступен глобально через window.Wix
-class WixWidget extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { settings: {}, ready: false };
-  }
-
-  componentDidMount() {
-    this._isMounted = true;
-
-    // ✅ Слушаем события от Wix
-    Wix.addEventListener(Wix.Events.SETTINGS_UPDATED, this.handleSettingsUpdate.bind(this));
-    Wix.addEventListener(Wix.Events.SITE_PUBLISHED,   this.handlePublish.bind(this));
-
-    // ✅ Получаем начальные данные
-    Wix.getSiteInfo(function(siteInfo) {
-      if (!this._isMounted) return;
-      this.setState({ siteInfo, ready: true });
-    }.bind(this));
-
-    // ✅ Подстраиваем высоту виджета
-    this.updateHeight();
-  }
-
-  componentWillUnmount() {
-    this._isMounted = false;
-    // ✅ Убираем слушатели
-    Wix.removeEventListener(Wix.Events.SETTINGS_UPDATED, this.handleSettingsUpdate);
-  }
-
-  handleSettingsUpdate(settings) {
-    if (!this._isMounted) return;
-    this.setState({ settings });
-    this.updateHeight();
-  }
-
-  handlePublish() {
-    // публикация сайта — можно сохранить данные
-  }
-
-  updateHeight() {
-    // ✅ Сообщаем Wix актуальную высоту iFrame
-    var height = document.body.scrollHeight;
-    Wix.resizeWindow(undefined, height);
-  }
-
-  render() {
-    if (!this.state.ready) return React.createElement("div", null, "Loading…");
-    return React.createElement("div", { id: "widget" }, /* контент */);
-  }
-}
-```
+### Ключевые события
 
-### ✅ DO: получить настройки из панели редактора
-```jsx
-componentDidMount() {
-  this._isMounted = true;
-
-  // ✅ Получаем сохранённые настройки компонента
-  Wix.Settings.getExternalId(function(externalId) {
-    if (!this._isMounted) return;
-    this.setState({ externalId });
-  }.bind(this));
-
-  // ✅ Читаем публичные данные (видны и в editor, и в live)
-  Wix.Data.Public.get("userPreferences", { scope: "COMPONENT" }, function(value) {
-    if (!this._isMounted) return;
-    this.setState({ preferences: value || {} });
-  }.bind(this));
-}
-```
+| Event | Когда | Handler |
+|---|---|---|
+| `Wix.Events.SETTINGS_UPDATED` | Изменены настройки в редакторе | Refresh widget state |
+| `Wix.Events.SITE_PUBLISHED` | Опубликован сайт | Persist данные |
+| `Wix.Events.PAGE_NAVIGATION` | Переход на другую страницу | Cleanup state |
 
-### ✅ DO: сохранить данные из виджета
-```jsx
-handleSave(data) {
-  // ✅ Сохраняем данные компонента
-  Wix.Data.Public.set(
-    "userPreferences",
-    data,
-    { scope: "COMPONENT" },
-    function() {
-      // callback после успешного сохранения
-      this.setState({ saved: true });
-    }.bind(this)
-  );
-}
-```
+### Ключевые методы
 
-### ✅ DO: navigateTo для переходов внутри Wix
-```jsx
-handleNavigation(pageId) {
-  Wix.Utils.navigateToSection({
-    sectionIdentifier: Wix.Styles.getStyleParams().sectionIdentifier,
-    state: pageId,
-  });
-}
-```
+| Method | Назначение |
+|---|---|
+| `Wix.addEventListener / removeEventListener` | Подписка/отписка от событий |
+| `Wix.getSiteInfo(cb)` | Получить SiteInfo (URL, lang, etc.) |
+| `Wix.resizeWindow(width, height)` | Подстроить высоту iframe |
+| `Wix.Settings.getExternalId(cb)` | ID компонента |
+| `Wix.Data.Public.get/set(key, value, opts, cb)` | Сохранить/прочитать публичные данные |
+| `Wix.Utils.navigateToSection({ sectionIdentifier, state })` | Переход внутри Wix |
 
-### ❌ DON'T: прямые DOM-манипуляции минуя React
-```jsx
-// ❌ Плохо: React не знает об этих изменениях → рассинхрон при ре-рендере
-document.getElementById("title").innerHTML = this.state.title;
+### Правила
 
-// ✅ Правильно: через state → render
-this.setState({ title: newTitle });
-```
+- Подписываться в `componentDidMount`, отписываться в `componentWillUnmount`
+- Все callbacks Wix SDK — async, защищай `_isMounted`
+- Передавать `Wix.resizeWindow(undefined, height)` после изменения контента
+- ❌ **Никаких прямых DOM-манипуляций** — React не узнает, рассинхрон при ре-рендере
+
+Полный WixWidget init+events + Settings + Wix.Data save + navigateToSection + anti-DOM → `$react-15-3-wix-iframe-reference` §4.
 
 ---
 
 ## 5. Ошибки и загрузка
 
-### ✅ DO: единый паттерн для async операций
-```jsx
-// ✅ Обёртка для всех async вызовов — исключает дублирование
-function withLoadingState(component, asyncFn) {
-  return function() {
-    var self = component;
-    self.setState({ loading: true, error: null });
-    asyncFn()
-      .then(function(result) {
-        if (!self._isMounted) return;
-        self.setState({ loading: false, data: result });
-      })
-      .catch(function(err) {
-        if (!self._isMounted) return;
-        self.setState({ loading: false, error: err.message || "Unknown error" });
-      });
-  };
-}
-
-// Использование в конструкторе:
-this.loadData = withLoadingState(this, function() {
-  return fetchData(self.props.id);
-});
-```
+### Принципы
 
-### ✅ DO: явные состояния в render
-```jsx
-render() {
-  var state = this.state;
-
-  if (state.loading) {
-    return React.createElement("div", { className: "loader" }, "Loading…");
-  }
-
-  if (state.error) {
-    return React.createElement(
-      "div", { className: "error", role: "alert" },
-      state.error,
-      React.createElement("button", { onClick: this.handleRetry }, "Try again")
-    );
-  }
-
-  if (!state.data) {
-    return React.createElement("div", { className: "empty" }, "No data yet");
-  }
-
-  return this.renderContent(state.data);
-}
-```
+- Единый паттерн async: `loading → success/error` через state
+- В `render` явные ветки: `loading` / `error` / `empty` / `content`
+- Async wrapper (`withLoadingState`) переиспользуется для всех загрузок
+- Retry-кнопка в error-ветке обязательна для повторных операций
+
+Полный `withLoadingState` wrapper + render explicit states → `$react-15-3-wix-iframe-reference` §5.
 
 ---
 
-## 6. Чего нельзя
+## 6. Чего нельзя в React 15.3
 
 | ❌ Нельзя | Появилось в | ✅ Альтернатива в 15.3 |
 |---|---|---|
@@ -357,63 +172,78 @@ render() {
 | `React.memo` | React 16.6 | `PureComponent` или `shouldComponentUpdate` |
 | `React.createContext` / `useContext` | React 16.3 | Props drilling или сторонний state (Redux) |
 | `<>...</>` фрагменты | React 16.2 | `React.DOM.div` или обёртка-контейнер |
-| `React.lazy` / `Suspense` | React 16.6 | Ручной code splitting через require |
+| `React.lazy` / `Suspense` | React 16.6 | Ручной code splitting через `require` |
 | `getDerivedStateFromProps` | React 16.3 | `componentWillReceiveProps` |
 | `getSnapshotBeforeUpdate` | React 16.3 | `componentWillUpdate` |
 | `React.forwardRef` | React 16.3 | Передавать ref через обычный prop (`inputRef`) |
-| `React.createRef()` | React 16.3 | `ref={function(el){ this.inputEl = el; }.bind(this)}` |
+| `React.createRef()` | React 16.3 | Callback ref: `ref={el => { this.inputEl = el; }}` |
 | `React.StrictMode` | React 16.3 | — |
 | `ReactDOM.createPortal` | React 16 | Прямая работа с DOM + `ReactDOM.render` |
 
-### ✅ DO: ref через callback (React 15.3)
-```jsx
-class TextInput extends React.Component {
-  constructor(props) {
-    super(props);
-    this.focusInput = this.focusInput.bind(this);
-  }
-
-  focusInput() {
-    if (this.inputEl) this.inputEl.focus();
-  }
-
-  render() {
-    return React.createElement("input", {
-      ref: function(el) { this.inputEl = el; }.bind(this), // ✅ callback ref
-      type: "text",
-    });
-  }
-}
-```
+Шаблоны ref callback + callback prop (передача данных вверх без Context) → `$react-15-3-wix-iframe-reference` §6.
 
-### ✅ DO: передача данных вверх через callback prop
-```jsx
-// В React 15.3 нет Context — передаём callback через props
-class ChildForm extends React.Component {
-  handleChange(field, value) {
-    // ✅ Сообщаем родителю об изменении
-    this.props.onChange(field, value);
-  }
-
-  render() {
-    return React.createElement("input", {
-      value: this.props.value,
-      onChange: function(e) {
-        this.handleChange(this.props.field, e.target.value);
-      }.bind(this),
-    });
-  }
-}
-
-ChildForm.propTypes = {
-  field:    React.PropTypes.string.isRequired,
-  value:    React.PropTypes.string.isRequired,
-  onChange: React.PropTypes.func.isRequired,
-};
+---
+
+## 7. Output Template
+
+```markdown
+# React 15.3 + Wix iFrame Widget: <widget-name>
+
+**Date:** YYYY-MM-DD
+**React version:** 15.3.x (legacy, fixed)
+
+## Widget Type
+- Editor settings panel / Live widget / Both
+
+## Component Hierarchy
+<top-level Widget + sub-components>
+
+## State Schema
+- Local state shape per component
+- Wix.Data.Public keys + scope (COMPONENT / APP)
+
+## Wix SDK Integration
+- Events subscribed
+- Methods used (getSiteInfo, resizeWindow, Settings.*, Data.Public.*, navigateToSection)
+
+## Async Operations
+- Loading/error/empty states
+- isMounted guard policy
+
+## Security
+- postMessage origin checks (если custom messages)
+- Sandbox attributes на iframe
+- Wix.Data scope choice rationale
+
+## Required ADRs
+- [ ] ADR-xxx: React 15.3 fix vs migration plan
+- [ ] ADR-xxx: Wix.Data scope (COMPONENT vs APP vs SITE)
+- [ ] ADR-xxx: settings-panel <-> widget protocol
+
+## Risks
+- Legacy React 15.3 ограничения (см. §6)
+- Wix SDK API changes
+- iframe sandboxing impact на features
 ```
 
 ---
 
+## 8. DoD
+
+- [ ] Все классы используют `_isMounted` guard
+- [ ] PropTypes + defaultProps для shared-компонентов
+- [ ] Wix события подписаны/отписаны симметрично
+- [ ] Output Template заполнен; полные templates взяты из `$react-15-3-wix-iframe-reference`
+- [ ] Никаких прямых DOM-манипуляций (всё через state → render)
+- [ ] Async wrapper переиспользуется (не дублируется per-component)
+
+---
+
 ## См. также
-- `dev-reference-snippets` → раздел 10 «Legacy React 15.3» — дополнительные примеры
-- Не используй `react-beast-practices` или `es2025-beast-practices` в Wix iFrame контексте
+- `$react-15-3-wix-iframe-reference` — все полные JSX-шаблоны (UserProfile, WixWidget, withLoadingState, ref callback, callback prop)
+- `$wix-iframe-sdk` — raw Wix iFrame SDK reference
+- `$wix-self-hosted-embedded-script` — embedded script вариант (НЕ iframe)
+- `$security-baseline-dev` — postMessage origin checks, iframe sandboxing
+- `$threat-model-baseline` — iframe security model
+- `$architecture-doc-reference` — canonical разделы architecture doc
+- ❌ Не используй `react-beast-practices` / `es2025-beast-practices` в Wix iFrame контексте — несовместимы

package/domains/development/.agents/skills/react-15-3-wix-iframe/agents/kimi.yaml

@@ -1,17 +1,17 @@
-name: "react-15-3-wix-iframe"
-display_name: "React 15.3 и Wix iFrame"
-description: "Legacy-разработка для Wix iFrame приложений на React 15.3: класс-компоненты, lifecycle методы, PropTypes/defaultProps, паттерны без hooks. Коммуникация с Wix через iFrame SDK (postMessage, Wix.addEventListener, resizeWindow). Используй этот скилл ВСЕГДА когда упоминается Wix iFrame, Wix iFrame SDK, или когда кодовая база явно использует React 15.3. Не применять вместе с react-beast-practices — они несовместимы."
-default_prompt: "Используй $react-15-3-wix-iframe, когда задача относится к навыку \"React 15.3 и Wix iFrame\"."
-triggers:
-  - "react-15-3-wix-iframe"
-  - "react 15 3 wix iframe"
-  - "React 15.3 и Wix iFrame"
-  - "Legacy-разработка для Wix iFrame приложений на React 15"
-capabilities:
-  - "react"
-  - "15"
-  - "3"
-  - "wix"
-  - "iframe"
-tools: []
-implicit_invocation: true
+name: "react-15-3-wix-iframe"
+display_name: "React 15.3 и Wix iFrame"
+description: "Legacy-разработка для Wix iFrame приложений на React 15.3: класс-компоненты, lifecycle методы, PropTypes/defaultProps, паттерны без hooks. Коммуникация с Wix через iFrame SDK (postMessage, Wix.addEventListener, resizeWindow). Используй этот скилл ВСЕГДА когда упоминается Wix iFrame, Wix iFrame SDK, или когда кодовая база явно использует React 15.3. Не применять вместе с react-beast-practices — они несовместимы."
+default_prompt: "Используй $react-15-3-wix-iframe, когда задача относится к навыку \"React 15.3 и Wix iFrame\"."
+triggers:
+  - "react-15-3-wix-iframe"
+  - "react 15 3 wix iframe"
+  - "React 15.3 и Wix iFrame"
+  - "Legacy-разработка для Wix iFrame приложений на React 15"
+capabilities:
+  - "react"
+  - "15"
+  - "3"
+  - "wix"
+  - "iframe"
+tools: []
+implicit_invocation: true