npm - code-ai-installer - Versions diffs - 3.0.0 → 4.0.0 - Mend

code-ai-installer 3.0.0 → 4.0.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 (1901) hide show

package/domains/development/.agents/skills/a11y-baseline-reference/SKILL.md ADDED Viewed

@@ -0,0 +1,301 @@
+---
+name: a11y-baseline-reference
+description: Канонический справочник по accessibility — WCAG 2.1 AA requirements (22 numbered A-NN), Component A11y Table (ARIA per component type), code examples (Modal focus / FormField error / focus-visible CSS / Toast aria-live), verification tools, output template. Активируй при поиске конкретного WCAG-требования или ARIA-паттерна для компонента.
+type: reference
+domain: development
+owners:
+  - ux_ui_designer
+gates:
+  - UX
+tech:
+  - a11y
+topic:
+  - ux
+  - design-systems
+  - a11y
+triggers:
+  - WCAG A-NN
+  - ARIA для компонента
+  - accessibility lookup
+  - focus management pattern
+  - aria-live toast
+  - aria-describedby form
+  - WCAG 2.1 AA requirement
+related:
+  - a11y-baseline
+  - qa-ui-a11y-smoke
+  - ui-a11y-smoke-review
+  - ui-inventory
+  - styling-css-stack
+  - styling-css-stack-reference
+  - ux-spec
+budget_lines: 500
+schema_version: 1
+---
+# Skill: A11y Baseline Reference (WCAG 2.1 AA)
+Канонический справочник доступности — lookup-oriented. Для workflow и «когда применять» — `$a11y-baseline`.
+> **Library status:** growing reference. Новые ARIA-патентны (Combobox, Tabs, DateRangePicker, etc.) добавляются через `create_skill` / `update_skill` MCP tools agents'ом при encountering new UI scenarios.
+**Разделы:**
+1. [Requirements по WCAG](#1-requirements)
+2. [Component A11y Table](#2-components)
+3. [Code Examples](#3-examples)
+4. [Verification](#4-verification)
+5. [Output Template](#5-output)
+---
+## 1. Requirements по WCAG 2.1 AA
+### 1.1 Keyboard (WCAG 2.1.1, 2.1.2)
+| # | Requirement | WCAG | Severity |
+|---|------------|------|----------|
+| A-01 | All interactive elements reachable via Tab | 2.1.1 (A) | 🔴 P0 |
+| A-02 | No keyboard traps (always can Tab out) | 2.1.2 (A) | 🔴 P0 |
+| A-03 | Focus order is logical (DOM order matches visual) | 2.4.3 (A) | 🟠 P1 |
+| A-04 | Shortcuts don't conflict with assistive tech | 2.1.4 (A) | 🟡 P2 |
+### 1.2 Focus (WCAG 2.4.7)
+| # | Requirement | WCAG | Severity |
+|---|------------|------|----------|
+| A-05 | Visible focus indicator on all interactive elements | 2.4.7 (AA) | 🔴 P0 |
+| A-06 | Focus indicator ≥ 2px in contrast | 1.4.11 (AA) | 🟠 P1 |
+| A-07 | Modal: focus moves inside on open | — (UX) | 🟠 P1 |
+| A-08 | Modal: focus returns to trigger on close | — (UX) | 🟠 P1 |
+| A-09 | No `outline: none` without `:focus-visible` replacement | — | 🔴 P0 |
+### 1.3 Forms (WCAG 1.3.1, 3.3.x)
+| # | Requirement | WCAG | Severity |
+|---|------------|------|----------|
+| A-10 | Every input has `<label>` or `aria-label` | 1.3.1 (A) | 🔴 P0 |
+| A-11 | Required fields have `aria-required="true"` or visual marker | 1.3.1 (A) | 🟠 P1 |
+| A-12 | Error messages associated via `aria-describedby` | 3.3.1 (A) | 🟠 P1 |
+| A-13 | Error messages are descriptive (not just "Invalid") | 3.3.3 (AA) | 🟠 P1 |
+| A-14 | Form submission feedback announced (toast + aria-live) | 4.1.3 (AA) | 🟠 P1 |
+### 1.4 Content (WCAG 1.1.1, 1.3.1)
+| # | Requirement | WCAG | Severity |
+|---|------------|------|----------|
+| A-15 | Images have `alt` text (or `alt=""` for decorative) | 1.1.1 (A) | 🟠 P1 |
+| A-16 | One `<h1>` per page with logical heading hierarchy | 1.3.1 (A) | 🟠 P1 |
+| A-17 | Semantic HTML used (`<button>`, `<nav>`, `<main>`) | 1.3.1 (A) | 🟠 P1 |
+| A-18 | Language attribute set (`<html lang="en">`) | 3.1.1 (A) | 🟡 P2 |
+### 1.5 Contrast & Visual (WCAG 1.4.x)
+| # | Requirement | WCAG | Severity |
+|---|------------|------|----------|
+| A-19 | Text contrast ≥ 4.5:1 (normal) / 3:1 (large text ≥ 18px) | 1.4.3 (AA) | 🟠 P1 |
+| A-20 | Non-text UI contrast ≥ 3:1 (borders, icons) | 1.4.11 (AA) | 🟡 P2 |
+| A-21 | Color is not the only means to convey meaning | 1.4.1 (A) | 🟠 P1 |
+| A-22 | `prefers-reduced-motion` respected (AAA, out-of-baseline — nice-to-have for sensitive users) | 2.3.3 (AAA) | 🟡 P2 |
+---
+## 2. Component A11y Table
+> Compact per-atom summary — `$ui-inventory` §3 Catalog. Full ARIA reference here.
+### Required ARIA per component type
+| Component | Element | Required ARIA | Keyboard |
+|-----------|---------|--------------|----------|
+| **Button** | `<button>` | — (native) | Enter/Space → activate |
+| **Link** | `<a href>` | — (native) | Enter → navigate |
+| **Input** | `<input>` | `aria-invalid`, `aria-describedby` | — |
+| **Select** | `<select>` or `[role="listbox"]` | `aria-expanded`, `aria-selected` | Arrow keys |
+| **Checkbox** | `<input type="checkbox">` | — (native) | Space → toggle |
+| **Switch** | `[role="switch"]` | `aria-checked` | Space → toggle |
+| **Tabs** | `[role="tablist"]` + `[role="tab"]` | `aria-selected`, `aria-controls` | Arrow keys → navigate |
+| **Modal** | `[role="dialog"]` | `aria-modal="true"`, `aria-labelledby` | Escape → close, focus trap |
+| **Toast** | `[role="status"]` or `[aria-live="polite"]` | — | Auto-announced |
+| **Tooltip** | `[role="tooltip"]` | `aria-describedby` on trigger | Escape → dismiss |
+| **Spinner** | — | `aria-busy="true"` on container | — |
+| **Skeleton** | — | `aria-hidden="true"` | — |
+| **Table** | `<table>` | `<th scope="col/row">` | — |
+| **Dropdown** | `[role="menu"]` | `aria-expanded`, `aria-haspopup` | Arrow keys, Enter, Escape |
+---
+## 3. Code Examples
+> Library extends via `create_skill` / `update_skill` MCP tools. New patterns (Combobox, DateRangePicker, etc.) добавляются agents'ом при encountering new scenarios.
+### Focus management: Modal
+```jsx
+// ✅ Correct modal focus management
+function Modal({ isOpen, onClose, children }) {
+  const closeRef = useRef(null);
+  const triggerRef = useRef(null);
+  useEffect(() => {
+    if (isOpen) {
+      closeRef.current?.focus(); // Focus moves inside modal
+    } else {
+      triggerRef.current?.focus(); // Focus returns to trigger
+    }
+  }, [isOpen]);
+  return (
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="modal-title"
+    >
+      <h2 id="modal-title">Confirm Delete</h2>
+      {children}
+      <button ref={closeRef} onClick={onClose}>Cancel</button>
+    </div>
+  );
+}
+```
+### Form field with error
+```jsx
+// ✅ Correct form field a11y
+function FormField({ id, label, error, required, children }) {
+  const errorId = `${id}-error`;
+  return (
+    <div>
+      <label htmlFor={id}>
+        {label}
+        {required && <span aria-hidden="true"> *</span>}
+      </label>
+      {React.cloneElement(children, {
+        id,
+        'aria-required': required,
+        'aria-invalid': !!error,
+        'aria-describedby': error ? errorId : undefined,
+      })}
+      {error && (
+        <p id={errorId} role="alert" className="error-text">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}
+```
+### Focus visible CSS
+```css
+/* ✅ Correct focus management */
+/* Remove default but keep for keyboard users */
+*:focus {
+  outline: none;
+}
+*:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+/* ❌ DON'T: Remove focus for everyone */
+*:focus {
+  outline: none; /* breaks keyboard navigation! */
+}
+```
+> CSS a11y patterns (tokens, `prefers-reduced-motion` implementation) — `$styling-css-stack` §7 Accessibility.
+### Toast with aria-live
+```jsx
+// ✅ Toast that screen readers announce
+function ToastContainer({ toasts }) {
+  return (
+    <div aria-live="polite" aria-atomic="true">
+      {toasts.map(toast => (
+        <div key={toast.id} role="status">
+          {toast.message}
+        </div>
+      ))}
+    </div>
+  );
+}
+```
+---
+## 4. Verification
+### Automated tools
+| Tool | What it checks | How to run |
+|------|---------------|-----------|
+| **axe DevTools** | WCAG violations, missing ARIA | Browser extension → Scan |
+| **Lighthouse a11y** | Overall a11y score (target ≥ 90) | DevTools → Lighthouse |
+| **eslint-plugin-jsx-a11y** | JSX a11y rules in code | `npm install eslint-plugin-jsx-a11y` |
+### Manual checks
+| Check | How |
+|-------|-----|
+| Keyboard navigation | Tab through entire page without mouse |
+| Focus visible | Every focused element has visible outline |
+| Screen reader | Test with NVDA/VoiceOver |
+| Color contrast | axe DevTools or Lighthouse |
+### Acceptance criteria for Tester
+```markdown
+- [ ] All P0 interactive flows completable via keyboard
+- [ ] All form fields have labels (visible or aria-label)
+- [ ] Modals trap focus and return on close
+- [ ] Error messages linked to fields (aria-describedby)
+- [ ] No `outline: none` without focus-visible replacement
+- [ ] Lighthouse a11y score ≥ 90
+```
+---
+## 5. Output Template
+```markdown
+# A11y Baseline: <Project/Feature>
+**Date:** YYYY-MM-DD
+**Author:** UX/UI Designer Agent
+**WCAG Target:** 2.1 AA
+## Requirements Summary
+| Category | Total | P0 | P1 | P2 |
+|----------|:-----:|:---:|:---:|:---:|
+| Keyboard | 4 | 2 | 1 | 1 |
+| Focus | 5 | 2 | 3 | 0 |
+| Forms | 5 | 1 | 4 | 0 |
+| Content | 4 | 0 | 3 | 1 |
+| Visual | 4 | 0 | 2 | 2 |
+| **Total** | **22** | **5** | **13** | **4** |
+## Component A11y Requirements
+<section 2 table>
+## Acceptance Criteria for Tester
+<section 4 checklist>
+## Notes / Exceptions
+- <any project-specific exceptions>
+```
+---
+## См. также
+- `$a11y-baseline` — workflow wrapper (когда применять baseline, UX gate integration)
+- `$qa-ui-a11y-smoke` — QA-gate a11y smoke testing
+- `$ui-a11y-smoke-review` — UX-gate a11y smoke review
+- `$ui-inventory` — component inventory (compact a11y notes per atom)
+- `$styling-css-stack` — CSS a11y patterns (focus-visible, prefers-reduced-motion)
+- `$ux-spec` — UX Spec (screens with states)

package/domains/development/.agents/skills/a11y-baseline-reference/agents/claude.json ADDED Viewed

@@ -0,0 +1,19 @@
+{
+  "name": "a11y-baseline-reference",
+  "display_name": "Справочник по WCAG / ARIA (a11y reference)",
+  "description": "Канонический справочник по accessibility — WCAG 2.1 AA requirements (22 numbered A-NN), Component A11y Table (ARIA per component type), code examples (Modal focus / FormField error / focus-visible CSS / Toast aria-live), verification tools, output template. Активируй при поиске конкретного WCAG-требования или ARIA-паттерна для компонента.",
+  "default_prompt": "Используй $a11y-baseline-reference, когда задача относится к навыку \"Справочник по WCAG / ARIA (a11y reference)\".",
+  "triggers": [
+    "a11y-baseline-reference",
+    "a11y baseline reference",
+    "Справочник по WCAG / ARIA (a11y reference)",
+    "Канонический справочник по WCAG 2.1 AA, ARIA per component, code examples, verification, output template"
+  ],
+  "capabilities": [
+    "a11y",
+    "reference",
+    "wcag"
+  ],
+  "tools": [],
+  "implicit_invocation": true
+}

package/domains/development/.agents/skills/a11y-baseline-reference/agents/copilot.json ADDED Viewed

@@ -0,0 +1,19 @@
+{
+  "name": "a11y-baseline-reference",
+  "display_name": "Справочник по WCAG / ARIA (a11y reference)",
+  "description": "Канонический справочник по accessibility — WCAG 2.1 AA requirements (22 numbered A-NN), Component A11y Table (ARIA per component type), code examples (Modal focus / FormField error / focus-visible CSS / Toast aria-live), verification tools, output template. Активируй при поиске конкретного WCAG-требования или ARIA-паттерна для компонента.",
+  "default_prompt": "Используй $a11y-baseline-reference, когда задача относится к навыку \"Справочник по WCAG / ARIA (a11y reference)\".",
+  "triggers": [
+    "a11y-baseline-reference",
+    "a11y baseline reference",
+    "Справочник по WCAG / ARIA (a11y reference)",
+    "Канонический справочник по WCAG 2.1 AA, ARIA per component, code examples, verification, output template"
+  ],
+  "capabilities": [
+    "a11y",
+    "reference",
+    "wcag"
+  ],
+  "tools": [],
+  "implicit_invocation": true
+}

package/domains/development/.agents/skills/a11y-baseline-reference/agents/gemini.json ADDED Viewed

@@ -0,0 +1,19 @@
+{
+  "name": "a11y-baseline-reference",
+  "display_name": "Справочник по WCAG / ARIA (a11y reference)",
+  "description": "Канонический справочник по accessibility — WCAG 2.1 AA requirements (22 numbered A-NN), Component A11y Table (ARIA per component type), code examples (Modal focus / FormField error / focus-visible CSS / Toast aria-live), verification tools, output template. Активируй при поиске конкретного WCAG-требования или ARIA-паттерна для компонента.",
+  "default_prompt": "Используй $a11y-baseline-reference, когда задача относится к навыку \"Справочник по WCAG / ARIA (a11y reference)\".",
+  "triggers": [
+    "a11y-baseline-reference",
+    "a11y baseline reference",
+    "Справочник по WCAG / ARIA (a11y reference)",
+    "Канонический справочник по WCAG 2.1 AA, ARIA per component, code examples, verification, output template"
+  ],
+  "capabilities": [
+    "a11y",
+    "reference",
+    "wcag"
+  ],
+  "tools": [],
+  "implicit_invocation": true
+}

package/domains/development/.agents/skills/a11y-baseline-reference/agents/kimi.yaml ADDED Viewed

@@ -0,0 +1,15 @@
+name: "a11y-baseline-reference"
+display_name: "Справочник по WCAG / ARIA (a11y reference)"
+description: "Канонический справочник по accessibility — WCAG 2.1 AA requirements (22 numbered A-NN), Component A11y Table (ARIA per component type), code examples (Modal focus / FormField error / focus-visible CSS / Toast aria-live), verification tools, output template. Активируй при поиске конкретного WCAG-требования или ARIA-паттерна для компонента."
+default_prompt: "Используй $a11y-baseline-reference, когда задача относится к навыку \"Справочник по WCAG / ARIA (a11y reference)\"."
+triggers:
+  - "a11y-baseline-reference"
+  - "a11y baseline reference"
+  - "Справочник по WCAG / ARIA (a11y reference)"
+  - "Канонический справочник по WCAG 2.1 AA, ARIA per component, code examples, verification, output template"
+capabilities:
+  - "a11y"
+  - "reference"
+  - "wcag"
+tools: []
+implicit_invocation: true

package/domains/development/.agents/skills/a11y-baseline-reference/agents/openai.yaml ADDED Viewed

@@ -0,0 +1,8 @@
+interface:
+  display_name: "Справочник по WCAG / ARIA (a11y reference)"
+  short_description: "Канонический справочник по accessibility — WCAG 2.1 AA requirements (22 numbered A-NN), Component A11y Table (ARIA per component type), code examples (Modal focus / FormField error / focus-visible CSS / Toast aria-live), verification tools, output template. Активируй при поиске конкретного WCAG-требования или ARIA-паттерна для компонента."
+  default_prompt: "Используй $a11y-baseline-reference, когда задача относится к навыку \"Справочник по WCAG / ARIA (a11y reference)\"."
+dependencies:
+  tools: []
+policy:
+  allow_implicit_invocation: true

package/domains/development/.agents/skills/a11y-baseline-reference/agents/qwen.json ADDED Viewed

@@ -0,0 +1,19 @@
+{
+  "name": "a11y-baseline-reference",
+  "display_name": "Справочник по WCAG / ARIA (a11y reference)",
+  "description": "Канонический справочник по accessibility — WCAG 2.1 AA requirements (22 numbered A-NN), Component A11y Table (ARIA per component type), code examples (Modal focus / FormField error / focus-visible CSS / Toast aria-live), verification tools, output template. Активируй при поиске конкретного WCAG-требования или ARIA-паттерна для компонента.",
+  "default_prompt": "Используй $a11y-baseline-reference, когда задача относится к навыку \"Справочник по WCAG / ARIA (a11y reference)\".",
+  "triggers": [
+    "a11y-baseline-reference",
+    "a11y baseline reference",
+    "Справочник по WCAG / ARIA (a11y reference)",
+    "Канонический справочник по WCAG 2.1 AA, ARIA per component, code examples, verification, output template"
+  ],
+  "capabilities": [
+    "a11y",
+    "reference",
+    "wcag"
+  ],
+  "tools": [],
+  "implicit_invocation": true
+}

package/domains/development/.agents/skills/a11y-baseline-reference/agents/skill.yaml ADDED Viewed

@@ -0,0 +1,23 @@
+version: 1
+name: "a11y-baseline-reference"
+display_name: "Справочник по WCAG / ARIA (a11y reference)"
+description: "Канонический справочник по accessibility — WCAG 2.1 AA requirements (22 numbered A-NN), Component A11y Table (ARIA per component type), code examples (Modal focus / FormField error / focus-visible CSS / Toast aria-live), verification tools, output template. Активируй при поиске конкретного WCAG-требования или ARIA-паттерна для компонента."
+default_prompt: "Используй $a11y-baseline-reference, когда задача относится к навыку \"Справочник по WCAG / ARIA (a11y reference)\"."
+triggers:
+  - "a11y-baseline-reference"
+  - "a11y baseline reference"
+  - "Справочник по WCAG / ARIA (a11y reference)"
+  - "Канонический справочник по WCAG 2.1 AA, ARIA per component, code examples, verification, output template"
+capabilities:
+  - "a11y"
+  - "reference"
+  - "wcag"
+tools: []
+invocation:
+  explicit: true
+  implicit: true
+localization:
+  default_locale: "ru"
+  available_locales:
+    - "ru"
+    - "en"