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

[furukawa658]

PR Draft: responsive-layout-audit

Title

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

Summary

Add responsive-layout-audit, a Playwright-based skill for responsive UI audit across multiple viewports.
The skill separates page-level horizontal overflow from intentional region-level horizontal scrolling,
captures evidence (layout-report.json + PNG), and reports review candidates such as:

• page-horizontal-overflow
• text-clipping-candidate
• action-outside-viewport-candidate
• hit-test-obstruction-candidate

It also redacts secret-like query parameter values in the report target URL.

Why this adds value

• Provides a reusable, testable audit workflow instead of ad-hoc manual viewport checks.
• Distinguishes "page bug" vs "intentional scroll container" with explicit region probes.
• Produces machine-readable evidence for follow-up review, not just screenshots.

Contents

• New skill folder: skills/responsive-layout-audit/
  • SKILL.md
  • scripts/layout-audit.mjs
  • tests/layout-audit.test.mjs
  • tests/fixtures/intentional-scroll.html
  • tests/fixtures/page-overflow.html
• Generated update:
  • docs/README.skills.md

Verification

Executed in local awesome-copilot working tree.

1. npm run skill:validate

• Result: pass
• Evidence: all 430 skills validated; no skill-specific error for this addition.

2. npm run build

• Result: pass
• Evidence: README generation and marketplace generation completed.
• Note: warning lines from existing external.json entries are pre-existing and not introduced by this skill.

3. Functional checks with fixtures

• intentional-scroll.html
  • page overflow false
  • region endReached=true, edgeVisible=true
  • clipping and hit-test candidates detected
• redaction target with access_token=secret-value
  • output target contains access_token=REDACTED
• page-overflow.html
  • page overflow true
  • page-horizontal-overflow candidate detected

Limitations

• Findings are candidates for human review, not final defect verdicts.
• The tool does not click elements; hit-test is sampled-point obstruction detection.
• Redaction currently targets secret-like query keys and userinfo fields; it is not a full anonymization system.

Disclosure

• This contribution was prepared with AI assistance.
• Local checks are not maintainer approval.

[github-actions]

🔒 PR Risk Scan Results

Scanned 5 changed file(s).

Severity	Count
🔴 High	0
🟠 Medium	0
ℹ️ Info	2

Severity	Rule	File	Line	Match
ℹ️	skill-script-touched	skills/responsive-layout-audit/scripts/layout-audit.mjs	1	skills/responsive-layout-audit/scripts/layout-audit.mjs
ℹ️	skill-script-touched	skills/responsive-layout-audit/tests/layout-audit.test.mjs	1	skills/responsive-layout-audit/tests/layout-audit.test.mjs

This is an automated soft-gate report. Findings indicate review targets and do not block merge by themselves.

[github-actions]

🚦 Submission status: 👀 Ready for review

Risk tier: merge-risk:high — Privileged execution, automation, or review-policy change
Required to merge: passing submission-gate checks plus 1 approval from reviewers with write access, including a maintainer with admin or maintain permission.

Why this tier

• skills/responsive-layout-audit/scripts/layout-audit.mjs is a high-risk path (automation, scripts, MCP config, hooks, or review policy)
• Spawns processes or evaluates code in skills/responsive-layout-audit/tests/layout-audit.test.mjs

Automated checks

Check	Status	Details
Line endings	✅ Passed	Passed · logs
Spelling	✅ Passed	Passed · logs
Generated README consistency	✅ Passed	Passed · logs
Skill validation	✅ Passed	Passed · logs
Skill lint (vally)	✅ Passed	Passed · logs
Risk scan	✅ Passed	Passed · logs
Contributor reputation	✅ Passed	Passed · logs
Duplicate resource scan	✅ Passed	Passed · logs
PR quality signal	⏭️ Skipped	Skipped by its workflow · logs

Review

• Approvals: 0/1
• Assigned reviewer: not assigned yet — comment /request-review to ask for one
• Review target date: not set
• Still needed: 1 more approval(s); an approval from a maintainer with admin or maintain permission
• The core-maintainers pool is not staffed yet; an approver with admin or maintain permission is required instead.

Commands

Command	Who	What it does
/rerun-checks	PR author, maintainers	Re-runs failed or incomplete checks and re-evaluates this gate
/request-review	PR author, maintainers	Asks the review rotation to assign a reviewer (adds needs-reviewer)

_{Updated for ba35580 · gate run · This comment is maintained automatically — see submission gate docs.}

[github-actions]

🔍 Vally Lint Results

✅ All checks passed

Scope	Checked
Skills	1
Agents	0
Total	1

Severity	Count
❌ Errors	0
⚠️ Warnings	0
ℹ️ Advisories	0

Summary

Level	Finding
ℹ️	✅ responsive-layout-audit (2/2 checks passed)
ℹ️	✓ [spec-compliance] All 1 skill(s) are spec-compliant.
ℹ️	✓ spec-compliance: All spec checks passed.
ℹ️	✓ [valid-refs] All file references across 1 skill(s) are valid.
ℹ️	✓ valid-refs: All file references resolve to existing files within the skill directory.
ℹ️	1 skill(s) linted, 1 passed

Full linter output

### Linting skills/responsive-layout-audit
✅ responsive-layout-audit (2/2 checks passed)
    ✓ [spec-compliance] All 1 skill(s) are spec-compliant.
        ✓ spec-compliance: All spec checks passed.
    ✓ [valid-refs] All file references across 1 skill(s) are valid.
        ✓ valid-refs: All file references resolve to existing files within the skill directory.

1 skill(s) linted, 1 passed

[Copilot]

🟡 Changes recommended

Correctness and portability gaps affect clipping detection, below-fold hit testing, RTL scrolling, and browser setup.

9 open findings

• Default to managed Chromium instead of the branded Edge channel · New
• Limit sanitized labels before constructing screenshot filenames · New
• Use rendered styles and geometry instead of aria-hidden for visibility · New
• Generate unique selectors for report entries · New
• Separate horizontal overflow checks from vertical line-clamp detection · New
• Scroll offscreen targets into view before hit-test sampling · New
• Handle RTL scroll offsets when checking the far edge · New
• Use Chromium for portable tests instead of requiring Edge · New
• Use single quotes for skill frontmatter descriptions · New

What changed in this PR

Adds a reusable Playwright-based responsive layout auditing skill with machine-readable evidence.

Changes:

• Adds overflow, clipping, hit-testing, and scroll-region analysis.
• Adds fixtures and functional tests.
• Registers the skill in generated documentation.

Knowledge uplift: High — the deterministic audit script provides functionality beyond existing general web-testing guidance.

File	Description
skills/​responsive-layout-audit/​SKILL.md	Documents usage and findings.
skills/​responsive-layout-audit/​scripts/​layout-audit.mjs	Implements the audit engine.
skills/​responsive-layout-audit/​tests/​layout-audit.test.mjs	Tests core audit behavior.
skills/​responsive-layout-audit/​tests/​fixtures/​intentional-scroll.html	Provides scrolling and obstruction cases.
skills/​responsive-layout-audit/​tests/​fixtures/​page-overflow.html	Provides page-overflow coverage.
docs/​README.skills.md	Registers the new skill.

🧠 Review effort: Balanced

---

💡 Configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[Copilot]

🟡 Changes recommended

The report can expose plaintext form values, and clipping detection has a confirmed false-positive condition.

2 open findings

• Avoid exposing form control values in layout reports · New
• Add horizontal offscreen and scroll-region regression cases · New

9 resolved since last review

• Default to managed Chromium instead of the branded Edge channel
• Use Chromium for portable tests instead of requiring Edge
• Handle RTL scroll offsets when checking the far edge
• Scroll offscreen targets into view before hit-test sampling
• Separate horizontal overflow checks from vertical line-clamp detection
• Generate unique selectors for report entries
• Use rendered styles and geometry instead of aria-hidden for visibility
• Limit sanitized labels before constructing screenshot filenames
• Use single quotes for skill frontmatter descriptions

Previously missed (1)

In code that hasn't changed since last review

Require clipping overflow before reporting text-overflow ellipsis

skills/​responsive-layout-audit/​scripts/​layout-audit.mjs:164

text-overflow: ellipsis does not itself clip content; with overflow-x: visible (or a scrollable overflow), the text remains available, but this condition still emits a clipping candidate. Require an actually clipping overflow mode so the report does not produce a known false positive. The regression fixture should also combine text-overflow: ellipsis with its visible-overflow case.

🧠 Review effort: Balanced

[Copilot]

🔵 Needs a closer look

The clipping detector currently reports false positives when ellipsis is configured without clipping overflow.

1 open finding

• Add horizontal offscreen and scroll-region regression cases

1 resolved since last review

• Avoid exposing form control values in layout reports

Previously missed (1)

In code that hasn't changed since last review

Require clipping overflow before reporting ellipsis text clipping

skills/​responsive-layout-audit/​scripts/​layout-audit.mjs:164

text-overflow: ellipsis does not itself clip content; with overflow-x: visible, the text remains rendered outside the box. The || style.textOverflow === "ellipsis" branch therefore reports text-clipping-candidate for content that is not clipped. Require a clipping overflow mode (and add a regression fixture with ellipsis plus visible overflow).

🧠 Review effort: Balanced

[Copilot]

🟢 Approval recommended

The skill is differentiated, documented, syntactically valid, and supported by focused functional tests.

1 open finding

• Add horizontal offscreen and scroll-region regression cases

🧠 Review effort: Balanced

[aaronpowell]

This skill isn't really adding a major uplift, it's more acting as an opinionated wrapper around playwright.