code-ai-installer 1.3.0 → 1.4.0

package/locales/en/.agents/skills/react_beast_practices/SKILL.md

@@ -0,0 +1,296 @@
+---
+name: react_beast_practices
+description: Senior-level React best practices: composition, container/presenter, custom hooks, context, performance (memo/useMemo/useCallback), code splitting, error boundaries, a11y. Use this skill whenever a task concerns React component architecture, re-render optimization, form handling, component testing, or choosing a pattern for reusable logic.
+---
+
+# Skill: React Beast Practices
+
+> Real examples and DO/DON'T are in `dev_reference_snippets`. This file is an architectural compass.
+
+---
+
+## 1. Component Patterns
+
+### Composition over inheritance
+Construct complex behavior from simple building blocks using `children` and render-props, rather than inheritance.
+
+```tsx
+// ✅ Composition
+function Card({ children }: { children: React.ReactNode }) {
+  return <div className="card">{children}</div>;
+}
+
+function UserCard({ user }: { user: User }) {
+  return (
+    <Card>
+      <Avatar src={user.avatar} />
+      <h2>{user.name}</h2>
+    </Card>
+  );
+}
+```
+
+### Container / Presenter
+Separate *where data comes from* from *how it looks*. The Presenter is a pure function of props, tested without mocks.
+
+```tsx
+// ✅ Presenter — UI only, no logic
+function UserListView({ users, isLoading, error }: UserListViewProps) {
+  if (isLoading) return <Spinner />;
+  if (error) return <ErrorBanner message={error} />;
+  return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
+}
+
+// ✅ Container — data and state
+function UserListContainer() {
+  const { data, isLoading, error } = useUsers(); // custom hook
+  return <UserListView users={data ?? []} isLoading={isLoading} error={error?.message} />;
+}
+```
+
+### Compound Components
+Use when components are logically related and must share state, but remain flexible in markup structure.
+
+```tsx
+// ✅ Compound: Tabs
+const TabsContext = createContext<TabsContextValue | null>(null);
+
+function Tabs({ defaultTab, children }: TabsProps) {
+  const [active, setActive] = useState(defaultTab);
+  return <TabsContext.Provider value={{ active, setActive }}>{children}</TabsContext.Provider>;
+}
+
+Tabs.List = function TabList({ children }: { children: React.ReactNode }) {
+  return <div role="tablist">{children}</div>;
+};
+
+Tabs.Tab = function Tab({ value, children }: TabProps) {
+  const ctx = useContext(TabsContext)!;
+  return (
+    <button role="tab" aria-selected={ctx.active === value} onClick={() => ctx.setActive(value)}>
+      {children}
+    </button>
+  );
+};
+
+// Usage:
+// <Tabs defaultTab="profile">
+//   <Tabs.List><Tabs.Tab value="profile">Profile</Tabs.Tab></Tabs.List>
+// </Tabs>
+```
+
+---
+
+## 2. Custom Hooks — reusable stateful logic
+
+Extract anything more complex than a single `useState` into a hook. Test the hook using `renderHook`.
+
+```tsx
+// ✅ Custom hook: useDebounce
+function useDebounce<T>(value: T, delay: number): T {
+  const [debounced, setDebounced] = useState(value);
+  useEffect(() => {
+    const timer = setTimeout(() => setDebounced(value), delay);
+    return () => clearTimeout(timer);
+  }, [value, delay]);
+  return debounced;
+}
+
+// Test (Vitest + @testing-library/react)
+it("debounces value", async () => {
+  const { result, rerender } = renderHook(({ v }) => useDebounce(v, 200), {
+    initialProps: { v: "a" },
+  });
+  rerender({ v: "b" });
+  expect(result.current).toBe("a"); // hasn't updated yet
+  await act(() => new Promise(r => setTimeout(r, 200)));
+  expect(result.current).toBe("b"); // now updated
+});
+```
+
+---
+
+## 3. Performance
+
+### When to use memo / useMemo / useCallback
+
+| Tool | When to apply | When NOT to apply |
+|---|---|---|
+| `React.memo` | Presenter with expensive render, receives stable props | Components with frequently changing props |
+| `useMemo` | Expensive calculations (>1ms) dependent on props/state | Primitive calculations |
+| `useCallback` | Callbacks passed to `memo` components or hooks | Callbacks not passed downwards |
+
+```tsx
+// ✅ Real case for useMemo
+function DataTable({ rows, filter }: DataTableProps) {
+  const filtered = useMemo(
+    () => rows.filter(r => r.name.includes(filter)),
+    [rows, filter] // do not recalculate on other re-renders
+  );
+  return <Table rows={filtered} />;
+}
+```
+
+### Code Splitting
+```tsx
+// ✅ Lazy + Suspense for heavy pages/modals
+const HeavyChart = lazy(() => import("./HeavyChart"));
+
+function Dashboard() {
+  return (
+    <Suspense fallback={<Skeleton />}>
+      <HeavyChart />
+    </Suspense>
+  );
+}
+```
+
+### Virtualizing long lists
+```tsx
+// ✅ TanStack Virtual (avoids rendering thousands of DOM nodes)
+import { useVirtualizer } from "@tanstack/react-virtual";
+
+function VirtualList({ items }: { items: string[] }) {
+  const parentRef = useRef<HTMLDivElement>(null);
+  const virtualizer = useVirtualizer({
+    count: items.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 40,
+  });
+  return (
+    <div ref={parentRef} style={{ height: "400px", overflow: "auto" }}>
+      <div style={{ height: virtualizer.getTotalSize() }}>
+        {virtualizer.getVirtualItems().map(vRow => (
+          <div key={vRow.index} style={{ position: "absolute", top: vRow.start }}>
+            {items[vRow.index]}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+```
+
+---
+
+## 4. Reliability
+
+### Error Boundary
+```tsx
+// ✅ Class-based Error Boundary (must be class, no hooks exist for this yet)
+class ErrorBoundary extends React.Component<
+  { fallback: React.ReactNode; children: React.ReactNode },
+  { hasError: boolean }
+> {
+  state = { hasError: false };
+
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: Error, info: React.ErrorInfo) {
+    // Send to Sentry/LogRocket here
+    console.error("[ErrorBoundary]", error, info.componentStack);
+  }
+
+  render() {
+    return this.state.hasError ? this.props.fallback : this.props.children;
+  }
+}
+
+// Usage: wrap sections, not the whole app
+// <ErrorBoundary fallback={<p>Something went wrong</p>}>
+//   <UserProfile />
+// </ErrorBoundary>
+```
+
+### Component Testing (Testing Library)
+```tsx
+// ✅ Testing a Presenter component
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+describe("UserListView", () => {
+  it("shows spinner while loading", () => {
+    render(<UserListView users={[]} isLoading={true} error={undefined} />);
+    expect(screen.getByRole("status")).toBeInTheDocument(); // spinner
+  });
+
+  it("shows error message", () => {
+    render(<UserListView users={[]} isLoading={false} error="Network error" />);
+    expect(screen.getByRole("alert")).toHaveTextContent("Network error");
+  });
+
+  it("renders user list", () => {
+    const users = [{ id: "1", name: "Alice" }];
+    render(<UserListView users={users} isLoading={false} error={undefined} />);
+    expect(screen.getByText("Alice")).toBeInTheDocument();
+  });
+});
+```
+
+---
+
+## 5. Forms
+
+```tsx
+// ✅ Controlled + validation + explicit error states
+function LoginForm({ onSubmit }: { onSubmit: (d: LoginData) => Promise<void> }) {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [submitting, setSubmitting] = useState(false);
+
+  function validate() {
+    const e: Record<string, string> = {};
+    if (!email.includes("@")) e.email = "Invalid email";
+    if (password.length < 8) e.password = "Minimum 8 characters";
+    return e;
+  }
+
+  async function handleSubmit(ev: React.FormEvent) {
+    ev.preventDefault();
+    const e = validate();
+    if (Object.keys(e).length) { setErrors(e); return; }
+    setSubmitting(true);
+    try { await onSubmit({ email, password }); }
+    finally { setSubmitting(false); }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} noValidate>
+      <label htmlFor="email">Email</label>
+      <input id="email" type="email" value={email} onChange={e => setEmail(e.target.value)}
+        aria-describedby={errors.email ? "email-error" : undefined} />
+      {errors.email && <span id="email-error" role="alert">{errors.email}</span>}
+
+      <label htmlFor="password">Password</label>
+      <input id="password" type="password" value={password} onChange={e => setPassword(e.target.value)}
+        aria-describedby={errors.password ? "pw-error" : undefined} />
+      {errors.password && <span id="pw-error" role="alert">{errors.password}</span>}
+
+      <button type="submit" disabled={submitting}>
+        {submitting ? "Signing in…" : "Sign in"}
+      </button>
+    </form>
+  );
+}
+```
+
+---
+
+## 6. Accessibility (a11y baseline)
+
+| Rule | Example |
+|---|---|
+| Interactive elements — semantic tags | `<button>`, `<a>`, `<input>` instead of `<div onClick>` |
+| All images — `alt` | `<img alt="Avatar of Alice">` |
+| Form errors — `role="alert"` | `<span role="alert">Field is required</span>` |
+| Loading — `aria-busy` | `<div aria-busy="true">Loading…</div>` |
+| Focus management in modals | `autoFocus` on first element, `focus-trap` on close |
+| Color — not the sole indicator | Icon + color, not just color |
+
+---
+
+## See also
+- `dev_reference_snippets` — TDD, API layers, Zustand, RTK, security, legacy React 15.3

package/locales/en/.agents/skills/release_gate/SKILL.md

@@ -0,0 +1,213 @@
+---
+name: release_gate
+description: Final release gate — collect Reviewer+Tester+CI reports, check DoD, classify risks, make GO/NO-GO decision, and form a closure plan.
+---
+
+# Skill: Release Gate
+
+Final decision GO / NO-GO / GO-with-conditions.
+
+**Sections:**
+1. [Workflow](#1-workflow)
+2. [Inputs](#2-inputs)
+3. [Decision Matrix](#3-decision)
+4. [NO-GO Criteria](#4-nogo)
+5. [DoD Checklist](#5-dod)
+6. [Post-Release Verification](#6-post)
+7. [Example: Release Report](#7-example)
+8. [Output Template](#8-output)
+
+---
+
+## 1. Workflow
+
+```
+1. Prereq: Generate RG checklist ($release_gate_checklist_template)
+2. Collect inputs (section 2)
+3. Fill RG checklist statuses
+4. Run DoD checklist (section 5)
+5. Apply decision matrix (section 3)
+6. Generate Release Report (section 8)
+7. Submit to user for GO / NO-GO sign-off
+8. If GO → post-release verification (section 6)
+```
+
+---
+
+## 2. Inputs
+
+| Input | Source | Required |
+|-------|--------|:--------:|
+| Reviewer Report | REV gate | ✅ |
+| Tester Report | TEST gate | ✅ |
+| CI Results (tests, lint) | CI pipeline / terminal | ✅ |
+| RG Checklist (filled) | $release_gate_checklist_template | ✅ |
+| Release scope (what's shipping) | Board / backlog | ✅ |
+| Version / tag / commit | Git | ✅ |
+| Rollback plan | OPS gate | ✅ |
+
+---
+
+## 3. Decision Matrix
+
+| Condition | Decision |
+|-----------|----------|
+| All RG checks DONE + 0 P0 + 0 P1 | **✅ GO** |
+| All RG checks DONE + 0 P0 + P1 with tracked tasks | **⚠️ GO with conditions** |
+| Any P0 from Reviewer or Tester | **❌ NO-GO** |
+| CI tests fail | **❌ NO-GO** |
+| Secrets in code/logs | **❌ NO-GO** |
+| Critical UX flow broken | **❌ NO-GO** |
+| No runbook / deploy instructions | **❌ NO-GO** |
+| API contract violation (breaking) | **❌ NO-GO** |
+
+### GO with conditions rules
+
+```markdown
+Allowed ONLY when ALL of:
+1. Zero P0 issues
+2. P1 issues have:
+   - [ ] Workaround documented
+   - [ ] Fix task created with owner + deadline
+   - [ ] Risk accepted by user
+3. No security P1 (security P1 = treat as P0)
+```
+
+---
+
+## 4. NO-GO Criteria (hard stops)
+
+| # | Criterion | How to check |
+|---|----------|-------------|
+| NG-01 | P0 from Reviewer | Review report: P0 count > 0 |
+| NG-02 | P0 from Tester | Test report: P0 bugs open |
+| NG-03 | Unit/Integration tests fail | CI output |
+| NG-04 | Secrets in code | grep: password, apiKey, token in source |
+| NG-05 | Secrets in logs | grep: password, token in log output |
+| NG-06 | No runbook | Missing deploy/verify instructions |
+| NG-07 | Critical flow blocked | TEST: P0 test case BLOCKED |
+| NG-08 | Breaking API change | API contract compliance: P0 mismatch |
+
+---
+
+## 5. DoD Checklist
+
+| # | Check | Source | Status |
+|---|-------|--------|--------|
+| RG-DoD-01 | Unit tests PASS | CI | ☐ |
+| RG-DoD-02 | Integration tests PASS | CI | ☐ |
+| RG-DoD-03 | Lint/format PASS | CI | ☐ |
+| RG-DoD-04 | 0 P0 from Reviewer | REV report | ☐ |
+| RG-DoD-05 | 0 P0 from Tester | TEST report | ☐ |
+| RG-DoD-06 | No secrets in code/logs | Security scan | ☐ |
+| RG-DoD-07 | Runbook exists and is current | docs/ | ☐ |
+| RG-DoD-08 | API matches contracts | API compliance | ☐ |
+| RG-DoD-09 | Containers built + healthy | OPS report | ☐ |
+| RG-DoD-10 | RG checklist complete | RG-01..RG-22 | ☐ |
+
+---
+
+## 6. Post-Release Verification
+
+After GO decision and deploy:
+
+| # | Check | How | Status |
+|---|-------|-----|--------|
+| POST-01 | Service is running | Health endpoint returns 200 | ☐ |
+| POST-02 | P0 flows work end-to-end | Quick manual smoke | ☐ |
+| POST-03 | No error spike in logs | Check last 5min of logs | ☐ |
+| POST-04 | Response times normal | Check latency (< 500ms) | ☐ |
+| POST-05 | Rollback tested (if first deploy) | Know how to roll back | ☐ |
+
+---
+
+## 7. Example: Release Report
+
+```markdown
+# Release Report: SaaS Admin Panel v1.0
+
+## Decision: ⚠️ GO with conditions
+
+**Version:** v1.0.0
+**Commit:** abc1234
+**Date:** 2026-03-13
+**Scope:** Settings CRUD + Products CRUD + Content Widget
+
+## Evidence
+| Source | Status | Details |
+|--------|:------:|---------|
+| CI: Unit tests | ✅ PASS | 42/42 pass |
+| CI: Integration | ✅ PASS | 8/8 pass |
+| CI: Lint | ✅ PASS | 0 errors |
+| Reviewer | ✅ PASS | 0 P0, 2 P1 |
+| Tester | ✅ PASS | 0 P0, 1 P1 |
+| Security scan | ✅ PASS | No secrets found |
+| API compliance | ✅ PASS | All endpoints match |
+
+## DoD: 10/10 PASS
+
+## P1 Accepted (conditions)
+| # | Finding | Owner | Fix by | Workaround |
+|---|---------|-------|--------|-----------|
+| 1 | Timer NaN for 0 sec | DEV | v0.9.1 | Set min=1 |
+| 2 | Font preview missing | DEV | v0.9.1 | — (cosmetic) |
+| 3 | Empty state no illustration | UX | v0.9.1 | Has text CTA |
+
+## Rollback Plan
+- `docker compose down && git checkout v0.8 && docker compose up -d --build`
+
+## Post-Release
+- [ ] Health check OK
+- [ ] Settings CRUD works
+- [ ] Widget renders
+```
+
+---
+
+## 8. Output Template
+
+```markdown
+# Release Report: <Project> <Version>
+
+## Decision: ✅ GO / ⚠️ GO with conditions / ❌ NO-GO
+
+**Version:** <tag/commit>
+**Date:** YYYY-MM-DD
+**Scope:** <what's shipping>
+
+## Evidence
+| Source | Status | Details |
+|--------|:------:|---------|
+| CI: Unit | ✅/❌ | X/Y pass |
+| CI: Integration | ✅/❌ | X/Y pass |
+| Reviewer | ✅/❌ | P0: X, P1: Y |
+| Tester | ✅/❌ | P0: X, P1: Y |
+| Security | ✅/❌ | ... |
+| API Compliance | ✅/❌ | ... |
+
+## DoD Status
+<section 5 checklist — X/10 PASS>
+
+## Blocking Issues (if NO-GO)
+| # | Issue | Owner | Fix plan |
+|---|-------|-------|---------|
+| 1 | ... | ... | ... |
+
+## Accepted Risks (if GO with conditions)
+| # | Risk | Owner | Fix by | Workaround |
+|---|------|-------|--------|-----------|
+| 1 | ... | ... | ... | ... |
+
+## Rollback Plan
+<commands to rollback>
+
+## Post-Release Verification
+<section 6 checklist>
+```
+
+---
+
+## See also
+- `$release_gate_checklist_template` — RG checklist (generate before this)
+- `$gates` — gate definitions
+- `$board` — project board tracking

package/locales/en/.agents/skills/release_gate/agents/claude.json

@@ -0,0 +1,17 @@
+{
+  "name": "release_gate",
+  "display_name": "Release Gate",
+  "description": "Run the final release gate - collect reviewer, tester, and CI reports, verify Definition of Done, classify risks, decide GO or NO-GO, and define a closure plan.",
+  "default_prompt": "Use $release_gate when the task matches the \"Release Gate\" skill.",
+  "triggers": [
+    "release_gate",
+    "release gate",
+    "Run the final release gate - collect reviewer, tester, and CI reports, verify Definition of Done, classify risks, decide GO or NO-GO, and define a closure plan"
+  ],
+  "capabilities": [
+    "release",
+    "gate"
+  ],
+  "tools": [],
+  "implicit_invocation": true
+}

package/locales/en/.agents/skills/release_gate/agents/copilot.json

@@ -0,0 +1,17 @@
+{
+  "name": "release_gate",
+  "display_name": "Release Gate",
+  "description": "Run the final release gate - collect reviewer, tester, and CI reports, verify Definition of Done, classify risks, decide GO or NO-GO, and define a closure plan.",
+  "default_prompt": "Use $release_gate when the task matches the \"Release Gate\" skill.",
+  "triggers": [
+    "release_gate",
+    "release gate",
+    "Run the final release gate - collect reviewer, tester, and CI reports, verify Definition of Done, classify risks, decide GO or NO-GO, and define a closure plan"
+  ],
+  "capabilities": [
+    "release",
+    "gate"
+  ],
+  "tools": [],
+  "implicit_invocation": true
+}

package/locales/en/.agents/skills/release_gate/agents/gemini.json

@@ -0,0 +1,17 @@
+{
+  "name": "release_gate",
+  "display_name": "Release Gate",
+  "description": "Run the final release gate - collect reviewer, tester, and CI reports, verify Definition of Done, classify risks, decide GO or NO-GO, and define a closure plan.",
+  "default_prompt": "Use $release_gate when the task matches the \"Release Gate\" skill.",
+  "triggers": [
+    "release_gate",
+    "release gate",
+    "Run the final release gate - collect reviewer, tester, and CI reports, verify Definition of Done, classify risks, decide GO or NO-GO, and define a closure plan"
+  ],
+  "capabilities": [
+    "release",
+    "gate"
+  ],
+  "tools": [],
+  "implicit_invocation": true
+}

package/locales/en/.agents/skills/release_gate/agents/openai.yaml

@@ -0,0 +1,8 @@
+interface:
+  display_name: "Release Gate"
+  short_description: "Run the final release gate - collect reviewer, tester, and CI reports, verify Definition of Don…"
+  default_prompt: "Use $release_gate when the task matches the \"Release Gate\" skill."
+dependencies:
+  tools: []
+policy:
+  allow_implicit_invocation: true

package/locales/en/.agents/skills/release_gate/agents/qwen.json

@@ -0,0 +1,17 @@
+{
+  "name": "release_gate",
+  "display_name": "Release Gate",
+  "description": "Run the final release gate - collect reviewer, tester, and CI reports, verify Definition of Done, classify risks, decide GO or NO-GO, and define a closure plan.",
+  "default_prompt": "Use $release_gate when the task matches the \"Release Gate\" skill.",
+  "triggers": [
+    "release_gate",
+    "release gate",
+    "Run the final release gate - collect reviewer, tester, and CI reports, verify Definition of Done, classify risks, decide GO or NO-GO, and define a closure plan"
+  ],
+  "capabilities": [
+    "release",
+    "gate"
+  ],
+  "tools": [],
+  "implicit_invocation": true
+}

package/locales/en/.agents/skills/release_gate/agents/skill.yaml

@@ -0,0 +1,21 @@
+version: 1
+name: "release_gate"
+display_name: "Release Gate"
+description: "Run the final release gate - collect reviewer, tester, and CI reports, verify Definition of Done, classify risks, decide GO or NO-GO, and define a closure plan."
+default_prompt: "Use $release_gate when the task matches the \"Release Gate\" skill."
+triggers:
+  - "release_gate"
+  - "release gate"
+  - "Run the final release gate - collect reviewer, tester, and CI reports, verify Definition of Done, classify risks, decide GO or NO-GO, and define a closure plan"
+capabilities:
+  - "release"
+  - "gate"
+tools: []
+invocation:
+  explicit: true
+  implicit: true
+localization:
+  default_locale: "en"
+  available_locales:
+    - "ru"
+    - "en"