@nockdev/awf 6.2.0 → 6.2.2

package/.agent/skills/tooling/browser-agent/data/recording-patterns.yaml

@@ -0,0 +1,74 @@
+# =============================================================================
+# recording-patterns.yaml — WebP Video Recording Best Practices
+# =============================================================================
+
+version: "1.0.0"
+
+# browser_subagent automatically records sessions as WebP videos
+
+naming:
+  format: "lowercase_with_underscores"
+  max_words: 3
+  examples:
+    - name: "page_load_check"
+      when: "Basic page load verification"
+    - name: "comprehensive_test"
+      when: "Full interaction testing"
+    - name: "dropdown_test"
+      when: "Testing specific dropdown component"
+    - name: "modal_focus_trap"
+      when: "Testing modal focus trap behavior"
+    - name: "form_submission"
+      when: "Testing form fill and submit flow"
+    - name: "visual_comparison"
+      when: "Before/after visual comparison"
+
+  anti_patterns:
+    - bad: "test_1"
+      reason: "Not descriptive"
+      fix: "login_form_test"
+    - bad: "MyComponentTest"
+      reason: "Not lowercase"
+      fix: "component_test"
+    - bad: "testing-the-dropdown-menu-v2"
+      reason: "Too long, has hyphens"
+      fix: "dropdown_menu_test"
+
+when_to_record:
+  always:
+    - "Comprehensive verification (proof of work)"
+    - "Bug reproduction (evidence)"
+    - "Visual comparison (before/after)"
+  optional:
+    - "Quick page load check"
+    - "Single component test"
+  never:
+    - "Sensitive data on screen (credentials, PII)"
+    - "Long-running background processes"
+
+best_practices:
+  - practice: "Keep recordings focused"
+    details: "One recording per logical test flow, not one giant recording"
+    max_duration: "60 seconds per recording"
+
+  - practice: "Include meaningful interactions"
+    details: "Ensure clicks, type actions, and results are visible"
+
+  - practice: "Capture error states"
+    details: "If something fails, the recording provides evidence"
+
+  - practice: "Name describes content"
+    details: "RecordingName should tell what was tested"
+
+  - practice: "Use screenshots for static evidence"
+    details: "For pass/fail evidence, screenshots are lighter than videos"
+
+  - practice: "Always include return info in task"
+    details: "Tell browser_subagent what to return — the recording alone is not enough"
+
+storage:
+  location: "Artifacts directory (auto-managed by browser_subagent)"
+  format: "WebP"
+  retention: "Per conversation session"
+
+# _DOMYH Awesome Code • Recording Patterns v1.0.0_

package/.agent/skills/tooling/browser-agent/data/reporting-patterns.yaml

@@ -0,0 +1,97 @@
+# =============================================================================
+# reporting-patterns.yaml — Evidence-Based Reporting Templates
+# =============================================================================
+
+version: "1.0.0"
+
+templates:
+  summary_table:
+    name: "Pass/Fail Summary Table"
+    when: "Summarizing test results for all elements"
+    format: |
+      ## Frontend Verification Report
+
+      | # | Element | Type | Test | Status | Notes |
+      |---|---------|------|------|--------|-------|
+      | 1 | Submit button | button | click → action | ✅ PASS | Navigates to /success |
+      | 2 | Country dropdown | dropdown | open → select | ✅ PASS | 195 options loaded |
+      | 3 | Settings modal | modal | open → Escape close | ✅ PASS | Focus returns to trigger |
+      | 4 | Delete button | button | disabled state | ❌ FAIL | Disabled but still clickable |
+
+      **Summary**: 3/4 passed (75%)
+      **Console Errors**: 0
+      **Network Failures**: 0
+    required_fields: ["element", "type", "test", "status", "notes"]
+
+  issue_report:
+    name: "Issue Detail Report"
+    when: "Documenting a specific failing element"
+    format: |
+      ### ❌ Issue: {Element Name} — {Test Name}
+
+      **Element**: {element description and location}
+      **Type**: {button | dropdown | modal | hover}
+      **Severity**: {Critical | High | Medium | Low}
+
+      **Expected**: {What should happen}
+      **Actual**: {What actually happens}
+
+      **Steps to Reproduce**:
+      1. Navigate to {URL}
+      2. {Action 1}
+      3. {Action 2}
+      4. Observe: {What goes wrong}
+
+      **Evidence**: ![screenshot](file:///path/to/screenshot.png)
+
+      **Possible Cause**: {If identifiable}
+    required_fields:
+      ["element", "severity", "expected", "actual", "steps", "evidence"]
+
+  interaction_log:
+    name: "Interaction Log"
+    when: "Detailed log of all interactions performed"
+    format: |
+      ## Interaction Log — {URL}
+
+      | Time | Action | Element | Result |
+      |------|--------|---------|--------|
+      | 0:00 | navigate | {URL} | ✅ HTTP 200 |
+      | 0:02 | snapshot | page | 12 buttons, 3 dropdowns, 1 modal |
+      | 0:03 | click | Submit button | ✅ Form submitted |
+      | 0:04 | snapshot | result page | Success message visible |
+      | 0:05 | click | Country dropdown | ✅ Options opened |
+      | 0:06 | select | "Vietnam" | ✅ Value updated |
+      | 0:07 | press_key | Escape | ✅ Dropdown closed |
+    note: "This format is useful for reproducing exact test sequences"
+
+  accessibility_scorecard:
+    name: "Accessibility Scorecard"
+    when: "Reporting accessibility-specific results"
+    format: |
+      ## Accessibility Scorecard
+
+      | Category | Check | Status |
+      |----------|-------|--------|
+      | **Keyboard** | All elements reachable via Tab | ✅ |
+      | **Keyboard** | Enter activates buttons | ✅ |
+      | **Keyboard** | Escape closes modals/dropdowns | ✅ |
+      | **Keyboard** | Arrow keys navigate lists | ❌ |
+      | **Focus** | Visible focus indicator | ✅ |
+      | **Focus** | Focus trap in modals | ✅ |
+      | **Focus** | Focus returns after close | ❌ |
+      | **ARIA** | Roles correctly assigned | ✅ |
+      | **ARIA** | Labels present | ✅ |
+      | **Screen Reader** | Content announced correctly | ⚠️ Not tested |
+
+      **Score**: 7/9 passed (78%)
+      **Needs Attention**: Arrow key navigation, focus return
+    categories: ["keyboard", "focus", "aria", "screen_reader", "color_contrast"]
+
+# Recommended Report Structure:
+# 1. Summary table (always include)
+# 2. Issue reports (for each failure)
+# 3. Interaction log (optional, for debugging)
+# 4. Accessibility scorecard (if a11y testing performed)
+
+# _DOMYH Awesome Code • Reporting Patterns v1.0.0_

package/.agent/skills/tooling/browser-agent/data/subagent-patterns.yaml

@@ -0,0 +1,158 @@
+# =============================================================================
+# subagent-patterns.yaml — browser_subagent Task Description Templates
+# =============================================================================
+
+version: "1.0.0"
+
+# These templates are used with the browser_subagent tool in AI IDEs
+# (e.g., Antigravity). The Task argument should be detailed and explicit.
+
+templates:
+  verify_page_load:
+    name: "Page Load Verification"
+    when: "Quick check that page loads correctly"
+    recording_name: "page_load_check"
+    task_template: |
+      Navigate to {URL}. Wait for page to fully load.
+
+      1. Take a screenshot of the full page
+      2. Take a browser_snapshot to see the accessibility tree
+      3. Check browser_console_messages for any errors (level: error)
+      4. Check browser_network_requests for any failed requests (4xx/5xx)
+
+      Return:
+      - Whether the page loaded successfully (HTTP 200)
+      - Any console errors found
+      - Any failed network requests
+      - A brief description of the page layout
+    return_conditions: "Return after all 4 checks completed"
+
+  test_all_interactions:
+    name: "Comprehensive Interaction Testing"
+    when: "Full verification of all interactive elements"
+    recording_name: "comprehensive_test"
+    task_template: |
+      Navigate to {URL}. Wait for page to fully load.
+
+      PHASE 1: Discover all interactive elements
+      - Take a browser_snapshot
+      - List ALL buttons, links, inputs, dropdowns, and modal triggers
+
+      PHASE 2: Test EACH element systematically
+      For each BUTTON found:
+        - Click it and verify the expected action happens
+        - Take a screenshot after clicking
+        - Note if it's disabled, loading, or changes state
+
+      For each DROPDOWN found:
+        - Click to open it
+        - Verify options are visible
+        - Select an option and verify the value updates
+        - Press Escape to close and verify it closes
+
+      For each INPUT found:
+        - Click to focus
+        - Type test text and verify it appears
+        - If it has validation, try submitting empty
+
+      For each MODAL TRIGGER found:
+        - Click to open the modal
+        - Verify the modal appears with correct content
+        - Press Escape to close
+        - Verify focus returns to the trigger
+
+      PHASE 3: Edge cases
+      - Check browser_console_messages for errors
+      - Check browser_network_requests for failures
+
+      Return: A table with columns [Element, Type, Test, Pass/Fail, Notes]
+      for every element tested.
+    return_conditions: "Return after all elements tested and evidence collected"
+
+  test_specific_component:
+    name: "Specific Component Testing"
+    when: "Test a particular component in depth"
+    recording_name: "component_test"
+    task_template: |
+      Navigate to {URL}. Wait for page to fully load.
+
+      Find the {COMPONENT_NAME} component ({COMPONENT_DESCRIPTION}).
+
+      Test it thoroughly:
+      1. Take a browser_snapshot to find the exact element ref
+      2. Interact with it: {SPECIFIC_INTERACTIONS}
+      3. Verify: {EXPECTED_BEHAVIOR}
+      4. Test keyboard: Tab to it, Enter/Space to activate, Escape to dismiss
+      5. Take screenshots before and after each interaction
+
+      Return:
+      - Whether the component works as expected
+      - Any issues found
+      - Screenshots of each state
+    return_conditions: "Return after all specified interactions tested"
+
+  visual_comparison:
+    name: "Before/After Visual Comparison"
+    when: "Compare UI before and after a code change"
+    recording_name: "visual_comparison"
+    task_template: |
+      Navigate to {URL}. Wait for page to fully load.
+
+      Take a full-page screenshot as the "current state".
+
+      Then perform these actions to test the change:
+      {CHANGE_DESCRIPTION}
+
+      Take another full-page screenshot as the "after state".
+
+      Compare the two states and report:
+      1. What changed visually?
+      2. Is the layout correct?
+      3. Are all elements still accessible?
+      4. Any unexpected visual changes?
+
+      Return: Description of visual changes with screenshots.
+    return_conditions: "Return after both screenshots taken and compared"
+
+  form_flow_test:
+    name: "Complete Form Flow Testing"
+    when: "Test end-to-end form submission"
+    recording_name: "form_flow_test"
+    task_template: |
+      Navigate to {URL}. Wait for page to fully load.
+
+      Find the {FORM_NAME} form.
+
+      Test 1: Happy Path
+      1. Fill all required fields with valid data:
+         {FIELD_VALUES}
+      2. Click the submit button
+      3. Verify success state (message, redirect, etc.)
+      4. Take screenshot of success state
+
+      Test 2: Validation
+      1. Clear all fields (or reload page)
+      2. Click submit without filling anything
+      3. Verify validation error messages appear
+      4. Take screenshot of error state
+
+      Test 3: Individual Field Validation
+      For each required field:
+      1. Fill all fields EXCEPT the current one
+      2. Submit
+      3. Verify specific error for that field
+
+      Return:
+      - Happy path: Pass/Fail with screenshot
+      - Validation: Pass/Fail with error messages
+      - Per-field validation: Pass/Fail for each field
+    return_conditions: "Return after all 3 test types completed"
+
+# Usage Example:
+# browser_subagent(
+#   TaskName: "Comprehensive Verification",
+#   Task: templates.test_all_interactions.task_template.replace("{URL}", "http://localhost:3000"),
+#   RecordingName: "comprehensive_test"
+# )
+
+# _DOMYH Awesome Code • Browser Subagent Task Templates v1.0.0_

package/.agent/skills/tooling/browser-agent/data/verification-flow.yaml

@@ -0,0 +1,209 @@
+# =============================================================================
+# verification-flow.yaml — 5-Phase Comprehensive Browser Verification Flow
+# =============================================================================
+
+version: "1.0.0"
+
+phases:
+  - phase: 1
+    name: "Page Load Verification"
+    goal: "Ensure page loads correctly without errors"
+    steps:
+      - step: "Navigate to URL"
+        tool: browser_navigate
+        args: { url: "{target_url}" }
+        verify: "Response status 200"
+
+      - step: "Wait for network idle"
+        tool: browser_wait_for
+        args: { time: 3 }
+        verify: "All resources loaded"
+
+      - step: "Check console errors"
+        tool: browser_console_messages
+        args: { level: "error" }
+        verify: "No JavaScript errors"
+        on_error: "Log errors, continue testing"
+
+      - step: "Capture baseline screenshot"
+        tool: browser_take_screenshot
+        args: { type: "png", fullPage: true }
+        verify: "Page renders correctly"
+
+      - step: "Capture accessibility snapshot"
+        tool: browser_snapshot
+        args: {}
+        verify: "Page structure readable"
+    expected_output: "Page loaded, no errors, baseline captured"
+    failure_handling: "If page fails to load, report immediately and stop"
+
+  - phase: 2
+    name: "Interactive Element Discovery"
+    goal: "Find ALL interactive elements from accessibility tree"
+    steps:
+      - step: "Parse accessibility tree from Phase 1 snapshot"
+        action: "Identify all interactive elements"
+        categories:
+          buttons: "role=button — count and list names"
+          links: "role=link — count and list destinations"
+          inputs: "role=textbox, role=searchbox — count and list labels"
+          selects: "role=combobox, role=listbox — count dropdown menus"
+          checkboxes: "role=checkbox, role=switch — count toggles"
+          tabs: "role=tab — count tab panels"
+          custom: "data-role, aria-haspopup — custom interactive elements"
+        verify: "All interactive elements identified"
+
+      - step: "Identify compound components"
+        action: "Look for complex UI patterns"
+        patterns:
+          modals: "Elements with aria-haspopup=dialog or modal trigger buttons"
+          accordions: "Elements with aria-expanded attribute"
+          menus: "Elements with aria-haspopup=menu"
+          tooltips: "Elements with aria-describedby pointing to hidden content"
+          carousels: "Elements with role=region and navigation controls"
+
+      - step: "Generate test plan"
+        action: "Create ordered list of elements to test"
+        priority: "Critical (forms, modals) → High (dropdowns, buttons) → Medium (tooltips, hovers)"
+
+    expected_output: "Complete element inventory with test priority"
+    failure_handling: "If no interactive elements found, verify page loaded correctly"
+
+  - phase: 3
+    name: "Systematic Interaction Testing"
+    goal: "Test EACH discovered element according to its type"
+
+    by_element_type:
+      button:
+        tests:
+          - test: "Click performs expected action"
+            tool: browser_click
+            verify: "browser_snapshot shows state change"
+          - test: "Disabled state not clickable"
+            tool: browser_snapshot
+            verify: "Disabled attribute present"
+          - test: "Loading state on action"
+            tool: browser_click
+            verify: "Loading indicator shown"
+
+      dropdown:
+        tests:
+          - test: "Click opens option list"
+            tool: browser_click
+            verify: "browser_snapshot shows options visible"
+          - test: "Select option updates value"
+            tool: browser_select_option
+            verify: "browser_snapshot shows selected value"
+          - test: "Escape closes dropdown"
+            tool: browser_press_key
+            args: { key: "Escape" }
+            verify: "browser_snapshot shows dropdown closed"
+
+      modal:
+        tests:
+          - test: "Trigger opens modal"
+            tool: browser_click
+            verify: "browser_snapshot shows dialog role"
+          - test: "Escape closes modal"
+            tool: browser_press_key
+            args: { key: "Escape" }
+            verify: "browser_snapshot shows modal gone"
+          - test: "Focus trapped inside"
+            tool: browser_press_key
+            args: { key: "Tab" }
+            verify: "Focus stays within dialog"
+            repeat: 10
+
+      form:
+        tests:
+          - test: "Fill all fields"
+            tool: browser_fill_form
+            verify: "All fields contain values"
+          - test: "Submit form"
+            tool: browser_click
+            verify: "Success state or redirect"
+          - test: "Empty submit shows validation"
+            tool: browser_click
+            verify: "Error messages visible"
+
+      hover:
+        tests:
+          - test: "Hover shows tooltip/menu"
+            tool: browser_hover
+            verify: "browser_snapshot shows hover content"
+          - test: "Keyboard focus shows same state"
+            tool: browser_press_key
+            args: { key: "Tab" }
+            verify: "Same content visible as hover"
+
+    expected_output: "Per-element pass/fail status"
+    failure_handling: "Log failure details, continue to next element"
+
+  - phase: 4
+    name: "Accessibility & Edge Cases"
+    goal: "Verify keyboard navigation, errors, and responsiveness"
+    steps:
+      - step: "Keyboard navigation"
+        tool: browser_press_key
+        action: "Tab through all elements"
+        verify: "All interactive elements reachable via Tab key"
+
+      - step: "Focus visibility"
+        tool: browser_take_screenshot
+        action: "Tab to element and screenshot"
+        verify: "Visible focus indicator on each element"
+
+      - step: "Console error check (post-interaction)"
+        tool: browser_console_messages
+        args: { level: "error" }
+        verify: "No new errors introduced during testing"
+
+      - step: "Network request check"
+        tool: browser_network_requests
+        args: { includeStatic: false }
+        verify: "No 4xx/5xx responses, no CORS errors"
+
+      - step: "Mobile responsive"
+        tool: browser_resize
+        args: { width: 375, height: 812 }
+        verify: "Layout correct, no overflow, elements accessible"
+        then:
+          - tool: browser_snapshot
+            verify: "All elements still discoverable"
+          - tool: browser_take_screenshot
+            verify: "Visual check mobile layout"
+
+    expected_output: "Accessibility and edge case results"
+    failure_handling: "Document issues with evidence"
+
+  - phase: 5
+    name: "Evidence-Based Report"
+    goal: "Compile comprehensive test results"
+    output:
+      summary_table:
+        format: |
+          | Element | Type | Test | Status | Evidence |
+          |---------|------|------|--------|----------|
+          | Submit button | button | click action | ✅ PASS | screenshot_1 |
+          | Country select | dropdown | open/select | ❌ FAIL | screenshot_2 |
+        required_columns: ["element", "type", "test", "status", "evidence"]
+
+      issues_list:
+        format: |
+          ### Issue 1: [Element Name]
+          - **Expected**: Dropdown opens on click
+          - **Actual**: Nothing happens
+          - **Severity**: Critical
+          - **Evidence**: [screenshot]
+
+      metrics:
+        total_elements: "Count of all interactive elements"
+        tests_passed: "Count of passed tests"
+        tests_failed: "Count of failed tests"
+        coverage: "tests_passed / (tests_passed + tests_failed) * 100"
+        console_errors: "Count of JS errors"
+        network_failures: "Count of 4xx/5xx requests"
+
+    expected_output: "Complete test report with evidence"
+
+# _DOMYH Awesome Code • 5-Phase Verification Flow v1.0.0_

package/.agent/skills/tooling/cli-dev/META.yaml

@@ -0,0 +1,55 @@
+name: cli-dev
+version: "1.0.0"
+display: CLI Tool Development
+category: tooling
+tier: 1
+priority: 3
+
+desc: "Production CLI tools with progressive discovery, subcommands, structured output, interactive prompts, and cross-platform support. Covers commander.js, clap (Rust), cobra (Go), Click (Python)."
+
+triggers:
+  file_patterns:
+    - "cli.ts"
+    - "cli.js"
+    - "cli/**"
+    - "bin/**"
+  keywords:
+    - CLI tool
+    - command line tool
+    - commander
+    - commander.js
+    - clap
+    - clap crate
+    - cobra
+    - cobra command
+    - argparse
+    - Click python
+    - interactive CLI
+    - terminal UI
+    - TUI
+    - Inquirer.js
+    - clack
+    - chalk
+    - ora
+    - ink react
+
+caps:
+  - Progressive discovery UX (help → suggest → auto)
+  - Subcommand architecture
+  - Structured output (JSON/YAML/table)
+  - Interactive prompts (Inquirer.js, clack, dialoguer)
+  - Cross-platform compatibility
+  - Error handling & exit codes
+  - Configuration (env + config files + defaults)
+  - AI-augmented CLI patterns
+
+related_skills:
+  - typescript
+  - go
+  - rust
+  - python
+
+hsa_adapter:
+  enabled: true
+  data_dir: "skills/tooling/cli-dev/data"
+  preload_data: false

package/.agent/skills/tooling/cli-dev/SKILL.md

@@ -0,0 +1,83 @@
+# CLI Tool Development
+
+> Progressive Discovery • Subcommands • Structured Output  
+> commander.js • clap • cobra • Click
+
+---
+
+## Khi Nào Dùng
+
+- Build CLI tool cho developer (dev tooling)
+- Interactive terminal applications
+- Tạo CLI wrapper cho API/service
+
+## Framework Selection
+
+| Framework        | Language   | Strengths                           |
+| ---------------- | ---------- | ----------------------------------- |
+| **commander.js** | Node.js/TS | Simple, widely used, npm ecosystem  |
+| **clap**         | Rust       | Type-safe, derive macros, fast      |
+| **cobra**        | Go         | Subcommands, auto-docs, completions |
+| **Click**        | Python     | Decorators, composable, testable    |
+| **clack**        | Node.js    | Beautiful interactive prompts       |
+
+## Core Patterns
+
+### Progressive Discovery UX
+
+```
+Level 1: mycli              → Show help + suggest commands
+Level 2: mycli --help       → Detailed help with examples
+Level 3: mycli <cmd> --help → Command-specific help
+Level 4: mycli suggest      → AI-powered suggestions
+```
+
+### Structured Output
+
+```typescript
+// Support multiple formats
+if (flags.format === "json") {
+  console.log(JSON.stringify(data, null, 2));
+} else if (flags.format === "yaml") {
+  console.log(yaml.stringify(data));
+} else {
+  console.log(table(data)); // Pretty table for humans
+}
+```
+
+### Exit Codes
+
+| Code | Meaning                  |
+| ---- | ------------------------ |
+| 0    | Success                  |
+| 1    | General error            |
+| 2    | Usage error (wrong args) |
+| 130  | Interrupted (Ctrl+C)     |
+
+### Error Handling
+
+```typescript
+try {
+  await command.execute();
+} catch (err) {
+  if (err instanceof UsageError) {
+    console.error(chalk.red(`Error: ${err.message}`));
+    console.log(chalk.dim("Run --help for usage"));
+    process.exit(2);
+  }
+  console.error(chalk.red(`Fatal: ${err.message}`));
+  process.exit(1);
+}
+```
+
+## Common Traps
+
+| Trap                  | Fix                                         |
+| --------------------- | ------------------------------------------- |
+| No colors in CI       | Detect CI env, disable colors automatically |
+| Global install issues | Use `npx` or `bunx` for zero-install        |
+| No completions        | Add shell completion generator              |
+
+---
+
+_DOMYH Awesome Code • CLI Dev Skill v1.0.0_