npm - code-ai-installer - Versions diffs - 1.3.1 → 1.4.0 - Mend

code-ai-installer 1.3.1 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1293) hide show

package/locales/en/.agents/skills/qa_test_plan/agents/skill.yaml ADDED Viewed

@@ -0,0 +1,22 @@
+version: 1
+name: "qa_test_plan"
+display_name: "QA Test Plan"
+description: "Create a QA test plan and coverage matrix from PRD and UX - roles, critical flows, UI states, negative cases, and acceptance criteria."
+default_prompt: "Use $qa_test_plan when the task matches the \"QA Test Plan\" skill."
+triggers:
+  - "qa_test_plan"
+  - "qa test plan"
+  - "Create a QA test plan and coverage matrix from PRD and UX - roles, critical flows, UI states, negative cases, and acceptance criteria"
+capabilities:
+  - "qa"
+  - "test"
+  - "plan"
+tools: []
+invocation:
+  explicit: true
+  implicit: true
+localization:
+  default_locale: "en"
+  available_locales:
+    - "ru"
+    - "en"

package/locales/en/.agents/skills/qa_ui_a11y_smoke/SKILL.md ADDED Viewed

@@ -0,0 +1,230 @@
+---
+name: qa_ui_a11y_smoke
+description: UI/a11y smoke — keyboard/focus, labels/aria, basic contrast, form and list states, match with UX Spec.
+---
+# Skill: QA UI & A11y Smoke
+Basic check of UI accessibility and usability.
+**Sections:**
+1. [Workflow](#1-workflow)
+2. [Checklist](#2-checklist)
+3. [Keyboard Navigation](#3-keyboard)
+4. [Automated Tools](#4-tools)
+5. [Output Template](#5-output)
+---
+## 1. Workflow
+```
+1. Automated check
+   ├── axe DevTools / Lighthouse a11y audit
+   └── Record score and critical issues
+2. Keyboard navigation (section 3)
+   └── Traverse all interactive elements with Tab
+3. Visual check
+   ├── UI states (loading, empty, error, success)
+   ├── Responsive (if in scope)
+   └── Match UX Spec
+4. ARIA / Forms check (section 2)
+   └── Labels, roles, error messages
+5. Fill output template
+```
+---
+## 2. Checklist
+### 2.1 Keyboard Navigation
+| # | Check | WCAG | Severity | Status |
+|---|-------|------|----------|--------|
+| A11Y-01 | All interactive elements reachable via Tab | 2.1.1 (A) | 🔴 P0 | ☐ |
+| A11Y-02 | Focus order is logical (top→bottom, left→right) | 2.4.3 (A) | 🟠 P1 | ☐ |
+| A11Y-03 | Focus visible on all elements | 2.4.7 (AA) | 🔴 P0 | ☐ |
+| A11Y-04 | Escape closes modals/dropdowns | — (UX) | 🟠 P1 | ☐ |
+| A11Y-05 | Enter activates buttons/links | 2.1.1 (A) | 🔴 P0 | ☐ |
+| A11Y-06 | No keyboard traps (can always Tab out) | 2.1.2 (A) | 🔴 P0 | ☐ |
+### 2.2 Forms & Labels
+| # | Check | WCAG | Severity | Status |
+|---|-------|------|----------|--------|
+| A11Y-07 | All inputs have visible label or `aria-label` | 1.3.1 (A) | 🔴 P0 | ☐ |
+| A11Y-08 | Required fields marked (`aria-required` or visual) | 1.3.1 (A) | 🟠 P1 | ☐ |
+| A11Y-09 | Error messages associated with fields (`aria-describedby`) | 1.3.1 (A) | 🟠 P1 | ☐ |
+| A11Y-10 | Error messages visible and descriptive | 3.3.1 (A) | 🟠 P1 | ☐ |
+| A11Y-11 | Form submission feedback (toast/message) | — (UX) | 🟠 P1 | ☐ |
+### 2.3 Content & Structure
+| # | Check | WCAG | Severity | Status |
+|---|-------|------|----------|--------|
+| A11Y-12 | Page has one `<h1>` | 1.3.1 (A) | 🟠 P1 | ☐ |
+| A11Y-13 | Heading hierarchy is logical (h1→h2→h3, no skips) | 1.3.1 (A) | 🟡 P2 | ☐ |
+| A11Y-14 | Images have `alt` text (or `alt=""` for decorative) | 1.1.1 (A) | 🟠 P1 | ☐ |
+| A11Y-15 | Links have descriptive text (no "click here") | 2.4.4 (A) | 🟡 P2 | ☐ |
+| A11Y-16 | Language attribute set (`<html lang="...">`) | 3.1.1 (A) | 🟡 P2 | ☐ |
+### 2.4 Visual & Contrast
+| # | Check | WCAG | Severity | Status |
+|---|-------|------|----------|--------|
+| A11Y-17 | Text contrast ≥ 4.5:1 (normal) / 3:1 (large) | 1.4.3 (AA) | 🟠 P1 | ☐ |
+| A11Y-18 | UI works with `prefers-reduced-motion` | 2.3.3 (AAA) | 🟡 P2 | ☐ |
+| A11Y-19 | No content requires color alone to convey meaning | 1.4.1 (A) | 🟠 P1 | ☐ |
+| A11Y-20 | Interactive elements have minimum 44×44px touch target | 2.5.5 (AAA) | 🟡 P2 | ☐ |
+### 2.5 UI States
+| # | Check | Where | Severity | Status |
+|---|-------|-------|----------|--------|
+| A11Y-21 | Loading state shown (spinner/skeleton) | All async actions | 🟠 P1 | ☐ |
+| A11Y-22 | Empty state shown (illustration + message) | Lists, tables | 🟠 P1 | ☐ |
+| A11Y-23 | Error state shown (icon + message + retry) | Failed fetches | 🟠 P1 | ☐ |
+| A11Y-24 | Success state shown (toast/message) | Create, update, delete | 🟠 P1 | ☐ |
+| A11Y-25 | Disabled state clear (visual + `disabled` attribute) | Forms, buttons | 🟡 P2 | ☐ |
+---
+## 3. Keyboard Navigation Test
+### Test procedure
+| Step | Action | Expected | Status |
+|------|--------|----------|--------|
+| 1 | Press Tab from page start | Focus moves to first interactive element | ☐ |
+| 2 | Continue Tab through all elements | Each interactive element receives visible focus | ☐ |
+| 3 | Press Shift+Tab | Focus moves backward in logical order | ☐ |
+| 4 | Press Enter on buttons | Button action fires | ☐ |
+| 5 | Press Enter on links | Link navigates | ☐ |
+| 6 | Open modal/dialog | Focus trapped inside modal | ☐ |
+| 7 | Press Escape on modal | Modal closes, focus returns to trigger | ☐ |
+| 8 | Tab through form | All inputs, selects, buttons reachable | ☐ |
+| 9 | Submit form with Enter | Form submits | ☐ |
+| 10 | Tab out of last element | Focus wraps or exits predictably | ☐ |
+### Common keyboard failures
+| Failure | Severity | Fix |
+|---------|----------|-----|
+| Custom button (`<div onClick>`) not focusable | P0 | Use `<button>` or add `tabIndex="0"` + `role="button"` |
+| Focus outline removed (`outline: none`) | P0 | Use `:focus-visible` instead |
+| Modal doesn't trap focus | P1 | Add focus trap (FocusTrap component) |
+| Dropdown opens but items not navigable | P1 | Add keyboard arrows + Enter support |
+| Tab order follows DOM, not visual order | P1 | Fix DOM order or use `tabIndex` |
+---
+## 4. Automated Tools
+### axe DevTools (browser extension)
+```
+1. Open page in Chrome
+2. DevTools → axe DevTools tab → Scan
+3. Review: Critical / Serious / Moderate issues
+4. Export results
+```
+### Lighthouse a11y
+```
+1. DevTools → Lighthouse → Check "Accessibility"
+2. Run audit
+3. Target score: ≥ 90
+4. Review flagged issues
+```
+### Grep patterns for code review
+```bash
+# Missing alt on images
+grep_search: Query="<img" Includes=["*.jsx","*.tsx"]
+→ Check: has alt attribute?
+# Custom interactive without role
+grep_search: Query="onClick" Includes=["*.jsx","*.tsx"]
+→ Check: is it on <button>, <a>, or has role="button"?
+# Outline removal
+grep_search: Query="outline.*none" Includes=["*.css"]
+→ P0: needs :focus-visible alternative
+# Missing htmlFor on labels
+grep_search: Query="<label" Includes=["*.jsx","*.tsx"]
+→ Check: has htmlFor or wraps input?
+```
+---
+## 5. Output Template
+```markdown
+# UI & Accessibility Smoke Report
+**Date:** YYYY-MM-DD
+**Tester:** Tester Agent
+**Page/Component:** <name>
+**UX Spec reference:** <link>
+## Automated Scan
+| Tool | Score | Critical | Serious | Moderate |
+|------|:-----:|:--------:|:-------:|:--------:|
+| axe DevTools | — | 0 | 2 | 3 |
+| Lighthouse A11y | 87 | — | — | — |
+## Keyboard Navigation
+| Step | Action | Expected | Status |
+|------|--------|----------|:------:|
+| 1 | Tab through all | Focus visible | ✅ |
+| 6 | Open modal | Focus trapped | ❌ |
+| 7 | Escape modal | Focus returns | ❌ |
+## Checklist Results
+| Section | Pass | Fail | Total |
+|---------|:----:|:----:|:-----:|
+| Keyboard (A11Y-01..06) | 4 | 2 | 6 |
+| Forms (A11Y-07..11) | 4 | 1 | 5 |
+| Content (A11Y-12..16) | 5 | 0 | 5 |
+| Visual (A11Y-17..20) | 3 | 1 | 4 |
+| UI States (A11Y-21..25) | 4 | 1 | 5 |
+| **Total** | **20** | **5** | **25** |
+## Findings
+| # | Severity | Check | Element | Finding | Fix |
+|---|----------|-------|---------|---------|-----|
+| 1 | 🔴 P0 | A11Y-03 | Save button | No focus outline | Add `:focus-visible` style |
+| 2 | 🟠 P1 | A11Y-09 | Coupon code input | Error not linked to field | Add `aria-describedby` |
+| 3 | 🟠 P1 | A11Y-17 | Timer text | Contrast 2.8:1 (need 4.5:1) | Darken text color |
+## UI States Check
+| State | Page | Present? | Matches UX Spec? |
+|-------|------|:--------:|:----------------:|
+| Loading | Settings | ✅ | ✅ |
+| Empty | Coupons list | ✅ | ⚠️ No illustration |
+| Error | Settings save | ❌ Missing | ❌ |
+| Success | Settings save | ✅ (toast) | ✅ |
+## Verdict
+- ✅ ACCESSIBLE — Lighthouse ≥ 90, no P0
+- ⚠️ ISSUES — P0/P1 a11y issues found
+- ❌ NON-ACCESSIBLE — critical keyboard/focus failures
+```
+---
+## See also
+- `$a11y_baseline` — a11y baseline requirements
+- `$ui_a11y_smoke_review` — designer-level a11y review
+- `$qa_manual_run` — general manual testing
+- `$qa_browser_testing` — browser-based visual testing
+- `$styling_css_stack` — CSS a11y patterns (focus-visible, prefers-reduced-motion)

package/locales/en/.agents/skills/react_15_3_wix_iframe/SKILL.md ADDED Viewed

@@ -0,0 +1,419 @@
+---
+name: react_15_3_wix_iframe
+description: Legacy development for Wix iFrame apps on React 15.3: class components, lifecycle methods, PropTypes/defaultProps, patterns without hooks. Communication with Wix via iFrame SDK (postMessage, Wix.addEventListener, resizeWindow). ALWAYS use this skill when Wix iFrame, Wix iFrame SDK are mentioned, or when the codebase explicitly uses React 15.3. Do not apply together with react_beast_practices — they are mutually exclusive.
+---
+# Skill: React 15.3 + Wix iFrame
+> ⚠️ This skill is a separate world. Hooks, Suspense, React.memo, `<>` fragments — none of these exist here.
+> Always check: React 15.3 or modern React?
+**Sections:**
+1. [Class components: patterns and lifecycle](#1-class-components)
+2. [PropTypes and defaultProps](#2-proptypes-and-defaultprops)
+3. [setState: safe patterns](#3-setstate)
+4. [Wix iFrame SDK: communication](#4-wix-iframe-sdk)
+5. [Error and loading handling](#5-error-and-loading-handling)
+6. [DO/DON'T: what is prohibited in React 15.3](#6-what-is-prohibited)
+---
+## 1. Class components
+### ✅ DO: full lifecycle with unmount protection
+```jsx
+class UserProfile extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: true,
+      user: null,
+      error: null,
+    };
+    // ✅ Binding in constructor — once, not in render
+    this.handleRefresh = this.handleRefresh.bind(this);
+  }
+  componentDidMount() {
+    this._isMounted = true; // ✅ memory leak protection flag
+    this.loadUser();
+  }
+  componentDidUpdate(prevProps) {
+    // ✅ Compare props manually, analog to useEffect([userId])
+    if (prevProps.userId !== this.props.userId) {
+      this.loadUser();
+    }
+  }
+  componentWillUnmount() {
+    this._isMounted = false; // ✅ prevent setState after unmount
+  }
+  loadUser() {
+    this.setState({ loading: true, error: null });
+    fetchUser(this.props.userId)
+      .then(user => {
+        if (!this._isMounted) return; // ✅ check before 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 for optimization
+```jsx
+// Analog to React.memo — prevents unnecessary renders
+shouldComponentUpdate(nextProps, nextState) {
+  return (
+    nextProps.userId !== this.props.userId ||
+    nextState.user   !== this.state.user   ||
+    nextState.loading !== this.state.loading
+  );
+}
+```
+### ✅ DO: PureComponent for simple cases
+```jsx
+// ✅ PureComponent applies shallow compare automatically
+class UserCard extends React.PureComponent {
+  render() {
+    return React.createElement("div", null, this.props.name);
+  }
+}
+```
+---
+## 2. PropTypes and defaultProps
+### ✅ DO: explicit types and defaults for all props
+```jsx
+// ✅ PropTypes — documentation + runtime warnings in 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,
+  }),
+};
+UserProfile.defaultProps = {
+  onUpdate: function() {}, // ✅ no-op instead of checking if(onUpdate)
+  theme: "light",
+  config: {
+    showAvatar: true,
+    maxItems: 10,
+  },
+};
+```
+### ❌ DON'T: skip PropTypes for shared components
+```jsx
+// Bad: without PropTypes it's unclear what the component expects,
+// prop errors surface in unexpected places.
+```
+---
+## 3. setState
+### ✅ DO: functional setState when new state depends on the current one
+```jsx
+// ✅ Safe: React may batch updates, the function always receives the actual state
+this.setState(function(prevState) {
+  return { count: prevState.count + 1 };
+});
+// ❌ Unsafe: this.state.count might be stale in a batch
+this.setState({ count: this.state.count + 1 });
+```
+### ✅ DO: callback as the second argument when action after update is needed
+```jsx
+// ✅ callback is invoked AFTER the state is updated and the component rerendered
+this.setState({ step: 2 }, function() {
+  // this.state.step === 2 is guaranteed
+  this.props.onStepChange(this.state.step);
+});
+```
+### ✅ DO: reset state upon key prop change
+```jsx
+componentDidUpdate(prevProps) {
+  if (prevProps.formId !== this.props.formId) {
+    // ✅ Reset form when navigating to another record
+    this.setState({
+      values: this.getInitialValues(),
+      errors: {},
+      dirty: false,
+    });
+  }
+}
+```
+---
+## 4. Wix iFrame SDK
+### ✅ DO: initialization and basic communication
+```jsx
+// ✅ Wix SDK is available globally via window.Wix
+class WixWidget extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { settings: {}, ready: false };
+  }
+  componentDidMount() {
+    this._isMounted = true;
+    // ✅ Listen to events from Wix
+    Wix.addEventListener(Wix.Events.SETTINGS_UPDATED, this.handleSettingsUpdate.bind(this));
+    Wix.addEventListener(Wix.Events.SITE_PUBLISHED,   this.handlePublish.bind(this));
+    // ✅ Fetch initial data
+    Wix.getSiteInfo(function(siteInfo) {
+      if (!this._isMounted) return;
+      this.setState({ siteInfo, ready: true });
+    }.bind(this));
+    // ✅ Adjust widget height
+    this.updateHeight();
+  }
+  componentWillUnmount() {
+    this._isMounted = false;
+    // ✅ Remove listeners
+    Wix.removeEventListener(Wix.Events.SETTINGS_UPDATED, this.handleSettingsUpdate);
+  }
+  handleSettingsUpdate(settings) {
+    if (!this._isMounted) return;
+    this.setState({ settings });
+    this.updateHeight();
+  }
+  handlePublish() {
+    // site publication — data can be saved
+  }
+  updateHeight() {
+    // ✅ Notify Wix about the actual iFrame height
+    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" }, /* content */);
+  }
+}
+```
+### ✅ DO: retrieve settings from the editor panel
+```jsx
+componentDidMount() {
+  this._isMounted = true;
+  // ✅ Get saved component settings
+  Wix.Settings.getExternalId(function(externalId) {
+    if (!this._isMounted) return;
+    this.setState({ externalId });
+  }.bind(this));
+  // ✅ Read public data (visible in both editor and live)
+  Wix.Data.Public.get("userPreferences", { scope: "COMPONENT" }, function(value) {
+    if (!this._isMounted) return;
+    this.setState({ preferences: value || {} });
+  }.bind(this));
+}
+```
+### ✅ DO: save data from the widget
+```jsx
+handleSave(data) {
+  // ✅ Save component data
+  Wix.Data.Public.set(
+    "userPreferences",
+    data,
+    { scope: "COMPONENT" },
+    function() {
+      // callback after successful save
+      this.setState({ saved: true });
+    }.bind(this)
+  );
+}
+```
+### ✅ DO: navigateTo for transitions within Wix
+```jsx
+handleNavigation(pageId) {
+  Wix.Utils.navigateToSection({
+    sectionIdentifier: Wix.Styles.getStyleParams().sectionIdentifier,
+    state: pageId,
+  });
+}
+```
+### ❌ DON'T: direct DOM manipulations bypassing React
+```jsx
+// ❌ Bad: React is unaware of these changes → out-of-sync on rerender
+document.getElementById("title").innerHTML = this.state.title;
+// ✅ Correct: via state → render
+this.setState({ title: newTitle });
+```
+---
+## 5. Error and loading handling
+### ✅ DO: unified pattern for async operations
+```jsx
+// ✅ Wrapper for all async calls — prevents duplication
+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" });
+      });
+  };
+}
+// Usage in constructor:
+this.loadData = withLoadingState(this, function() {
+  return fetchData(self.props.id);
+});
+```
+### ✅ DO: explicit states in 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);
+}
+```
+---
+## 6. What is prohibited
+| ❌ Prohibited | Appeared in | ✅ Alternative in 15.3 |
+|---|---|---|
+| `useState`, `useEffect`, any hooks | React 16.8 | `this.state` + lifecycle methods |
+| `React.memo` | React 16.6 | `PureComponent` or `shouldComponentUpdate` |
+| `React.createContext` / `useContext` | React 16.3 | Props drilling or external state (Redux) |
+| `<>...</>` fragments | React 16.2 | `React.DOM.div` or wrapper-container |
+| `React.lazy` / `Suspense` | React 16.6 | Manual code splitting via require |
+| `getDerivedStateFromProps` | React 16.3 | `componentWillReceiveProps` |
+| `getSnapshotBeforeUpdate` | React 16.3 | `componentWillUpdate` |
+| `React.forwardRef` | React 16.3 | Pass ref via a custom prop (`inputRef`) |
+| `React.createRef()` | React 16.3 | `ref={function(el){ this.inputEl = el; }.bind(this)}` |
+| `React.StrictMode` | React 16.3 | — |
+| `ReactDOM.createPortal` | React 16 | Direct DOM manipulation + `ReactDOM.render` |
+### ✅ DO: ref via 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",
+    });
+  }
+}
+```
+### ✅ DO: passing data upwards via callback prop
+```jsx
+// React 15.3 lacks Context — pass a callback through props
+class ChildForm extends React.Component {
+  handleChange(field, value) {
+    // ✅ Notify parent of the change
+    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,
+};
+```
+---
+## See also
+- `dev_reference_snippets` → section 10 "Legacy React 15.3" — additional examples
+- Do not use `react_beast_practices` or `es2025_beast_practices` in the Wix iFrame context