@cubis/foundry 0.3.10

package/Ai Agent Workflow/powers/vercel-web-analytics/POWER.md

@@ -0,0 +1,21 @@
+---
+name: vercel-web-analytics
+displayName: Vercel Web Analytics
+description: Operate privacy-aware web analytics and KPI instrumentation.
+keywords:
+  - vercel
+  - observability
+  - web
+  - analytics
+author: Cubis Foundry
+---
+
+# Vercel Web Analytics
+
+Use this power as a concise execution guide for `skills/vercel-web-analytics`.
+
+## Quick Loop
+1. Clarify scope and success criteria.
+2. Apply the smallest safe Vercel-specific change.
+3. Verify behavior in preview and production context.
+4. Document rollback and follow-up actions.

package/Ai Agent Workflow/powers/vercel-web-analytics/SKILL.md

@@ -0,0 +1,21 @@
+---
+name: vercel-web-analytics
+displayName: Vercel Web Analytics
+description: Operate privacy-aware web analytics and KPI instrumentation.
+keywords:
+  - vercel
+  - observability
+  - web
+  - analytics
+author: Cubis Foundry
+---
+
+# Vercel Web Analytics
+
+Use this power as a concise execution guide for `skills/vercel-web-analytics`.
+
+## Quick Loop
+1. Clarify scope and success criteria.
+2. Apply the smallest safe Vercel-specific change.
+3. Verify behavior in preview and production context.
+4. Document rollback and follow-up actions.

package/Ai Agent Workflow/powers/vercel-webhooks-and-checks/POWER.md

@@ -0,0 +1,22 @@
+---
+name: vercel-webhooks-and-checks
+displayName: Vercel Webhooks And Checks
+description: Design webhook and deployment check pipelines with idempotent handlers.
+keywords:
+  - vercel
+  - cli
+  - webhooks
+  - and
+  - checks
+author: Cubis Foundry
+---
+
+# Vercel Webhooks And Checks
+
+Use this power as a concise execution guide for `skills/vercel-webhooks-and-checks`.
+
+## Quick Loop
+1. Clarify scope and success criteria.
+2. Apply the smallest safe Vercel-specific change.
+3. Verify behavior in preview and production context.
+4. Document rollback and follow-up actions.

package/Ai Agent Workflow/powers/vercel-webhooks-and-checks/SKILL.md

@@ -0,0 +1,22 @@
+---
+name: vercel-webhooks-and-checks
+displayName: Vercel Webhooks And Checks
+description: Design webhook and deployment check pipelines with idempotent handlers.
+keywords:
+  - vercel
+  - cli
+  - webhooks
+  - and
+  - checks
+author: Cubis Foundry
+---
+
+# Vercel Webhooks And Checks
+
+Use this power as a concise execution guide for `skills/vercel-webhooks-and-checks`.
+
+## Quick Loop
+1. Clarify scope and success criteria.
+2. Apply the smallest safe Vercel-specific change.
+3. Verify behavior in preview and production context.
+4. Document rollback and follow-up actions.

package/Ai Agent Workflow/powers/vulnerability-scanner/POWER.md

@@ -0,0 +1,13 @@
+---
+name: vulnerability-scanner
+description: Advanced vulnerability analysis principles. OWASP 2025, Supply Chain Security, attack surface mapping, risk prioritization.
+---
+
+# vulnerability-scanner
+
+This is a compatibility power wrapper for the `vulnerability-scanner` skill.
+
+Primary source:
+- `Ai Agent Workflow/skills/vulnerability-scanner/SKILL.md`
+
+Use this folder for power-specific extensions when needed.

package/Ai Agent Workflow/powers/vulnerability-scanner/SKILL.md

@@ -0,0 +1,11 @@
+---
+name: vulnerability-scanner
+description: Advanced vulnerability analysis principles. OWASP 2025, Supply Chain Security, attack surface mapping, risk prioritization.
+---
+
+# vulnerability-scanner
+
+This power mirrors the base skill:
+- `Ai Agent Workflow/skills/vulnerability-scanner/SKILL.md`
+
+When both exist, prefer the base skill as source of truth unless power-specific overrides are added here.

package/Ai Agent Workflow/powers/web-design-guidelines/POWER.md

@@ -0,0 +1,13 @@
+---
+name: web-design-guidelines
+description: Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
+---
+
+# web-design-guidelines
+
+This is a compatibility power wrapper for the `web-design-guidelines` skill.
+
+Primary source:
+- `Ai Agent Workflow/skills/web-design-guidelines/SKILL.md`
+
+Use this folder for power-specific extensions when needed.

package/Ai Agent Workflow/powers/web-design-guidelines/SKILL.md

@@ -0,0 +1,11 @@
+---
+name: web-design-guidelines
+description: Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
+---
+
+# web-design-guidelines
+
+This power mirrors the base skill:
+- `Ai Agent Workflow/skills/web-design-guidelines/SKILL.md`
+
+When both exist, prefer the base skill as source of truth unless power-specific overrides are added here.

package/Ai Agent Workflow/powers/web-perf/SKILL.md

@@ -0,0 +1,193 @@
+---
+name: web-perf
+description: Analyzes web performance using Chrome DevTools MCP. Measures Core Web Vitals (FCP, LCP, TBT, CLS, Speed Index), identifies render-blocking resources, network dependency chains, layout shifts, caching issues, and accessibility gaps. Use when asked to audit, profile, debug, or optimize page load performance, Lighthouse scores, or site speed.
+---
+
+# Web Performance Audit
+
+Audit web page performance using Chrome DevTools MCP tools. This skill focuses on Core Web Vitals, network optimization, and high-level accessibility gaps.
+
+## FIRST: Verify MCP Tools Available
+
+**Run this before starting.** Try calling `navigate_page` or `performance_start_trace`. If unavailable, STOP—the chrome-devtools MCP server isn't configured.
+
+Ask the user to add this to their MCP config:
+
+```json
+"chrome-devtools": {
+  "type": "local",
+  "command": ["npx", "-y", "chrome-devtools-mcp@latest"]
+}
+```
+
+## Key Guidelines
+
+- **Be assertive**: Verify claims by checking network requests, DOM, or codebase—then state findings definitively.
+- **Verify before recommending**: Confirm something is unused before suggesting removal.
+- **Quantify impact**: Use estimated savings from insights. Don't prioritize changes with 0ms impact.
+- **Skip non-issues**: If render-blocking resources have 0ms estimated impact, note but don't recommend action.
+- **Be specific**: Say "compress hero.png (450KB) to WebP" not "optimize images".
+- **Prioritize ruthlessly**: A site with 200ms LCP and 0 CLS is already excellent—say so.
+
+## Quick Reference
+
+| Task | Tool Call |
+|------|-----------|
+| Load page | `navigate_page(url: "...")` |
+| Start trace | `performance_start_trace(autoStop: true, reload: true)` |
+| Analyze insight | `performance_analyze_insight(insightSetId: "...", insightName: "...")` |
+| List requests | `list_network_requests(resourceTypes: ["Script", "Stylesheet", ...])` |
+| Request details | `get_network_request(reqid: <id>)` |
+| A11y snapshot | `take_snapshot(verbose: true)` |
+
+## Workflow
+
+Copy this checklist to track progress:
+
+```
+Audit Progress:
+- [ ] Phase 1: Performance trace (navigate + record)
+- [ ] Phase 2: Core Web Vitals analysis (includes CLS culprits)
+- [ ] Phase 3: Network analysis
+- [ ] Phase 4: Accessibility snapshot
+- [ ] Phase 5: Codebase analysis (skip if third-party site)
+```
+
+### Phase 1: Performance Trace
+
+1. Navigate to the target URL:
+   ```
+   navigate_page(url: "<target-url>")
+   ```
+
+2. Start a performance trace with reload to capture cold-load metrics:
+   ```
+   performance_start_trace(autoStop: true, reload: true)
+   ```
+
+3. Wait for trace completion, then retrieve results.
+
+**Troubleshooting:**
+- If trace returns empty or fails, verify the page loaded correctly with `navigate_page` first
+- If insight names don't match, inspect the trace response to list available insights
+
+### Phase 2: Core Web Vitals Analysis
+
+Use `performance_analyze_insight` to extract key metrics.
+
+**Note:** Insight names may vary across Chrome DevTools versions. If an insight name doesn't work, check the `insightSetId` from the trace response to discover available insights.
+
+Common insight names:
+
+| Metric | Insight Name | What to Look For |
+|--------|--------------|------------------|
+| LCP | `LCPBreakdown` | Time to largest contentful paint; breakdown of TTFB, resource load, render delay |
+| CLS | `CLSCulprits` | Elements causing layout shifts (images without dimensions, injected content, font swaps) |
+| Render Blocking | `RenderBlocking` | CSS/JS blocking first paint |
+| Document Latency | `DocumentLatency` | Server response time issues |
+| Network Dependencies | `NetworkRequestsDepGraph` | Request chains delaying critical resources |
+
+Example:
+```
+performance_analyze_insight(insightSetId: "<id-from-trace>", insightName: "LCPBreakdown")
+```
+
+**Key thresholds (good/needs-improvement/poor):**
+- TTFB: < 800ms / < 1.8s / > 1.8s
+- FCP: < 1.8s / < 3s / > 3s
+- LCP: < 2.5s / < 4s / > 4s
+- INP: < 200ms / < 500ms / > 500ms
+- TBT: < 200ms / < 600ms / > 600ms
+- CLS: < 0.1 / < 0.25 / > 0.25
+- Speed Index: < 3.4s / < 5.8s / > 5.8s
+
+### Phase 3: Network Analysis
+
+List all network requests to identify optimization opportunities:
+```
+list_network_requests(resourceTypes: ["Script", "Stylesheet", "Document", "Font", "Image"])
+```
+
+**Look for:**
+
+1. **Render-blocking resources**: JS/CSS in `<head>` without `async`/`defer`/`media` attributes
+2. **Network chains**: Resources discovered late because they depend on other resources loading first (e.g., CSS imports, JS-loaded fonts)
+3. **Missing preloads**: Critical resources (fonts, hero images, key scripts) not preloaded
+4. **Caching issues**: Missing or weak `Cache-Control`, `ETag`, or `Last-Modified` headers
+5. **Large payloads**: Uncompressed or oversized JS/CSS bundles
+6. **Unused preconnects**: If flagged, verify by checking if ANY requests went to that origin. If zero requests, it's definitively unused—recommend removal. If requests exist but loaded late, the preconnect may still be valuable.
+
+For detailed request info:
+```
+get_network_request(reqid: <id>)
+```
+
+### Phase 4: Accessibility Snapshot
+
+Take an accessibility tree snapshot:
+```
+take_snapshot(verbose: true)
+```
+
+**Flag high-level gaps:**
+- Missing or duplicate ARIA IDs
+- Elements with poor contrast ratios (check against WCAG AA: 4.5:1 for normal text, 3:1 for large text)
+- Focus traps or missing focus indicators
+- Interactive elements without accessible names
+
+## Phase 5: Codebase Analysis
+
+**Skip if auditing a third-party site without codebase access.**
+
+Analyze the codebase to understand where improvements can be made.
+
+### Detect Framework & Bundler
+
+Search for configuration files to identify the stack:
+
+| Tool | Config Files |
+|------|--------------|
+| Webpack | `webpack.config.js`, `webpack.*.js` |
+| Vite | `vite.config.js`, `vite.config.ts` |
+| Rollup | `rollup.config.js`, `rollup.config.mjs` |
+| esbuild | `esbuild.config.js`, build scripts with `esbuild` |
+| Parcel | `.parcelrc`, `package.json` (parcel field) |
+| Next.js | `next.config.js`, `next.config.mjs` |
+| Nuxt | `nuxt.config.js`, `nuxt.config.ts` |
+| SvelteKit | `svelte.config.js` |
+| Astro | `astro.config.mjs` |
+
+Also check `package.json` for framework dependencies and build scripts.
+
+### Tree-Shaking & Dead Code
+
+- **Webpack**: Check for `mode: 'production'`, `sideEffects` in package.json, `usedExports` optimization
+- **Vite/Rollup**: Tree-shaking enabled by default; check for `treeshake` options
+- **Look for**: Barrel files (`index.js` re-exports), large utility libraries imported wholesale (lodash, moment)
+
+### Unused JS/CSS
+
+- Check for CSS-in-JS vs. static CSS extraction
+- Look for PurgeCSS/UnCSS configuration (Tailwind's `content` config)
+- Identify dynamic imports vs. eager loading
+
+### Polyfills
+
+- Check for `@babel/preset-env` targets and `useBuiltIns` setting
+- Look for `core-js` imports (often oversized)
+- Check `browserslist` config for overly broad targeting
+
+### Compression & Minification
+
+- Check for `terser`, `esbuild`, or `swc` minification
+- Look for gzip/brotli compression in build output or server config
+- Check for source maps in production builds (should be external or disabled)
+
+## Output Format
+
+Present findings as:
+
+1. **Core Web Vitals Summary** - Table with metric, value, and rating (good/needs-improvement/poor)
+2. **Top Issues** - Prioritized list of problems with estimated impact (high/medium/low)
+3. **Recommendations** - Specific, actionable fixes with code snippets or config changes
+4. **Codebase Findings** - Framework/bundler detected, optimization opportunities (omit if no codebase access)

package/Ai Agent Workflow/powers/webapp-testing/LICENSE.txt

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/Ai Agent Workflow/powers/webapp-testing/SKILL.md

@@ -0,0 +1,96 @@
+---
+name: webapp-testing
+description: Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.
+license: Complete terms in LICENSE.txt
+---
+
+# Web Application Testing
+
+To test local web applications, write native Python Playwright scripts.
+
+**Helper Scripts Available**:
+- `scripts/with_server.py` - Manages server lifecycle (supports multiple servers)
+
+**Always run scripts with `--help` first** to see usage. DO NOT read the source until you try running the script first and find that a customized solution is abslutely necessary. These scripts can be very large and thus pollute your context window. They exist to be called directly as black-box scripts rather than ingested into your context window.
+
+## Decision Tree: Choosing Your Approach
+
+```
+User task → Is it static HTML?
+    ├─ Yes → Read HTML file directly to identify selectors
+    │         ├─ Success → Write Playwright script using selectors
+    │         └─ Fails/Incomplete → Treat as dynamic (below)
+    │
+    └─ No (dynamic webapp) → Is the server already running?
+        ├─ No → Run: python scripts/with_server.py --help
+        │        Then use the helper + write simplified Playwright script
+        │
+        └─ Yes → Reconnaissance-then-action:
+            1. Navigate and wait for networkidle
+            2. Take screenshot or inspect DOM
+            3. Identify selectors from rendered state
+            4. Execute actions with discovered selectors
+```
+
+## Example: Using with_server.py
+
+To start a server, run `--help` first, then use the helper:
+
+**Single server:**
+```bash
+python scripts/with_server.py --server "npm run dev" --port 5173 -- python your_automation.py
+```
+
+**Multiple servers (e.g., backend + frontend):**
+```bash
+python scripts/with_server.py \
+  --server "cd backend && python server.py" --port 3000 \
+  --server "cd frontend && npm run dev" --port 5173 \
+  -- python your_automation.py
+```
+
+To create an automation script, include only Playwright logic (servers are managed automatically):
+```python
+from playwright.sync_api import sync_playwright
+
+with sync_playwright() as p:
+    browser = p.chromium.launch(headless=True) # Always launch chromium in headless mode
+    page = browser.new_page()
+    page.goto('http://localhost:5173') # Server already running and ready
+    page.wait_for_load_state('networkidle') # CRITICAL: Wait for JS to execute
+    # ... your automation logic
+    browser.close()
+```
+
+## Reconnaissance-Then-Action Pattern
+
+1. **Inspect rendered DOM**:
+   ```python
+   page.screenshot(path='/tmp/inspect.png', full_page=True)
+   content = page.content()
+   page.locator('button').all()
+   ```
+
+2. **Identify selectors** from inspection results
+
+3. **Execute actions** using discovered selectors
+
+## Common Pitfall
+
+❌ **Don't** inspect the DOM before waiting for `networkidle` on dynamic apps
+✅ **Do** wait for `page.wait_for_load_state('networkidle')` before inspection
+
+## Best Practices
+
+- **Use bundled scripts as black boxes** - To accomplish a task, consider whether one of the scripts available in `scripts/` can help. These scripts handle common, complex workflows reliably without cluttering the context window. Use `--help` to see usage, then invoke directly. 
+- Use `sync_playwright()` for synchronous scripts
+- Always close the browser when done
+- Use descriptive selectors: `text=`, `role=`, CSS selectors, or IDs
+- Add appropriate waits: `page.wait_for_selector()` or `page.wait_for_timeout()`
+
+## Reference Files
+
+- **examples/** - Examples showing common patterns:
+  - `element_discovery.py` - Discovering buttons, links, and inputs on a page
+  - `static_html_automation.py` - Using file:// URLs for local HTML
+  - `console_logging.py` - Capturing console logs during automation

package/Ai Agent Workflow/powers/webapp-testing/examples/console_logging.py

@@ -0,0 +1,35 @@
+from playwright.sync_api import sync_playwright
+
+# Example: Capturing console logs during browser automation
+
+url = 'http://localhost:5173'  # Replace with your URL
+
+console_logs = []
+
+with sync_playwright() as p:
+    browser = p.chromium.launch(headless=True)
+    page = browser.new_page(viewport={'width': 1920, 'height': 1080})
+
+    # Set up console log capture
+    def handle_console_message(msg):
+        console_logs.append(f"[{msg.type}] {msg.text}")
+        print(f"Console: [{msg.type}] {msg.text}")
+
+    page.on("console", handle_console_message)
+
+    # Navigate to page
+    page.goto(url)
+    page.wait_for_load_state('networkidle')
+
+    # Interact with the page (triggers console logs)
+    page.click('text=Dashboard')
+    page.wait_for_timeout(1000)
+
+    browser.close()
+
+# Save console logs to file
+with open('/mnt/user-data/outputs/console.log', 'w') as f:
+    f.write('\n'.join(console_logs))
+
+print(f"\nCaptured {len(console_logs)} console messages")
+print(f"Logs saved to: /mnt/user-data/outputs/console.log")