feat(skills): add responsive-layout-audit 🤖🤖🤖

docs/README.skills.md

@@ -374,6 +374,7 @@ See [CONTRIBUTING.md](../CONTRIBUTING.md#adding-skills) for guidelines on how to
 | [repo-standardizer](../skills/repo-standardizer/SKILL.md)<br />`gh skills install github/awesome-copilot repo-standardizer` | Polish any GitHub repository's surface — labels (emoji rating tiers, P0–P3 priority, impact severity), issue forms, PR template, CI workflows, CODEOWNERS, rulesets, docs. Repo meta & config only — no code logic touched. Use when creating a new repo or polishing an existing one. | `templates/AGENTS.md`<br />`templates/CHANGELOG.md`<br />`templates/CLAUDE.md`<br />`templates/CODEOWNERS`<br />`templates/CODE_OF_CONDUCT.md`<br />`templates/CONTRIBUTING.md`<br />`templates/LABELS.md`<br />`templates/PR_TEMPLATE.md`<br />`templates/README.md`<br />`templates/README.zh.md`<br />`templates/SECURITY.md`<br />`templates/VISION.md`<br />`templates/ci-go.yml`<br />`templates/ci-node.yml`<br />`templates/ci-python.yml`<br />`templates/ci-rust.yml`<br />`templates/config.yml`<br />`templates/issue-form-bug.yml`<br />`templates/issue-form-feature.yml`<br />`templates/issue-form-question.yml`<br />`templates/labels.json` |
 | [repo-story-time](../skills/repo-story-time/SKILL.md)<br />`gh skills install github/awesome-copilot repo-story-time` | Generate a comprehensive repository summary and narrative story from commit history | None |
 | [resemble-detect](../skills/resemble-detect/SKILL.md)<br />`gh skills install github/awesome-copilot resemble-detect` | Deepfake detection and media safety — detect AI-generated audio, images, video, and text, trace synthesis sources, apply watermarks, verify speaker identity, and analyze media intelligence using Resemble AI | `LICENSE`<br />`references/api-reference.md` |
+| [responsive-layout-audit](../skills/responsive-layout-audit/SKILL.md)<br />`gh skills install github/awesome-copilot responsive-layout-audit` | Use this skill to audit responsive rendering for a web page or local HTML with Playwright. It checks page-level horizontal overflow, region-level horizontal scrolling, clipping candidates, and hit-test obstruction candidates, then outputs PNG and JSON evidence. | `scripts/layout-audit.mjs`<br />`tests/fixtures/intentional-scroll.html`<br />`tests/fixtures/page-overflow.html`<br />`tests/layout-audit.test.mjs` |
 | [resx-source-generator-migration](../skills/resx-source-generator-migration/SKILL.md)<br />`gh skills install github/awesome-copilot resx-source-generator-migration` | Migrates a project that uses checked-in .designer.cs files behind .resx to using a source-generator instead | None |
 | [review-and-refactor](../skills/review-and-refactor/SKILL.md)<br />`gh skills install github/awesome-copilot review-and-refactor` | Review and refactor code in your project according to defined instructions | None |
 | [reviewing-oracle-to-postgres-migration](../skills/reviewing-oracle-to-postgres-migration/SKILL.md)<br />`gh skills install github/awesome-copilot reviewing-oracle-to-postgres-migration` | Identifies Oracle-to-PostgreSQL migration risks by cross-referencing code against known behavioral differences (empty strings, refcursors, type coercion, sorting/collations, UNION ALL planner risks, materialized-view refresh requirements, timestamps, concurrent transactions, etc.). Use when planning a database migration, reviewing migration artifacts, or validating that integration tests cover Oracle/PostgreSQL differences. | `references/REFERENCE.md`<br />`references/empty-strings-handling.md`<br />`references/no-data-found-exceptions.md`<br />`references/oracle-nvl-decode-functions.md`<br />`references/oracle-parentheses-from-clause.md`<br />`references/oracle-rownum-pagination.md`<br />`references/oracle-sysdate-sequences-dual.md`<br />`references/oracle-to-postgres-sorting.md`<br />`references/oracle-to-postgres-timestamp-timezone.md`<br />`references/oracle-to-postgres-to-char-numeric.md`<br />`references/oracle-to-postgres-type-coercion.md`<br />`references/postgres-concurrent-transactions.md`<br />`references/postgres-materialized-view-refresh.md`<br />`references/postgres-refcursor-handling.md`<br />`references/postgres-union-all-planner.md` |

skills/responsive-layout-audit/SKILL.md

@@ -0,0 +1,87 @@
+---
+name: responsive-layout-audit
+description: 'Use this skill to audit responsive rendering for a web page or local HTML with Playwright. It checks page-level horizontal overflow, region-level horizontal scrolling, clipping candidates, and hit-test obstruction candidates, then outputs PNG and JSON evidence.'
+argument-hint: "[target URL or HTML path] [viewports] [scroll selectors] [output directory]"
+---
+
+# Responsive Layout Audit
+
+## Purpose
+
+Render the page at multiple viewport sizes and separate page-level overflow from intentional in-region horizontal scrolling (for example, data tables).
+
+This skill reports candidates for review. It does not make final defect decisions and does not replace product acceptance.
+
+## Inputs
+
+- Target URL (`http`, `https`, `file`) or local HTML path.
+- Viewports. Default: `1920x1080`, `1392x900`, `950x900`, `696x900`, `390x844`.
+- Optional CSS selectors for horizontally scrollable regions.
+- Optional edge selector inside each region (for example `thead th:last-child`).
+- Output directory (use an empty run-specific directory).
+- Optional ready selector when SPA content appears late.
+
+If your project has its own viewport policy, use that policy and record the selected sizes.
+
+## Workflow
+
+1. Confirm target scope and avoid pages with sensitive production data.
+2. Fix the viewport set, optional scroll selectors, optional edge selector, and output directory.
+3. Reuse an existing Playwright installation when possible.
+4. Run [scripts/layout-audit.mjs](scripts/layout-audit.mjs) from the skill directory and inspect `layout-report.json` plus screenshots.
+
+```powershell
+node .\scripts\layout-audit.mjs `
+  --target .\path\to\page.html `
+  --out-dir .\run\layout-audit\screen-id\ `
+  --playwright-root .\run\playwright-runtime `
+  --scroll-selector ".table-viewport" `
+  --edge-selector "thead th:last-child" `
+  --check-hit-testing
+```
+
+You can pass `--scroll-selector` multiple times. `--edge-selector` is evaluated inside each region. Use `--ready-selector` for late-loading UI. `--wait-ms` is extra settling time, not readiness proof.
+
+If Playwright is not available, install it in a dedicated local runtime directory.
+
+```powershell
+npm install --prefix .\run\playwright-runtime playwright
+node .\run\playwright-runtime\node_modules\playwright\cli.js install chromium
+```
+
+Chromium is the default. Its browser binary must be installed separately with the command above. Reuse an existing compatible runtime where available; obtain permission before installing dependencies or browsers. Use `--browser msedge` only when Microsoft Edge is installed on the host.
+
+Record target, viewport set, selectors, Playwright/browser version, output paths, candidate dispositions, and remaining unknowns.
+
+## Verification
+
+Run [tests/layout-audit.test.mjs](tests/layout-audit.test.mjs) with `PLAYWRIGHT_ROOT` set to the directory containing `node_modules/playwright` and managed Chromium installed:
+
+```powershell
+$env:PLAYWRIGHT_ROOT = (Resolve-Path .\run\playwright-runtime).Path
+node --test tests/layout-audit.test.mjs
+```
+
+The suite uses synthetic fixtures, including [intentional scrolling](tests/fixtures/intentional-scroll.html) and [page overflow](tests/fixtures/page-overflow.html), plus a generated regression page. Tests cover the default Chromium launch, clipping, rendered visibility, selector uniqueness, below-fold obstruction, RTL scrolling, bounded filenames, and URL query redaction.
+
+For a separate opt-in Edge run, set `LAYOUT_AUDIT_BROWSER=msedge` before running the suite. This does not replace managed-Chromium coverage; report the browser actually tested.
+
+## How to read results
+
+- `page.horizontalOverflow`: compares document width and viewport width.
+- `scrollRegions`: tracks region width, max scroll-left, and optional edge visibility.
+- `text-clipping-candidate`: horizontal clipping or vertical line-clamp overflow based on rendered CSS and geometry.
+- `action-outside-viewport-candidate`: interactive elements outside viewport bounds.
+- `hit-test-obstruction-candidate`: sampled-point obstruction candidates.
+- `pageErrors`: uncaught JavaScript errors in the page context.
+- `LAYOUT_AUDIT_DONE`: execution and evidence generation completed.
+
+## Gotchas
+
+- Keep style policy (colors/borders/visual language) separate from this mechanical audit.
+- Do not treat page-level width and container-level horizontal scroll as the same signal.
+- Do not treat `scrollWidth` mismatch alone as a defect.
+- Hit-test scrolls rendered buttons and links into view before sampling and restores the original scroll offsets afterward. Scrolling can trigger lazy loading or page event handlers. This is not a full interaction test and does not cover frames or shadow roots.
+- `endReached` checks the scroll offset, including negative RTL offsets. `edgeVisible` checks geometry only; neither proves that text is readable or unobstructed. Inspect the PNGs as well.
+- The script redacts secret-like query values but is not a full anonymization layer.
+- Screenshots may include sensitive information. Use safe test data and controlled sharing.