@ngxtm/devkit 3.0.2 → 3.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngxtm/devkit",
-  "version": "3.0.2",
+  "version": "3.1.0",
   "description": "Per-project AI skills with smart tech detection - lightweight and context-optimized",
   "main": "cli/index.js",
   "bin": {

package/skills/SPDD/1-research.md

@@ -0,0 +1,22 @@
+# ROLE: Codebase Research Agent
+Sua única missão é documentar e explicar a base de código como ela existe hoje.
+
+## CRITICAL RULES:
+- NÃO sugira melhorias, refatorações ou mudanças arquiteturais.
+- NÃO realize análise de causa raiz ou proponha melhorias futuras.
+- APENAS descreva o que existe, onde existe e como os componentes interagem.
+- Você é um cartógrafo técnico criando um mapa do sistema atual.
+
+## STEPS TO FOLLOW:
+1. **Initial Analysis:** Leia os arquivos mencionados pelo usuário integralmente (SEM limit/offset).
+2. **Decomposition:** Decompunha a dúvida do usuário em áreas de pesquisa (ex: Rotas, Banco, UI).
+3. **Execution:** - Localize onde os arquivos e componentes vivem.
+   - Analise COMO o código atual funciona (sem criticar).
+   - Encontre exemplos de padrões existentes para referência.
+4. **Project State:**
+   - Se projeto NOVO: Pesquise e liste a melhor estrutura de pastas e bibliotecas padrão de mercado para a stack.
+   - Se projeto EXISTENTE: Identifique dívidas técnicas ou padrões que devem ser respeitados.
+
+## OUTPUT:
+- Gere o arquivo `docs/prds/prd_current_task.md` com YAML frontmatter (date, topic, tags, status).
+- **Ação Obrigatória:** Termine com: "Pesquisa concluída. Por favor, dê um `/clear` e carregue `.agente/2-spec.md` para o planejamento."

package/skills/SPDD/2-spec.md

@@ -0,0 +1,20 @@
+# ROLE: Implementation Planning Agent
+Você deve criar planos de implementação detalhados e ser cético quanto a requisitos vagos.
+
+## CRITICAL RULES:
+- Não escreva o plano de uma vez; valide a estrutura das fases com o usuário.
+- Cada decisão técnica deve ser tomada antes de finalizar o plano.
+- O plano deve ser acionável e completo, sem "perguntas abertas".
+
+## STEPS TO FOLLOW:
+1. **Context Check:** Leia o `docs/prds/prd_current_task.md` gerado anteriormente.
+2. **Phasing:** Divida o trabalho em fases incrementais e testáveis.
+3. **Detailing:** Para cada arquivo afetado, defina:
+   - **Path exato.**
+   - **Ação:** (CRIAR | MODIFICAR | DELETAR).
+   - **Lógica:** Snippets de pseudocódigo ou referências de implementação.
+4. **Success Criteria:** Defina "Automated Verification" (scripts/testes) e "Manual Verification" (UI/UX).
+
+## OUTPUT:
+- Gere o arquivo `docs/specs/spec_current_task.md` seguindo o template de fases.
+- **Ação Obrigatória:** Termine com: "Spec finalizada. Por favor, dê um `/clear` e carregue `.agente/3-implementation.md` para execução."

package/skills/SPDD/3-implementation.md

@@ -0,0 +1,20 @@
+# ROLE: Implementation Execution Agent
+Você deve implementar um plano técnico aprovado com precisão cirúrgica.
+
+## CRITICAL RULES:
+- Siga a intenção do plano enquanto se adapta à realidade encontrada.
+- Implemente uma fase COMPLETAMENTE antes de passar para a próxima.
+- **STOP & THINK:** Se encontrar um erro na Spec ou um mismatch no código, PARE e reporte. Não tente adivinhar.
+
+## STEPS TO FOLLOW:
+1. **Sanity Check:** Leia a Spec e o Ticket original. Verifique se o ambiente está limpo.
+2. **Execution:** Codifique seguindo os padrões de Clean Code e os snippets da Spec.
+3. **Verification:**
+   - Após cada fase, execute os comandos de "Automated Verification" descritos na Spec.
+   - PAUSE para confirmação manual do usuário após cada fase concluída.
+4. **Progress:** Atualize os checkboxes (- [x]) no arquivo de Spec conforme avança.
+
+## OUTPUT:
+- Código fonte implementado.
+- Relatório de conclusão de fase com resultados de testes.
+- **Ação Final:** Pergunte se o usuário deseja realizar testes de regressão ou seguir para a próxima task.

package/skills/accessibility-compliance-accessibility-audit/SKILL.md

@@ -0,0 +1,42 @@
+---
+name: accessibility-compliance-accessibility-audit
+description: "You are an accessibility expert specializing in WCAG compliance, inclusive design, and assistive technology compatibility. Conduct audits, identify barriers, and provide remediation guidance."
+---
+
+# Accessibility Audit and Testing
+
+You are an accessibility expert specializing in WCAG compliance, inclusive design, and assistive technology compatibility. Conduct comprehensive audits, identify barriers, provide remediation guidance, and ensure digital products are accessible to all users.
+
+## Use this skill when
+
+- Auditing web or mobile experiences for WCAG compliance
+- Identifying accessibility barriers and remediation priorities
+- Establishing ongoing accessibility testing practices
+- Preparing compliance evidence for stakeholders
+
+## Do not use this skill when
+
+- You only need a general UI design review without accessibility scope
+- The request is unrelated to user experience or compliance
+- You cannot access the UI, design artifacts, or content
+
+## Context
+
+The user needs to audit and improve accessibility to ensure compliance with WCAG standards and provide an inclusive experience for users with disabilities. Focus on automated testing, manual verification, remediation strategies, and establishing ongoing accessibility practices.
+
+## Requirements
+
+$ARGUMENTS
+
+## Instructions
+
+- Confirm scope (platforms, WCAG level, target pages, key user journeys).
+- Run automated scans to collect baseline violations and coverage gaps.
+- Perform manual checks (keyboard, screen reader, focus order, contrast).
+- Map findings to WCAG criteria, severity, and user impact.
+- Provide remediation steps and re-test after fixes.
+- If detailed procedures are required, open `resources/implementation-playbook.md`.
+
+## Resources
+
+- `resources/implementation-playbook.md` for detailed audit steps, tooling, and remediation examples.

package/skills/accessibility-compliance-accessibility-audit/resources/implementation-playbook.md

@@ -0,0 +1,502 @@
+# Accessibility Audit and Testing Implementation Playbook
+
+This file contains detailed patterns, checklists, and code samples referenced by the skill.
+
+## Instructions
+
+### 1. Automated Testing with axe-core
+
+```javascript
+// accessibility-test.js
+const { AxePuppeteer } = require("@axe-core/puppeteer");
+const puppeteer = require("puppeteer");
+
+class AccessibilityAuditor {
+  constructor(options = {}) {
+    this.wcagLevel = options.wcagLevel || "AA";
+    this.viewport = options.viewport || { width: 1920, height: 1080 };
+  }
+
+  async runFullAudit(url) {
+    const browser = await puppeteer.launch();
+    const page = await browser.newPage();
+    await page.setViewport(this.viewport);
+    await page.goto(url, { waitUntil: "networkidle2" });
+
+    const results = await new AxePuppeteer(page)
+      .withTags(["wcag2a", "wcag2aa", "wcag21a", "wcag21aa"])
+      .exclude(".no-a11y-check")
+      .analyze();
+
+    await browser.close();
+
+    return {
+      url,
+      timestamp: new Date().toISOString(),
+      violations: results.violations.map((v) => ({
+        id: v.id,
+        impact: v.impact,
+        description: v.description,
+        help: v.help,
+        helpUrl: v.helpUrl,
+        nodes: v.nodes.map((n) => ({
+          html: n.html,
+          target: n.target,
+          failureSummary: n.failureSummary,
+        })),
+      })),
+      score: this.calculateScore(results),
+    };
+  }
+
+  calculateScore(results) {
+    const weights = { critical: 10, serious: 5, moderate: 2, minor: 1 };
+    let totalWeight = 0;
+    results.violations.forEach((v) => {
+      totalWeight += weights[v.impact] || 0;
+    });
+    return Math.max(0, 100 - totalWeight);
+  }
+}
+
+// Component testing with jest-axe
+import { render } from "@testing-library/react";
+import { axe, toHaveNoViolations } from "jest-axe";
+
+expect.extend(toHaveNoViolations);
+
+describe("Accessibility Tests", () => {
+  it("should have no violations", async () => {
+    const { container } = render(<MyComponent />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});
+```
+
+### 2. Color Contrast Validation
+
+```javascript
+// color-contrast.js
+class ColorContrastAnalyzer {
+    constructor() {
+        this.wcagLevels = {
+            'AA': { normal: 4.5, large: 3 },
+            'AAA': { normal: 7, large: 4.5 }
+        };
+    }
+
+    async analyzePageContrast(page) {
+        const elements = await page.evaluate(() => {
+            return Array.from(document.querySelectorAll('*'))
+                .filter(el => el.innerText && el.innerText.trim())
+                .map(el => {
+                    const styles = window.getComputedStyle(el);
+                    return {
+                        text: el.innerText.trim().substring(0, 50),
+                        color: styles.color,
+                        backgroundColor: styles.backgroundColor,
+                        fontSize: parseFloat(styles.fontSize),
+                        fontWeight: styles.fontWeight
+                    };
+                });
+        });
+
+        return elements
+            .map(el => {
+                const contrast = this.calculateContrast(el.color, el.backgroundColor);
+                const isLarge = this.isLargeText(el.fontSize, el.fontWeight);
+                const required = isLarge ? this.wcagLevels.AA.large : this.wcagLevels.AA.normal;
+
+                if (contrast < required) {
+                    return {
+                        text: el.text,
+                        currentContrast: contrast.toFixed(2),
+                        requiredContrast: required,
+                        foreground: el.color,
+                        background: el.backgroundColor
+                    };
+                }
+                return null;
+            })
+            .filter(Boolean);
+    }
+
+    calculateContrast(fg, bg) {
+        const l1 = this.relativeLuminance(this.parseColor(fg));
+        const l2 = this.relativeLuminance(this.parseColor(bg));
+        const lighter = Math.max(l1, l2);
+        const darker = Math.min(l1, l2);
+        return (lighter + 0.05) / (darker + 0.05);
+    }
+
+    relativeLuminance(rgb) {
+        const [r, g, b] = rgb.map(val => {
+            val = val / 255;
+            return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);
+        });
+        return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+    }
+}
+
+// High contrast CSS
+@media (prefers-contrast: high) {
+    :root {
+        --text-primary: #000;
+        --bg-primary: #fff;
+        --border-color: #000;
+    }
+    a { text-decoration: underline !important; }
+    button, input { border: 2px solid var(--border-color) !important; }
+}
+```
+
+### 3. Keyboard Navigation Testing
+
+```javascript
+// keyboard-navigation.js
+class KeyboardNavigationTester {
+  async testKeyboardNavigation(page) {
+    const results = {
+      focusableElements: [],
+      missingFocusIndicators: [],
+      keyboardTraps: [],
+    };
+
+    // Get all focusable elements
+    const focusable = await page.evaluate(() => {
+      const selector =
+        'a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])';
+      return Array.from(document.querySelectorAll(selector)).map((el) => ({
+        tagName: el.tagName.toLowerCase(),
+        text: el.innerText || el.value || el.placeholder || "",
+        tabIndex: el.tabIndex,
+      }));
+    });
+
+    results.focusableElements = focusable;
+
+    // Test tab order and focus indicators
+    for (let i = 0; i < focusable.length; i++) {
+      await page.keyboard.press("Tab");
+
+      const focused = await page.evaluate(() => {
+        const el = document.activeElement;
+        return {
+          tagName: el.tagName.toLowerCase(),
+          hasFocusIndicator: window.getComputedStyle(el).outline !== "none",
+        };
+      });
+
+      if (!focused.hasFocusIndicator) {
+        results.missingFocusIndicators.push(focused);
+      }
+    }
+
+    return results;
+  }
+}
+
+// Enhance keyboard accessibility
+document.addEventListener("keydown", (e) => {
+  if (e.key === "Escape") {
+    const modal = document.querySelector(".modal.open");
+    if (modal) closeModal(modal);
+  }
+});
+
+// Make div clickable accessible
+document.querySelectorAll("[onclick]").forEach((el) => {
+  if (!["a", "button", "input"].includes(el.tagName.toLowerCase())) {
+    el.setAttribute("tabindex", "0");
+    el.setAttribute("role", "button");
+    el.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        el.click();
+        e.preventDefault();
+      }
+    });
+  }
+});
+```
+
+### 4. Screen Reader Testing
+
+```javascript
+// screen-reader-test.js
+class ScreenReaderTester {
+  async testScreenReaderCompatibility(page) {
+    return {
+      landmarks: await this.testLandmarks(page),
+      headings: await this.testHeadingStructure(page),
+      images: await this.testImageAccessibility(page),
+      forms: await this.testFormAccessibility(page),
+    };
+  }
+
+  async testHeadingStructure(page) {
+    const headings = await page.evaluate(() => {
+      return Array.from(
+        document.querySelectorAll("h1, h2, h3, h4, h5, h6"),
+      ).map((h) => ({
+        level: parseInt(h.tagName[1]),
+        text: h.textContent.trim(),
+        isEmpty: !h.textContent.trim(),
+      }));
+    });
+
+    const issues = [];
+    let previousLevel = 0;
+
+    headings.forEach((heading, index) => {
+      if (heading.level > previousLevel + 1 && previousLevel !== 0) {
+        issues.push({
+          type: "skipped-level",
+          message: `Heading level ${heading.level} skips from level ${previousLevel}`,
+        });
+      }
+      if (heading.isEmpty) {
+        issues.push({ type: "empty-heading", index });
+      }
+      previousLevel = heading.level;
+    });
+
+    if (!headings.some((h) => h.level === 1)) {
+      issues.push({ type: "missing-h1", message: "Page missing h1 element" });
+    }
+
+    return { headings, issues };
+  }
+
+  async testFormAccessibility(page) {
+    const forms = await page.evaluate(() => {
+      return Array.from(document.querySelectorAll("form")).map((form) => {
+        const inputs = form.querySelectorAll("input, textarea, select");
+        return {
+          fields: Array.from(inputs).map((input) => ({
+            type: input.type || input.tagName.toLowerCase(),
+            id: input.id,
+            hasLabel: input.id
+              ? !!document.querySelector(`label[for="${input.id}"]`)
+              : !!input.closest("label"),
+            hasAriaLabel: !!input.getAttribute("aria-label"),
+            required: input.required,
+          })),
+        };
+      });
+    });
+
+    const issues = [];
+    forms.forEach((form, i) => {
+      form.fields.forEach((field, j) => {
+        if (!field.hasLabel && !field.hasAriaLabel) {
+          issues.push({ type: "missing-label", form: i, field: j });
+        }
+      });
+    });
+
+    return { forms, issues };
+  }
+}
+
+// ARIA patterns
+const ariaPatterns = {
+  modal: `
+<div role="dialog" aria-labelledby="modal-title" aria-modal="true">
+    <h2 id="modal-title">Modal Title</h2>
+    <button aria-label="Close">×</button>
+</div>`,
+
+  tabs: `
+<div role="tablist" aria-label="Navigation">
+    <button role="tab" aria-selected="true" aria-controls="panel-1">Tab 1</button>
+</div>
+<div role="tabpanel" id="panel-1" aria-labelledby="tab-1">Content</div>`,
+
+  form: `
+<label for="name">Name <span aria-label="required">*</span></label>
+<input id="name" required aria-required="true" aria-describedby="name-error">
+<span id="name-error" role="alert" aria-live="polite"></span>`,
+};
+```
+
+### 5. Manual Testing Checklist
+
+```markdown
+## Manual Accessibility Testing
+
+### Keyboard Navigation
+
+- [ ] All interactive elements accessible via Tab
+- [ ] Buttons activate with Enter/Space
+- [ ] Esc key closes modals
+- [ ] Focus indicator always visible
+- [ ] No keyboard traps
+- [ ] Logical tab order
+
+### Screen Reader
+
+- [ ] Page title descriptive
+- [ ] Headings create logical outline
+- [ ] Images have alt text
+- [ ] Form fields have labels
+- [ ] Error messages announced
+- [ ] Dynamic updates announced
+
+### Visual
+
+- [ ] Text resizes to 200% without loss
+- [ ] Color not sole means of info
+- [ ] Focus indicators have sufficient contrast
+- [ ] Content reflows at 320px
+- [ ] Animations can be paused
+
+### Cognitive
+
+- [ ] Instructions clear and simple
+- [ ] Error messages helpful
+- [ ] No time limits on forms
+- [ ] Navigation consistent
+- [ ] Important actions reversible
+```
+
+### 6. Remediation Examples
+
+```javascript
+// Fix missing alt text
+document.querySelectorAll("img:not([alt])").forEach((img) => {
+  const isDecorative =
+    img.role === "presentation" || img.closest('[role="presentation"]');
+  img.setAttribute("alt", isDecorative ? "" : img.title || "Image");
+});
+
+// Fix missing labels
+document
+  .querySelectorAll("input:not([aria-label]):not([id])")
+  .forEach((input) => {
+    if (input.placeholder) {
+      input.setAttribute("aria-label", input.placeholder);
+    }
+  });
+
+// React accessible components
+const AccessibleButton = ({ children, onClick, ariaLabel, ...props }) => (
+  <button onClick={onClick} aria-label={ariaLabel} {...props}>
+    {children}
+  </button>
+);
+
+const LiveRegion = ({ message, politeness = "polite" }) => (
+  <div
+    role="status"
+    aria-live={politeness}
+    aria-atomic="true"
+    className="sr-only"
+  >
+    {message}
+  </div>
+);
+```
+
+### 7. CI/CD Integration
+
+```yaml
+# .github/workflows/accessibility.yml
+name: Accessibility Tests
+
+on: [push, pull_request]
+
+jobs:
+  a11y-tests:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: "18"
+
+      - name: Install and build
+        run: |
+          npm ci
+          npm run build
+
+      - name: Start server
+        run: |
+          npm start &
+          npx wait-on http://localhost:3000
+
+      - name: Run axe tests
+        run: npm run test:a11y
+
+      - name: Run pa11y
+        run: npx pa11y http://localhost:3000 --standard WCAG2AA --threshold 0
+
+      - name: Upload report
+        uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: a11y-report
+          path: a11y-report.html
+```
+
+### 8. Reporting
+
+```javascript
+// report-generator.js
+class AccessibilityReportGenerator {
+  generateHTMLReport(auditResults) {
+    return `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Accessibility Audit</title>
+    <style>
+        body { font-family: Arial, sans-serif; margin: 20px; }
+        .summary { background: #f0f0f0; padding: 20px; border-radius: 8px; }
+        .score { font-size: 48px; font-weight: bold; }
+        .violation { margin: 20px 0; padding: 15px; border: 1px solid #ddd; }
+        .critical { border-color: #f00; background: #fee; }
+        .serious { border-color: #fa0; background: #ffe; }
+    </style>
+</head>
+<body>
+    <h1>Accessibility Audit Report</h1>
+    <p>Generated: ${new Date().toLocaleString()}</p>
+
+    <div class="summary">
+        <h2>Summary</h2>
+        <div class="score">${auditResults.score}/100</div>
+        <p>Total Violations: ${auditResults.violations.length}</p>
+    </div>
+
+    <h2>Violations</h2>
+    ${auditResults.violations
+      .map(
+        (v) => `
+        <div class="violation ${v.impact}">
+            <h3>${v.help}</h3>
+            <p><strong>Impact:</strong> ${v.impact}</p>
+            <p>${v.description}</p>
+            <a href="${v.helpUrl}">Learn more</a>
+        </div>
+    `,
+      )
+      .join("")}
+</body>
+</html>`;
+  }
+}
+```
+
+## Output Format
+
+1. **Accessibility Score**: Overall compliance with WCAG levels
+2. **Violation Report**: Detailed issues with severity and fixes
+3. **Test Results**: Automated and manual test outcomes
+4. **Remediation Guide**: Step-by-step fixes for each issue
+5. **Code Examples**: Accessible component implementations
+
+Focus on creating inclusive experiences that work for all users, regardless of their abilities or assistive technologies.