Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add darellchua2/opencode-config-template --skill playwright-responsive-audit-skillgit clone --depth 1 https://github.com/darellchua2/opencode-config-templateWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/darellchua2/opencode-config-template/playwright-responsive-audit-skill)<a href="https://agentmods.dev/skills/darellchua2/opencode-config-template/playwright-responsive-audit-skill"><img src="https://agentmods.dev/badge/skills/darellchua2/opencode-config-template/playwright-responsive-audit-skill.svg" alt="Measured on agentmods" height="20"></a>- NVIDIA SkillSpector warn
SkillSpector: 18 findings, up to medium
These are SkillSpector’s own severities. On a checked sample its high-severity flags on skills were ~96% false positives — a documented command, a public API, a “never do X” rule — so we show them as a caution to read, not a verdict. Why →
- medium MCP Rug Pull · line 46 npx commands without a version suffix (e.g. @1.0.0) create a rug-pull risk if the upstream server is compromised and publishes a malicious update.Fix: Pin the version: npx @scope/[email protected]
- medium MCP Rug Pull · line 47 npx commands without a version suffix (e.g. @1.0.0) create a rug-pull risk if the upstream server is compromised and publishes a malicious update.Fix: Pin the version: npx @scope/[email protected]
- medium MCP Rug Pull · line 50 npx commands without a version suffix (e.g. @1.0.0) create a rug-pull risk if the upstream server is compromised and publishes a malicious update.Fix: Pin the version: npx @scope/[email protected]
- medium MCP Rug Pull · line 57 npx commands without a version suffix (e.g. @1.0.0) create a rug-pull risk if the upstream server is compromised and publishes a malicious update.Fix: Pin the version: npx @scope/[email protected]
- medium MCP Rug Pull · line 351 npx commands without a version suffix (e.g. @1.0.0) create a rug-pull risk if the upstream server is compromised and publishes a malicious update.Fix: Pin the version: npx @scope/[email protected]
- medium MCP Rug Pull · line 354 npx commands without a version suffix (e.g. @1.0.0) create a rug-pull risk if the upstream server is compromised and publishes a malicious update.Fix: Pin the version: npx @scope/[email protected]
- medium MCP Rug Pull · line 374 npx commands without a version suffix (e.g. @1.0.0) create a rug-pull risk if the upstream server is compromised and publishes a malicious update.Fix: Pin the version: npx @scope/[email protected]
- medium MCP Rug Pull · line 375 npx commands without a version suffix (e.g. @1.0.0) create a rug-pull risk if the upstream server is compromised and publishes a malicious update.Fix: Pin the version: npx @scope/[email protected]
- medium MCP Rug Pull · line 376 npx commands without a version suffix (e.g. @1.0.0) create a rug-pull risk if the upstream server is compromised and publishes a malicious update.Fix: Pin the version: npx @scope/[email protected]
- medium MCP Rug Pull · line 377 npx commands without a version suffix (e.g. @1.0.0) create a rug-pull risk if the upstream server is compromised and publishes a malicious update.Fix: Pin the version: npx @scope/[email protected]
- medium MCP Rug Pull · line 378 npx commands without a version suffix (e.g. @1.0.0) create a rug-pull risk if the upstream server is compromised and publishes a malicious update.Fix: Pin the version: npx @scope/[email protected]
- medium MCP Rug Pull · line 611 npx commands without a version suffix (e.g. @1.0.0) create a rug-pull risk if the upstream server is compromised and publishes a malicious update.Fix: Pin the version: npx @scope/[email protected]
- medium MCP Rug Pull · line 612 npx commands without a version suffix (e.g. @1.0.0) create a rug-pull risk if the upstream server is compromised and publishes a malicious update.Fix: Pin the version: npx @scope/[email protected]
- medium MCP Rug Pull · line 613 npx commands without a version suffix (e.g. @1.0.0) create a rug-pull risk if the upstream server is compromised and publishes a malicious update.Fix: Pin the version: npx @scope/[email protected]
- medium MCP Rug Pull · line 621 npx commands without a version suffix (e.g. @1.0.0) create a rug-pull risk if the upstream server is compromised and publishes a malicious update.Fix: Pin the version: npx @scope/[email protected]
- medium MCP Rug Pull · line 623 npx commands without a version suffix (e.g. @1.0.0) create a rug-pull risk if the upstream server is compromised and publishes a malicious update.Fix: Pin the version: npx @scope/[email protected]
- medium MCP Rug Pull · line 632 npx commands without a version suffix (e.g. @1.0.0) create a rug-pull risk if the upstream server is compromised and publishes a malicious update.Fix: Pin the version: npx @scope/[email protected]
- medium Excessive Agency · line 560 Skill enables autonomous high-impact decisions without human-in-the-loop verification. Critical operations (destructive commands, financial transactions, data deletion) should require explicit user confirmation.Fix: Add human-in-the-loop confirmation for destructive, irreversible, or high-impact operations. Never auto-execute commands that modify files, send data, or alter system state.
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00048 | $0.06802 |
| Opus 5 | $0.00024 | $0.03401 |
| Sonnet 5 | $0.00010 | $0.01360 |
| Haiku 4.5 | $0.00005 | $0.00680 |
Grade A, and why
playwright-responsive-audit-skill scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 4d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 781 lines — stays where its author put it; the contents beside it link to each section on GitHub.
What I do
I define the methodology for auditing and fixing responsive UI defects in Next.js (or any web) projects using Playwright. This is a checker-and-fixer capability: detect responsive issues, apply fixes by confidence tier, and emit permanent regression specs.
When to use me
Loaded exclusively by responsive-audit-subagent via permission.skill. Not auto-triggered. The primary session spawns the subagent once; the subagent runs the closed loop internally over a persistent PTY session (detect→fix→re-verify), delegating only screenshot review to image-analyzer-subagent.
Prerequisite: Playwright Setup
Before running any responsive audit, Playwright must be installed and configured in the target project. This section covers detection, installation, auth setup, fixtures, and E2E best practices.
Step 0a: Detect if Playwright is Installed
# Check for Playwright config and dependencies
if [ ! -f "playwright.config.ts" ] || ! grep -q "@playwright/test" package.json 2>/dev/null; then
echo "PLAYWRIGHT_NOT_INSTALLED"
else
echo "PLAYWRIGHT_INSTALLED"
fi
Step 0b: Install Playwright (If Not Detected)
If PLAYWRIGHT_NOT_INSTALLED, run the full installation sequence:
# 1. Install Playwright and its test runner
npm init playwright@latest -- --quiet --browser=chromium
# 2. Install browser binaries (chromium is enough for CI; add firefox/webkit for cross-browser)
npx playwright install chromium
npx playwright install-deps chromium
# 3. Verify installation
npx playwright --version
For existing Next.js projects that already have a test runner (Vitest/Jest), Playwright coexists fine — install as a separate dependency:
npm install -D @playwright/test
npx playwright install chromium
Step 0c: Configure playwright.config.ts
Full configuration with responsive viewport matrix, auth, and best-practice settings:
import { defineConfig, devices } from '@playwright/test';
export default defineConfig({
// Test directory
testDir: './e2e',
// Fail fast on CI, allow retries locally
fullyParallel: true,
forbidOnly: !!process.env.CI,
retries: process.env.CI ? 2 : 0,
workers: process.env.CI ? 1 : undefined,
// Reporter
reporter: process.env.CI
? [['html', { open: 'never' }], ['github']]
: 'html',
// Shared settings for all projects
use: {
baseURL: process.env.E2E_BASE_URL || 'http://localhost:3000',
// Trace on failure (debugging gold)
trace: 'on-first-retry',
screenshot: 'only-on-failure',
video: 'retain-on-failure',
// Auth state (shared across all projects)
storageState: 'e2e/.auth/user.json',
},
// Projects: responsive viewport matrix
projects: [
// Auth setup runs first (no storageState yet)
{
name: 'setup',
testMatch: /.*\.setup\.ts/,
use: {
storageState: undefined, // Don't load state during setup
},
},
// Desktop
{
name: 'desktop-chromium',
dependencies: ['setup'],
use: {
...devices['Desktop Chrome'],
viewport: { width: 1280, height: 720 },
},
},
// Mobile (touch)
{
name: 'mobile-chrome',
dependencies: ['setup'],
use: {
...devices['Pixel 5'],
viewport: { width: 375, height: 667 },
hasTouch: true,
},
},
// Tablet (touch)
{
name: 'tablet',
dependencies: ['setup'],
use: {
...devices['iPad (gen 7)'],
viewport: { width: 768, height: 1024 },
hasTouch: true,
},
},
],
// Auto-start dev server
webServer: {
command: 'npm run dev',
url: 'http://localhost:3000',
reuseExistingServer: !process.env.CI,
timeout: 120_000,
},
});
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 4d ago First seen · 781 lines · 48 tokens per session scan A ccfe99878018
playwright-responsive-audit-skill is a skill published in the GitHub repository darellchua2/opencode-config-template (6 stars, last pushed yesterday), licensed Apache-2.0. It adds 48 tokens to every session and 6,802 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.
Other skills, from other repositories
next-cache-components-optimizer
Drive a Next.js route to instant navigation by setting up an agentic loop, under Cache Components / PPR, on initial load (hard navigation) and client-side navigation (soft navigation). Encode the goal as a failing @next/playwright instant() e2e and work it to green, one verified route at a time; the shipped test then…
playwright-component-testing
Set up component testing with Playwright using a story gallery — scaffold stories and a gallery dev page driven by the built-in mount fixture, no dedicated component-testing runtime. Use when asked to test React or Vue components in isolation with Playwright, or to migrate off @playwright/experimental-ct-react / -vue.
screen-reader-testing
Test web applications with screen readers including VoiceOver, NVDA, and JAWS. Use when validating screen reader compatibility, debugging accessibility issues, or ensuring assistive technology support.
vscode-visual-regression
Write Storybook stories and visual regression tests for the Kilo VS Code extension webview UI.
verify
Build, launch, drive, and screenshot the OpenNOW Electron settings UI on Windows.
break
Renders a component you choose in every state and scenario on a temporary page and stress tests it.