Automated summary

This skill describes how to start the P3DX dashboard (a Vite + React 19 SPA) and drive it with headless Playwright to verify changes at the browser surface.

Strengths

Provides the exact dev-server command on port 5199 with --strictPort plus the localStorage state keys
Works around Playwright not being a project dependency by importing it from the npx cache and using system Chrome
Enumerates concrete flows to exercise: sidebar nav, theme toggle, demo walkthrough, and the confirm()-based reset
Calls out known oxlint warnings so they are not mistaken for regressions

Limitations

The hardcoded npx cache hash and /usr/bin/google-chrome path are author-machine specific and may go stale
Gives prose instructions only, with no reusable test script or assertions
Assumes stable selectors and labels (.theme-toggle, sidebar text) that break if the UI changes

When to use it

Use it when you need to confirm a p3dx-dashboard change in a real browser rather than through unit tests.

When not to use it

Avoid it on a different codebase, on machines without Chrome, or in CI that requires Playwright pinned as a project dependency.

Security analysis

Safe

Quality score72/100

The skill only launches a local Vite dev server and drives it with headless Chrome/Playwright to verify UI changes. There are no destructive commands, no curl|sh piping, no credential or token handling, and no data being sent off-host; all state is explicitly described as localStorage-based. The only issues are cosmetic/environmental (hardcoded home-directory and browser paths), not security-relevant, so this rates safe despite the powerful tooling.

Findings

•Hardcodes an absolute path into another user's home directory (/home/shikhar/.npm/_npx/...) for the Playwright install, which is environment-specific and will not resolve elsewhere
•Uses a locally installed Chrome binary (/usr/bin/google-chrome) via headless automation — legitimate for its stated purpose but requires a real browser on the host
•Starts a dev server on a fixed port with --strictPort; no network exposure or destructive commands involved

How this analysis is made

Examples

Verify a theme toggle change

I just changed the theme toggle in the P3DX dashboard. Start the dev server on port 5199 and use headless Playwright to click .theme-toggle, confirm document.documentElement.dataset.theme flips, and check it persists in localStorage under p3dx-theme across a reload.

Smoke-test sidebar navigation

Drive the P3DX dashboard in a headless browser and click through Overview, World Explorer, Directory, Connections, Consents and Transactions to make sure every page renders without console errors.

Run the demo walkthrough

Use the verify skill to run the P3DX demo flow: switch the 'Acting as' selector, request and approve a connection, grant consent, execute an exchange, then trigger Reset demo and auto-accept the confirm dialog.

name: verify description: Build, launch, and drive the P3DX dashboard to verify changes at the browser surface.

Verifying p3dx-dashboard changes

Name: Verify P3DX Dashboard Changes
Author: Skills Guide Bot

Vite + React 19 SPA, no backend. All state lives in localStorage (p3dx-dashboard-state-v3 for data, p3dx-theme for theme).

Launch

npm run dev -- --port 5199 --strictPort   # background it; ready in ~1s

npm run lint is oxlint; pre-existing warnings in store.jsx / ui.jsx / AgentDetail.jsx are known noise.

Drive (headless browser)

No Playwright in project deps. A working install lives in the npx cache — import it by absolute path with system Chrome:

import { chromium } from '/home/shikhar/.npm/_npx/e41f203b7505f1fb/node_modules/playwright/index.mjs';
const browser = await chromium.launch({ executablePath: '/usr/bin/google-chrome', headless: true });

(If that cache hash is gone, re-run npx playwright --version and re-glob ~/.npm/_npx/*/node_modules/playwright.)

Flows worth driving

Sidebar nav: Overview / World Explorer / Directory / Connections / Consents / Transactions (text= selectors work).
Theme toggle: .theme-toggle in topbar flips document.documentElement.dataset.theme; persists to p3dx-theme; fresh visitors follow prefers-color-scheme (set via Playwright context colorScheme).
Demo walkthrough: switch "Acting as" (topbar select), request/approve connections, grant consent, execute exchange.
"Reset demo" uses confirm() — auto-accept dialogs in Playwright.

From the file to a first result

The download contains exactly the content displayed on this page. This copy may differ from the latest version in the source repository.

View the source and supporting files

This download contains SKILL.md only. Any scripts, references, templates and dependencies are not included. Get the required files from the source, preserving their directory structure, before continuing.

1. Download the file

Download SKILL.md

From the root of a test project, save the file as .skill-downloads/verify-p3dx-dashboard-changes-mrwak9ys/SKILL.md, or use the command below. This folder is for inspecting the skill before installation.

Command for macOS/Linux or WSL: requires a POSIX shell and curl. On Windows without WSL, use the download button and create the folder manually.

mkdir -p '.skill-downloads/verify-p3dx-dashboard-changes-mrwak9ys' && curl --fail --show-error --location 'https://skills-guides.com/api/skills/verify-p3dx-dashboard-changes-mrwak9ys/download' --output '.skill-downloads/verify-p3dx-dashboard-changes-mrwak9ys/SKILL.md.part' && mv '.skill-downloads/verify-p3dx-dashboard-changes-mrwak9ys/SKILL.md.part' '.skill-downloads/verify-p3dx-dashboard-changes-mrwak9ys/SKILL.md'

2. Check prerequisites

Read SKILL.md before using it. If it references scripts or external services, inspect them and prepare the required access in your test environment.

No recognized prerequisites section in this file. This does not mean it is self-contained: libraries, tools and access requirements may be mentioned elsewhere in the content or source repository.

The platforms on this page are catalog indications. The paths below follow tool documentation; they do not prove this skill has been run in those tools. No minimum tool version is confirmed for this listing.

3. Load the skill

After inspection, copy the complete folder into your project using one of the commands below, then open a new tool session. The command stops if a folder with the same name already exists: compare the files before replacing it.

Claude Code

test -f '.skill-downloads/verify-p3dx-dashboard-changes-mrwak9ys/SKILL.md' && test -s '.skill-downloads/verify-p3dx-dashboard-changes-mrwak9ys/SKILL.md' && mkdir -p '.claude/skills' && test ! -e '.claude/skills/verify' && cp -R '.skill-downloads/verify-p3dx-dashboard-changes-mrwak9ys' '.claude/skills/verify'

Cursor

test -f '.skill-downloads/verify-p3dx-dashboard-changes-mrwak9ys/SKILL.md' && test -s '.skill-downloads/verify-p3dx-dashboard-changes-mrwak9ys/SKILL.md' && mkdir -p '.cursor/skills' && test ! -e '.cursor/skills/verify' && cp -R '.skill-downloads/verify-p3dx-dashboard-changes-mrwak9ys' '.cursor/skills/verify'

Codex

test -f '.skill-downloads/verify-p3dx-dashboard-changes-mrwak9ys/SKILL.md' && test -s '.skill-downloads/verify-p3dx-dashboard-changes-mrwak9ys/SKILL.md' && mkdir -p '.agents/skills' && test ! -e '.agents/skills/verify' && cp -R '.skill-downloads/verify-p3dx-dashboard-changes-mrwak9ys' '.agents/skills/verify'

OpenSkills

OpenSkills must already be installed. The local install/read procedure is checked with OpenSkills 1.5.0, which requires Node.js ≥ 20.6.0. Catalog slugs are not resolved automatically.

Official OpenSkills installation

openskills install './.skill-downloads/verify-p3dx-dashboard-changes-mrwak9ys'

openskills read 'verify-p3dx-dashboard-changes-mrwak9ys'

Reading should display the installed file content and its base directory. It does not run the skill or install its dependencies.

For an agent that reads AGENTS.md, then sync the index. This command changes AGENTS.md: review the diff before using it.

openskills sync

Manual method or another tool: attach SKILL.md to a conversation, or open it in an agent that can read files. Include any required supporting resources. No universal folder is recognized by every tool.

4. Try a first task

Use a short, synthetic input: an API endpoint, a small document or an interface brief. In a new conversation, attach the file or give the agent its path, then adapt this request:

Read .skill-downloads/verify-p3dx-dashboard-changes-mrwak9ys/SKILL.md and apply its instructions to this example: [describe a test input]. Identify any missing files, dependencies or access. Produce the result requested by the skill without inventing data or running unreviewed scripts.

Expected result: output matching the skill instructions, or a precise list of missing prerequisites. A read confirmation alone does not validate a first use. If an external resource is unavailable, that path remains untested.